Installation via WordPress

1) Buy Smart Footer System from Codecanyon
2) Go inside your wordpress back-end panel to “Plugins” button on your right -> Add New
3) Click the ‘Choose File’ button
4) Choose our plugin file from your desktop: ‘smart-footer-system’
5) Choose this file and press: install now

That’s it!

Installation via FTP Filezilla

1) Download Filezilla or another similar application
2) Insert you FTP credential to connect with your website
3) Unzip the file ‘smart-footer-system.zip’
4) Drag the folder inside your -> wp-content folder -> plugin folder
5) Enter into your wordpress dashboard and go to Plugin to activate Smart Footer System

That’s it!

How to control Smart Footer System

When you activate SFS Plugin you will see a new tab on your admin panel, Smart Footer Settings.
From here you can enter the General Settings or create a new footer block.

Smart Footer System Basic Concept

SFS is created to easily replace the Theme’s footer with a custom footer or you can combine the Theme’s Footer and your SFS custom footer together without disabling the Theme’s footer from the SFS settings. First of all, you need to create a custom footer using the “add new footer” button, than you can use Visual Composer or another Page Builder to build the content of the footer and use SFS modes to decide how to show it. When your footer is ready, you can:
1) Enter the SFS General Settings and set your new footer block as default for a custom post type, for example Homepage, Portfolio or Articles.
2) Enter a single page of your website, enable the override option, and select the footer you created earlier.
TAKE NOTICE: Some Page Builder need to activate our Post Type “SFS” or “Smart-footer-system” by their settings in order to work properly.
Now let’s go step by step to better understand how it works.

How to Hide Theme’s Footer

When you click on SFS General Settings you will have a panel control like this one below. Under the “General” tab you could hide automatically your footer theme activating the switch “Hide Theme Footer” (in order to see your footer theme disappear you need to create a new custom footer and set it as default for that Post Type). As we said before, if you intend to create a combination of the Theme’s footer and one created with SFS you don’t have to enable the “Hide Theme Footer” option. SFS allows you to also insert the css classes to hide the Theme’s footer manually, this is because not all Themes use the same codes. Some Page Builders such as Elementor need a Publicly Queryable in order to work, so you could activate this option.

* If you activate Publicly Queryable this means that all the Search Engines such as Google will index you footer content so be careful before proceeding.

In case you want to show and run the footer in a certain position of your theme, you have the option to set the hook to which you are hanging.
Many themes have predefined hooks and are easily identifiable through their documentation or by analyzing the theme .php files.
You could create a custom Hook.
For a more in-depth study, we have prepared an article on our support here:
https://metaplugin.ticksy.com/article/11017

A custom Footer for each Post Type

SFS automatically recognizes all the Theme’s Post Type and divides them into 3 macro categories, Home Page and Blogs, Single Pages and Archive Pages. You can access one of the sections and once the footer is created insert it into the corresponding entry. Also remember that you can change the footer of the single page through the options panel which appears under each single Post / Page

WooCommerce Dedicate Settings

SFS knows how important Woocommerce is for its users and provides a special section once the WooCommerce plugin has been activated. From here, you can set a custom Footer for each WooCommerce page exactly like the other Post Type.

Import/Export Settings and Import Demos

SFS allows its users to export all footer content, and mode settings through a special “Export All Footers” button. Obviously, you can also import the same file through the “Import” button. Also after many requests, we’ve added a new button that allows you to easily import all demos onto the site.
* Note that content background images or those embedded as a logo or image text will not be imported so if you notice differences you just need to replace the empty images with your own.
** Note that all demos included are just for Visual Composer at the moment.

Let’s Start

Building a footer with SFS is extremely easy and fun. You just have to create a new footer through the “Create New Footer” button, and use it to build the footer content of any Page Builder on the market. We’ve tested more than 10 of them, including Visual Composer, Swift Builder, Enfold Builder, Fusion Builder and many others.
* Note that later, from the footer content control panel below, you can set vertical and horizontal padding with pixels and percent to get the desired width. Obviously being SFS outside the body of the theme will not have by default its width.

Footer Content Panel

SFS offers for each Footer Block the ability to customize the content of the footer outside of the page builder used through a convenient control panel, equipped with various features divided into distinct tabs to allow for quick and efficient processing. You will find this panel in all the Footer blocks you are going to create, under the html editor.

Background Tab

The Background Tab gives users the ability to customize the footer content before even using a Page Builder to create content. Thanks to the options available, you can easily insert a background image to the content, decide on its position and the repetition. You can also insert a background color as an alternative to the image and an overlay color applicable to both the image and the background color.

Border Tab

The tab dedicated to the Footer Content Border allows you to insert a side border to the content to which you want to assign a specific width and a color.

Padding Tab

Since the Smart Footer System footer content is outside the site’s body content is not automatically the same width because each Theme has a different body content width, this is where the Tab Padding comes into play. The user can freely set the horizontal and vertical padding to the content of the footer both with pixels and with the percentage.

Display Tab

You can use the Display Tab to have the option of hiding the footer depending on the devices being used to view the site.

Advanced

The Advanced section allows the user to enter their custom css.

How to choose the best footer for your use

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.

Few click to get an awesome footer

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.

Elegance and usefulness

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

Slide Up Settings

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.

The Handle Style

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.

Open and Close Tab

To offer full customization with the Open and Close Tab, you can create different handles for opening and closing 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

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

Banner Settings

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 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. Or you can combine these options with the third option that allows you to open the banner only when the user reaches the bottom of the page.

Banner Background Tab

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.

Banner Text Tab

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.

Banner Button Tab

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

Banner Font Tab

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

Dozens of possible combinations

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.

Elegant and not invasive footer content.

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.

Ready in a few clicks

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.

Single Page/Post override footer.

On all the PostType pages in your site, once you have installed the Smart Footer System, you will see the following options that will allow you to overwrite the default settings you set in the Plugin General Settings page. If you enable the “Smart Footer System Footer Override” option, you can select a custom footer from the present selection and activate it for the single page in question. Alternatively, you can disable the custom footer default with the “Disable Smart Footer System” option.

New | Color Picker with Opacity control integrated.

New | Set an image as icon.

New | Duplicate button in Footer list.