Footer Customization

CubeWP Theme Builder – Footer Configuration Reference

Platform	WordPress + Elementor + CubeWP
Feature	Footer Customization via Theme Builder
Tool	CubeWP Theme Builder and Elementor
Scope	Footer layout, menu, social icons, and widget management

1. Overview

This guide covers how to customize the footer of ListingPro using the CubeWP Theme Builder combined with Elementor. The footer is a globally applied template that can be scoped to the entire site or restricted to specific pages. This tutorial explains how to access and edit the footer template, configure its menu navigation, social icons, layout options, and widget areas.

2. Accessing the Footer Template

2.1 Navigating to the Theme Builder

Follow these steps to access the active footer template in CubeWP:

1. Log in to the WordPress Dashboard.
2. In the left-hand menu, navigate to CubeWP.
3. Select Theme Builder from the submenu.
4. The Theme Builder screen displays all active templates currently configured on the site.
5. Locate the footer template and click its edit with elementor option to open it for modification.

2.2 Understanding Template Location Settings

Each Theme Builder template — including the footer — has a Location setting that controls where the template is applied across the site. Some of the available options are:

• Entire Site – The footer appears on every page, including the homepage and all inner pages.
• Homepage Only – The footer is restricted to the main homepage.
• Inner Pages Only – The footer is applied only to pages other than the homepage.
• Specific Page – You can target a single specific page by selecting it from the page list.

 

ℹ️  Note: By default, the footer template demonstrated in this guide is set to apply to the entire site — meaning it will appear on all pages automatically.

3. Footer Layout Structure

The footer consists of two distinct sections visible in the Elementor editor:

3.1 Top Container

The upper section of the footer contains the primary navigation and social links. Inside this container, the following components are present:

• Navigation Menu (Icon List) – Displays links such as Home, Blog, and Contact using Elementor’s Icon List widget.

3.2 Bottom Container

The lower section of the footer holds content such as

• Social Icons – Platform social media icons (Facebook, Twitter, Instagram, YouTube) via Elementor’s Social Icons widget.
•  Copyright text, additional widgets, or secondary navigation. Its layout and content are fully customizable via Elementor.

4. Configuring the Navigation Menu (Icon List)

4.1 Icon List Setup

The footer navigation is built using Elementor’s Icon List widget. Each menu item is configured as a separate list item within this widget:

Adding a Menu Item

1. Select the Icon List widget in the Elementor editor.
2. Each existing list item (e.g., Home, Blog, Contact) has a Custom Link set as its URL.
3. For the Home link — use the dynamic tag named custom link and point it to the homepage URL.
4. For Blog — set a custom link pointing to the blog page URL using the External URL option.
5. For Contact — add its URL as a custom link.
6. To add a new menu item, click Add Item within the widget and configure its label (e.g., ‘Test’) and link.

Configuring Icons for Menu Items

Each item in the icon list supports an individual icon. If icons are not displaying for some items:

• Select the list item in the Elementor panel.
• Click the icon selector for that item.
• Choose an appropriate icon from the icon library.
• Repeat for all items that require icons.

 

4.2 Icon List Display Options

The Icon List widget provides multiple layout formats. You can control how menu items are arranged:

Layout Option	Description
List (Default)	Items are stacked vertically, one per line.
Inline	Items are arranged horizontally in a row layout. Recommended for most footer menus.

 

ℹ️  Note: The recommended display style for footer menus is Inline (row layout), as this is the most common footer navigation pattern and suits horizontal footer designs.

4.3 Styling the Icon List

The following style properties can be configured for the icon list and its items:

