# Fortuna - Premium Wordpress Template

Support Forum Online Documentation

# Fortuna Documentation

- Introduction
- Installation
- Theme Installation
- Plugin Installation
- Demo Content Import
- Theme Options Import
- Widgets Import
- Theme Setup
- Logo Upload
- Menu Setup
- Header Setup
- Main Color Set
- Theme Options (General)
- Fonts/Typography
- Footer Setup
- Sidebars
- Widgets
- Page & Post Creation
- Creating Pages (Rows & Columns)
- Page Elements
- Shortcodes Dropdown
- Page Settings
- Setting a Home Page
- Creating Posts
- Creating a Blog Page
- Portfolio
- Creating Portfolio Items
- Portfolio Item Templates
- Creating a Portfolio Page
- Contact Page
- Creating Contact Forms
- Default Contact Page
- Custom Contact Pages
- Plugins
- Visual Composer
- Parallax & Video Backgrounds for VC
- Revolution Slider
- Contact Form 7
- Really Simple CAPTCHA
- Woocommerce
- Theme Customization
- Child Theme
- Custom Styles - Global
- Custom Page CSS
- Helper CSS Classes
- Raw JS on a Page
- Extra
- Updating Fortuna
- Version Log

## Welcome to Fortuna Documentation

Please check the online documentation for Version information and the latest version of this Document
Thank you for purchasing Fortuna Wordpress Theme! In this document you will find information on how to install, manage and update your theme, as well as create content, install plugins, import Demo data etc. For the latest version of this Document please visit the Online Documentation.

## Theme Installation

Once you purchase Fortuna from Themeforest, you can download the theme package. After you UnZIP the package you will find the theme file in it - fortuna.zip. There are 2 ways to install your theme, both are described step by step below.

### Installation via Wordpress

Step 1 - Login to your Wordpress Dashboard
Step 2 - Go to Appearance > Themes. Click the Add New button or Add new theme link. (check screenshot below)
Step 3 - Click on the Upload Theme button. Locate "fortuna.zip" and click Install Now.
Some webservers have a limitation for the maximum allowed size of files being uploaded to them and that value may be exceeded by the theme file. If that is the case you can receive an error that states: The uploaded file exceeds the upload_max_filesize directive in php.ini. or Are you sure you want to do this? Please try again. If you get any of these errors please increase the values of upload_max_filesize and post_max_size directives in your php.ini file to 20M or follow the Installation via FTP section described below.
Step 4 - Click on the Activate button to activate Fortuna. Congratulations, you have now activated Fortuna! You can now proceed with Fortuna's Plugin Installation.

### Installation via FTP

Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).
Step 2 - Locate "fortuna.zip" that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named Fortuna with all theme files in it.
Step 3 - Locate your Wordpress installation and upload the theme directory Fortuna (you unzipped in the previous step) into ../wp-content/themes/ in your Wordpress installation.
Step 4 - Click on the Activate button to activate Fortuna. Congratulations, you have now activated Fortuna! You can now proceed with Fortuna's Plugin Installation.

### Migration from another theme

If you are migrating from a different theme you need to make sure you resize the previously uploaded images in order to be able to reuse them with Fortuna. Luckily you have a great tool for this - a plugin that does it automatically for you - install Regenerate Thumbnails plugin and run the resizing procedure.

## Plugin Installation

Once your theme is installed you will get a prompt at the top of your Dashboard that will ask you to install Fortuna's plugins. The Theme requires only Fortuna Portfolio CPT and WPBakery Visual Composer plugins in order to operate, but it recommends the installation of Parallax & Video Backgrounds for Visual Composer, Revolution Slider, Contact Form 7, Really Simple CAPTCHA, Custom Post Template plugin and WordPress Importer as well. Read more on the separate plugins in the Plugins section.
Step 1 - Click on the Begin Installing Plugins links
Step 2 - Select all plugins that you wish to install (Selecting all of them is recommended).
Step 3 - Change Bulk Actions drop to Install then click Apply in order to install the selected Plugins.
Step 4 - Make sure all required plugins are installed and Active so you can move on to importing Demo data or create your own pages/menu as well as setup your Theme, Menus, Widgets etc.

## Demo Content Import

Once you have installed all theme Plugins you can import the Fortuna Demo Content.
Step 1 - Go to Tools > Import in your Dashboard.
Step 2 - Click on Wordpress then Choose file and locate within the Fortuna package you unzipped: DemoData/fortuna.wordpress.2015-09-04.xml. Click Upload and Import.
Step 3 - Click on the drop down next to "or assign posts to an existing user" and select admin user in order to assign the imported data to your user then check the checkbox below Import Attachments and click on Submit. Importing the Demo Data along with all theme images may take awhile depending on your hosting provider, server load & location (up to several minutes) so please be patient and wait until the process finishes.
Step 4 - Done! Let's continue with setting your: Menu, Logo, Widgets, Homepage & Theme Options.

### Importing Other Demo data

For info on Importing your Theme options check the next section (Theme Options Import), for importing your Demo Revolution Sliders go to Revolution Slider Section.

### Errors on import

You should run the importer only once. Should any errors occur during the import you need to reset your WordPress before you run it again. Use this plugin to reset the WordPress database. You can also remove your imported files as a second import will duplicate those, go to your \wp-content\uploads folder and delete all subfolders created in there.

### Troubleshooting

If your Demo importing failed this is most likely due to your server resources being limited by its configuration - most commonly these are: max_execution_time and memory_limit . If working on a localhost increasing those limits is easy - simply head over to your PHP.ini configuration file, find where those directives are located and increase them to for instance:

    max_execution_time = 180

    memory_limit = 256M

If you'd rather stay away from your PHP.ini file you can add this code to your 'wp-config.php' file (found in the root of your WP installation) until you manage to import your data, it will also increase your max execution time and memory limits at runtime:

    set_time_limit(180);
    define('WP_MEMORY_LIMIT', '256M');

If none of those work and you are using a hosting somewhere you can always ask them for a quick assistance with this via their Live Chat or Support Phone. It's your right to ask for these updates as you paid for their service and they usually react timely upon similar requests.

## Theme Options Import

Once you have successfully imported your Demo Data you may decide to import the Demo Theme Options. These include all options that go under Fortuna Options in your Dashboard, like Logo, custom colors for your navigation, Header social icons, Footer icons, custom Sidebars etc.
Step 1 - Go to Fortuna Options > Import Options in your Dashboard.
Step 2 - Copy the code below and Paste it in the Import > Theme Options field.

Step 3 - Click on Import Theme Options button.
Step 4 - Done! You can now go to your Fortuna Options and further customize the imported Theme Options.
You can also use the Export feature to export your Theme Options when working on a test environment for example and you want to migrate your Theme Options to another WP installation.

## Widgets Import

Once you have successfully imported your Demo Theme Options you can also import the Demo Widgets. Please note that importing the Demo widgets requires prior import of Demo Theme Options as it imports 2 custom sidebars that accommodate a few widgets (Contact Sidebar & Shortcodes Sidebar).
Step 1 - Go to Plugins > Add New in your Dashboard.
Step 2 - Find the "Widget Importer & Exporter" plugin via the "Search Plugins" field, install it and Activate it.
Step 3 - Go to Tools > Widget Importer & Exporter. Click on Choose File and locate the Demo Widget Export file within the Fortuna package you unzipped: DemoData/Widgets/fortuna_export-widgets.wie. Click Import Widgets and you are Done!

## Logo Upload

Follow the steps below to upload your own logo to Fortuna Theme.
Step 1 - Go to Fortuna Options > Header > Main in your Dashboard.
Step 2 - Click on Upload Logo Plus Button then upload your Logo Image file.
Step 3 - Uploading a Retina logo and favicon are optional but you can do so below the Upload Logo option - Upload Retina Logo and Upload a favicon image
Step 4 - If you are to use Transparent Headers on any of your pages like we do in the Demo you may want to upload a Transparent Header version of your logo. In the Demo we have uploaded a white logo so it is visible on dark backgrounds, you can upload that under Fortuna Options > Header > Transparent Header. You can also choose from a couple of Transparent Logo Transition Effects, we have Flip by default but you can also choose Fade.

