Themeisle Docs

Appearance

neve

Save hours, not minutes – launch faster with 110+ patterns, powerful pro tools, and priority support when it counts!

See Pro Plans →

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 BuilderFooter Builder Layout
Footer Builder RowsManaging the Components
Components Library

1 Navigate to Neve > Customize.

2 Click on the Footer panel to open the footer builder.

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.

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

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