Folie WordPress Theme Main Features - Codeless.co

Documentation Welcome to Folie Documentation. Here you will find the all the useful detailed instructions to use Folie theme.

General Wordpress Information Folie Requirements What's Included Folie theme support Extending & Renewing support Register your purchase How to find purchase code Licenses Installation Wordpress Installation FTP Installation Update Theme Important Update Information Install Demo Content Installing child theme Theme Options General Options Header Footer Styling Layout Blog Custom Types Site Identity Menus Widgets Homepage Settings Page Builder Header Builder Portfolio Items Team Testimonials Posts Pages Image Sizes Codeless Builder What is Codeless Builder How it works Rows & Row Options Column Options Elements Content Blocks

Live Edit Anything Live Edit Widgets Draggable Spaces & Shortcuts Logo Builder Header Builder Page Builder Visual Composer Gutenberg Elements Row Page Header Text Custom heading Buttons Media Gallery Divider Services Testimonials Team Portfolio Codeless Slider Blog Clients Empty Space Counter Progress Bar Google Map Contact Form 7 Toggles List Icon Share Icons Social Icons Revolution Slider Layer Slider Blog Blog Page Setup Wordpress Basic Way Using Codeless Builder Blog Options Portfolio Portfolio Items Portfolio Options Header How to setup header Header Options Megamenu Menu Options Footer Footer Options Footer Widgets Sliders How to add a slider Importing demo sliders

Codeless Slider Revolution Slider Layer Slider How to update premium sliders Purchase code for sliders Other Sliders Plugins

General Hey there! We are very pleased that you have chosen Folie for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledge base, and also watch our Video Tutorials. We provide you with all the details you need to use Folie. It can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please follow this link to see our section on WordPress to help you get started.

Thanks, and enjoy!

WordPress Information To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information.

WordPress Codex – General info about WordPress and how to install on your server.

First Steps With WordPress – General info about multiple topics about WordPress.

FAQ New To WordPress – The most popular FAQ’s regarding WordPress.

Folie Requirements To use Folie, please make sure you are running WordPress 4.7 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher (for legacy environments also PHP versions 5.3.x will work but it is recommended to be on at least PHP 5.6 and preferably PHP 7.0.

WordPress recommends PHP 7). We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

Make sure that your web host has the minimum requirements to run WordPress.

Always make sure they are running the latest version of WordPress.

You can download the latest release of WordPress from official WordPress website.

Create secure passwords for FTP and Database.

To check your system status please go to Codeless -> System Status on the manin WP menu.

Recommended PHP Configuration Limits Many issues that you may run into such as; white screen, demo content fails when importing and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows: max_execution_time: 180 memory_limit: 128M post_max_size: 32M upload_max_filesize: 32M

What's included When you purchase our theme from ThemeForest, you can download the Folie files via the 'Downloads' tab on your ThemeForest account. When you download Folie, you have 2 options, either download All Files & Documentation or the Installable WordPress File Only . The former includes the theme files and supporting documents, while the latter only includes the theme's

installable WordPress file. The latter is recommended when you're only looking to update/install the theme manually. Aside from the digital files you get when you purchase the theme, you also obtain exclusive services that will help you as you use the theme.

Below is a full list of everything that is included when you purchase the theme and download all the included files.

Theme Support All of our items come with 6 months of included support and free lifetime updates for your theme. After the 6 months period, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials. Envato clarifies item support here http://themeforest.net/page/item_support_policy We have an open forum system to answer the question. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

How To Receive Support Step 1 – Click Here To Create An Account, you will need yourThemeForest Purchase Code which can only be received after buying the theme from Themeforest.net.

Step 2 – You need to enter your Themeforest Purchase code, e-mail and password. Your forum username will be the same username that purchased the theme on Themeforest.

Step 3 - Once you signed up, you need to sign into the forum with your new account to start using the forum. Please use search field to previously check for answers, before deciding to write yours.

Step 4 - To create new topic, select the forum on the sidebar " go to the end of the page" and create a new topic.

Before posting on the forum Note: In order to always have a fast and successful search in our forum, we require for you to follow these simple steps before posting a new topic. This is for the benefit of everyone and it helps the forum become more efficient. It's very important and we ask that everyone who posts to keep these in mind.

Step 1 - Always check the Documentation. Most of your answers will be found there.

Step 2 - Always perform a Forum Search before deciding to start a new topic. Most common issues are already brought up and answered.

Step 3 - If you can't still find an answer to your problem, please post a new topic. Be sure to be as descriptive as possible. If you want you can send in a private reply your wp or ftp credentials. In most cases this saves a lot of time for both parties.

Step 4 - Last, patiently wait! We will try to respond ASAP. Please keep in mind that we answer threads from old to new. So, rewriting the same question will only increase the responding time!

Extending and renewing Support On September 1st, 2015, Envato changed their terms and conditions for item support and introduced paid item support for Themeforest and CodeCanyon. When you purchase a theme, you will be granted an inclusive 6 months period of support for that item. When this expires you can choose to extend your item support for a further 6/12 months at a fee. Please continue reading below to learn more about item support, or click to read Envato's 'What Is Item Support?' article.

How To Renew or Extend Support You are eligible to renew or extend your support subscription if you have less than 6 months support remaining and the author is still supporting the item. The cost of purchasing support can vary according to the different periods of your subscription. For example, extending your support subscription while it's still active costs less than renewing it when it has expired. To learn more about this, please read Envato's 'Extending and Renewing Item Support' article found here.

1. Login to your ThemeForest account and go to the Downloads tab.

2. Search Folie theme.

3. Here you will see how many month support you have remained and a link to extend the support time.

4. Click it and you will be redirected to item's page. On the right side you will see how many months support you have remaining and the 'Extend Now and save' button.

5. Once you click the 'Extend Now and Save' button, you’ll be redirected to the checkout page. Confirm your payment details and follow the on screen prompts to finish purchasing the extension.

What will happen if I do not renew the item support?

In this case you will not be granted access to hands on support. You will however continue to receive theme updates that contain bug fixes, new features and access to our online documentation, help files, video tutorials and the community forum.

When can I renew the item support?

There are 3 scenarios for when you can extend or renew item support; At the time of purchase, during your support period, and after your item support has expired.

At the time of purchasing the item.This will cost 30% of the list price, or 37.5% on the item price.

Support Upgrade – At the time of purchasing the item. This will cost 30% of the list price, or 37.5% on the item price.

Support Extension – Extend item support before it expires. This will cost 50% of the list price, or 62.5% on the item price.

Support Renewal – Renew item support once it has expired. This will cost 70% of the list price, or 82.5% on the item price.

Find support You can access the support site and blog wheneever you want. The links are incoorporated inside theme options. Just go to Codeless > Home . Click on the Folie Series button to go to the blog page. Click on the Support button to go to the support site.

Licensing When purchasing Folie from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, continue reading below.

License Information

Purchase another license

Installation You can install the theme in two ways: through WordPress, or via FTP. The Folie.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. There are two ways to install Folie, via WordPress or via FTP. First, you need to download the Folie files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find Folie. Click the download button to see the two options; The Main Files and the

Installable WordPress Theme. See below:

What’s included in The Main Files: theme/ ├── Folie ├── Folie-child-theme ├── Documentation ├── License └── Slider-dummy-data

Folie Theme Folder – Contains the folie.zip and folie-child-theme.zip WordPress Theme. The child theme is only for users who make code changes.

Documentation Folder – Contains theme's documentation.

License Folder – This contains all the language files that are fully or partially translated.

Slider dummy data Folder – This contains all included demo sliders files for you to import and customize the design further.

What’s included in The Installable WordPress Theme: folie.zip – This is the parent WordPress Theme, install this via WordPress. If you install it via FTP then unzip it first, then use the extracted folder.

Wordpress Installation There are two ways you can install the Folie theme. You can choose to install it via WordPress, which is what will be outlined in this article, or via FTP. Before you can install Folie, you need download the necessary theme files from your ThemeForest account. Continue reading below for more information.

Downloading Theme Files From ThemeForest Step 1 – Login to your ThemeForest account and navigate to your 'Downloads' tab and then locate your Folie theme purchase.

Step 2 – Click the 'Download' button and choose to either download the Installable WordPress file only , which is just the WordPress installable file, or choose to download All Files & Documentation which is the full Folie theme package.

Step 3 – For instructions on how to install the theme via WordPress, click here

How To Install Folie via WordPress Step 1 – Navigate to WordPress Dashboard > Appearance > Themes.

Step 2 – Click the 'Add New' button on top of the page, then the 'Upload Theme' button.

Step 3 – Click 'Choose File' and find the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to unzip the file. If you’ve downloaded the Full Theme Package, you have to unzip the master Folie.zip file, there in you will see Folie folder, zip this one and select it to install.

Click Here To Watch Folie theme's Wordpress Installation Video Tutorial

Error: 'Are you sure you want to do this?

If you get the "Are You Sure You Want To Do This" message when installing folie.zip file via WordPress, it means you have an upload file size limit that is set by your host. If this happens, please install the theme via FTP or contact your hosting company and ask them to increase the limit.

FTP Installation Downloading Theme Files From ThemeForest Step 1 – Login to your ThemeForest account and navigate to your 'Downloads' tab and then locate your Folie theme purchase.

Step 2 – Click the 'Download' button and choose to either download the 'Installable WordPress file only', which is just the WordPress installable file, or choose to download 'All Files & Documentation' which is the full Folie theme package.

Step 3 – For instructions on how to install the theme via WordPress, click here

How To Install Folie via FTP Step 1 – Log into your server installation via FTP. You can use software such as Filezilla for this.

Step 2 – If you have downloaded the Full Theme Package from ThemeForest, please unzip the master folie.zip file and then select only the Folie folder.

Step 3 – Upload the extracted Folie folder to the wp-content > themes folder on the server. Make sure the folder name is -> Folie.

Step 4 – Log in to your WordPress Dashboard and navigate to Appearance > Themes and clicking the ‘Activate’ button, for the Folie theme.

Update Theme There are three ways to update your theme. Before you update, it is best practice to always check our update notes. Also we strongly recommend you to make a backup of your previous theme folder. See the information below for more.

Before you update, it's best practice to always check our Important Update Information article which is updated for each new version, and to make a full backup of your theme folder, files and entire database. If you update via FTP, it's important that you delete (not replace) the old Folie theme folder, Codeless Builder and Core plugin folders. They need deleted because if you only replace the folders, then old files can be left on the server and can cause issues. When you update via WordPress admin, these folders are automatically deleted.

Updating theme using Envato Toolkit or Envato Market plugin These two plugins are created both by Envato and server the same purpose. They help you take track of the available updates of theme and all the plugins you have purchased from Envato. You can update them by one click. The later one is a follow up of the first plugin and will also replace Envato Toolkit in a near future. So we strongly suggest to install Envato Market plugin.

Step 1 – Go to Envato Toolkit plugin option panel:

Step 2 – Enter your Envato Username and Secret API key. To generate an API key, select Settings from the Envato account dropdown, then navigate to the API Keys tab. Multiple API keys can be generated so it is recommended to use one per application.

Step 3 – Back in Wordpress, Click 'Save Settings'.

Step 4 – There will appear a new tab 'Themes'. Find Folie theme there and click update. Then wait some seconds.