## Setting up your Menus

Your Menus are managed under the Appearance > Menus section. This is where you create/manage your custom menus and assign them to specific locations. Styling your main navigation takes place under Theme Options > Header and Appearance > Customize (read more on styling below).

### Set Demo Data Menu

If you have imported the Demo Data and you want to see the Demo data menu as your Main Navigation all you need to do is assign the Fortuna Main Navigation to the Main Navigation Slot.
The default Demo Menu has been reduced to fewer items (mainly some menu items from the Megamenu dropdown have been removed) as otherwise the Menu becomes too big for regular webserver settings and upon saving some items get truncated. Scroll down and read more in the Problems when Saving section.
Step 1 - Go to Appearance > Menus and click on the Manage Locations tab.
Step 2 - Next to the Main Navigation slot select the Fortuna Main Navigation from the drop down and click Save Changes
Step 3 - Done! Go to your website frontend, you should now have the Demo Data menu assigned to your main navigation slot (in your header).

### Create a Menu

If you want to create your own Menu then assign it to a specific location (Main Navigation or add it via a Widget to the Sidebar or Footer for example) you can follow these steps.
Step 1 - Go to Appearance > Menus and click on create a new menu.
Step 2 - Name your Menu and click on Create Menu. Then use the tool to the left to add items to your menu and save it.
Step 3 - Once you have created your menu you can assign it to a specific slot in the Manage Locations tab. By default only the Main Navigation area is available here.
If you want to add Menus to your Sidebars/Footers you can do so under Appearance > Widgets by adding a Menu widget to the widget area of your choice then selecting the specific menu you want to use there.

### Style your Main Menu

Styling your main navigation takes place under Theme Options > Header and Appearance > Customize.
Step 1 - Go to Theme Options > Header > Main Navigation. You can edit big set of your menu navigation options here, they are rather self explanatory. You should feel free to experiment with them and come up with the best output result for you.
Step 2 - Go to Appearance > Customize. This is where you set your Main Menu style Preset and your Navigation accent color(used for top border of your submenus as well as Hover BGR color for the submenu items). This screen is used instead of the regular Theme options in order for you to preview the results of your selection realtime on your page (to the right of the screen).

### Create MegaMenus

Creating MegaMenus is very similar to creating a regular multilevel menu, in fact all you need to do to create a MegaMenu from a regular menu is add a few classes to the top level Menu item. Let's explore the Fortuna Demo for example. We have a megamenu under the "Features" item. To achieve that we have added the CSS classes: "megamenu" and "mm-col-4" to that item.
Step 1 - Make sure the Screen Options > CSS Classes is checked so you can add CSS classes to your Menu items.
Step 2 - Add these classes to your top level menu item that will accommodate your Megamenu: megamenu mm-col-4. The class mm-col-4 forces the Megamenu to be split into 4 columns, if you want 2,3,5 or 6 columns add as follows: mm-col-2, mm-col-3, mm-col-5 or mm-col-6 instead.
Step 3 - Create one extra Menu item to parent each column menu items. For example in the example below we have a Megamenu under the Features top level item. We have the Mega Menu split into 3 columns (because of the mm-col-3 class) and we have 3 menu items (Shortcodes, Shrtcodes cont. & Features) below the top level item Features. Those 3 will appear as headings in the MegaMenu columns. If you want to hide the heading of a column you can do so by simply adding a mm_hide class to the column Parent item.

### Adding Icons to Menu Items

Adding icons from the Theme Icons to your Menu items is pretty easy. All you need to do is add an extra i element to the label with classes: "icon" and the class of the icon you want to place, for example "icon icon-font". So for example the label for a Menu item "Navigation" with an icon in front would look like:

    <i class="icon icon-font"></i>   Headings

### Adding a Button to your Main Navigation

Adding a button to your Main navigation similar to the Buy Theme button in the Demo is rather easy. Simply add the "boc_nav_button" class to your Top level Menu Item you want to transform to a button.

### Problems when Saving

If you are having trouble saving your Menu items this is most likely due to large Menus that exceed the limit of your webserver's default submitted variable size limitation (submitted $_POST array). The PHP directive max_input_vars was introduced in PHP 5.3.9 and the real issue is that this directive has a default value of 1000. That’s a limit of around 60-80 menu items. You will know this limitation is taking place on your server if some of your menu items get lost upon saving and output in the front end is weird. What you need to do is simply increase your webserver's default submitted variable's size limitation thus your menus won't get truncated. You need to edit your php.ini server configuration file and increase the value of "max_input_vars" to 3000. If the variable doesn't exist in the file you can add this line to the file whick will overwrite the initial setting:

    max_input_vars = 3000

How do you edit php.ini? That depends on your host. If you have access to the php.ini file, simply add or edit the directive, save, and restart Apache. If you’re with a web host that doesn’t give you access (common with shared hosting), you may have to contact your host and have them make the change for you.

## Header Setup

