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
|| Footer Builder Layout
| Footer Builder Rows
|| Managing the Components
| Components Library
🗄Open the Footer Builder
- Navigate to Neve > Customize.
- 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
|| Rows Opening
| Rows Customizations
Each footer row has by default three columns, with equal space where the components are added.
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).
Each row has some options / settings available, divided into two tabs:
- ( 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.
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.
- 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).
📝 Note: You can boost the footer's appearance by using the Gradient option that can be accessed from the color tab.
🧰Managing the Components
| Add components
|| Remove components
| Customize 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
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.
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.
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.