1. Installation & Module Placement
Once you install the **Advanced Dynamic Footer Pro** module from the marketplace, follow these steps to add it to your website page layouts:
- Open any website page, landing page, or system template inside the HubSpot Drag-and-Drop Page Editor.
- In the left sidebar, search for the module name: Advanced Dynamic Footer Pro.
- Drag the module and drop it at the very bottom section of your template layout (as your global footer replacement).
2. Background & Glassmorphism Styles
You can customize the footer's background styling by selecting the type from the sidebar editor:
- Solid Color: Select a solid color using the HubSpot color picker.
- Color Gradient: Configure a modern linear gradient by defining the start and end colors.
- Background Image Backdrop: Upload an image and adjust the overlay color tint and opacity coordinates.
- Glassmorphism Toggle: Turn on "Enable Glassmorphism Effect" to apply a premium translucent frosted glass blur (25px top blur border).
3. Formatting Footer Blocks (Repeater)
The main footer uses a drag-and-drop Block Repeater system. You can add up to 5 custom layout columns and choose from the following block types:
- Logo Block: Upload a branding logo (with customizable width) or input raw SVG code.
- Company Information: Display legal address details, telephone numbers, support emails, VAT information, and Google Maps redirections.
- Navigation Columns: Build standard link columns. You can define custom icons (FontAwesome or custom graphic images) next to headings or individual links.
- Office Location Cards: Add individual cards mapping branch offices with customized card padding, border style, and background overrides.
- Awards & Certifications: Render trust badges in a responsive 3-column grid or activate the auto-scrolling logo carousel wrapper.
4. Advanced Bottom Copyright Settings
The copyright bar is fully self-contained at the bottom layout container:
- Customize prefix symbols, dynamic JavaScript current year calculation variables, and legal company suffixes.
- Add legal policy links (Privacy, Terms, Cookies) that auto-wrap cleanly on tablet and mobile viewports.
- Control alignment (Left, Center, Right) depending on your design preferences.
5. Back to Top Button Configurations
Enable the interactive floating scroll button in the settings drawer:
- Choose position alignments: **Bottom Right**, **Bottom Left**, or **Bottom Center**.
- Configure active stroke color fill settings relative to your brand palette.
- Decide whether to show the circular scroll percentage progress ring overlay.