Step 5 – Last, update the included plugins. You will see a notification message letting you know the plugins that have a new version and need to be updated. Follow the on screen steps.

To use the Envato Market plugin, follow this tutorial.

How To Update Folie via Wordpress Step 1 – Deactivate the current Folie theme in the "Appearance > Themes" section by simply activating a different theme. Once you activate a different theme, you can delete the Folie theme. Your data is saved in the database so the content will not be lost!

Step 2 – Retrieve the folie.zip file from your Themeforest downloads. If you downloaded the "Main Files" from Themeforest, then just unzip the archive file you received. Retrieve the "folie" folder inside of it. Zip it, and upload via Wordpress dashboard.

Step 3 – In the "Appearance > Themes" section, click on the "Install Themes" tab at the top and choose to upload the "folie.zip" file.

Step 4 – After the upload is done, activate the theme.

Step 5 – Last, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

How To Update Folie via FTP Step 1 – Go to "wp-content > themes" location and backup your "folie" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

Step 2 – Retrieve the newly downloaded "folie.zip" file from your hard-drive and extract the file to get the "folie" theme folder.

Step 3 – Import the new "folie" theme folder into "wp-content > themes" location. Choose to "Replace" the current one if you did not delete it.

Step 4 – Lastly, update the included plugins. Go to your "wp-content/plugins" folder. Find and delete the plugins that came with the theme. Go back to your wordpress dashboard, a notification message letting you know there are required plugins that need to be installed. Follow the on screen steps.

Important Update Information Always Backup Your Current Setup We strongly recommend to make sure that you have a current backup of your web site, including your wp-content folder, your wp-config.php file, and your .htaccess file in your WordPress installation folder, and a copy of your WordPress database. You can

use these to revert back to your original site if anything unexpected happens during the update process. If you are not familiar with the backup process and can not do this yourself, there are several plugins available that completely automate that process for you, such as: UpDraft Plus and WordPress Backup Buddy. If you are using the Revolution Slider and have added custom css, please make a backup of the styles because those will be removed when you update. You can also backup your Folie Theme Options on the Backup tab in Appearance > Theme Options > Backup .

Do Not Keep Older Copies of The Theme In WP Theme Folder.

You should completely remove all previous Folie theme folders before adding the new updated theme folder, or you could end up with WP path issues, etc.

Do Not Rename The Theme Folder If you rename your theme folder when you update, then the path is no longer valid. WordPress stores menus and widget settings and some other settings by folder path. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. Make a copy of your current theme folder before you upload the new theme.

Reset Theme Cache, Browser Cache, Server Cache And Plugin Cache.

It is always recommended to reset all caching systems after an update, including theme cache, your browser, plugin (e.g. W3 Total Cache), and server cache. Visual issues may happen and more often than not, its caused by caches, and they need to be emptied. Each browser allows you to remove cookies, history and other data. If your theme version is not updated after uploading the new files, it is due to a server-side caching system. Some hosting providers have server-side cache systems installed to optimize the speed of content delivery, please clear any server-side cache or ask your host to do it. This is also true for google pagespeed setups or cloudflare setups. View our general cache information that describes the various forms of cache and how to clear them.

Update Child Theme If you have copied template files from parent theme to child theme. Please make sure to revert to parent theme first to confirm if the issue exists there too. If it doesn’t, please update the templates copied to child theme with the parent theme.

Required & Recommended Plugins Must Be Updated When you update the theme, you will see a notification message in your admin telling you the required and recommended plugins need to be updated. Follow the onscreen prompts to install the plugin updates. Our Codeless Builder plugin is the only required plugin and it has to be installed and activated for theme features to work. Make sure you are always using the most recent version of the Codeless Builder plugin (this will not be an issue if you keep theme up to date). It will be installed automatically upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Appearance > Install Plugins page and install the plugin that way. Every time you update the theme, the plugin also will be updated.

Plugins – License activation is required to receive updates ?

For all the included plugins, Visual Composer too, we have purchased a Extended License that let us to bundle the plugins with the theme. This means they can be used by any one purchasing our theme as long as they use the version included in theme

folder. You don't need to purchase any other license the plugins are included in the theme. But you can not update it on your own terms with this type of license. The rules of the marketplace do not allow us to give the plugin activation code but you can use the existing version without any problem. We update frequently all theme plugins to their latest versions in every theme release or in case when an urgent update is needed. So they are always fully compatible with the current theme version. If you want to buy a license by yourself this is allowed. You have to buy a new single license but we thought that this isn't needed because the version included works perfectly. You are free to make the choice that best fits your needs.

How to install your Demo template This is one of the most important features like importing demo template for you to work on it instead of starting th esite from scratch. Folie comes with a handful of build-in demo's. Just choose the one that is more suitable for your site and in a few click it'll be all done! .

Using the Setup Wizard: The automatic setup wizard will help you configure your new website. The importer will upload for you all pages and posts, some sample sliders, widgets, Theme Options and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc. and it will not delete current menus or sliders. It will, however, configure and use the selected demo menus, add sliders and replace Theme Options, Reading Settings and Widget Settings.

Step 1 - Go to your Codeless > Home and scroll down to the "Setup Wizard" section. Click on " Setup Now".

Step 2 - By clicking Setup Now, a new window will appear with all available demos. Select the demo you want.

Within minutes all necessary data will be imported in your server.

..and you're done! You will see a Success message at the end of the process.

Child Theme Installation The child theme is a copy of theme that inherits all Folie options and styling. Here you can customize the default styles and options to your wish. All you have to do is install child theme and activate it. After this you can edit out child theme files to your wish. Since this is independent from the parent theme, all the custom changes made to it will not be affected by future theme updates.

But as the name says, it is a child theme. So for it to work properly you MUST have installed the parent theme first. In the paragraph above you learned how to install theme.

Read below the steps to install and use a child theme:

You MUST have installed Folie theme before using a child theme!

How To Install Folie child theme Step 1 – The methods to install a theme are the same as the parent theme. You can import it via Wordpress or ftp.

Step 2 – You need to have downloaded the Full Theme Package from ThemeForest, in order to have the child theme folder.

Unzip the master Folie.zip file and then select only the folie-child theme folder.

Step 3 – Zip and upload the extracted child theme folder to the Wordpress > Themes > Add New in your Wordpress dashboard. Or leave as it is and upload the folder into your wp-content > themes folder on the server. Make sure the folder name is -> Folie-child.

Step 4 – Log in to your WordPress Dashboard and navigate to Appearance > Themes and click the ‘Activate’ button, for the Folie Child theme.

Theme Options We present you the new live customizer. Using this new feature you can change and see at the moment all your customization in the site and page, live. Make all the changes you want to pages and save them ONLY after you have finished all the work. To access the customizer go to your Appearance > Customize.

Folie Theme Options Active Theme General Header Footer Styling Layout Blog Custom Types Site Identity Menus

Widgets Homepage Settings Page Builder Header Builder Portfolio Items Team Testimonials Post Pages

Active Theme Check out the current active theme in your site.

General Set up Responsive Layout, set on Smooth Scroll, add a Favicon, swipe ON Page comments, add a Back to Top button, 404 error message, page transitions, Custom Codes (css and html) and all lightbox options.

Header Select type of header to use, Header Layout, global header options. Set up logo as image or font. Assign styles for other header elements such as header box layout, background, border, menu etc. Here you can assign a sticky header too and style it.

Customize the menu and Top Navigation Area.

Layout Header layout and global header options.

Header Stretch - Select between the full-width style or in-container.

Header Layout - assign the position of the header. Chose from to set it in Top, Left, Right or Bottom position.

Force Center, Middle Column - if set ON, will make the header centered in the middle of header area.

Boxed (Outer) Header - if set ON, will add an outer padding and will make the header boxed with effect.

Order responsive header columns for main row - drag-and-drop the columns to the order you want them to appear in the responsive mode.

Logo This is the section where you add your site's logo.

Logo Type - select two of the available logo types. The image type or the font type.

Image Logo - is the typical logo where an image either processed by image processing programs such as photoshop or AI, is uploaded into the site.

Default Logo - upload a logo for your site.

Logo Light - upload a light version of your site's logo to use in dark backgrounds.

Logo Hight - set up a height for the logo in normal desktop layout.

Logo Responsive - this section will list a few more options regarding only the responsive mode.

Logo Additional in iPhone - add another logo image if you want the iPhone view to have a different, more suitable logo for the small mobile screen.

Logo Additional in iPad - if you want to use a different logo only for the iPad mode, then upload here a logo for iPad. Logo Height (iPhone) - set up the height of the logo when in iPhone(mobile) screen.

Logo Height (iPad) - set up the height of the logo when in iPad screen.

Font Logo - this type of logo is used usually when your site's logo is composed of one or more strings. Not images. This is especially handful for designers as a font logo will never have any resolution or cropping issues due to opening the site from a different screen resolution.

Logo font Typography - find here a list of options to style the font of logo. Such as, font family, Subset, font size, variant, letter spacing, Text Align, Text Transform and Color.

Menu Styles In this section you set up custom style for the header area.

Main Menu Style - select the style of menu from the drop-down list.

Space between menu elements - scroll the rule to set up a value to put to the distance between menu items.

Hover & Active Item Styles - assign the colors for border, background and font color of active menu item.

Main Menu Typography - set up menu font style.

Dropdown Typography - set up the font style for the drop-down menu items. The ones with other sub-items and single drop-down menu.

Mobile Menu Hamburger Color - select the version to use, the available versions are dark and light.

Main Header Row Set up the main header row. The segment where menu is located and other header elements.

Header Box Design - this box is devided in boxes showing where margin/padding/border will be. Just add values to the prefered section. Like in this example, where border bottom is set up to be 1px. All values should be added with px.

Space between elements - set up the space between elements in main row. This means the distance between menu, logo, socials or other elements you have added in header.

Header Height - set up header row height.

Background - add a background for header. You can add an image, set up it's position. Or set up a color background.

Border - add a border or shadow and style it.

Top Navigation Row The additional top bar above the menu.

Top Header Row - swipe on if you want to add this section of header.

Header Box Design - this box is devided in boxes showing where margin/padding/border will be. Just add values to the prefered section. Like in this example, where border bottom is set up to be 0px. All values should be added with px.

Space between elements - set up the space between elements in main row. This means the distance between menu, logo, socials or other elements you have added in header.

Height - set up top header row height.

Typography - swipe ON for more options to overwrite default typography.

Background - add a background for header. You can add an image, set up it's position. Or set up a color background.

Border - add a border or shadow and style it.

Extra(Bottom) Row An additional bar under the menu.

Extra Header Row - swipe on if you want to add this section of header.

Header Box Design - this box is devided in boxes showing where margin/padding/border will be. Just add values to the prefered section. Like in this example, where border bottom is set up to be 0px. All values should be added with px.

Space between elements - set up the space between elements in main row. This means the distance between menu, logo, socials or other elements you have added in header.

Height - set up top header row height.

Typography - swipe ON for more options to overwrite default typography.

Background - add a background for header. You can add an image, set up it's position. Or set up a color background.

Border - add a border or shadow and style it.

Drop-down and Mobile Styles Main color set up for mobile version of main menu and drop down.

Background Color - select from the color palette the color of the background of the mobile menu drop down.

