Neve Footer Builder

Neve comes with a versatile builder for the footer area of your site. With just a few clicks you can create the desired layout.

Jump to:

🗄Open the Footer Builder

1

Navigate to  Neve > Customize.

2

Click on the Footer panel to open the footer builder.

🔎Footer Builder layout

The Footer Builder consists of two areas:

•  Footer Live View Area - where you can see the live preview of how the footer will look on the site.
•  Footer Builder Area - where you can add, reorder and remove components.

📑 Footer Builder Rows

The footer builder area has  three rows ( Footer Top, Footer Main, and Footer Bottom ) in which you can easily select and arrange the available components you can find while hovering over each division of the rows.

 Rows Structure

Each  footer row has by default three columns, with equal space where the components are added.

 Rows Opening 

Each of the three rows ( Footer Top, Footer Main, and Footer Bottom ) of the footer builder can be styled individually, which can be done in two ways: 

• by clicking on the ⚙️icon, which appears at the beginning of the row once you hover over it.

• by clicking on any panel of the menu, on the left side (Footer Top | Footer Main | Footer Bottom).

 Rows Customizations

Each row has some options / settings available, divided into two tabs:

📐Layout Tab

• ( PRO ) Stick to bottom - The row will be visible all the time even if the page isn't scrolled at the bottom.

• Layout - can be Full Width - Contained | Full Width | Contained - below are screenshots with each of them.
  • Full Width - Contained - the row content is wrapped by the page container and the background color stretch the full width.

  

  • Full Width - content and background color stretch the full width.

  

  • Contained - both the content and background color are wrapped by the page container.

  

• The number of columns - can vary from 1 to 5 for each row, and based on it the row layout can be different.
• Columns Layout - depending on the number of columns, the layout possibilities may vary.

• Vertical Alignment - decide how the elements should be arranged ( top / center / bottom ).

📝 Note: The layout chosen will change the row columns.

🖌Style Tab

In the style tab are many options available:

• Row height - adjust the height of the row on desktop/tablet/mobile, using PX, EM, or REM units.
• Border Width and Color - adjust the border width that separates the page container from the footer, on desktop/tablet/mobile, using PX, EM, or REM units. Color options are also available.
• Text Color - change the color of the text displayed inside the footer.

📝 Note: You can boost the footer's appearance by using the Gradient option that can be accessed from the color tab.

• Row Background - can be a static color, including gradient options, or image. Adding an image as the background - can be a static image or the featured image of the current page. When using a background image, it is also possible to set an overlay(color and transparency).

🧰Managing the Components

 Add components

While hovering over each division of the rows, click on the ➕ sign and a list of components will appear. 

Each component has specific options you can customize once that component is clicked on.

Components can be added to the rows in two ways:

• drag&drop them from the left sidebar

• directly from the footer rows

 Remove components

In order to remove a component, there are two steps that need to be done:

Step 1: Hover over the component you want to remove.

Step 2: Click on the ❌ icon on the right corner of the component.

 Customize components

To open the customizing options for a newly added component, you have to follow two steps:

Step 1: Select the component that you want to customize.

Step 2: Click on the ⚙️ icon when the component is already enabled in one of the rows.

📚Components Library

Neve has an impressive components library that comes with specific settings. This section contains the list with all the available components and their dedicated doc:

📝 Note: The settings of each component are common, no matter the location: Header / Footer.