Building the footer with flexible columns and bottom bar

Overview

Ordering columns, reuse layouts, add any icon, custom links and buttons, conditional menus, and ordering as desired. Adjust spacing between items, colors and typography for absolutely everything on both the footer and the bottom bar.

Footer builder

From the dashboard go to Theme Settings » Footer.

Bottom Bar

Builder

Click on the “Add New” button to add new elements to Bottom Bar.

» Link
» Link with icon

Section » Layout

You can adjust the layout of the Bottom Bar. The set layout will be applied to the section container.

» Max Width

Section » Color

The selected background color will be applied to Bottom Bar.

» Background Color

Link » Layout

You can adjust the layout of the Bottom Bar items. The set layout will be applied to links.

» Space Between

Link » Color

You can set the color and hover color for the all links of the Bottom Bar.

» Text Color
» Text Hover Color

Link » Typography

You can set the color and hover color for the all links of the Bottom Bar.

» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height

Main Footer

Builder

Click on the “Add New” button to add new column to Footer.

» Contact Info
» Link List

Contact Info

Click on the “Add New” button to add new elements to Footer column.

» Brand (Logo and Responsive Logo)
» Text
» Button (Multiple Styles)
» Link
» Link with icon

Link List

Enter a Heading and select a menu.

» Heading (Column Title)
» Menu

Section » Layout

You can adjust the layout of the Footer. The set layout will be applied to the section container.

» Max Width
» Vertical Padding
» Collumns

Section » Design

The selected background image will be applied to Footer.

» Background Image

Section » Color

The selected background color will be applied to Footer.

» Background Color

Block » Layout

You can adjust the layout of the Footer column.

» Space Between

Block » Color

The selected background color will be applied to Footer column.

» Background Color

Logo Image » Layout

Set the logo layout for desktop and mobile.

» Width Type (Auto or Custom)
» Width
» Height

Heading » Color

You can set the color for the all headings of the Footer.

» Text Color

Heading » Typography

You can set the color for the all headings of the Footer.

» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height

Paragraph » Color

You can set the color for the all paragraphs of the Footer.

» Text Color

Paragraph » Typography

You can set the color for the all paragraphs of the Footer.

» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height

Link » Layout

You can adjust the layout of the Footer items. The set layout will be applied to links.

» Space Between

Link » Color

You can set the color and hover color for the all links of the Footer.

» Text Color
» Text Hover Color

Link » Typography

You can set the color and hover color for the all links of the Footer.

» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height

Button » Color

You can set the color and hover color for the all buttons of the Footer.

» Bckground Color
» Bckground Hover Color
» Text Color

Button » Typography

You can set the background color, text color and text hover color for all buttons on the Footer.

» Font Type (Google Font or Custom Font)
» Font Family
» Font Style
» Font Size
» Font Weight
» Line Height