Item Hover BG Color - select from the color palette the color of the background color that your item's will have when you get your mouse over it.

Item Hover Font Color - select from the color palette the color of the item's font color when on mouse hover.

Separators Color - select from the color palette the color of the separators line.

Sticky In this section you make header position fixed or otherwise known as Sticky.

Sticky - By switching this option ON, your header will be sticky.

Sticky Background Color - select from the palette the color of the background. This will take effect only on the header when it's sticky. Not in the normal state of header.

Sticky Content Color - select the version of the content color here. The theme has two versions of header logo and menu. The dark version, used mainly in light background. And the light version used mostly in dark/transparent backgrounds. In this option you chose which of these versions to keep for the sticky header.

Add Shadow - set ON, if you wish to add a shadow effect into the sticky header.

Footer From bold and interactive footer, to simple and clean one, our builder takes good care for the Footer section too. You can add any widget you want on it and customize the style to fit your requirements.

Footer General Options Show Footer Switch on if you want to show footer.

Footer FullWidth Switch on if you want footer content without container.

Footer Layout Use this option to change layout of footer. Available options are : 1 Column, 2 Columns, 3 Columns, 4 Columns, 6 Columns, 1/4 3/4, 3/4 1/4.

Footer Centered Content Switch on to center content of column.

Show Copyright Switch On/Off Copyright on website.

Footer Reveal Effect Switch On/Off to activate reveal footer effect.

Distance between widgets Set the distance between the widgest in footer.

Main Footer Style Footer Box Design This box is devided in boxes showing where margin/padding/border will be. Just add values to the prefered section. Like in this example, where padding top and bottom is set up to be 60px. All values should be added with px.

Main Footer Title Typography Set up the typography and style of the title of widgets in footer.

Custom Footer Content Typography When swipped ON, adds typography options to style footer content font.

Outer Border Style Add a border at the outer parts of footer. Select the border style from the drop-down list.

Outer Border Color Set up the border color.

BG Color Choose footer background color from the color palette.

Second Color Choose a secondary footer background color from the color palete, in case you wish to create a gradient effect with 2 colors.

Button BG Color Choose a color from the color palette, for the buttons used in footer.

Widget Title Color Select a color for the widgets titles.

Body Font Color Choose body font color from the color palette.

Link Color Choose the color for all links used in footer, from the color palette.

Link Hover Color Choose the on hover color for all links used in footer, from the color palette.

Inner Borders Color Choose the color for inner borders in footer, from the color palette.

Copyright Style BG Color

Choose Copyright background color from the color palette.

BG Font Color Set up Copyright the border color.

Link Color Choose the color for all links used in Copyright, from the color palette.

Link Hover Color Choose the on hover color for all links used in Copyright, from the color palette.

Borders Color Choose the color for inner borders in Copyright, from the color palette.

Content Distance From Top Add padding-top to Copyright content.

Content Distance From Bottom Add padding-bottom to Copyright content.

Styling The styling section covers most of all theme's styling options. From Primary color used for text, icons and links, current pagination to Heading, Blog, Portfolio, Buttons and much more.

General In this section you customize: Primary Accent Color - select from the palette the color you want to use as a primary color. The primary color is used for links(when on hover), icons, menu items (active ones), counter's icons etc.

Border Accent Color - select from the palette the color you want to use for the borders across the site. An example are the contact form borders.

Labels, Span accent - select from the palette the color you want to use for perpended text(In, By etc) Counter ("3" categories for example), quote icon, current pagination and more.

Highlighted area light - select from the palette the color you want to use for areas like the pagination buttons and other areas with light color highlights.

Highlighted area dark - select from the palette the color you want to use for areas like the loading ("Load more") or small links like categories, widgets links, quote text and more.

Links Color - select from the palette the color you want to use for other links that do not have the primary accent color, like the sidebar links, categories link or date links.

Content Links Color - select from the palette the color you want to use for links in the body.

Content Links Color Hover - select from the palette the color you want to use on hover for links in the body.

Modern Layouts Sidebar BG Color - select from the palette the color you want if you are using a modern layout with full sidebar.

Body Background - set up the body background color, image, position, size and other background settings.

Headings In this section you can customize the font style and color for all available headings in the theme.

General Headings Typography - Change the font family, line height, text transform, font weight, letter spacing, color of font in the dark version and in the light version.. etc, for every heading type available in the theme.

Body Typography - The same styling options as for the heading but here you select for the font used in the body of the theme.

Blog In this section you style all text available at the blog page.

Blog Entry Title - Change the font size, line height, variant, letter spacing, color of font.. etc, for the blog entry title in the blog page.

Single Blog Title - Change the font size, line height, variant, letter spacing, color of font.. etc, for the single blog post title.

Blog Read More - Change the font size, line height, variant, letter spacing, color of font.. etc, for the blog "Read more" string.

Blog Overlay Color - select from the palette the color for the overlay effect when hovering the blog titles.

Portfolio

In this section you style the portfolio font.

Portfolio Items Categories - Select the font size, line height, variant, letter spacing, color of font from the color palette for the portfolio items categories.

Buttons In this section you set up buttons font style.

Scroll through the list of option to set up main font and border style for normal and light version buttons.

Widgets In this section you style the widgets typography.

Widgets Typography - assign the font family, color, size etc, of widget content font.

Sidebar Widget Title - select the color of widget title font.

Distance between widgets - set up the distance of widgets from one another.

Sidebar Search BG Color - select the color of search input fields.

Click Here To Watch The Video Tutorial

Layout The general website layout options. This can be overwrite from Blog Layout and from single page/post layouts.

Blog All Blog Styles and options. Select one of the blog styles that you want to use as a default template. Overwrite the default all pages layout option, set a custom layout for blog

Site Identity Set a title and tag line to present your website.

Custom Types Configure here all Portfolio Page and single portfolio items options.

Menus In this section you will find a list of all availbale menus. Click on the menu to add, remove and customize menu item's. Scroll below to assign a menu to your site.

You can also customize menu's in Wordpress deafult Appearance -> Menus!

How to Add a Page To Menu Video Tutorial

Widgets This section is responsible for the widgets. Select the area you want to add or remove widgets from and after clicking on it, you will be able to see all of it's current widgets. Customize them to your wish.

Apart from this section, theme has 1 other widget area, but this particular page doesn’t display it. You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.

Static Front Page Similar to your old default Wordpress Static page, this section specifies whither you will be using your post's page as a home page or a static page.

Page Builder Click on an element on the page on the right side panel of your screen, the options of the element will display in this section of theme options.

For easy access you can select some page options at the right-bottom side of the screen. Click here for more info about page options.

Header Builder Click any element in header of your site and the options of header will be displayed here. Click here to view all the header options.

Portfolio Items List of your current portfolio items. Add new item by clicking on the plus icon or edit out existing items by clicking on them. A new list of options will enfold. So that you can customize each portfolio item differently.

Team The part of menu settings to add your team profiles and customize them.

Video Tutorial of The Elements - Gallery, Media, Team

Testimonials Add your customer's testimonials for your awesome work here.

To add a new testimonial, click on the plus icon. Then compose the new testimony using the options in the left sidebar. For more detailed information go to this section of documentation.

Video Tutorial of The Elements - Testimonial, Progress Bar, Counter, Contact Form 7

Post Add and edit website posts in this section.

Pages Add and edit website pages in this section.

Folie Page Options folie page options are the settings that customize only one page. The page you have opened. To access them just look at the 4 vertical icons at the bottom-right corner of the customizer, when a page is opened in the Customizer.

Page Settings Global Styling

New Page Live Page

Page Settings This is the main section where you can customize a specific page's settings. The changes made here are specific to only the page you have currently open. Not other page in teh site. Change it's title, layout, header type, publishing date or featured image.

Save changes by clicking the Save & Publish button at the top-left corner.

Global Styling A quick access to Customizer > Styling menu. Where all theme styling options are listed.

New Page Add a new blank page template here.

Live Page Opens the current page in a new tab. Click here if you have finished customizing your page (or want to check the result so far) and want to give a live look to all recent customizations.

Image Sizes Images are an important part of a website. They make it flattering and eye-catching if presented in the right dimensions and resolution. In this Options Section you can define all image sizes of site. Leave the width and height empty to display the full image. Leave empty the height attribute to disable the crop.

To find the option go to Codeless > Image Sizes .

General Image Resizing - Codeless Theme has the ability to create only the needed thumbnails. For ex, if you add a blog featured image, it will not create automatically all image sizes, it will create only the blog featured image size. Disable this feature if you use CDN. If you disable this feature you need to regenerate thumbnails.

Add Custom Size - Here you can add a new id for a custom image size. You can edit width, height after Save. The new size will be shown at Other Section. After setting the new image size you can use it over your web-page.

Blog Blog Entry - Used as default for all blog images.

Blog Entry Small - Used for Blog Grid and Carousels, News, Media, Alternate.

Blog Post - Used for Blog Grid and Carousels, News, Media, Alternate.

Width: Specify the width of the image Height: Specify the height of the image Crop Location: Crop is the action where wordpress forcefully resizes the image you upload to the specified dimensions. Select one of the drop down option to specify the position where the crop should start. Leave default of you do not want to crop images.

Portfolio Portfolio Entry - Used as default for all portfolio grid.

Team Team Entry - Used as default for all team members.

Other Use to add additional image sizes to use for other part of the site.

Folie Page Builder You can select from three different page builders to add content to your site using Folie theme.

Codeless Builder WP Bakery Visual Composer Gutenberg Editor

Theme's main builder is Codeless Builder. All it's demo's are build with Codeless Builder. However theme is also perfectly compatible with external WP Bakery Visual Composer and the Wordpress build-in Gutenberg Editor.

Codeless Builder Welcome to Codeless Builder! New kind of page builder you will change everything in seconds and you will see it live. The Codeless Page builder it is faster like no other builder on the market. You will change everything on the fly. It is intuitive and simple. Codeless Team have used the best Technology inspired by Medium Editor and SquareSpace. For the first time even portfolios, staff, clients, testimonials will be added in real-time. Access any element option, section, background, font, color, border etc by clicking directly on the live site on the right window and set all this options on the left option sidebar. Please read below for information about it's functionalities.

Builder Starter Page How it works Features

Builder Starter Page This is the Codeless Builder Welcome page. Useful tip are displayed to help you understand how it works.

How it works Once you've activated Folie's required plugin - Codeless Builder, you can now use the Codeless Builder to build your pages or posts, and even custom post types. To start using it just click Customize on your WP dashboard.

When creating pages or posts with the new Codeless Builder, first you should add row then select the columns into row settings then add elements. Place the pointer at the top left corner of the page below the header and click the light gray circle that is showing up. It will add a new row. Then hover the pointer on the added row and click the column icon at the right top corner of the row. Select the layout you want. Then add elements. See the below screenshots.

Codeless Builder Video Tutorial

Features

Rows & Row Options Columns Options Elements Content Blocks Live edit any content in page, post, portfolio items and custom post types Live edit widgets Draggable Spaces - Keyboard Shortcuts Logo Builder Header Builder

Rows & Row Options Place the pointer at the top-left corner of the page below the header and click the gray circle icon that is showing up. In the list of elements, select to add a new row.

