Footer Modes

Different modes for every need


SFS offers its users a variety of ways to showcase their footer content, each appropriate for different needs.

Once you have selected the mode, you will open the appropriate window with various options to choose from to customize your footer.

By default, it is set to Normal Mode.

The Normal Footer Mode, as the word itself says, is a normal footer that replaces the default footer of the theme already activated automatically.

You can just create your own footer using the designated Page Builder and it’s ready.

The only possible options with the Normal Mode are Sticky and Shadow above the footer content.

Sticky Mode is recommended only for light and short content.

The Reveal Footer fits perfectly to all styles, hiding with a touch of elegance its footer that seems to appear on behind the page.

Dozens of customizable options

Slide Up Footer is a feature-rich mode, but we see it better up close.

Once activated, a control panel which consists of two macro categories, “Settings” and “Handle Style” will appear.

In Settings you can decide if you want to open the Footer Handle with Click or Mouse Hover, set the height of the footer content, whether normal or full height version, the height, and color of a separator positioned under the handle.

You can also set the kind of animation you choose for the footer handle, the footer content opening speed and finally decide if you want to open the footer content automatically when the user reaches the bottom of the page.

To make the experience of the navigator even richer we have created a section dedicated to the style of the Handle.

You can decide if you want a classic handle or a full width.

In the first case, you can decide what shape to assign to the handle, a rectangle, a rounded one, a circle or a half moon shape, depending on your needs.

Then you can set its position within the page, whether in the center, left or right; Aligning the icon relative to the text, you could give Transparency to the handle so it would not be too invasive on the page or also a Shadow on the top to detach it slightly from the page content.

To offer full customization with the Open and Close Tab, you can create different handles for opening and close the content of the footer. Decide on the text, the icon between the three integrated libraries (optional, you can also select only the icon or just the text to add), their color, and finally the color of the handle background.

The Font Tab simply offers the user the ability to set a style to the handwriting font, from style to size.

Stretch option

To make the stretch option visible you need to set the width of the handle as Full Width and the position of the handle as Center then the Stretch option appear like the image below:

An amazing way to show your footer

One of the most customizable modes of the Smart Footer System is that it’s designed to provide a unique navigation experience, consisting of two main categories, the Desktop, and Mobile versions.

You can create two completely different and unique styles for the various devices by copying the desktop style to the Mobile version with a special button for a quick change of settings.

In the first tab, we find the basic settings for the banner content, you can define the horizontal and vertical padding (1x is 15px, 2x to 30px, etc.), the alignment of the textual content inside the banner and the opening speed of the footer content. Or finally, SFS Banner Mode offers the option of adding additional options to prevent the banner from being too invasive for the user by activating the Auto Show and/or Auto Hide options, you can enter a digit in seconds with which the banner appears or disappears.

You can also combine these options with the third option that allows you to open the banner only when the user reaches the bottom of the page.

From the Background Tab, you can define all the parameters for the background of the banner box. You can set a background image (deciding on positioning and repetition) or a color, set a different color to the mouse hover, or simply insert an overlay color to set on the image.

In the Tab Text, you can optionally place a Title and a Short Subtitle to show in the banner, deciding on the color of the text and a different color for mouse hover effect.

The Tab Button allows the full customization of the button that will be displayed in the banner along with the text.

Title, Subtitle and Button Font Styles are available in the Font Tab

Css3 Animation Footer is a mode that allows you to show the footer content with simple animations in css3, you can select combinations with up to 81 different styles. * Note that for clear and fluid visibility, SFS automatically turns off animation on mobile devices.

The Accordion Mode offers its users the opportunity to show footer content only when the user clicks on a custom bar with a central icon and two short texts on the side at the bottom of the page which show the footer as a harmonica. By following the images below it’s easy to understand how to customize every aspect of the handle, also changing to a different icon when it opens or closes. It’s an elegant and non-invasive way of showing content, which could be text, images, or anything else created with a Page Builder or Html.

The new Spread Mode offers its users the ability to show their content in an explosive but elegant way, configurable in just a few clicks. Through the Tabs in the panel you can define the shape and the position of the handle, then insert different icons and colors for opening and closing. You can use the color picker opacity function to create a transparent handle. To make it quicker and easier to create a closing and opening handle, you can now copy directly through the button located at the bottom of the panel.

The new Menu Mode offer its users the ability to show a custom WP Menu with a Slide Up effect configurable in just a few clicks. Through the Tabs in the panel you can define if you want a rounded handle, a shadow, the position of the handle, a divider between the menu items, and change the horizontal order of the Handle Icon, Menu and Socials with a simple drag&drop functionality. You can customize the menu items with a background color, a text color, a gap between the menu items and choose an hover effect and color for the menu items. You can also define if you want the mobile version for your desktop with a simple handle with 3 icons.

The new Garage Door Footer make a beautiful 3D effect like a door of a garage.

You can define if you want to animate the entire footer or just the footer content.