This section describes how to setup your Fortuna Header, style your Subheader, style your Transparent header.
Step 1 - Go to Fortuna Options > Header > Main in your Dashboard. Here you can manage you main Header options.
Step 2 - Go to Theme Options > Header > Subheader. Here you can manage the top part of the header (the one that contains the contact email and phone number as well as social icons in the Demo version of the Theme.
Step 3 - Go to Fortuna Options > Header > Transparent Header. Here you can manage the Transparent Header settings. Transparent Headers are activated on a per page basis. Read more on that in the Fortuna Page Settings section.

## Main Theme Color

Fortuna lets you set a global website color that most accent colors will inherit.
Step 1 - Go to Appearance > Customize in your Dashboard.
Step 2 - Click on Colors and select your desired Theme Color. The Customize section lets you preview Live the changes on your website even before you have saved.

## General Theme Options

The Fortuna Options section includes many more custmizations apart from the Header/Subheader/Menu options that provide your final product's uniqueness.
Step 1 - Go to Fortuna Options > General in your Dashboard.
Step 2 - Customize your General Theme Options globally here, manage your Wrapper Style, Background color, Background Image, Responsive Design, Retina Support, Smooth Scroll option, Preloader Animation - Spinner Icon, Page Heading Style, Breadcrumb Options, Image Edges styles. You can customize some of these on a per Page basis under Fortuna Page Settings (read more in the Page Settings section)

## Setting Theme Fonts

Fortuna Options provide a whole section dedicated to setting your Fortuna theme Fonts. Follow the steps below to add additional fonts to your website then assign them to where you want them applied.
Step 1 - Go to Fortuna Options > Typography in your Dashboard.
Step 2 - Click on the Add Google Font button. Select a Google Font from the drop down list that you want to add to your website('Montserrat', 'Lato' and 'Droid Serif' ship with the theme so you don't need to add them). Once you do the available styles for that font will automatically be loaded below so you can add the ones you are willing to use. Some fonts have tons of styles, extra glyphs, encodings etc. that you may not need, thus saving on your page load time if you only pick the styles you want to include. Once you have added all the fonts you need click on Save Changes.
Step 3 - You can now assign the fonts added to your website to the following elements: Main Navigation, Main Sub-Navigation, Heading Font (for all your website headings), Body Font(general website text), Button Font(all your buttons). Along with the Font-family you can assign the font-styles, font-weight, letter-spacing and text-transform for each specific area. Make sure if you want for example a font-weight of 700 that you have added that specific style to the font in the previous section and that the font also supports it at all.

## Footer Setup

Fortuna Theme offers a flexible footer with up to 4 widget areas that you can customize anyway you please. You can also pick a color preset for it as well as set your Copyrights text and footer unrolling effect. Add any social icon you want to your footer as well with just a few clicks.
Step 1 - Go to Fortuna Options > Footer in your Dashboard.
Step 2 - Modify your footer Theme Options anyway you please.
Step 3 - Adding widgets to your footer widget areas is pretty straightforward, please check the Widgets section to find out how to add them.

## Sidebars

You can customize your global Sidebars and Post/Page Sidebar Layouts under the Fortuna Options > Sidebars section. By default Pages have no sidebar globally and Posts have a right sidebar. You can change this by clicking on one of the other Layout icons (check screenshot below).
This is also the area where you add new sidebars. Click on Add New under Create Sidebars, name your new sidebar and click Save. It will now be available for your to edit and appear under the Widgets area (check next section - Widgets).

#### Overwriting Layouts for Specific Pages/Posts

You can overwrite the global sidebar layouts on a per Post/Page basis while editing your Page/Post under the Fortuna Sidebar Settings.
Check the next Widgets section to see how to add custom Widgets to your Sidebars.

## Widgets

You can customize your sidebars and footers with Fortuna easily by adding custom widgets to your widget areas (Sidebars/Footer columns). By default Fortuna comes with the following widget areas: Fortuna Default Sidebar, Footer Widget 1, Footer Widget 2, Footer Widget 3, Footer Widget 4, WooCommerce Sidebar, WooCommerce Product Page Sidebar. Your Blog page and posts use the Fortuna Default Sidebar by default. You can change the sidebar on a per Post/Page basis, for more on how to create new sidebars and how to assign different sidebars for specific pages check the previous section - Sidebars.

### Adding widgets

Step 1 - Go to Appearance > Widgets in your Dashboard. You will see your available Widgets to the left and your available Widget areas to the right. Your Custom Sidebars you have created under Fortuna Options will also appear to the right as well as the Footer Widget Areas.
Step 2 - Drag Any widget you want to add to a Widget Area from the left section onto the right and into the Widget Area box you are going for.
Step 3 - You can further customize your widgets by clicking on them if they support extra customization.

### Fortuna Specific Widgets

Fortuna ships with a few custom widgets:
Fortuna - Contact Info - Use it to display contact info into your Sidebar/Footer column.
Fortuna Latest Posts - Use it to display a number of latest Posts into your Sidebar/Footer column.

## Creating Pages

Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the Visual Composer plugin the theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Follow these simple steps to create a Page with Fortuna:
Step 1 - Go to Pages > Add new in your Dashboard. Add a Title to your Page (top field).
Step 2 - Switch to Backend Editor if you are currently under Classic Mode (button below Title field).
Step 3 - Start adding page content by clicking on the Plus button or Add Element.
Step 4 - The Add Element Popup appears, click on the first element in order to add a new Row to your page. A Row is a main building block of a page, you can split your Rows into Columns, place various elements into your rows, set Row Backgrounds, effects etc.
Step 5 - Once you have the new Row added to your page you can split that Row into Columns in order to organize elements nicely in it. Once you split your Row into column you can start adding different Page Elements into your columns. If you want to edit your Row/Column Settings click on the small Pen icon (top right corner of the Row/Column). You can also Duplicate your Row with the Icon (duplicate icon) next to it or Remove the Row/Column with the icon to the right (trash bin icon).

### Row Settings (General)

Step 1 - Click on the Edit Row button (Pen icon, top right of the Row). You will see the Row Settings Dialog popup.
Step 2 - Set your Row stretch setting.
Default will have your Row to follow your regular wrapper content width and the content within the Row to go into the center.
Select Stretch Row if you want your Row to go full width on your screen and the content to go into the center along with the regular wrapper content width - useful when you want content in the center but you want a full-width background of your row.
Select Stretch Row and Content if you want your Row to go full width on your screen and the content to go flow full width as well outside of the regular wrapper content width but with some padding to the sides - useful when you want content to flow full width of your screen and you want a full-width background of your row.
Select Stretch Row and Content (no paddings) if you want your Row to go full width on your screen and the content to go flow full width as well outside of the regular wrapper content width with no padding to the sides - useful when you want content to flow full width of your screen and you want a full-width background of your row. Please experiment with all of these options after you set a Background color to your Row and add some elements to your Row's columns in order to understand how they work.
Step 3 - Full height row?
Check this option if you want your Row to automatically stretch to your screen's height. If checked you can also pick the Content Position in a dropdown below.
Step 4 - Use video background?
Check this option if you want to apply a Youtube Video background to your Row. If checked you should also enter the Youtube Video URL below.
Step 5 - Set your Parallax setting.
Selecting an option here different than None will let you set a background image to the Row with Parallax Effect on Scroll. You can either upload a new image or set one from your Library. The difference between Simple and With Fade is in that With Fade adds an extra Fade Out effect to your Row content on user scroll (content fades out once Row is scrolled down).
Step 6 - Optional ID and Class. You can add those if you want to target this specific Row in you CSS or your Javascript code.

### Row Settings (Design Options)

Click on the Edit Row button (Pen icon, top right of the Row). You will see the Row Settings Dialog popup. Then Click on the Design Options tab. In this section you can customize your Row's Design Options (Margin, Padding, Border, Background).
Step 1 - Modify this Row's basic Margins. By Default the Bottom Margin of a Row is 35px so if you leave the bottom margin out it will default to 35px, should you have a no bottom margin - simply add a "0" value in the bottom Margin field. Make sure you leave out the side Margin fields empty as those values are controlled by your layout.
Step 2 - Set your Row borders. After setting the border widths in the fields of the box model to the left (Top border, right border, bottom border, left border) you need to select a Border Color (to the right) as well as Border Style (Click on Theme Defaults dropdown and select the border style from the dropdown).
Step 3 - Set your Row Paddings (top, right, bottom, left). Make sure you leave out the side Padding fields empty as those are taken care by the layout. If you want to you can add side paddings to your Columns instead. In the example displayed we have set a top padding of 200px and a bottom padding of 200px.
Step 4 - Select your Row's background settings. Pick a Color or/and Background Image (and) Background Style. Make sure you pick "Cover" if you want the Row to be fully covered by a single background image.

### Row Settings (Background) - Extended via Parallax & Video Backgrounds for VC Plugin

In order to use this tab you need to have the Extended via Parallax & Video Backgrounds for VC Plugin (ships with the theme) installed. More on installing the plugin - check your Plugin Installation section. For more info on the plugin check the Plugins section in this documentation.Once you click on the Background Tab you can pick one of the background options available.
Single Color - Set your Row Background Color. You have that option in the default Row settings (Design Options tab) but you can use this setting too. The Background Override option allows you to overwrite your default Row's width, picking "Full Width" for example will stretch your Row to the Full Width of the screen, something you can also manage via your Row Settings (General tab) > Row stretch setting.
Gradient Color - Set a custom color gradient as your Row Background. You can select numerous colors to build the gradient, then select the Gradient Type and there you have a pretty gradient as your Row background without having to use images. The Background Override option allows you to overwrite your default Row's width, picking "Full Width" for example will stretch your Row to the Full Width of the screen, something you can also manage via your Row Settings (General tab) > Row stretch setting.
Image / Parallax - Set your Row Image background & Add some Cool effects to it. Apart from the Regular Image background this section provides you with the option to add Horizontal/Vertical/Custom Parallax effects to your background image as well as add an Interactive Multi-Image Parallax background to your Row.
Parallax Style - Pick the Parallax Style you wish to use
Background Image(s) - Pick the Image(s) you want to use
Background Image Repeat - Image Repeat property
Background Image Size - Image Size property
Scroll Effect - Pick how you want your background to behave
Background Image Posiiton - Image position property
Parallax Speed - Parallax Speed (0-100).
Background Image Posiiton - Image position property
The Background Override option allows you to overwrite your default Row's width, picking "Full Width" for example will stretch your Row to the Full Width of the screen, something you can also manage via your Row Settings (General tab) > Row stretch setting.
YouTube Video - Set a Youtube Video as a background for your Row.
Since Visual Composer version 4.6 you no longer need the help of Parallax & Video Backgrounds for VC Plugin in order to create Youtube video backgrounds. Simply head back to General tab and set your video background there as default VC functionality is preferable.
Place your Video URL, then enter the rest of the self explanatory options if you wish. The Background Override option allows you to overwrite your default Row's width, picking "Full Width" for example will stretch your Row to the Full Width of the screen, something you can also manage via your Row Settings (General tab) > Row stretch setting.
Hosted Video - Set a self hosted Video as a background for your Row. Place your Video URLs once you upload them via the Media Library, then enter the rest of the self explanatory options if you wish. The Background Override option allows you to overwrite your default Row's width, picking "Full Width" for example will stretch your Row to the Full Width of the screen, something you can also manage via your Row Settings (General tab) > Row stretch setting.

### Row Settings (Effect) - Extended via Parallax & Video Backgrounds for VC Plugin

In order to use this tab you need to have the Extended via Parallax & Video Backgrounds for VC Plugin (ships with the theme) installed and you need to have a Non-Default Value set under the Row Settings - Background Tab. More on installing the plugin - check your Plugin Installation section.
This Tab provides you with an extra arsenal of cool effects for your Rows. Apply custom Parallax effects to the Row Content (move and fade it), add Row Color/Pattern Overlays, add graphical Separator Borders & Hide Row options.
Easy Parallax - If enabled, the elements inside row - will move slowly as user scrolls.
Fade Effect on Scroll - If enabled, the the content inside row will fade out slowly as user scrolls down.
Enable Overlay - Add Color (including Alpha-Transparency) or/and Pattern overlays to your Row.
Seperator - Add cool Separators for your Rows, check Home > Section Borders page in the Demo to see an example.

## Managing Columns

Once you have the desired number of columns in a Row you can manage each Column's individual settings by clicking on the Toolbar icons of that specific Column. The Plus Icon adds an element to the top of the Column, the bottom Plus Icon adds an elemnt to the bottom of the Column. The Trash Bin icon removes the Column. Access the Column Settings by clicking on the Pen Icon.

### Column Settings - General

Access the Column Settings by clicking on the Pen Icon. The General tab provides with the option to add CSS classes to your Column if you wish to access it via CSS (can pass more than one divided by a space).
Useful Classes - Fortuna comes with a few useful CSS classes that help you modify a Column's behavior:

Class | Function
--- | ---
equal_height_column | Add this class to all Columns in a Row when you want them to be equal in height.
align_middle_column | Add this class to a Column when you want the content within it center aligned vertically.
no_padding_in_responsive_column | Add when you want the Paddings you have assigned to the Column in the Design Options tab to be disregarded in Responsive Mode.
no_side_padding_in_responsive_column | Add this class to a Column when you want the Side Paddings (left & right) you have assigned to it in the Design Options tab to be disregarded under Responsive Mode.
no_margin_in_responsive_column | Add this class to a Column when you want the Margins you have assigned to it in the Design Options tab to be disregarded under Responsive Mode.

### Column Settings - Design Options

Click on the Edit Column button (Pen icon, top of the Column). You will see the Column Settings Dialog popup. Then Click on the Design Options tab. In this section you can customize your Column's Design Options (Margin, Padding, Border, Background).
Step 1 - Modify this Column's basic Margins (top, right, bottom, left). Leave out the Margins empty if you don't want to overwrite the default layout values.
Step 2 - Set your Column borders if you want any. After setting the border widths in the fields of the box model to the left (Top border, right border, bottom border, left border) you need to select a Border Color (to the right) as well as Border Style (Click on Theme Defaults dropdown and select the border style from the dropdown).
Step 3 - Set your Column Paddings (top, right, bottom, left). It's a good idea to always add 30-40px of bottom padding to your Columns so that they look nicely spaced out in responsive mode instead of being crowded.
Step 4 - Select your Column's background settings. Pick a Color or/and Background Image (and) Background Style. Make sure you pick "Cover" if you want the Column to be fully covered by a single background image.

### Column Settings - Responsive Options

Click on the Edit Column button (Pen icon, top of the Column). You will see the Column Settings Dialog popup. Then Click on the Responsive Options tab. In this section you can customize your Column's Responsive behavior and overwrite its width. For example you can force this Column to change its Width in Tablet View or hide it in Phone View.

## Adding/Editing Page Elements

Adding Page Elements to your Page is pretty straightforward. First you need to have created a new page, added a Row to it and defined your Row Columns (read more in the previous section).
Step 1 - Click on one of the Plus Icons within the column you want to add a new element to.
Step 2 - The Page Elements dialog will appear, click on the element you want to add to your Column/Row.
Step 3 - The Element Settings Dialog of the Element you are adding appears. Customize your element anyway you please, then click Save.
Step 4 - Your element is now in the Column you added it to. Once you hover your newly added element you will see a small popup that let's you manage it. You can do the following with your elements:
Move - Drag your element via the Direction Icon to move it around within the Column,Row or Page.
Edit - Click on the Pen Icon to edit your Element's properties.
Clone - Click on the Copy Icon to duplicate your Element.
Delete - Click on the Trash Bin Icon to remove your Element.

## Additional Shortcodes Dropdown

Apart from the Page Elements described in the above section Fortuna also provides an additional Shortcodes Module that you can use in order to add custom Shortcodes to your WordPress Editor or Page builder's Text Block element. You will see the Shortcodes dropdown in the list of Icons in your TinyMCE Wordpress Editor.
Check out the available shortcodes in the Shortcodes Dropdown along with their available attributes below.

## Button

Generates a Fortuna Style Button element within your Content or Text Block element.

#### Code Example

    [boc_button btn_content="Buy Now" target="_self" size="btn_medium" color="btn_white" btn_style="btn_outline" border_radius="btn_circled" icon="icon icon-arrow-right6" icon_pos="icon_pos_after" icon_effect="btn_icon_anim_out" ]

#### Attributes

Attribute | Possible Values
--- | ---
btn_content | Text of your button.
target | "_self" for same tab or "_blank" to open in new a new tab/window
size | "btn_small", "btn_medium", "btn_large", "btn_huge", "btn_small_stretched", "btn_medium_stretched", "btn_large_stretched", "btn_huge_stretched"
color | "btn_theme_color", "btn_white", "btn_dark", "btn_royalblue", "btn_bondi", "btn_emerald", "btn_jade", "btn_turquoise", "btn_blue", "btn_green", "btn_limegreen", "btn_yellow", "btn_orange", "btn_pink", "btn_red", "btn_magenta", "btn_purple", "btn_brown"
btn_style | "btn_normal_style", "btn_gradient", "btn_outline", "btn_3d"
border_radius | "btn_rounded", "btn_squared", "btn_circled"
icon | Leave empty for None or "icon *" where * is the icon you want to use, for example "icon-arrow-right6"
icon_pos | "icon_pos_before", "icon_pos_after"
icon_effect | Leave empty for None or "btn_icon_anim_out" or "btn_icon_anim_in"
btn_style | "btn_normal_style", "btn_gradient", "btn_outline", "btn_3d
btn_style | "btn_normal_style", "btn_gradient", "btn_outline", "btn_3d

## Icon

Generates a custom Fortuna Icon within your Content or Text Block element.

#### Code Example

    [boc_icon icon="icon icon-heart3" size="normal" icon_position="center" icon_color="#ff1956" has_icon_bg="yes" icon_bg="#ffffff" icon_bg_border="#ffffff" border_radius="100%" ]

#### Attributes

Attribute | Possible Values
--- | ---
icon | Enter "icon *" where * is the icon you want to use, for example "icon-arrow-right6"
size | "tiny", "small", "normal", "large", "huge"
icon_position | "left", "center", "right"
icon_color | Icon Color, for example "#ff1956"
has_icon_bg | "no", "yes" - whether you want a solid Background for your icon
icon_bg | If has_icon_bg is "yes", then set your background color here
icon_bg_border | If has_icon_bg is "yes", then set your background border color here
border_radius | Border Radius for your Icon's background, for example: "5px", "20px", "10%"

## Spacing

Generates a custom height spacing.

#### Code Example

    [boc_spacing height="20px"]

#### Attributes

Attribute | Possible Values
--- | ---
height | Enter your height in PX, for example "20px"

## Table

Generates a custom HTML table.

#### Code Example (in Text Editor, not Visual)

    <table class="fortuna_table" width="100%">
    <tbody>
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    </tr>
    <tr>
    <td>Item 1</td>
    <td>Description of Item 1</td>
    <td>$200</td>
    </tr>
    <tr>
    <td>Item 2</td>
    <td>Description of Item 2</td>
    <td>$300</td>
    </tr>
    </tbody>
    </table>

#### Output

Header 1 | Header 2 | Header 3
--- | --- | ---
Item 1 | Description of Item 1 | $200
Item 2 | Description of Item 2 | $300

## Highlight

Highlights the text wrapped with the shortcode.

#### Code Example

    [highlight dark="no"]Some text[/highlight]

#### Attributes

Attribute | Possible Values
--- | ---
dark | "no","yes"

## Tooltip

Creates a Fortuna Style Tooltip for the text wrapped with the shortcode.

#### Code Example

    [tooltip title="I am the tooltip"]Hover To See Tooltip[/tooltip]

#### Attributes

Attribute | Possible Values
--- | ---
title | Text that will show within the tooltip

## Text Message

Creates a Fortuna Style Text Message. 4 types are available.

#### Code Example

    [boc_message type="information"]Message Text goes right here[/boc_message]

#### Attributes

Attribute | Possible Values
--- | ---
type | "information", "success", "attention", "warning_msg"

## Manage Fortuna Page Settings

Fortuna features custom settings for your pages that you can set globally under Theme Options (Fortuna Options > General in your Dashboard - read more in the Fortuna Options section) and individually on a per Page basis in your Edit Page screen under the Fortuna Page Settings section (the section will be above or below your Visual Composer editor section).
You can set the following Options for the Page you are currently editing:
Page Wrapper Style - Overwrite the Default Wrapper Style (set in Theme Options) for this page.
Show Page Heading - This is the area that contains the Page Title and Breadcrumbs, right below the header.
Page Content Top Margin - Page content will be slightly pushed down from your header/page heading area if On.
Activate Transparent Header - Toggle your Transparent Menu option. Further Manage your Transparent Menu Settings in your Fortuna Options > Header > Transparent Header.
Set explicit Page background - Overwrite Global Page Background set in Fortuna Options > General. Type "cover" for background-size if you want the background image (if you have set one) to stretch full size in order to cover the screen.
Activate Preloader Animation for this Page - Set to ON if your global "Preloader Animation" setting found in Fortuna Options > General is set to OFF and you want to overwrite it and enable the Preloader Animation Spinner for the current page.

## Select your Website's Home Page

Once you have created/imported some Pages to your Wordpress installation you can select one of the pages to be your Home Page. Here's how to do that:
Step 1 - Go to Settings > Reading in your Dashboard.
Step 2 - Under Front page displays select A static page (select below) from the drop down.
Step 3 - Select the Static Page you want to set as your Home Page under the Front page: dropdown.

## Select your Website's Home Page

Creating Posts with Fortuna is pretty straightforward. Follow the steps below to create your own Posts now.
Step 1 - Go to Posts > Add New in your Dashboard.
Step 2 - Enter your Post Title at the top of the Edit page.
Step 3 - Enter your Post content.
Step 4 - Select Post Format, Category, Tags and other meta data if you want it.
Step 5 - Upload a Featured Image for this Post.
Step 6 - Click on Publish/Update button.

## Post Formats

Fortuna supports 3 Post formats, Standard, Gallery and Video.
Standard - This is the Standard Post type with a single Featured Image that displays on top of the Post content.
Gallery - This Post format displays an Image gallery on top of the Post content. As soon as you click on the Gallery Post Format radio button a custom Gallery section appears below your Post content where you can upload the images you want to feature in your Post Gallery. Click on Create Gallery and Upload/Select from Library the Images you want for this Gallery Post.
Video - This Post format displays a Video on top of the Post content. As soon as you click on the Video Post Format radio button a custom section appears below your Post content where you can paste your Video embed code.
Here's an example:

    <iframe src="//player.vimeo.com/video/119134995?color=08ada7&title=0&byline=0&portrait=0&badge=0" width="1000" height="528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

## Post Categories

You can manage Post Categories via the Dashboard > Post > Categories section or straight into the Post Editor. While editing a Post find the Categories section to the right, check the boxes of the existing Categories you want to add this Post to or add a new Category below.

## Post Tags

You can manage Post Tags via the Dashboard > Post > Tags section or straight into the Post Editor. While editing a Post find the Tags section to the right, type in the new Tag you want to add to this Post or click on the Choose from the most used tags Link in order to see the existing tags and add one of them by clicking on it.

## Select your Website's Blog Page

Once you have created/imported some Posts to your Wordpress installation you can select one of the pages to be your Blog Page (the Page that will list all your Post in the default Fortuna Blog style).
Step 1 - Go to Settings > Reading in your Dashboard.
Step 2 - Under Front page displays select A static page (select below) from the drop down.
Step 3 - Select the Static Page you want to set as your Blog Page under the Posts page: dropdown.

## Creating Portfolio Items

Fortuna ships with a Portfolio custom post type that lets you feature your work in style. To create your Portfolio items follow the steps below:
Step 1 - Go to Portfolio > Add New in your Dashboard.
Step 2 - Enter your Portfolio Item Title at the top of the Edit page.
Step 3 - Proceed with entering your Portfolio Item content. If you want to use the Visual Builder (Visual Composer) for your Content and you don't see the Dark Blue VC button (Backend Editor/Classic Mode) head over to Dashboard > Visual Composer and under Content types check the Portfolio post type as well.
Step 4 - Select Portfolio Item Format, Category, Post Template and other meta data if you want it.
Step 5 - Upload a Featured Image for this Portfolio Item.
Step 6 - Click on Publish/Update button.

## Portfolio Item Formats

Fortuna supports 3 formats for Portfolio Items, Standard, Gallery and Video.
Standard - This is the Standard Portfolio Item type with a single Featured Image that displays on top of the Post content.
Gallery - This format displays an Image gallery on top of the Portfolio Item content. As soon as you click on the Gallery Format radio button a custom Gallery section appears below your content where you can upload the images you want to feature in your Portfolio Item Gallery. Click on Create Gallery and Upload/Select from Library the Images you want for this Gallery Portfolio Item.
Video - This format displays a Video on top of the Portfolio Item content. As soon as you click on the Video Format radio button a custom section appears below your content where you can paste your Video embed code.
Here's an example:

    <iframe src="//player.vimeo.com/video/119134995?color=08ada7&title=0&byline=0&portrait=0&badge=0" width="1000" height="528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

## Portfolio Categories

You can manage Portfolio Categories via the Dashboard > Portfolio > Categories section or straight into the Portfolio Item Editor. While editing a Portfolio Item find the Portfolio Categories section to the right, check the boxes of the existing Categories you want to add this Portfolio Item to or add a new Category below. Make sure you have your categories set up before trying to create a Filterable Portfolio Page or a filterable Portfolio Grid.

## Portfolio Item Templates

Fortuna supports 4 different Portfolio Item Templates. In order to have the Post Template selection section in your Editor make sure you have the Custom Post Template plugin installed (read more on Plugin installation). The plugin will extend your editor to allow custom Templates for your Portfolio Items.
Default Template/Portfolio List - This layout shows the Featured Image/Gallery Images to the left and your Portfolio Item content to the right. If your item is of Gallery Type your the images are listed one below the either and your content scrolls down as the user scrolls the page down in order to see all Gallery Images.
Portfolio Slider - This layout shows the Featured Image/Gallery Images to the left and your Portfolio Item content to the right. If your item is of Gallery Type your the images are presented in an Image Slider with Left/Right arrows and content Images are draggable.
Portfolio Full Width - This layout shows the Featured Image/Gallery Images in Full Width above your Portfolio Item content. If your item is of Gallery Type your the images are presented in an Image Slider with Left/Right arrows and content Images are draggable.
Portfolio Empty Page - This layout gives you full freedom of what will be on your Portfolio Item page. No featured image is displayed by default so you can create your own Rows/Columns with custom content. You can check the Fully Custom Portfolio Item template Page in the Demo for reference.

## Creating a Portfolio Page

Creating a portfolio Page is quite easy with Fortuna. Follow the steps below the create a Classical Layout Portfolio Page with a category Filter dropdown in the top right corner.
Step 1 - Go to Pages > Add New in your Dashboard.
Step 2 - Enter your Portfolio page Title.
Step 3 - From the Page Attributes > Template dropdown in the right select the Portfolio Page template. Save and you are Done!

## Creating a custom Portfolio Page

Fortuna also lets you create custom Portfolio pages using the Portfolio Grid page element in your Visual Builder. Simply create a new page, add the Portfolio Grid element to a new Row/Column, customize it and Save.

## Creating a Contact Form

Fortuna supports various web form plugins but recommends the use of Contact Form 7 plugin (+ Really Simple CAPTCHA plugin if you want to add Captchas to your forms). The theme ships with several form style presets for the form elements that match Fortuna's overall design.
Step 1 - Make sure you have Contact Form 7 plugin installed, install it and Activate it if you haven't yet (+ Really Simple CAPTCHA plugin if you want to add Captchas to your forms).
Step 2 - Create a new form - go to Contact > Add New in your Dashboard.
Step 3 - Add your form name, then setup your form fields below using the dynamic web form builder. Find more general info on Contact Form 7 here.
Step 4 - Add your form to your page using the Contact Form 7 element in your Editor.

## Fortuna styling for your forms (style presets)

Fortuna ships with a few custom style presets for your forms. Style 1 is the default input fields theme style that your fields will get if no additional classes are passed to your form fields. For Style 2 you need to add an extra class to your fields - "input_bottom_line".
Check Style 1 & Style 2 in the Demo Contact Forms section below for more info.

## Demo Contact Forms

To create Contact forms identical to the ones in our Demo simply paste the following content (2 styles available) in your form editor. Notice the extra "class:input_bottom_line" bit that adds the special class to each field in order to change its style.

#### Style 1

    <p>[text* name placeholder "Your Name *"] </p>
    <p>[email* email placeholder "Your Email *"] </p>
    <p>[text subject placeholder "Subject *"] </p>
    <p>[textarea message x5 placeholder "Subject *"] </p>
    <div class="h10"></div>
    <p>[captchac captcha-887 fg:#555 bg:#fff size:m]</p>
    <p>[captchar captcha-887 4/4 class:captcha_input placeholder "Enter Captcha"]</p>
    <div class="h20"></div>
    <p>[submit class:btn_theme_color class:btn_rounded "Submit"]</p>

#### Style 2

    <p>[text* name class:input_bottom_line placeholder "Your Name *"] </p>
    <p>[email* email class:input_bottom_line placeholder "Your Email *"] </p>
    <p>[text subject class:input_bottom_line placeholder "Subject *"] </p>
    <p>[textarea* message x4 class:input_bottom_line placeholder "Subject *"] </p>
    <div class="h20"></div>
    <p>[captchac captcha-887 fg:#555 bg:#fff size:m]</p>
    <p>[captchar captcha-887 4/4 class:captcha_input class:input_bottom_line placeholder "Enter Captcha"]</p>
    <p>[submit class:btn_theme_color class:btn_rounded "Send"]</p>

## Creating a Default Contact Page

Fortuna offers a special template that you can use to create a slick looking contact page with a custom style Google map on top of the page and a custom Contact Form below + a left or a right sidebar if you want one. In the Demo you can see examples under: Pages > Contact Pages > Contact Default 1/2. Using this default template for your contact pages is rather easy, here's the step by step process:
Step 1 - Go to Fortuna Options > Contact Page in your Dashboard. Set your address where you want your Google Map pointing to. For example "692 5th Avenue, New York". Then you can set your Google Map Color Scheme (6 available), experiment with them to use the best one for your website. Google Maps Zoom Option defines the Zoom level of your Google map by default. Click on the Save changes button.
Step 2 - Go to Pages > Add New in your Dashboard.
Step 2 - Enter your Contact page Title.
Step 3 - From the Page Attributes > Template dropdown in the right select the Contact Page template.
Step 4 - Add whatever content you want to have below the Google Map on top of the page within the regular page editor. In the Demo we have added a custom Contact Form 7 form (check previous section Creating a Contact Form for more on how to create one. Pick a sidebar if you want to use one for this page and choose its location. For our Demo we have created a custom sidebar named Contact Sidebar and added a Contact Info widget to it as well as a Text Widget containing a Testimonial slider shortcode. Here's the shortcode you can paste in a Text Widget in order to get the same testimonial slider:

    [boc_testimonials style="small" is_3d="" navigation="Dots" animation="Slide" autoplay="" autoplay_interval="12000" loop="" auto_height="yes" is_minimal="yes"][boc_testimonial author="Lindsay Ford" author_title="CEO" picture_url="21708"]"On extremely short notice, BlueOwlCreative came up with the perfect design I previously envisioned for my company. "[/boc_testimonial][boc_testimonial author="George Stoner" author_title="Marketing Manager" picture_url="21707"]"Wow, just the template we were looking for! Stunning clean design, element rich, clean code and browser friendly!"[/boc_testimonial][boc_testimonial author="Isabelle White" author_title="Designer" picture_url="21706"]"Awesome theme! Very intuitive to use, clean coded, and easy to customize. Just rated 5 stars! Will strongly recommend!"[/boc_testimonial][/boc_testimonials]

## Creating custom Contact Pages

Apart from using the default Fortuna Contact page Template you can choose to create a totally custom Contact page by simply using your Page editor and adding a custom Form to the page. In the Demo you can see examples of custom contact pages under: Pages > Contact Pages > Contact Custom 1/2/3. As you can see below these are just regular pages with custom elements added to them.

## Visual Composer - page builder plugin

Using a highly customized version of the Visual Composer plugin Fortuna Wordpress theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Content management is a breeze with Fortuna and it requires absolutely no coding skills.
You get a Free regular license of Visual Composer - $33 Worth with the purchase of a Regular license of Fortuna that is suitable for use on 1 website!
Adding and editing Page Elements is pretty straightforward with Visual Composer, you will save tons of time on content creation and you can create highly customized page templates with no coding knowledge required.
Read more on managing your content in the Page & Post Creation section.

## Parallax & Video Backgrounds for Visual Composer plugin

This plugin extends your Row Element settings popup dialog with 2 extra tabs - Background and Effect. Read more on them in the Creating Pages (Rows & Columns) section. These tabs contribute to Visual Composer's default Row functionality with the ability to add Parallax backgrounds, Video Backgrounds, Custom Gradient Backgrounds, MultiLayer Parallax effect + Color & Pattern Overlays, cool Section Borders etc.
You get a Free regular license of Parallax & Video Backgrounds for Visual Composer - $10 Worth with the purchase of a Regular license of Fortuna that is suitable for use on 1 website!
You may skip installing the Parallax & Video Backgrounds for Visual Composer for your website or deactivate it because Visual Composer as of lately supports Row Parallax Backgrounds as well as Row Video Background and you may want to skip the overhead of loading extra plugin resources you do not need. We recommend installing the Parallax & Video Backgrounds for Visual Composer plugin, exploring all its features, then deciding whether you want to use any of them. If you are not going to do so you can deactivate the plugin in order to avoid loading its resources on your website.

## Revolution Slider plugin

Revolution Slider is the most popular Wordpress slider solution out there with tons of awesome features. It is an all-purpose slide builder that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for all!
You get a Free regular license of Revolution Slider - $19 Worth with the purchase of a Regular license of Fortuna that is suitable for use on 1 website!
The Demo sliders are also included with the theme so you can import them and reuse them on your website. There's also additional information you can find regarding Revolution Slider on its official page. Revolution Slider plugin also has its own documentation that you can access here.

### Importing Theme Revolution Slider Demos

Importing the Theme Revolution Slider Demos is rather easy. Once you have the plugin installed click on the Revolution Slider link in your Dashboard. Then click on the Import Slider button.
You will find the Theme Slider Demos within the Fortuna package you unzipped in: DemoData/RevolutionSlider/. If you want to use all of them go ahead and import them all. It is advisable to import them all on your testing server so you can play around with them and modify them according to your needs. You can then export them and import them on your Live server.

### Modifying the Demos

We have created some custom classes in order to apply uniform styling to the Slider Elements we have used in our Theme Sliders. Here's how you apply the classes to your slider layers, in the example below you can see for our "Clean Design. Clear Message." heading we have simply added a new text layer then we have selected the "Fortuna_Huge_Title" option from the style caption dropdown. To make the
To make the "Design" word a different color we have used plain HTML into the Text layer:

    Clean <span style="color:rgb(255, 235, 100);">Design.</span><br> Clear Message.

Here's a list of Fortuna's Custom CSS classes specially created for Revolution slider and where to use them:

Fortuna_Huge_Title | This class creates large text-size headings.
Fortuna_Huge_Title_Dark | This class creates large text-size headings with dark color and no text shadow.
Fortuna_Big_Title | Add this class to create large text-size headings (a tad smaller than the previous).
Fortuna_Serif_Font | Used for subtitles this class sets the theme serif font family & italic font style.
Fortuna_Serif_Font_Dark | Used for subtitles this class sets the theme serif font family & italic font style with dark color and no text shadow.
Fortuna_Grey_Border | Add this class to an empty Layer (you still need to enter the HTML character for blank space - &nbsp; into its content) to create a grey border.

Apart from Revolution Slider's default buttons Fortuna allows you to add custom Theme style buttons to your slides. Here's an example of adding a "Button" to your Slide. Notice how the CSS classes are added straight into the "Anchor" tag (<a>) instead of into the Style field.
Here is a sample code for a Theme Color Fortuna large button within your slider:

    <a href="" class="button btn_large btn_theme_color btn_rounded icon_pos_after"><span>Button Text</span> <i class="icon icon-heart2"></i></a>

As you can see adding a Fortuna style icon to a button is rather easy, simply add the icon as an extra element into the HTML like so, where the icon is the second class after the "icon" class passed:

    <i class="icon icon-heart2"></i>

Here is a sample code for a White Color Outline Fortuna medium button within your slider:

    <a href="" class="button  btn_medium btn_white btn_outline btn_rounded" target="_self"><span>Buy Theme</span></a>

All that is left for you to add your link URL into the "href" attribute and your slider button is fully functional.
Here's a list of Fortuna's Custom CSS classes especially created for Revolution slider buttons:

btn_small / btn_medium / btn_large / btn_huge / btn_small_stretched / btn_medium_stretched / btn_large_stretched / btn_huge_stretched | Use one of these for your button size
btn_theme_color / btn_white / btn_dark / btn_royalblue / btn_bondi / btn_emerald / btn_jade / btn_turquoise / btn_blue / btn_green / btn_limegreen / btn_yellow / btn_orange / btn_pink / btn_red / btn_magenta / btn_purple / btn_brown | Use one of these classes for your button color.
icon_pos_before / icon_pos_after | Add one of these classes if you have added an icon to your button.

### Updating your Revolution Slider Plugin

Updating your Revolution Slider plugin is rather easy, all you need to do is overwrite the current plugin version files with the latest ones provided within your Package. From your favorite FTP program, delete the folders/files in the following directory:
wp-content/plugins/revslider/
Then replace them with the folders/files located inside the "revslider" folder that can be found inside the revslider.zip file from your package.
Never uninstall/reinstall the plugin, as that would also delete your previously built sliders. Instead, as long as the following instructions are followed, any previously built sliders will be saved and still exist once the update process is complete!
If the Fortuna latest version package doesn't include the latest Revolution Slider version feel free to contact us via our Profile Page Contact form (bottom right) in ThemeForest and simply ask for the latest version of the plugin and we will send it to you shortly after.

## Contact Form 7 plugin

Contact Form 7 is a Contact Form creation plugin that is very flexible and easy to use. It manages multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
Fortuna ships with a few custom style presets for your forms. Style 1 is the default input fields theme style that your fields will get if no additional classes are passed to your form fields. For Style 2 you need to add an extra class to your fields - "input_bottom_line".
Read more on how to Create your own Contact Forms a few sections up in Creating Contact Forms or find out more on the plugin official website.

## Really Simple CAPTCHA

Really Simple CAPTCHA is a plugin that provides the option to add CAPTCHAs to your Contact forms. Once installed the plugin will add an extra form element that can be added to your Contact Form 7 forms - Captcha.
Clicking on it you will be presented with the option to add 2 new fields to your form, a Captcha image and a Captcha input field. Enter IDs and Classes for both if you need to (for styling purposes) and click on Insert Tag.
The 2 tags will be added to your form, place them wherever you wish in it and check your front end to ensure things look OK and your Captcha is generated properly.
Read more info on the plugin on its official website
CAPTCHA does not work; the image does not show up.
Really Simple CAPTCHA needs GD and FreeType library installed on your server. Ask your server administrator if they are installed. Also, make the temporary file folder writable. The location of the temporary file folder is managed by the instance variable tmp_dir of ReallySimpleCaptcha class. Note that the setting varies depending on the calling plugin. For example, Contact Form 7 uses wp-contents/uploads/wpcf7_captcha as the temporary folder basically, but it can use different folder depending on your settings.

## Woocommerce plugin

Fortuna is fully compatible with Woocommerce so you can start your online shop with it in a matter of minutes. All you need to do is install Woocommerce plugin, setup your products and start selling!

### Install Woocommerce

To install the plugin go to Plugins > Add New, search for Woocommerce. Install WooCommerce - excelling eCommerce by WooThemes plugin. Once you do WooCommerce will ask you to Install Woocommerce Pages for you. Click on the button and you are ready to go.

### Import Demo Data

Dummy data for WooCommerce is located in a file called dummy-data.xml, which is located in the WooCommerce plugin directory. Once WooCommerce is installed, you can find it two ways:
- Use your cPanel or FTP, go to 'wp-content/plugins/woocommerce/dummy-data' and locate the dummy-data.xml file.
- Unpack or unzip the WooCommerce .zip file
To import the Shop Demo data simply follow these steps once you have downloaded the dummy-data.xml file:
Step 1 - Go to Tools > Import in your Dashboard.
Step 2 - Click on Wordpress then Choose file and locate the dummy-data.xml you previously saved. Click Upload and Import.
Step 3 - Check the box below Import Attachments and click on Submit.
Importing the Demo Data along with all theme images may take awhile (up to several minutes) so please be patient and wait until the process finishes.
Step 4 - Done! You can continue by editing your products/categories - Dashboard > Productsand setting up your Woocommerce Theme Options (scroll down).

### Woocommerce Theme Options

Fortuna has some custom Theme Options related to Woocommerce that will help you manage your Online store. Head over to Dashboard > Fortuna Options > Woocommerce to explore them.
Here's what you can customize within Fortuna's Theme options as it comes to your Woocommerce shop:
WooCommerce layout - Your Woocommerce pages' layout: No sidebar, Left Sidebar, Right Sidebar.
WooCommerce Single Product Page layout - Your single product layout: No sidebar, Left Sidebar, Right Sidebar.
Products per Page - How many products you want your product listing pages to show (Shop/Category etc.).
Enable WooCommerce Shopping Cart in Header - yes, just what it says.
Background Color for WooCommerce Shopping Cart in Header - Dark/White presets for the header cart dropdown.
Static Content on top of your Shop page (great for adding sliders) - This is some static content that will go on top of your Shop page. Perfect for adding sliders (Revolution slider for example). In our Demo we have entered for example the following:

    <div>[rev_slider shop_slider][boc_spacing height="50px"]</div>

Notice this is under TEXT editor, not VISUAL, where "[rev_slider shop_slider]" is the shortcode of our Shop slider we have created with Revolution Slider plugin and we want to show on top of our Shop page and "[boc_spacing height='50px']" is simply a Fortuna "spacing" shortcode of 50 pixels. The whole thing is wrapped in a "DIV" as otherwise the WP editor wraps it in a paragraph - "P" which may not behave as cleanly on your Shop page.

## Child Theme

Fortuna Wordpress Theme comes with a Child Theme ready to be used.
Simply install the fortuna-child.zip and activate the Child Theme just like a regular theme after you have installed Fortuna.

### What is a Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. Child themes allow you to modify or add to the functionality of the existing parent theme.

### Why use a Child Theme?

Always use a Child Theme when modifying any theme files. This way you make sure a theme update will not wipe out any changes you have made to the files.
There are a few reasons why you would want to use a child theme: If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
Read more on Modifying your Theme and using Child Themes here.

## Global Custom CSS

Fortuna provides you with a useful way of adding Global CSS rules to your website without editing any files. Simply head to your Fortuna Options > Custom CSS in your Dashboard and type in any CSS want to globally include into all your pages.

## Custom Page CSS (Custom CSS Settings)

Fortuna provides you with a useful way of adding Custom Page CSS rules to your specific pages without editing any files. The CSS rules you add will affect only the current page which is very useful in case you want a particular CSS to take place only for a certain page. To add Page-specific CSS simply click on the CSS button above the Editor while editing a page and enter your CSS rules in the Page Settings Popup that appears.
In order to display the vast array of capabilities that Fortuna features we used the Custom Page CSS to overwrite Theme Options on different pages. For example on Home Page > Alternative Color pages we have overwritten the Main theme color of our Demo to show alternative color options.

## Helper CSS Classes

Fortuna provides a custom set of CSS Helper classes that provide useful functionality with a minimal effort. Each helper class is responsible for doing one job and you can combine more than one class together. Just by adding a single class to an element you can center content within it, change fonts, change link colors etc. All Fortuna elements provide an "Extra class name" field where you can add CSS classes to them.

Class | Function
--- | ---
equal_height_column | Add this class to all Columns in a Row when you want them to be equal in height.
align_middle_column | Add this class to a Column when you want the content in it center-aligned vertically.
no_padding_in_responsive_column | Add when you want the Paddings you have assigned to a Column in the Design Options tab to be disregarded in Responsive Mode (on smaller screen devices).
no_side_padding_in_responsive_column | Add this class to a Column when you want the Side Paddings (left & right) you have assigned to it in the Design Options tab to be disregarded under Responsive Mode.
no_margin_in_responsive_column | Add this class to a Column when you want the Margins you have assigned to it in the Design Options tab to be disregarded under Responsive Mode.
white_text | Sets a white text color CSS rule to the element and its child elements. Useful to add to a Row or Column that have a Dark background color or image.
dark_links | By default your link colors inherit your Main Theme Color but you can overwrite this by adding this CSS class to a container element (Row, Column etc.) to force all Text links in it to be dark colored (useful on bright backgrounds).
white_links | By default your link colors inherit your Main Theme Color but you can overwrite this by adding this CSS class to a container element (Row, Column etc.) to force all Text links in it to be white colored (useful on dark backgrounds).
body_font | Force the font you have set under Theme Options > Typography > Body Font on an element. For example you want a heading to inherit your Body Font instead of your default Heading Font - simply add the "body_font" class to the "Extra class name" field of your Heading element.
heading_font | Force the font you have set under Theme Options > Typography > Heading Font on an element. For example you want some text to inherit your Heading Font instead of your default Body Font - simply add the "heading_font" class to the "Extra class name" field of your Text Block (or whatever) element.
text_44_on_mobile | Add this class to your big headings (having font-size greater than 50px). It sets a font-size of 44px in responsive mode so your headings won't run out of smaller devices' screens.
side_bounce_icon | Add this class to a button that has an icon to add a "side bounce" effect to the icon in it. For example the button in the gradient header page.
btn_push_left | Useful to add as to a Button's "Extra class name" field when you want to increase spacing between buttons for example. This adds 20px right margin to your button. Use on first button.
btn_push_right | Useful to add as to a Button's "Extra class name" field when you want to increase spacing between buttons for example. This adds 20px left margin to your button. By default if you have 2 adjacent button elements they get a 12px spacing between them. Add the "btn_push_right" to the second button to increase this spacing to 20px.
row_img_featured_texts_border | Assign this class to a row to add a grey dotted border between its columns - check an example in the Demo - Pages > Custom Header - What My Clients Say section the borders among the 4 columns with testimonials are accomplished by adding the "row_img_featured_texts_border" class to the 2 rows.
no_text_transform | Sets a normal text-transform CSS rule to the element and its child elements. Useful to remove any inherited text-transorm rules. For example in the Demo we have globally set an uppercase text-transform rule in Fortuna Options > Typography > Heading Font (all our heading fonts will be capital-lettered). We have added the no_text_transform class to particular Headings in the Demo to have normal text-transorm.
letter_spacing_negative | Sets a negative (-0.04em) letter-spacing CSS rule to the element.
no_letter_spacing | Sets a neutral (0em) letter-spacing CSS rule to the element.
bgr_bottom_right | Sets a bottom right background-position to the Column it has been added to. Take for example on Demo's Home page the 3 columns on a single row with background colors and big icon images as backgrounds. Adding the big Icon images as backgrounds will position them in the center of the column, once you add the "bgr_bottom_right" to the column they will be positioned in the bottom-right.
theme_color_ul | Sets the main theme color as the color for your default Unordered List's circle image. Use the TEXT editor instead of VISUAL to add the class to your UL element like so:
    <ul class="theme_color_ul">
    	<li>List Item 1</li>
    	<li>List Item 2</li>
    	<li>List Item 3</li>
    </ul>
text_rotate | Adds a text rotation animation to the element. Split your strings with a semi-colon character ";"
    Animated Rotating <strong class="text_rotate">Headings;Texts;Headlines</strong>
typewriter | Adds a typewriter text animation to the element. Split your strings with a semi-colon character ";"
    Typewriter Animated <strong class="typewriter">Text Headings;Or any text really;... Cool effect, huh? </strong>
img_zoom_on_hover | Add this class to an Image element in order to add the animated Zoom Icon effect on Mouse Over (on hover).
white_frame_img | Sets a white frame and a light grey drop shadow to an image. Used on Pages > Home Pages > Alternative Font 2 for the small Video Image (top left, below the Get Creative Today heading).
push_down_100 | Sets a top position of 100px for an image relative to its default. Used on Pages > Home Pages > Alternative Font 2 for the large Phone(s) Image at the page top to push it down 100 pixels and make it overlay the next Row.
no_arrow_effect | Add this class to a Subnavigation Menu Item to disable the Arrow effect you Submenu/Dropdown Arrow Effect you have enabled in your Theme Options > Header > Main Navigation only for this particular menu item.

## Raw JS on a Page

Fortuna provides you with a way to add inline Javascript into your pages via the Raw JS page element. While editing a page add a new element to your page then select Raw JS.
Once the Popup appears enter the Javascript code you want executed on your page and click Save. Done! Next time your page gets loaded in the front end the Javascript code you entered in your Raw JS element you added to the page will be executed.

## Updating Fortuna

Updating Fortuna is rather similar to installing the theme. Follow these steps to update your theme:
Step 1 - Login to your Wordpress Dashboard
Step 2 - Go to Appearance > Themes. Deactivate Fortuna Theme by activating a different theme.
Step 3 - Delete Fortuna Theme, don't worry your content will not be lost.
Step 4 - Upload the latest version of fortuna.zip and activate it (more info in the Theme Installation section).
When modifying any theme files it is always best to use a Child theme, thus your file changes won’t be lost once you update your theme (check the Child Theme section for more).

## Version Log

#### Please check the online documentation for Version information and the latest version of this Document