By default the first icon to be active is the 'T' icon. This opens the main row options at the left panel in customizer. The other icons options include: 1 - Click on it to Drag the row and reposition it else where in the page. Release mouse when you have found the right place to

put it.

2 - Click to open a list of possible column partition within the row. There are ready samples, but you can set up a custom

column partition if you want.

3 - Click to clone the same row into a new identic row.

4 - Click to delete row.

5 - Click to save the row as a Content Block template. So you can reuse it in other pages by adding it in an instant as a Content

Block.

Here are the main options available for row:

Row General Options Layout - Select type of Layout (into container or stretch content), swipe ON to have a Full Height row or set up a Custom Container width.

Columns - Assign the Column Gap, swipe On to have Equal columns height or select how the columns will show up in responsive mode.

Attributes - Swipe ON if you want to Disable Row, Add a Row Id if you want to be able to 'catch' this row in custom code. Add an Extra Class to use in Custom Css or add a link in Anchor Label input field if you want to have the row as link to another section/page.

Video - add a video as row background.

Row Design Options Box - add padding/margin or a border.

Background Color - add a color as row background.

Babckground Image - add an image as row background.

Overlay - add an overlay to background.

Border Style - if a border is set up in the Tools box above, then you style it here. Select the style and color.

Row Animation Options Animation - Select the animation effects.

Row Responsive Options Devices Visibility - check on the checkbox to hide row in divices such as Phones (smaller-than-768px), Tables (larger-then768px), Medium Desktops (larger-then-992px), Large Desktops (larger-then1200px).

Custom Box Design on max-width:991px: swipe to open Tool box and set up padding/margin for ipad.

Custom Box Design on max-width:767px: swipe to open Tool box and set up padding/margin for mobile.

Video Tutorial of Row Options

Column Options After adding a row it contains 1 column, to change the column number go to row icon (hover) click the column icon and select the layout you want. To change the column setting click the column icon inside that row. At the left panel will show up the column options.

Here are the main options available for columns:

Column General Options Horizontal/Vertical align - Horizontal/Vertical Alignment of elements into this column(container).

Sticky Column - Make this Column sticky on this page.

Disable Column - Make this Column invisible in this Page.

Column ID - This is useful when you want to add unique identifier to columns.

Extra Class - Add extra class identifiers to this column, that can be used for various custom styles.

Column Link - Add a link to this column.

Specify where to open the custom link - open in the same window or new tab.

Effect on hover - specify the action to take when you hover over the column.

Column Design Options Tools - Add margin/padding and set up a border width to your wish.

Text Color - assign the color of the text. Can be either dark or light.

Background Color - assign column background color.

Background Image - select a background image.

Overlay - assign a background overlay style.

Border Style - set up border style, color and radius.

Column Animation Animation - Select the animation effects.

Column Responsive Options Devices Visibility - check on the checkbox to hide row in divices such as Phones (smaller-than-768px), Tables (larger-then768px), Medium Desktops (larger-then-992px), Large Desktops (larger-then1200px).

Custom Box Design on max-width:991px: swipe to open Tool box and set up padding/margin for ipad.

Custom Box Design on max-width:767px: swipe to open Tool box and set up padding/margin for mobile.

Video Tutorial of Column Options

Elements An element can be added very easy everywhere in page clicking the gray balloon icons that appear hovering the row or columns.

Other elements will be added continuously to the list.

For most of the elements, they have some predefined templates which can be selected clicking in 'list' button beside 'add' button.

The main options of elements are: Clone - It duplicated the elements.

Copy style - It's a useful option which help you to copy the style of an element to another, ex. if you have many services elements and made some style changes to one of them and want to copy the same style to others.

Paste Style - Click paste style to the other element where you want to paste the copied element style.

Copy element - Copy the element and paste it somewhere else or in another page.

Important Feature! It's one of the powerful features of Visual Builder. It makes possible communication between pages.

You can copy an element from a page and paste to another page.

Delete element - Click it to delete the element.

Drag & drop - Click and hold the element to drag and drop it everywhere in the page.

Search the elements - Find easy the elements searching them by name at the search field above the elements list.

Element Options - Click the element icon and see it's options displayed on the left customizer panel. Each element has it's specific options. To see all the options for each element please click here.

Content Blocks Content blocks are predefined group of element to make the creating of similar pages easier. The content blocks can be added in back-end -> click at Content Block at the main WP menu. After creating it, edit with Customizer and add the elements you want. Save the page. This content block will be displayed at 'content block' tab when adding elements in column.

Ready made content blocks will be added continuously to the list.

Beside the predefined content blocks, Folie has predefined element styles. Click the gray balloon to add an element and click 'List' tab besides the 'Add' tab to select the predefined styles (Not all elements have predefined styles).

Live edit any content in page, post, portfolio items and custom post types One of the most powerful key features of Codeless Builder is the live edit on any content. New kind of page builder you will change everything in seconds and you will see it live. The Codeless Page builder it is faster like no other builder on the market.

You will change everything on the fly. It is intuitive and simple.

Click on any content, title, image, icon or even custom post type to edit it instantly in seconds.

How to edit simple text Just place the mouse in any text on the page and write, it's that simple.

How to edit Single Portfolio There are 2 ways to edit portfolio items:

From the Portfolio element Open the portfolio page, click at a single portfolio item. The single portfolio item options will display at the left side panel in customizer. The changes are implemented live.

From the Customizer Go to Portfolio items at Customizer menu and search the portfolio item you want to edit. In the customizer will be displayed the single portfolio options and the portfolio single item at the right side.

For more info about portfolio and portfolio items please click here.

How to edit Team Members The same thing works with team. Go to team element, click on edit icon on the team member you want to edit and you will see the options of that team will be loaded at the customizer panel. For more info about team options please click here.

How to edit Testimonials The same thing works also with testimonials. To add a new testimonial click the '+' icon and enter the information at the left panel. To edit a testimonial, go to testimonial element, click on edit icon on a testimonial and you will see the options will be loaded at the customizer panel.

How to edit icons It's very easy to edit an icon, just click at the icon and a list of icons will be displayed. Select one from the list and it will change instantaneously. To find easy an icon you can search it at the search field. For more information please click here.

How to edit widgets in builder.

With Codeless Builder is very easy to edit widgets, go to footer or sidebar area and click the edit blue icons to edit the widgets.

The widget options will display at Customizer panel. See the below image:

Draggable Spaces & Keyboard Shortcuts Draggable Spaces (paddings & margins) shortcut Important Feature There's no need to refresh browser and again change tab to adjust element margin or padding. Just press Shift + Ctrl + Click on element and drag your mouse to change padding and margins.

Seems like your are using Photoshop.

Show element options shortcut Click on element - to easily access the element's options. Click on any element and the it's options will show us in customizer

panel.

Logo Builder Logo Builder is another powerful feature of Codeless Builder. Create the logo instantanly and see the changes live. Drag and drop it everywhere in header. Click the logo edit icon that is displayed when hover the logo. The logo options will be displayed in Customizer.

Logo options: Logo type - Select the type: font logo or image.

Logo Font - Font family, subset, font size, style, letter spacing, text align, text transform and color.

Logo Image - In this logo type you can add the light and dark logo images, set the logo height and add additional logo for the responsive view.

Header Builder The main header options are at Header in the main Customizer menu. Header has it's elements that can be placed anywhere with drag and drop.

To add elements at header, click one of the gray balloons that appear in header area when hovering it. The options of each element will be displayed at Customizer panel when selecting them. The available elements for the header: Social Icon - Add social link, select the socials you want to display, select fort size, color, border style, display mode, space between icons, icon alignment, line height, margins and paddings.

Logo - click here to read more about logo builder.

Menu - Select if you want hamburger menu or vertical menu (other options for each style will appear), menu animation effects.

Tools - Choose the elements you want to display in tools: search, cart, side navigation. Each of them has specific options which are displayed in Customizer on clicking edit icon on elements.

Button - Add the button text and link. Also can change the margins, paddings and borders.

Text - Add simple text, ex. Site slogan which is usually displayed after logo or important information.

WP Bakery Visual Composer Builder WP Bakery Visual COmposer is one of the most popular builders out there. With thousand of users and countless site's build with it. This was the to-go to plugin before Gutenberg or other custom made builders (such as Codeless Builder). This plugin too, uses blocks and has the logic of drag-and-drop to add content to the page. All you have to do is: Step 1 - install plugin. If you have just imported dummy data for the first time, all included plugins (Visual Composer too) have been already installed and activated for you. So you can more directly to step 2. If you haven't then go to required plugins message in your dashboard. Click on Install plugins > Install WP Bakery plugin . Activate it from the plugins menu.

Step 2 - Open a page in editor. You will see three main tabs above the classic text editor. Click on the Backend Editor to open Visual Composer.

All Codeless Builder elements are perfectly convetible to Visual Composer lements! So even if you have imported demo data, which are CB shortcodes, and want to use Visual Composer instead.. You can just open VC Backend editor and continue customizing the elements as usual.

Step 3 - Click on the element you want to add in the page. The list of elements is similar to the Codeless Builder. You can add rows, divide them in columns. Add other elements inside the row or column, by clicking on the plugi icon and edit an element by clicking on the pencil icon.

Visible only when you hover over an element.

Visual Composer Content Blocks Just like Codeless Builder, here you have the possibility to add blocks of content in one click. instead of composing it bit by bit yourself. For this, just open Visual Composer, and switch to the "Content Blocks" tab.

Gutenberg Builder What is Gutenberg?

Gutenberg is the project name for the new WordPress block editor, which replaced the WordPress TinyMCE editor as the default WordPress editor in WordPress 5.0.

The old WordPress TinyMCE editor looked differently. Simpler and more intuitive to the eye (most of it due to all wp users being very familiar with it). After the release of Gutenberg, this editor is now called the classic editor:

Now the new WordPress block editor, AKA Gutenberg looks like this:

Gutenberg completely changes the editing experience by moving to a block-based approach to content. All the elements you could add before only by having another builder installed (like WP Bakery or Codeless Builder), now you can add the same way directly from the Gutenberg editor.

Basically, Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with lots of individual “blocks”. The blocks allow you to build more complex designs than those allowed in the old classic WordPress editor. A block can be pretty much anything. For example, you can have blocks for: Normal text; Image Galleries; Video embeds; Buttons; Widgets (the same widgets you use in your sidebar); Tables..Etc. Each block is its own entity that you can manipulate on an individual basis. For example, here’s a quick Gutenberg post that contains three blocks: 2 text blocks 1 image block Watch the easy it can rearrange those blocks just by dragging and dropping them:

Gutenberg is part of Wordpress so you can find all the neccesary and more detailed tutorial in Wordpress.com site. Folow this link for more.

Elements Within Folie WordPress Theme you will get a total of 24 elements and we are going to describe each one of them in this section.

We should include also the fact that we'll add other elements from time to time.

There is an easy way to show all the elements : you simply click on the black line below the main menu. But you can also add elements on every section possible, by clicking the icon located on left and right of the rows and columns.

See the image below.

Row Rows are the base unit on a theme layout. They are the column layouts that can placed inside of sections. Rows can be accessed easily with our builder:

Simply by clicking the Row icon on the top left of the row Manually on Theme Options > Page Builder > Row.