• Background Color – Apply a custom background to the icon list container. For example, a green background can be set to visually differentiate the navigation area.
• Text Color – Set the primary text/icon color. Recommended: White (#FFFFFF) when using a dark background.
• Spacing – Adjust the gap between individual list items using the spacing control.
• Item Alignment – Align items left, center, or right as required.

 

5. Configuring Social Icons

5.1 Default Social Icons

The Social Icons widget from Elementor is used to display social media links in the footer. By default, the following platforms are configured:

• Facebook
• Twitter
• Instagram
• YouTube

5.2 Adding a Custom Social Icon

1. In the Social Icons widget settings, click Add New.
2. A new icon entry appears with a default icon.
3. Click the icon selector to choose a custom icon from the library.
4. For the link, you have two options:

• Custom Link (Dynamic) – Select a page from your WordPress site using the homepage dynamic tag selector.
• External URL – Paste any external website URL to redirect users to another platform.

1. Set the link target (same tab or new tab) based on your preference.

ℹ️  Note: If you want to link to a page on the same website, use the dynamic custom link option. If linking to an external social media profile, paste the full URL (e.g., https://facebook.com/yourpage) in the External URL field.

5.3 Styling Social Icons

Social icons can be fully styled to match the footer’s color scheme:

• Icon Color – Set individual icon colors. Use white (#FFFFFF) on dark backgrounds.
• Background Color – Each icon can have its own background, or all can share a unified color.
• Size – Adjust the icon size using the size control.
• Spacing – Manage the gap between icons.

 

6. Adding and Managing Additional Widgets

6.1 Widget Compatibility

The footer supports all standard Elementor widgets. You can add any widget available in the Elementor library to the footer area, including:

• Text Editor – For copyright notices, taglines, or descriptive text.
• Image – For logo placement or partner logos.
• Heading – For footer section titles.
• Icon List – For additional navigation or contact details.
• Social Icons – As documented above.
• Custom HTML – For embedding third-party code or tracking scripts.

 

6.2 Adding a New Widget

1. In the Elementor editor, locate the area in the footer where you want to add a widget.
2. Click the + (Add Widget) button or drag a widget from the panel on the left.
3. Configure the widget’s content and style settings as required.
4. You have full flexibility to add multiple widgets at any time to enhance the footer.

 

7. Publishing and Previewing the Footer

1. After completing all configuration and styling, click the Publish button in the Elementor editor to save and deploy the footer template.
2. Navigate to any page on the frontend of the website.
3. Scroll to the bottom of the page to verify the footer displays correctly.
4. Confirm that all navigation links work as expected.
5. Verify that social icons link to the correct URLs.
6. Check that background colors, text colors, and icon colors are rendering as configured.
7. Test on multiple pages to confirm the footer appears on all pages (since the template location is set to Entire Site).

 

ℹ️  Note: If you make any further changes after publishing, you must click Publish again in Elementor for those changes to appear on the live site. Changes are reflected immediately after publishing without requiring a cache clear in most configurations.

 

8. Troubleshooting

8.1 Footer Not Showing on Specific Pages

If the footer does not appear on certain pages, verify the template location setting in the CubeWP Theme Builder. Ensure it is set to Entire Site if you want the footer to appear universally.

8.2 Icons Not Displaying

If icons are missing from specific Icon List items, open each item in the Elementor panel and manually assign an icon using the icon selector.

8.3 Social Icon Links Not Working

If a social icon does not redirect correctly, verify the URL configured for that icon. For internal pages, use the dynamic custom link selector. For external sites, ensure the full URL including the protocol (https://) is entered in the External URL field.

Here is the link of the video tutorial

Header & Navigation Customization

CubeWP Custom Theme Builder + Elementor + CubeWP Mega Menu

 

Field	Details
Platform	WordPress with CubeWP Theme Builder
Page Builder	Elementor
Scope	Header layout, navigation menus, login/sign-up, mobile popup

 

1. Overview

This guide covers the complete workflow for customizing your site’s header using the CubeWP Theme Builder and Elementor. Topics include header layout configuration for desktop and mobile devices, Mega Menu setup and editing, navigation menu management from the WordPress backend, and managing login/sign-up popups with visibility controls.

 

2. Accessing the Header in the Theme Builder

2.1 Navigate to the Custom Theme Builder

Follow these steps to locate the header settings:

• From the WordPress Admin Dashboard,hover over CubeWP.
• Select Theme Builder from the CubeWP menu.
• Click on the Header section in the theme builder interface.

 

2.2 Selecting the Correct Header

The Theme Builder typically contains multiple header templates assigned to different display conditions. Common examples include:

• Site-wide header — applies to all pages across the entire site.
• Home page header — applies exclusively to the home page.

 

NOTE	You can assign a header to a specific page or to the entire site based on your preference. Select the header that matches your intended scope before editing.

 

To begin editing, click Edit with Elementor on the desired header template.

 

3. Understanding the Header Layout Structure

3.1 Desktop and Mobile Containers

Inside the Elementor header editor, you will find two primary containers:

• Desktop container — configured to display only on desktop screens.
• Mobile container — configured to display only on mobile devices.

 

Responsiveness is controlled through each container’s visibility settings. When switching to the tablet or mobile view in Elementor, the system automatically hides the desktop container and vice versa. This behavior is managed through the Responsive Settings panel for each container.

 

 

NOTE	Always verify the visibility/responsiveness settings of a container before making changes to avoid unintended display issues across devices.

 

4. Updating the Logo

To replace the existing logo with a new one:

• In the Elementor editor, locate the logo element within the desktop container.
• Delete the existing logo widget or image element.
• Add a new image or logo widget and upload your new logo file.
• Confirm the logo displays correctly in the canvas before saving.

5. Configuring Navigation Menus

5.1 The CubeWP Mega Menu Widget

The header uses the CubeWP Mega Menu widget for navigation. This widget supports three menu-type options:

• Mega Menu — A full width menu  
• Nav Menu — A Dropdown.
• Custom Link — A link to another page or source that should open on clicking.

5.2 Assigning a Menu in Elementor

Within the Mega Menu widget settings in Elementor:

• Edit the name of the menu 
• Select the menu visibility (e.g., Mega Menu).
• Choose the desired mega menu from the available list (e.g., a pre-built Mega Menu such as the ClassTwo Categories Mega Mega or ClassTwo  Locations Mega Mega).
• Click Publish or Update to save changes to the header.

 

5.3 Managing Nav Menu from the WordPress Backend

All navigation menus are managed under Appearance > Menus in the WordPress Admin Dashboard. From this screen you can:

• View all existing menus and their assigned items.
• Add new menu items, including pages, custom links, and dynamic links.
• Remove items by selecting them and clicking Remove.
• Create new menus from scratch using the Create New Menu option.

 

NOTE	Any changes made in Appearance > Menus are reflected in the front-end navigation once saved. Verify on the live site or in preview mode after each update.

 

Adding Custom Links

To add a custom navigation link:

• In Appearance > Menus, expand the Custom Links panel.
• Enter the target URL and a label (Link Text).
• Click Add to Menu and drag the item to the desired position.
• Save the menu.

 

NOTE	Dynamic links can also be configured here. If navigation icons are not rendering as expected, consider removing the icon element rather than leaving a broken placeholder in the live interface.

 

6. Creating and Editing Mega Menus

6.1 Opening a Mega Menu for Editing

To edit an existing Mega Menu:

• Navigate to CubeWP > Theme Builder in the WordPress admin.
• Go to the Mega Menu section and locate the menu you wish to modify.
• Click Edit with Elementor to open the Mega Menu canvas.

 

6.2 Building the Desktop Mega Menu Layout

A common Mega Menu layout consists of two containers side by side:

• Left container — displays a featured image.
• Right container — displays a list of taxonomy items (e.g., listing categories or locations).

 

Steps to configure the desktop layout:

• Add a new container to the Mega Menu canvas.
• In the left container, insert an Image widget and upload or select a high-quality image.
• In the right container, add the Taxonomy widget.
• In the Taxonomy widget settings, choose the desired taxonomy (e.g., Listing Categories) to display dynamically.
• Apply basic styling to ensure a clean, professional appearance.
• Set the container height to 100VH to span the full viewport height.
• Set an appropriate background color consistent with your site theme.

6.3 Hiding the Desktop Mega Menu on Mobile

Once the desktop layout is complete:

• Select the desktop Mega Menu container.
• Open its Responsive Settings.
• Enable the option to hide this element on mobile and tablet screens.

 

6.4 Building the Mobile Mega Menu Layout

To create a separate Mega Menu layout for mobile devices:

• Add a new container or section designated for mobile.
• Populate it with the appropriate navigation links or taxonomy list.
• For static links, use Custom Links with manually entered URLs.
• For dynamic content, use the Taxonomy Repeat widget (e.g., Q Repeat Taxonomy widget) to fetch location or category data automatically.
• Set the visibility of this container to display only on mobile and tablet screens.

 

NOTE	The Q Repeat Taxonomy widget (also referred to as the Taxonomy widget) fetches taxonomy terms dynamically and is the recommended approach for keeping the Mega Menu content in sync with your site’s category or location data.

7. Managing Login and Sign-Up

7.1 Sign-In / Sign-Up Button in the Header

The header includes a sign-in or sign-up button that opens a popup when clicked. This popup is managed through the Value Pack and Theme Builder interface within  CubeWP .

 

Configuring the Button Trigger

• In the Elementor header editor, select the sign-in button widget.
• In the widget’s action/trigger settings, assign the popup you wish to open (e.g., the Login & Sign-Up popup).
• You can also configure the button to redirect to a pricing plan page before the submit page, or go directly to the submit page — depending on your business requirements.

 

7.2 The Login / Sign-Up Popup

The login popup is built as a dedicated popup in the CubeWP Popups section. Then open with elementor the Popup you want to edit i.e Login/Sign Up.  Inside the popup, the CubeWP Submit Form widget is used to render both the login and sign-up forms.

Sign-Up Form Configuration

In the Submit Form widget settings, Under the User form setting:

• Select the user role for new registrants (e.g., Subscriber, Administrator).
• Add required form fields such as Email, Password, and Confirm Password.
• Optionally add fields like Display Name, Website, or any other custom fields.
• You can also edit the Registration Button Text from here.
• Save and publish the popup.

 

Login Form Configuration

In the Submit Form widget settings, under the Login Form Settings you can edit login form like:

• Default fields include Username/Email and Password.
• Configure options such as showing or hiding the ‘Not a Member’ link.
• Set a post-login redirect URL if needed.
• Customize the sign-in button label (e.g., change ‘Sign In’ to ‘Login’).

7.3 User Availability / Visibility Settings

The sign-in and sign-out elements each have a User Availability setting that controls who sees them:

• Show to Everyone — visible to all visitors regardless of login status.
• Logged-In Users Only — only visible to authenticated users.
• Non-Logged-In Users Only — only visible to guests who have not signed in.

 

Recommended configuration:

• Sign-In button: set to Non-Logged-In Users Only.
• Sign-Out (User Account widget): set to Logged-In Users Only.

 

NOTE	You can verify button visibility by testing in an incognito or private browsing window, which simulates the experience of a non-logged-in visitor.

 

7.4 The User Account Widget

Once a user is logged in, the sign-in button is hidden and replaced by the User Account widget, which displays:

• User avatar.
• Display name or username.
• A dropdown menu containing configurable links.

 

Managing Dropdown Links

Inside the User Account widget settings, you can add, edit, or remove dropdown items:

• Dashboard Link — a link to the user dashboard.
• Profile Link — a link to update user profilet.
• Logout Link — a link to log out the current user.

 

Example: To replace the default Profile link with a Shop page link, remove the Profile item and add a new Page Link pointing to your Shop page.

8. Mobile Header and Mobile Menu Popup

8.1 Mobile Container Structure

The mobile header container is configured to display only on mobile and tablet devices. It typically contains:

• A logo or branding element.
• A hamburger (burger) menu button that triggers the mobile navigation popup.
• Sign-in and sign-out buttons, each with their own User Availability settings.

 

8.2 The Mobile Menu Popup

The mobile sidebar navigation is delivered through a dedicated popup named Mobile Menu Popup, configured in CubeWP > Popups.

 

Configuring the Hamburger Button and Close Button

In the button widget settings:

• Set the On Click action to Open Popup.
• Select the Mobile Menu Popup from the popup list.
• For the close button inside the popup, set the action to Close Popup and select the same popup.

 

8.3 Customizing the Mobile Menu Popup

Inside the Mobile Menu Popup (edited via Elementor):

• Add or modify navigation links, menus, or Mega Menu sections.
• Include sign-in and sign-out buttons with appropriate User Availability settings.

 

NOTE	The Mobile Menu Popup can contain a full Mega Menu for mobile, including dynamic taxonomy lists (locations, categories, etc.) built with the Taxonomy widget or custom links.

 

9. Styling and Customization

All elements within the header and mega menus can be styled through the Elementor Style tab. Key properties you can customize include:

• Typography — font family, size, weight, line height, and letter spacing.
• Color — text color, background color, and hover states.
• Padding and Margin — internal and external spacing around elements.
• Border — border style, width, color, and border radius.
• Flex Direction — set container layout to row, column, row-reverse, or column-reverse.

 

NOTE	Always check your changes across desktop, tablet, and mobile viewports in the Elementor responsive preview before publishing.

Here is the link of the video tutorial