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.
🗄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.

Desktop and Mobile views
At the top of the Footer Builder Area, there is a tab selector that lets you switch between the Desktop and Mobile views. The components you place in each view control what appears on that device type.

📝 Note: If a footer component (such as the Footer Menu) appears on desktop but is missing on mobile, it is likely because it has not been added to the Mobile view. Switch to the Mobile tab and add or arrange the components you want to display on smaller screens.
📑 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<be>``</be> | Rows Opening |
| Rows Customizations |
A
Rows Structure
Each footer row has by default three columns, with equal space where the components are added.

B
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).

C
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:
- R****ow 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 | Remove components |
| Customize components |
A
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

B
Remove components
In order to remove a component, there are two steps that need to be done:
Step 1: H****over over the component you want to remove.
Step 2: C****lick on the ❌ icon on the right corner of the component.

C
Customize components
To open the customizing options for a newly added component, you have to follow two steps:
Step 1: S****elect the component that you want to customize.
Step 2: C****lick on the ⚙️ icon when the component is already enabled in one of the rows.

📝 Note: Component settings apply to the currently selected view. If you want a component to appear on mobile, make sure to switch to the Mobile tab in the Footer Builder and add the component there as well. See Desktop and Mobile views for details.
📚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:
- Footer Menu
- Widgets area (Footer One, Footer Two, Footer Three, Footer Four)
- Copyright The PRO version of Neve brings in some extra components:- Payment Icons
- Social Icons
- Custom Layout
📝 Note: The settings of each component are common, no matter the location: Header / Footer.