Adding elements inside the columns :

We have divided the Row settings in two large categories : General and Design Settings.

General Settings These settings show everything about customizing the entire row from layout, columns, attributes, to animations, video (selfhosted, youtube or vimeo) and responsivity.

For more detailed information, go to Row Options.

Design Settings The Design Settings include everything about the paddings and margins between elements and the row, the border style/size and color, text and background color, background image and background overlay.

For more detailed information and screenshots, go to Row Options.

Page Header A normal Header has included the menu and the Page Header. No struggles around to add and customize the Page Header : now you can add it as a new element and position it everywhere in the page.

General Settings Page Header Style - you can choose between simple and modern header styles.

Modern Title Position - if chosen modern header style you will have to choose the title position also.

Description or Second Title - choose a description.

Effect - you can choose an effect (gradient shadow) for the page header.

Design Settings Box - choose the height of the box and the title color (light or dark).

Background Color and Background Image - choose a color or an image for the background.

Overlay and Border - choose a gradient or color overlay for the background. You can also choose a bottom/top border and its color.

Typography - choose the title typography, title font size and weight, title line height, title text transform, subtitle color/font size and weight.

Video Tutorial of the Page Header Options

Text Completely customize the text typography, font size, font weight and even including animations in just a few clicks.

Text options include : Adjust the distance between paragraphs.

Custom Typography - adjust text font size, title font weight, line height, text transform and text color.

Animation - choose the animations effect, delay and speed.

Adjust paddings, margins and borders.

Whenever selecting a random text on every section, you will notice a black panel above the selected area. There you will find all the formatting options of the text, as shown on the image below.

Custom Heading Just add a Custom Heading in every section that you want and customize it in a minute.

Custom Heading options include : You can choose the heading tag and the title typography.

Responsive Options Add a custom size for the heading for screens smaller than 992 px.

Add a custom size for this heading for screens smaller than 768 px.

Animation - add an animation effect to custom heading.

Box Design - add borders, adjust paddings and margins of the box.

Border - adjust the border color and style.

Video Tutorial of The Elements - Custom Heading, Text, Portfolio, Divider

Buttons There are a lot of customizing options for buttons.

After adding a button element you have the options to : Input the destination URL for your button.

Input the target of the link. Open in the same window or new tab.

Adjust the paddings, margins and assign borders.

Add an animation and adjust its delay and speed.

For this example we edited the button column settings and chosen Light Text Color for the first button, and Dark Text Color for the second one. This is done by clicking on column and choosing Column > Design.

This way we will assign different styling options to the buttons, on Theme Options > Styling > Buttons.

Buttons styling options include : Button style - in this example we have chosen the Text Effect style.

Button Size Layout - choose a button size from extra small to extra large.

Button Font - choose the size of the font or a custom font.

Choose the button background color, font color, background hover color and font hover color for the normal button.

Choose the button background color, font color, background hover color and font hover color for the light button.

Buttons Options and Styling Video Tutorial

Media Our Builder makes it easy to add images, videos or live photos anywhere on the page. All images support lazy-loading, and come

with different animation styles. Media modules can be placed in any column that you create, and their size will be adjusted to fit.

Image Media After uploading image from media library, you can position it on the panel (left, center, right, stretch).

You can Show lightbox icon on image hover or not.

Adjust image size (default, full, blog entry, blog post).

Video Media You can choose a self embed video, youtube or vimeo video and add the video ID/URL. You can switch on/off video loop.

Autoplay option - switch on when video is used with Video Placeholder.

Video/Embed Height - use this to adjust the video height, for embed links and for video with image placeholder.

You can also upload Live Photos or add a video if you want to use it for live photo.

For all media types you can add shadow to container, animations and adjust margins/paddings/borders.

Video Tutorial of The Elements - Gallery, Media, Team

Gallery Add and customize your gallery in no matter of time. Simply choose your photos and start to edit them live.

Gallery options include : Carousel - you can easily switch from static images to carousel.

Items per row - choose how many images you want in a row.

Distance between items - easily adjust the distance between them.

Lightbox on hover - turn on/off the lightbox when hovering on an item.

Image size - it can be full, default, blog entry or blog post size.

Adjust margins, paddings or add borders easily.

Video Tutorial of The Elements - Gallery, Media, Team

Divider The divider element is perfect for creating a horizontal line rule and for adding structure and organization to your site.

The divider options include : Divider Height - set the divider line height.

The option to set the divider fullwidth.

Set the divider width - easily adjust the divider width to your requirements.

Set color - set the divider color.

Set the border style - choose between the solid, dotted, dashed, double, groove, ridge and inset divider style.

Select the style of the divider - choose between three styles : simple, two borders or with centered icon. We have chosen the divider with centered icon style on the example. When clicking on the icon, a panel with all the icons will be shown, so you can easily choose the icon you need. The same method is used to select all icons in the site. Just click on the icon to change it by selecting another from the list that will show up.

When choosing the divider with centered icon style, you have the option to choose also the icon size and color.

Services Services customization is unlimited with our builder. Transform everything from icons, to distances between title and content, including animation effects.

General Settings Media Type - the media type can be only text, icon, SVG and custom image.

Add Subtitle - switch on if you want a custom subtitle after primary title.

Layout Type - the layout type can put media aside or top.

Align Content and Icon - align icon and content on the left, right or center.

Icon Wrapper - select the type of wrapper around icon if you want one. Select between square and circle.

Service Link - add a link.

Design Settings

Box Tool- adjust padding, margins or assign borders and change text color (light or dark).

Style and Distances Custom Icon Size - easily adjust the icon size by dragging the mouse.

Icon Color - select a color for the icon.

Wrapper BG Color - select a background color for the wrapper (if you have chosen a wrapper).

Wrapper Border Color - select a color for the wrapper border.

Add Shadow - switch On to add shadow to icon wrapper.

Custom Wrapper and SVG Size - change Wrapper size by dragging the mouse.

Icon and Wrapper Distance - select the icon and wrapper distance from content.

Distance Title From Top - drag to change the distance of the title from top of element.

Distance between Title and Content - drag to change the distance of the content from title Typography - select one of the predefined title typography styles or select "Custom Font" if you want to edit the typography of Title.

If chosen Custom Font option you can : Drag to change Title Font Size.

Choose Title Font Weight.

Drag to change Title Line Height.

Drag to change Title Letter-space.

Title Text Transform - transform to uppercase.

Select the Title Color.

If you want to modify the typography of content, switch on the Content Typography button. You can : Drag to change Content Font Size.

Change the Content Font Weight Drag to change Content Line Height.

Content Text Transform - to uppercase.

Change content color.

In the end you can also choose an effect for animation, the delay and speed.

Testimonials Testimonials are a great way to encourage trust from your visitors. With our builder you can easily add and setup a testimonial.

There are three ways to add a new testimonial.

First!

The default Wordpress Dashboard > Testimonials > Add New .

Second!

Create a testimonial from the Customizer , go to Theme Options > Testimonials and add a new one clicking on the plus icon.

Than fill the required fields to complete, like shown on the image below.

Third!

From the element directly. When you have added the testimonial element in the page, click on the plus icon to add a new testimonial.

Now that that the testimonial is created, we are going to add it as a new element, on a page section (you can add a testimonial everywhere you want).

The testimonial options include : Carousel Navigation - switch on if you want carousel navigation.

Carousel Dots - switch on if you want carousel dots for pagination.

Categories - select the testimonials categories you want to display.

Items per page - choose the number of items displayed per page (the max number).

Order testimonials by author, title, name, date, modified or none.

Order testimonials by ascending or descending order.

Team The team element is the same as testimonials. You can add new team members in the same three methods described for the testimonials above. From Wordpress Team > Add New . From the Customizer : go to Theme Options > Team and from the element directly, by clicking on the plus icon.

Fill the required fields to complete, like shown on the image below.

Now add team as a new element on any page section you want. There are some pre-created team members that will be shown, including the new member that we created earlier. You can delete the existing members if you wish.

The team options include : Single Team - switch on to show only one team member.

Style - choose between simple or only photo styles.

Layout - choose how many columns you want to display.

Distance between Team Members - drag to adjust the distance.

Carousel - switch on id you want carousel.

Animation - select an animation effect.

Image Size - choose between default, full, blog entry, blog post, portfolio entry, team entry image size.

Categories - select the team categories you want to display.

Items per page - choose the number of items displayed per page (the max number).

Order team members by author, title, name, date, modified or none.

Order testimonials by ascending or descending order.

Adjust margins, paddings and add borders.

Portfolio Portfolios are a must have in your site, even it is a business or a creative one. They represent you. By portfolios the customers are able to create a better version of you.

You can add a portfolio element on every section of your page and customize it endlessly.

Portfolio Options General Options They include everything from portfolio layout, to special filters, alignment, space adjustments and animations.

Overlay Options These options include all the items overlay styles, effects and colors.

For more detailed information about all portfolio options, go to Portfolio Options.

Portfolio Items The Portfolio item options include the item title, slug, status, date, featured image and from here you can also open the Editor and edit the content using shortcodes too.

For more detailed information about portfolio items, go to Portfolio Items.

Codeless Slider Codeless Slider is theme's build-in slider. Add Codeless Slider as an element and built the slider that you always wanted. This is a slider you build on-the-fly, for every page. The main component of it is the ROW. Basically each slide is a row where you can add any available element of a normal row (text, custom headings, buttons, video, image, background image/video.. etc). add as any slides to one slider as you want. Check below these steps showcased with screenshots.

Row - This row is what contains all the content inside a slide. Click on it to open custom row options, where you can add a

background image/video for the slide and set up other settings.

Codeless slider - click on it to open the slider's options.

Current Slider - click to open the current slide's options.

Plus icon at bottom-right - adds a new slide to the slider.

The numbers before the plus icon at bottom-right - represend the slide's numbers. Click on one of the numbers to open that slide.

Codeless Slider Options To fully customize Codeless Slider you should also edit the row and columns settings (if you add other elements inside the slider).

The slider options itself include everything from slider height, buttons, to effects and transitions.

For more detailed information about codeless slider, go to go to Codeless Slider.

Codeless Slider Video Tutorial

Blog Blog can be assigned as the default posts page from the wordpress settings, as you already know. This is one of the first steps to set up a wp site. But blog is also present as a simple element. So you can add the blog element in every page and every section you want. Do not limit the posts display in only one page. Add your posts in other pages too using the "Blog element".

You can now customize it in different styles to showcase the articles in the most effective and nice layout you can.

Blog Options Blog General Options Choose between many blog styles, the grid layout, pagination method, the animation type, add/remove meta data, use an image filter style, set ON Lazyload image style and assing the featured image size.

Carousel Slider Swipe ON to add carousel effect, select the navigation style.

Query Set up how many portst to show, which posts to show based n a simple and clear query, order the posts to your wish and add margin/padding to the blog box.

For more detailed information about setup options, go to Blog Setup.

For more detailed information about all blog options, go to Blog Options.

Clients Clients are an important part to include on a site. Now they come with some extra options.

Clients options include :

Carousel - switch on if you want to display the clients on a carousel.

Clients Images - enter into gallery the clients images.

Items per Row - choose how many items you want per row. You can also choose to display them all in the row.

Style - choose the style of clients. Available options are : Only Image and Overlay Title.

Autoplay Timeout - setup in miliseconds the speed to scroll the clients carousel.

Tool - Adjust the margins, paddings or borders of the clients element.

Empty Space Enter an empty space easily on every page section you want.

Empty Space options include : Space in Pixels - enter the space of it in pixels.

Custom Responsive - Adjust the empty space options on responsive. If chosen you will see how the empty space will appear on phones and tablets.

Custom Space Max-Width: 767 px (Phones) - Is applied only for media screen (max-width: 767 px).

Custom Space Max-Width: 1024 px ( Tablet ) - Is applied only for media screen (max-width: 1024 px).

Counter Counters are a beautiful and helpful element. You can enter a counter on any page section.

Counter options include : Number Counter - enter the the number of the counter.

Animation Duration - enter the counter animation duration.

Align - choose the counter alignment between right, left or center.

Custom Color - swipe ON if you want to assing a different color to the counter.

Adjust the margins, paddings or borders of the counter element.

To fully customize the counter (and any other element) you can edit the Row and Column settings too, especially if you add other elements to it.

Video Tutorial of The Elements - Testimonial, Progress Bar, Counter, Contact Form 7

Progress Bar Progress Bars are a great and effective way to show stats to your visitors. Including them on your page will give a more interactive look to it.

Progress Bar options include : Percentage - drag to adjust the progress bar percentage.

Progress Bar Color - choose a color for the progress bar.

Animation - choose an animation for the progress bar, its delay and speed.

Adjust the margins, paddings or borders of the progress bar element.

Video Tutorial of The Elements - Testimonial, Progress Bar, Counter, Contact Form 7

Google Map Add a Google Map on every section of page. To display a google map first you should have an API key. Get one right here : Get API Key

Google Maps options include :

Api Key - enter the API key that you generated from the link above.

Latitude and Longitude - choose the location you want to display on the map. Open google maps, select the location and right-click on its name.

Select What's Here and a card appears at the bottom of the screen with more info. Click on the info and copy the location's Latitude and Longitude. Paste that on the empty field at google map options. See the image below :

Map Height - set up map height.

Full Height Map - Swipe ON to have the map have a full row height instantly.

Map Zoom - set up the grade of zooming.

Style - select map style from the drop-down list.

Adjust the margins, paddings or borders of the progress bar element.

Video Tutorial of The Elements - Google Map, List, Icons, Toggle

Contact Form7 Add a Contact Form7 in just two clicks : select a page section to enter it, choose its style and your are done.

Contact Form7 options include : Select Form - select one of the created contact forms. Or create a new form manually, at the wordpress backend editor.

Style - select one of the predefined styles (Simple Vertical or Simple Dark) or leave "none" and add your custom style in css.

Adjust the margins, paddings or borders of the contact form element.

Video Tutorial of The Elements - Testimonial, Progress Bar, Counter, Contact Form 7

Toggles Toggles are a great way to organize information and improve user experience on your page.

With our builder you can edit the toggles options as a whole and even choose to edit each of them individually. This option let's you choose if you want to make the toggle active by default.

You can also edit the toggle text individually.

Toggles options include : Style - select one of the predefined styles (simple style) or leave "none" and add your custom style in css.

Accordion - make the toggles element function as a accordion.

Adjust the margins, paddings or borders of the toggles element.

List Lists are another good way to organize information on a page. Include them anywhere you want with our new builder.

With our builder you can edit the list options as a whole and even choose to edit each of them individually. This option let's you choose if you want to choose a custom icon for the list items.

List options include : Type - choose the type of the list. Available options are : Ordered or Unordered.

Style - select one of the predefined styles (simple style) or leave "none" and add your custom style in css.

Distance between items - drag to adjust the distance between list items.

Adjust the margins, paddings or borders of the list element.

Video Tutorial of The Elements - Google Map, List, Icons, Toggle

Icon Icons are more interactive now. You can add icons on most elements and change them with a simple click on them. A full list of icons will be shown for you and you should only choose.

Icons options include : Set the Hyperlink - enter the link you want to be redirected when clicking on an icon.

Set link loading mode - select if you want the icon link to load on a new window, same window, parent window or top window.

Icon Font Size - drag to adjust the icon font size.

Set Color - set the icon color.

Set Hover Color - set the icon hover color.

Icon Alignment - choose the icon alignment (right, left or center).

Set Line Height - drag to adjust the line height.

Adjust the margins, paddings or borders of the icon element.

Video Tutorial of The Elements - Google Map, List, Icons, Toggle

Share Icons Share icons have more options and facilities with the new builder.

Share Icons options include : Add Facebook Share Icon - switch on to add the facebook share icon.

Add Twitter Share Icon - switch on to add the twitter share icon.

Add Linkedin Share Icon - switch on to add the linkedin share icon.

Add Pinterest Share Icon - switch on to add the pinterest share icon.

Add Google Plus Share Icon - switch on to add the google plus share icon.

Add Whatsapp Share Icon - switch on to add the whatsapp share icon.

Set link loading mode - select if you want the share icon link to load on a new window, same window, parent window or top window.

Icon Font Size - drag to adjust the share icon font size.

Set Color - set the share icon color.

Set Hover Color - set the share icon hover color.

Set the border style - set a border around the share icon and choose between Square and Rounded Style.

Border Color - set the share icon border color.

Background Color - set the share icon background color.

Wrapper Size - drag to adjust the share icons wrapper size.

Icon Display Mode - choose how you want the icons to be displayed. Available options are : Inline and Block.

Set Space Between Icons - drag to adjust the space between the share icons.

Icon Alignment - choose the share icons alignment (right, left or center).

Set Line Height - drag to adjust the line height.

Adjust the margins, paddings or borders of the share icons element.

Social Icons Social icons are pretty much similar to the other icon we discussed. Their options are similar too.

Share Icons options include : Add Facebook Social Icon and Set the Facebook icon hyperlink - switch on to add the facebook social icon.

Add Instagram Social Icon and Set the Instagram icon hyperlink - switch on to add the instagram social icon.

Add Twitter Social Icon and Set the Twitter icon hyperlink - switch on to add the twitter social icon.

Add Email Social Icon and Set the Email icon hyperlink - switch on to add the email social icon.

Add Linkedin Social Icon and Set the Linkedin hyperlink - switch on to add the linkedin social icon.

Add Pinterest Social Icon and Set the Pinterest hyperlink - switch on to add the pinterest social icon.

Add Youtube Social Icon and Set the youtube hyperlink - switch on to add the youtube social icon.

Add Vimeo Social Icon and Set the vimeo hyperlink - switch on to add the vimeo social icon.

Add Soundcloud Social Icon and Set the soundcloud hyperlink - switch on to add the soundcloud social icon.

Add Slack Social Icon and Set the slack hyperlink - switch on to add the slack social icon.

Add Skype Social Icon and Set the skype hyperlink - switch on to add the skype social icon.

Add Google Plus Social Icon - switch on to add the google plus social icon.

Add Github Social Icon and Set the Github hyperlink - switch on to add the github social icon.

Add Dribbble Social Icon - switch on to add the dibbble social icon.

Add Behance Social Icon and Set the Behance hyperlink - switch on to add the behance social icon.

Set link loading mode - select if you want the social icon link to load on a new window, same window, parent window or top window.

Icon Font Size - drag to adjust the social icon font size.

Set Color - set the social icon color.

Set Hover Color - set the social icon hover color.

Set the border style - set a border around the social icon and choose between Square and Rounded Style.

Border Color - set the social icon border color.

Background Color - set the social icon background color.

Icon Display Mode - choose how you want the icons to be displayed. Available options are : Inline and Block.

Set Space Between Icons - drag to adjust the space between the social icons.

Icon Alignment - choose the social icons alignment (right, left or center).

Set Line Height - drag to adjust the line height.

Adjust the margins, paddings or borders of the social icons element.

Revolution Slider Add Revolution Slider as an element and start to edit.

Revolution Slider Options After adding revolution slider as an element, you should choose a pre-created one or create a new slider. See the image above.

When clicking on the Select Slider option, you will be redirected to backend editor, where you can start to create a revolution slider or edit the existing.

For more detailed information about revolution slider, go to go to Revolution Slider.

Layer Slider Add Layer Slider as an element everywhere you want and customize it in a few seconds.

Layer Slider Options After adding layer slider as an element, you should choose a pre-created one or create a new slider. Like shown on the image above, you will be redirected to backend editor, where you can create and edit the layer slider.

For more detailed information about layer slider, go to go to Layer Slider.

Blog Page Setup The blog page is one of the wordpress most important and basic pages. It show of a list of all your posts. You can now customize it in different styles to showcase the articles in the most effective and nice layout you can.

There are two ways to assign the blog page for your Wordpress installation.

Wordpress Basic way The old fashioned and wordpress default option to assign the post's page. For this, please go to Settings > Reading . Assign a static page for home and the blog page.

Use Folie options Assign the blog page using solely theme options. To access this option follow the track: Appearances > Customize > Static Font Page . Just as in the default wordpress settings, you get to assign here the home page and the blog page.

Folie Blog Options There are more than 100 options to style and customize your blog page. Scroll down for a detailed specification for each.

Folie Blog Style Post Slider Post Entry Tool Pagination Single Blog

Folie Blog Style Select one of the blog styles that you want to use as a default template. These are the available styles: Default Style

Alternate Style

Grid Style

Masonry Style

Minimal Style

Timeline Style

Boxed (with shadow) Enable if you want to make this style boxed with small shadow around each post.

Animation Type The Animation type controls the way the posts will be loaded into your page when you first open (or refresh) blog page.

Blog Page Layout Assign a sidebar and it's position for the blog. Available options are: Default, Fullwidth, Left Sidebar, Right SIdebar, Dual Sidebar.

Set the exact blog width Set a custom width for your blog in fullwidth layout only.

Set Blog Align As the title implies, this option gives you the option to change the alignment of the blog posts positioning. Available options are: Left, Center, Right Blog Posts Layout Change the layout of blog posts, you can add custom sidebar for posts also. Available options are: Fullwidth, Left Sidebar, Right SIdebar.

Blog Post Style Select one of the blog single post styles. These are the available styles:> Classic Style, Modern Style, Custom Style.

Enable Auto Excerpt If enabled you will see only a small part of content. If disabled all post will show.

Excerpt Length If excerpt is enabled. Here you can specify the exact length of the excerpt to show.

Blog Share Buttons Select Social share buttons that you want to use on blog page. A list of available share buttons will be listed if you click on the gray field. Click on each social you want to add. All the present socials have the share option available. Some social networks do not offer a share facility so they can not be added here.

Blog Overlay Style Select the style of overlay of blog image on hover. Available options are: None, Color Overlay, Zoom and color, Grayscale.

Overlay Icon Select the icon you want to show up on hover of the blog post. Available options are: Plus, Arrow Right, Expand, Image, Lightbox.

Entry Image Link Disable if you don't want that image linked with post.

Blog Page Filterable Will add a filter to your blog based on the post categories. Available options are: Disabled, Small Square, Fullwidth.

Blog Lazy Load Another alternate option to load the posts images in the blog page. The lazy load will load image posts as you keep scrolling down the blog page.

Single Blog Defines some of the settings of the single blog post.

Single Blog Layout Select if to have a sidebar or not in single blog post. Also assign the position of it if you will use a sidebar.

Single Blog Style Select the single blog style.

Single Blog Align Select the single blog layout.

Single Blog width Select the single blog width of main body.

Single Blog Title Margin Top

Add a margin top to title.

Single Blog Title Margin Bottom Add a margin bottom to title.

Single Blog Shares Add the shares icons.

Single Blog Tag Add tags.

Single Blog Author Info Add author info in single post page.

Single Blog Related Posts Add a section of related posts under the current post.

Single Blog Pagination Add pagination to next/previous posts.

Post Entry Meta Will add a bar with additional information for the blog post. Such as post author, date created and categories it belongs to.

Show Author Meta If enabled will show the author of post right after the featured image.

Show Categories Meta If enabled will add the categories list of the post, under the featured image.

Show Date Meta If enabled will add the creation date of the post.

Post Entry Tools Will add a vertical bar with additional interaction tools for the blog post. Such as social shares, comment count and post likes number.

Show Share Buttons If enabled will add the shares icon. Click on it for the full list of available shares for this post.

Show Comments Count If enabled will add a comment icon displaying the number of comments for the post. If clicked on it you can go to the comment section.

Show Post Likes If enabled will add the likes icon. Each visitor can 'like' your post by just clicking on this icon. This will also display the amount of likes a post has gathered.

Pagination Here is where you specify how do you want the blog pagination method.

Pagination Style Select the style of pagination. Available options are: With page numbers, Next/Prev, Load More, Infinite Scroll.

Pagination Align Specify the position of the pagination. You can chose from: Left, Right, Center.

Enable Slider Pagination This option if enabled will add pagination to the slider of posts.

Enable Slider Prev/Next This option if enabled will add the Next/Prev arrows to your post slider. (It will affect only the gallery posts)

Enable Slider Loop This option if enabled will set the post slider in a loop.

Enable Slider lazy Load This option if enabled will set the slider images into a lazy load. Each image will load by the time they will show up. Not since the page loads.

Blog Slider Direction Select the type of styling for the slider images to load. You can chose from: Scroll, Fade, Cube, Coverflow, Flip.

Blog Slider Speed Move the scale to specify the value of slider speed. If left at 0, it will remove autoplay.

Blog Slider In this block of options you can customize the single blog post slider, if you have used any slider in it.

Enable Slider Pagination If enabled, it will add the pagination to next/prev slide.

Enable Slider Prev/Next If enabled, it will add the next/prev pagination.

Enable Slider Loop If enabled, it will make the slider loop indefinitely.

Enable Slider If enabled, it will enable lazy load. A form of pagination where the content of the page will load first and the slider image last.

Blog Slider Direction Select the animation in which the slides will load.

Blog Slider Speed Assign the speed in which the slider will scroll the next image.

Portfolio Portfolio is a kind of that personal space that you want to take care in a special way. It is used to display mainly your works, business or creative ones, but we are going to put something new.

Breaking the rules, our builder lets you add a portfolio as an element on every page section. Even the portfolio items are not the same. They are treated like pages, where you can add any element you want and have your own freedom to built the portfolio you like. There are more than 100 options to style and customize your portfolio page. Scroll down for a detailed specification for each.

Just 2 examples of a portfolio entry.

Portfolio Item Options When adding a portfolio element to the page, some pre-created item will be shown. You can edit them clicking on the little icon located on right-bottom of each portfolio item.

You can add a new portfolio item at : Theme Options > Portfolio Items.

Clicking on the plus icon at the bottom of each portfolio element.

Portfolio Item Format Select the portfolio item format. Available options are: Thumbnail, Slider and Video.

The Layout First you need to choose in what format your portfolio will be displayed : Masonry, gGid, Inline. Select the format on portfolio general options. For every format chosen, the layout of Portfolio item can be : Default, Wide or Large.

Title Enter the title of portfolio item.

Status Select the status of the portfolio item. Available options are : Draft, Pending Review, Private, Published, Scheduled.

Date Enter the date according to timezone.

Content If you wish you can also edit the content of portfolio item with the Editor. Shortcodes are available too.

Featured Image Select the features image of the portfolio item.

Let's add a new portfolio item :

This portfolio item includes a page header, gallery, 2 custom headings and 2 text elements.

Portfolio Element Options Now let's see the Options of the Portfolio as an element. The options are divided into :

Portfolio General Options Portfolio Overlay Options

General Options

Layout Choose the portfolio layout. Available options are : Grid, Masonry, Inline.

Style Choose the portfolio style. Available options are : Classic, Classic Excerpt, Media and Title, Only Media.

Media and Title

Columns Choose how many columns the portfolio items will be displayed.

Columns (Items) Gap Drag to adjust the space between portfolio items.

Image size Choose the images size. Available options are : Default, Full, Blog Entry, Blog Post, Portfolio Entry, Team Entry.

Justify Gallery Calling Justified Gallery, the disposition of all the thumbnails is changed to fill all the spaces (justification). Switch on this option if you want to have an elegant and modern justified gallery.

Justify Row Height Drag to adjust the justify row height.

Justify Item Margins Drag to adjust the justify items margins.

Carousel Switch on if you want items to be displayed in carousel.

Pagination Choose how the pagination form will be displayed. Available options are : Page Numbers, Next/Prev, Load More, Infinite.

Filters Choose the items filter layout. Available options are : Disabled, Small Square, Fullwidth.

Fullwidth

If you choose fullwidth option you can also choose : Filter color type - light or dark.

Fullwidth filter with shadow - display a shadow.

Fullwidth filter sticky - switch on if you want a sticky filter.

Filter Align Choose the filter alignment, Available options are : Left, Right, Center.

Images Filter This is definitely new! Choose an filter for the portfolio images. This works like instagram : choose a cool filter for the images.

Now your portfolio can have it too. Available options are : 1977d, Aden, Brannan, Brooklyn, Clarendon, Earlybird, Gingham, Hudson, Inkwell, Kelvin, Lark, Lo-fi, Maven, Mayfair, Moon, Nashville, Perpetua, Reyes, Rise, Slumber, Stinson, Toaster, Valencia, Walden, Willow, X-Pro.

Image Filters

Boxed Style Switch On if you want to add a boxed shadow. Works only on Classic and Classic with Excerpt.

Animation Choose an animation effect.

Categories Choose the categories of the items.

Items per page Choose the number of items per page.

Order By Choose how do you want your portfolio item to be ordered, Available options are : Post ID, Author, Title, Name, Date, Modified.

Order Choose the order of items. It can be ascending or descending.

Overlay Options

Style Choose the style of the portfolio items overlay. Available options are : Color Overlay, Zoom and Color, Grayscale Hover, Two Icons.

Layout Position of content into the overlay ( icons, title, tags ). Available options are : Center, Icon Top/Content Bottom, Content Top/Icon Bottom.

Show Title Switch on if you want to show the title of the portfolio items.

Title Style If the title is enabled, choose the style of it. Available options are H1, H2, H3, H4, H5, H6.

Show Categories Switch on if you want to show the categories of the portfolio items on overlay.

Show Icon Switch on if you want to show an icon on overlay.

Icon If Show Icon is enabled you can choose here the style of the icon. Available options are : Plus, Arrow Right, Expand, Lightbox, Lightbox amp; Link.

Distance Drag to adjust the distance between portfolio overlay and photo corners.

BG Color Choose the background color of the overlay.

Overlay Bg Color Choose a gradient as the overlay background. Available options are : Azure Pop, Love Couple, Disco, Limeade, Dania, Shades of Grey, Dusk, Delhi, Sun Horizon, Blood Red, Sherbert, Firewatch, Frost, Mauve, Deep Sea, Solid Vault, Deep Space, Suzy.

Content Color Choose the content text color between light and dark.

Content Animation Choose an animation for the content.

Another item overlay customization.

Have fun with your new portfolio !

Header Setup Create a menu To set up your header you need to have first a menu. After the first install, based on the demo you have selected to install, there will already imported a default menu. But supposing these steps did not take place and you have to set up header from scratch, these are the steps to take.

First you will have to create a menu. To do so please go to your admin options panel. Access it from Appearance > Customize .

Scroll down to the Menus option.

Go to Add a Menu option and proceed in creating your first menu.

Assign a menu After successfully creating the menu, you will see it listed in the Menus options. Go to Menus > Menu Locations . Select Folie Main Navigation from the dropdown list. Save changes.

Header Options After successfully setting up header menu, you can now proceed in styling it. For this, here is the section to check out. Header Layout, global header options. This is the section containing all the necessary options to configure and customize your website header. Check below for a list of all available options functions explained.

For more details go to Header Options menu

Header Styles Examples: Default Header Style

Fullwidth Header Style

Fullwidth Header Style, opened

Centered with Underline Header Style

With button Header Style

Header with Top Navigation

Side Header Style

Mega menu The mega menu is one of the most used menu styles. It allows you to include a great number of pages in one single menu item and grouping them into columns. To use the Mega Menu with Folie theme, you have to set it up using Wordpress default menu options.

Go to your Appearance > Menus . Select the menu you want to edit, open the menu item that will be used as mega menu column and check the Check if you want to use this item as megamenu option. Proceed in adding other menu items under it to populate the mega menu column.

Example of a Mega menu.

Menu Options In this section you can edit out your menu.

Edit current items navigation labels and linked pages by clicking on the triangle icon at the right.

-Reorder current items using the Reorder option.

-Add more items by clicking on the Add Items .

-Set current menu as theme's main menu by checking the Folie Main Navigation checkbox.

- Automatically add new top-level pages to this menu by checking the checkbox in Menu options.

Footer From bold and interactive footer, to simple and clean one, our builder takes good care for the Footer section too. You can add any widget you want on it and customize the style to fit your requirements.

Footer Options Find the footer general options at Theme Options > Footer .

For more details go to Footer Options menu

Sliders Sliders are a powerful elements of every website, they are used to display important content to catch the users attention. Folie includes 3 sliders: Revolution Slider, Layer Slider, Fusion Slider. We also include other slider types for pages/posts and carousels. Each slider can be used on any page or post and has its own set of unique options. below are listed the sliders options and the instructions how to use them.

How to add a slider Importing demo sliders Codeless Slider Revolution Slider Layer Slider How to update premium sliders Purchase code for sliders Other sliders

How to add a slider Sliders can be added in any part of the site, as elements. Search them at the list of builder elements. See the below screenshot:

The available options for slider are the same as for any element: Edit slider options, Clone slider, delete slider and drag and drop it anywhere is site.

Importing demo sliders Except for Codeless Slider which is incorporated in theme, the other sliders (Revolution Slider) dummy data can be imported right after theme activation at Theme Setup. You can import slider dummy data any time manually at Revolution Slider (or Layer Slider) panel options. The slider dummy data filer are included in theme package (the one you download from Themeforest) at "slider_dummy_data" folder.

How To Import Revolution Slider sliders The Revolution Slider allows you to easily export/import your slides. It's always a good idea to backup your slides so you can easily import them again if you ever need to.

Step 1 - Go the the Revolution Slider menu tab in your WordPress Admin, and click the Import Slider button.

Step 2 - Choose the .ZIP file of the slider you'd like to import. The slider dummy data are included in theme package at folder 'slider_dummy_data'.

Step 3 - Click the Import Slider button, and wait for it to finish uploading.

Step 4 - Once it's finished uploading, you will now see your imported slider in the list of Revolution Sliders available.

Codeless Slider Codeless Slider is one of our important elements and features. The first Slider that can be edited directly live on the page and you can also check how it will look with the rest of the theme.

How to create a slider with Codeless Slider Please follow the instructions below to create an amazing and simple slider with Codeless Slider.

Step 1 Add codeless slider by clicking at the gray balloon which appears on hovering the row in Visual Builder. Click at codeless slider icon to view the slider options in the right panel. The available options for the codeless slider are: slider height, full height slider, previous/next buttons (on/off), pagination buttons, effects, direction, transition speed, delay, loop, mousewheel. (See the first image below).

Step 2 Click at row containing the slider and see the row options at the left panel. Go to Design -> Background Image and upload an image. You will see the image displayed at the left panel of the screen. This is the slider image.

Step 3 At this point you can add some content in slider. Click at the gray balloon that appears in column insider slider and add any element you want. For a simple slider usually can be used Custom Heading element. Select the options of this element on Customizer panel.

Step 4 We have added a button in the below example. Click at button edit icon and select the button options in customizer. The deafult button will be displayed. To further customize it, swipe ON the Overwrite the default button style option.

Step 5 Add another slide by clicking + button at the right top angle of codeless slider element. You can clone the created slide and change only the text in second slide.

Codeless Slider Video Tutorial

Revolution Slider Folie includes the most popular and best seller Slider Revolution Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. Here we have outlined the most important features and instructions but you can find the full slider documentation at the official plugins page.

Revolution Slider Documentation

Purchase Plugin For Auto Updates

We have included a copy of the plugin in our theme. To receive auto updates of the plugin you must purchase it separately.

How To Create A New Slider Revolution Slider Step 1 – Click on the 'Slider Revolution' menu on your WP admin main navigation. At slider panel, click the 'New Slider' button.

Step 2 – Select the content source type from the 1st section called 'Content Source'. Read the Revolution Slider Documentation for more info about content source types.

Step 3 – Insert a slider name and alias from the 2nd section called 'Slider Title & Shortcode'. The alias text will generate a shortcode that can be used in the editing field of pages or posts.

Step 4 – Select a layout at 'Select a Slider Type' section and each type will have its own settings. If you've selected a Slider Type, you can also choose to load a preset from that Slider Type.

Step 5 – Set the layout and resolution settings at 'Slide Layout' section. Here, you can set different heights and widths for your slider when viewed on different mobile screens or viewports.

Step 6 – On the right side panel, you'll find many more options you can set for you slider, such as General, Layout & Visual, Navigation, etc.

Step 7 – If you have finished setting the options, click the button 'Save Settings' at the very bottom of the page, or the green save icon on the top of the screen.

How To Add Slides To Your Slider Step 1 – Go to the Slider Revolution menu on your WP admin main menu navigation and select the Slider you'd like to add slides to from the Slider Revolution section.

Step 2 – Click the 'Add Slide' button and select the type of slide you'd like to add. It will create a new blank slide.

Step 3 – You can change the title of your new slide by clicking the name field. Enter your new name, then click the pencil icon right beside it to save your new slider name.

Step 4 – Find these tabs and choose the options you want: Main Background, General Settings, Thumbnail, Slide Animation, Link & SEO, etc. We won't go into detail on what each option in these tabs do, you can check the Revolution Slider documentation for more info.

Step 5 – Below the page is the Slide Editor. To add a new layer, hover over the blue 'Add Layer' button on the top left side and select which type of layer you’d like to add. You can add a Text/HTML layer, an Image layer, a Video layer, a Button layer, a Shape layer, etc.

Step 6 – Once you add a layer, You can customize it further by using the tabs on top of the canvas. These tabs are the Style tab, Animation tab, Loop tab, Visibility tab, Behavior tab, etc.

Step 7– Once finished, click the green save icon on the upper right part of the screen. Repeat this process for any new slides you'd like to create.

How to add Revolution Slider in pages

It's very easy to add revolution slider in every part of the page using Visual Builder. You can find it at the list of elements.

Revolution Slider element has the same options as all the elements, it can be deleted, cloned, moved with drag and drop anywhere on page.

Layer Slider Folie includes the popular Layer Slider Created By Kreatura. It is slider for creating image galleries, content sliders, and slideshows with must-see effects, even from your WordPress posts and pages. Below we have described how to cerate a slider with Layer Slider and how to add it on page. For more info about Layer Slider please read the Layer Slider documentation.

Layer Slider Documentation

Purchase Plugin For Auto Updates

How To Create A New Layer Slider Step 1 – Click on 'Layer Slider' menu on your WP Admin main navigation, then click the 'Add New' button on the top of the page, give the slider a name, then click 'Add Slider' to add it to the list.

Step 2 – The 'Slider Settings' tab will open and allow you to set the general settings for your slider: the width, height, responsive, full width, and more.

Step 4 – Once you are done, click 'Save Changes' to save the slider. Next you can add slides, see the information below.

How To Add Slides To Your Slider Step 1 – Open the Slider you'd like to add slides to, then click on the 'Slides' tab at the top of the page.

Step 2 – The first slide will already be created. Add a background image for the slide, set thumbnails, transitions, links and more in the Slide Options box above the Slider Preview window.

Step 3 – Each slide you create can have multiple layers added to it. The layers show up below the slider preview window. Click 'Add New' to create a new layer. An editing section will display once clicked.

Step 4 – Click the 'Enter Preview' button to view a preview of the slider and layers.

Step 5 – When finished, click the 'Save Changes' to save it.

Step 6 – Add more slides by clicking the '+' icon.

How to update the premium sliders When you purchase Folie theme (any other theme) that bundles Revolution Slider and Layer Slider you get to use these Sliders with the theme. However, your purchase of Folie does not give you an individual license for the Revolution Slider and Layer Slider to use or download as you wish. Due to license rules, we can only issue new plugin updates when we issue new theme updates.

So anytime Folie is updated, the latest plugin for the Revolution Slider and Layer Slider will be included. This is according to the licensing rules enforced by Envato, and is something out of our control and must abide by. We ensure that the included plugin updates don't have any critical bugs, or conflict with our own update.

How to get auto plugin updates Due to the license rules, the only way to get automatic plugin updates is to purchase the plugins individually through CodeCanyon. Doing this provides you with a regular license for the plugin and a purchase code that can be used for Automatic Plugin Updates.

Purchase Revolution Slider

Purchase Layer Slider

Purchase code for sliders The Folie purchase code cannot be used to register the Revolution Slider or Layer Slider

When purchasing Folie, you'll be provided with a unique Purchase Code that you can use to receive auto-updates, theme support and demo installation. The purchase code you receive can only be used for the Folie theme, not for the included 3rd party plugins. The 3rd party plugins that come with Folie can still be used and used as the plugin advertises, however since they are bundled with the theme they can only be used on your Folie site, and do not come with their own individual purchase code that allows you to receive premium support/features from the individual plugin author. We provide support for the plugins included in our theme.

You can only register the Layer & Revolution Slider plugins if you have purchased them individually from CodeCanyon . The status of the plugins state that the site is not authorized to receive updates, this is no cause for alarm. Rest assured that these messages can be ignored and that with every new version of Folie we release, we always make sure to include the latest available versions of the plugins that come bundled with the theme.

Other Sliders Aside from the amazing Premium Sliders included in theme, Folie also features various other slider types such as Portfolio and Blog Post Slider, Image Carousels, WooCommerce Featured Products Slider, and finally, the WooCommerce Products Slider.

Continue reading below to learn more about our other Slider types.

Plugins Plugin Installation Folie requires one essential plugin to operate. This is the Codeless Builder plugin. Codeless Builder is a plugin created and developed from Codeless team, so you won't be restricted from any feature or security issue from not being able to update on your own. Like ususally happens with other included plugins developed from other authors. Folie also comes with two premium plugins; the Revolution Slider, and the Layer Slider. We also recommend several plugins that we use for various demos that only need to be installed prior to importing a demo which uses one or more of these plugins. All these plugins can be accessed via Folie > Plugins folder.

List of the included plugins: REVOLUTION SLIDER 5.4 - Slider Revolution is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way VISUAL COMPOSER 5.1 - Folie works also with Visual Composer plugin. The plugin its included within the theme.

ENVATO TOOLKIT - The Envato WordPress Toolkit plugin lets you view your ThemeForest purchases within the WordPress dashboard CONTACT FORM 7 - Contact Form 7 can manage multiple contact forms, plus you can customize the form.

WOOCOMMERCE - The most customizable eCommerce platform for building your online business WPML TRANSLATE - WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.

ILIGHT BOX - iLightBox allows you to easily create the most beautiful overlay windows using the jQuery Javascript library.

LIVE PHOTO - Live photo can be added for the first time in a WordPress theme. Folie have integrated the Apple api to make it simple

How to install plugins How to update plugins using Envato Toolkit or Envato Market plugin

These two plugins are created both by Envato and serve for the same purpose. They help you take track of the available updates of theme and all the plugins you have purchased from Envato. You can update them by one click. The later one is a follow up of the first plugin and will also replace Envato Toolkit in a near future. So we strongly suggest to install Envato Market plugin.

Step 1 – Go to Envato Toolkit plugin option panel:

Step 2 – Enter your Envato Username and Secret API key. To generate an API key, select Settings from the Envato account dropdown, then navigate to the API Keys tab. Multiple API keys can be generated so it is recommended to use one per application.

Step 3 – Back in Wordpress, Click 'Save Settings'.

Step 4 – There will appear a new tab 'Themes'. Find Folie theme there and click update. Then wait some seconds.

Step 5 – Last, update the included plugins. You will see a notification message letting you know the plugins that have a new version and need to be updated. Follow the on screen steps.

To use the Envato Market plugin, follow this tutorial.

Common errors The included premium plugins won't install: If you get the "Plugin install, not successful. Source file not found" error, than make sure you are installing plugins from the parent theme. In case you are already working on a child theme, just switch back to parent for the time being. Install included plugins and switch back to child theme. If the 'Update' button on the included Premium plugins (Revolution Slider and Layer Slider) is grayed out, this is because you have to register your purchase via Token Registration first. Once you’ve registered your purchase successfully, you’ll be able to activate and update these plugins.

When i activate the plugins, the site crashes: This may be due to your server's PHP configuration limits and will require that these configurations limits be increased. For most, these limits can be increased without having to contact your hosting provider. However, in rare cases some hosts can restrict manual intervention and that will require you to contact your hosting provider to increase the limits for you.

Consult your host provider on how to update the PHP configuration limits.

HOW DO I UPDATE THE PREMIUM SLIDERS? Folie does include updates for our premium slider plugins (Revolution Slider and Layer Slider) however, this does not mean that you will receive an individual license for these Premium Sliders. Due to Envato's licensing rules, we can only issue updates for these plugins when we issue a theme update. This also ensures that we fully test the plugin to make sure there are no critical bugs that will conflict with our own update. But you can not update it on your own terms with this type of license. If you want to buy a license by yourself this is allowed, but we thought that this isn’t needed because the version included works perfectly. You are free to make the choice that best fits your needs.