Alea - Premium WordPress Template

Alea Template Documentation

Welcome to Alea Documentation

Thank you for purchasing Alea WordPress Theme! In this document you will find the latest information on how to install, manage and update your theme, as well as create content, install plugins, import Demo data etc. If you like our theme and want to support us please rate it in your Downloads section.

Theme Installation

Once you purchase Alea from Themeforest, you can download the theme package. After you UnZIP the package you will find the theme file in it - alea.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 "alea.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 32M or follow the Installation via FTP section described below.
Step 4 - Click on the Activate button to activate Alea. Congratulations, you have now activated Alea! You can now proceed with Alea's Plugin Installation.

Installation via FTP

Step 1 - Log into your Hosting server using an FTP client (like FileZilla or WinSCP).
Step 2 - Locate "alea.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 'alea' with all theme files in it.
Step 3 - Locate your WordPress installation and upload the theme directory 'alea' (you unzipped in the previous step) into ../wp-content/themes/ in your WordPress installation.
Step 4 - Click on the Activate button to activate Alea. Congratulations, you have now activated Alea! You can now proceed with Alea'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 Alea. 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. We recommend installing the theme on a staging environment first so that you make sure there are no incompatibilities with your old theme or content.

Plugin Installation

Once your theme is installed you will get a prompt at the top of your Dashboard that will ask you to install Alea theme required and recommended plugins. The Theme requires only WPBakery Page Builder plugin in order to operate, but it recommends the installation of Alea Portfolio CPT, Contact Form 7, One Click Demo Import, Parallax & Video Backgrounds for Visual Composer, Really Simple CAPTCHA and Revolution Slider as well. Read more on the separate plugins in the Plugins section.
Step 1 - Click on the Begin Installing Plugins link
Step 2 - Select all plugins that you wish to install (Selecting all of them is recommended). Read more on the separate plugins and whether you need them in the Plugins section.
Step 3 - Change Bulk Actions drop to Install then click Apply in order to install the selected Plugins.
Step 4 - Make sure all required & recommended plugins are installed and Active if you want to import the full them Demo Data (including all pages, posts, portfolio items, Menus, Widgets, Contact Forms etc).
Important: Premium plugins like Revolution Slider & WPB Page Builder may display notices urging you to purchase a single license of their plugin. It is NOT required for you to purchase the plugins separately, they are included for free with the theme and we will update them accordingly. Unless you need some of the Premium features they provide you do not need this license as you are using the Extended License we have purchased which grants you full rights to use those plugins freely along with the theme. So you may simply click on the Ignore or Disregard buttons to dismiss those notices once and for all.

Demo Content Import

  • Full Demo Import
  • Troubleshooting
Once you have installed all theme Plugins you can import the Alea Demo Content with a single click (all required & recommended plugins must be installed and Active if you want to import the full Demo Data (including all pages, posts, portfolio items, Menus, Widgets, Contact Forms etc).
Revolution Slider Sliders are imported separately, check Plugins -> Revolution Slider section for more on them.
Step 1 - Go to Appearance -> Import Demo Data in your Dashboard (requires the One Click Demo Import plugin).
Step 2 - Click on Import Demo Data. 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 3 - That's it, all done! You should now see the Agency Green page as your home page when you go to your website front page. To change it head to the Setting a Home Page section.
The sample Stock Photography Images in the official demo are not included in the Demo Import, instead they are replaced with free alternative Demo images.

Increasing PHP Memory Limit

If you are using a Shared Hosting there's a good chance that your web-server resources have been limited by your hosting provider. As Alea's Demo is quite big, plenty of pages, posts, portfolio items & images your Import may fail due to your server limitations. Most commonly these are: max_execution_time (a directive used to limit script execution duration) and memory_limit (a directive used to limit memory for your hosting account). If you are working on a localhost environment increasing those directive 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 working on a hosting somewhere create a php.ini file in the root directory of your WordPress installation and add them to it then try to run your import again.
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 your hosting provider 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. My hosting provider usually replies within minutes and they increase the limit temporarily for me until I manage to run any long running scripts.

Enabling DEBUG Mode

WP_Debug is a constant that when enabled will display any PHP errors on the front-end of your site, this is the most useful tool when troubleshooting your site for errors. You can enable WP_Debug if you are getting the so called White Screen of Death for example where you see only a white screen and do not see the errors.
1. Access your WordPress installation root folder via FTP or SFTP
2. Edit the wp-config.php file
3. Find the WP_DEBUG mode defined in it and change to:
define( 'WP_DEBUG', true );

Reimporting the Demo

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.

Logo Upload

Follow the steps below to upload your own logo to Alea Theme.
Step 1 - Go to Theme Options > Header > Main in your Dashboard.
Step 2 - Click on Upload Logo Plus Button then upload your Logo Image file. Click on Save Changes.
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 Theme Options > Header > Transparent Header. You can also choose from a couple of Transparent Logo Transition Effects, we have Flip and Fade as options for animating the logo swap.

Setting up your Menus

  • Menu Setup
  • Menu Style
  • Button in Menu
  • Icons in Menu
  • Megamenus
  • Single Page Nav
  • Side Dotted Menu
  • Troubleshooting

Creating/editing 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.

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 Theme Location slot in the Manage Locations tab. If you have imported the Theme Demo you should already have the Demo 'Main Menu' menu already assigned to the 'Main Navigation' theme location slot. The theme also has a 'Sub-Header Menu' where you can add a menu to your Subheader (top bar of the header).
If you want to add Menus to your Sidebars/Footers you can do so under Appearance > Widgets by adding a Navigation Menu widget to the widget area of your choice (by drag and drop) then selecting the specific menu you want to use there.

Style your Main Menu

Styling your main navigation takes place under Theme Options > Header > Main Navigation. You have 6 main Navigation Styles to choose from that you further customize below. The customization options depend on your main choice of Navigation Style.
Step 1 - Go to Theme Options > Header > Main Navigation. Select from the main Navigation Styles available.
Step 2 - Scroll down and further customize your menu according to your preferences. You can further tweak your navigation colors here, as well as add Animated underline effect to the top level menu items, add a search functionality to your menu, align the menu items etc. These will depend on the Navigation Style you picked in Step 1.
Step 3 - You can further customize your Submenu style in the Theme Options > Header > Submenu Style section. Select your choice of Animation Effect, Background Style, Dropdown Item Style, SubMenu Item Hover Style, colors, borders etc. for your Submenus/dropdown menus.

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.

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 the classes of the icon you want to place, for example "fa fa-navicon". So for example the label for a Menu item "Navigation" with an icon in front would look like:
<i class="fa fa-navicon"></i> Accordions
Find the icon class list here: Icon Classes

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 Alea Demo for example. We have a megamenu under the "Pages" item. To achieve that we have added the CSS classes: "megamenu" and "mm-col-5" 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 Pages 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 (Home Pages 1, Home Pages 1 & Home Pages 3) below the top level item Pages that will host the column items and 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 (such is the case in our Elements megamenu where columns have hidden headings.

Create a Single Page Website Menu

If you want to create a single Page Website like this Example 1 from the Demo or Example 2 from the Demo all you need to do is create your Single Page Menu then set it as your Main Navigation. Creating Single Page Menu items is achieved by using Custom Links and anchoring them to specific sections on your page. Here's a comprehensive example below:
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, you want to use Custom Link items. The idea is to anchor your menu items to specific page sections on your single page layout. So for example you would create an item with Link "#section3", if you are going to have more pages in your website other than the single page (like blog for example) you should prepend the full URL of your home page before the anchor to the section like so - "URL to the Service page" + "#section3". This way if you navigate away from your home page it will still return to it, then anchor the specific section. Add Link Text "Our Services". Once you add it you should add the "gumshoe_scroll" parameter into the "Link Relationship (XFN)" field. If this field doesn't show by default you can turn it ON from Screen Options(in the Top right corner of your screen).
Your links should include the full path to the page + the targeted section anchor. For example: "http://mywebsite.com/page_name#section_services" so that they work correctly even if you are currently on a different Page.
Step 3 - Once you have created your menu item you need to link it to a specific section on your page so that once a user clicks on it the page will scroll to that section. All you need to do is add the anchor you previously set as an ID of the Row section you want the link to scroll to. In our case this would be section3.
Once you link all your Menu items to your Page sections you are ready.

Create a Side Dotted Menu

If you want to create a Side Dotted Navigation for a Page like this Example from the Demo (notice the dots in the right of the page that navigate you to different sections of the page) all you need to do is create a Menu then set it as your Active Dotted-Style Side Navigation for this Page in your Alea Page Settings when editing a Page. A Dotted-Style Menu is achieved by using Custom Links and anchoring them to specific sections of your page. Here's a comprehensive example below:
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, you want to use Custom Link items. The idea is to anchor your menu items to specific page sections on your single page layout. So for example you would create an item with Link "#section3". Add Link Text "Our Services".
Step 3 - Once you have created your menu item you need to link it to a specific section on your page so that once a user clicks on it the page will scroll to that section. All you need to do is add the anchor you previously set as an ID of the Row section you want the link to scroll to. In our case this would be section3.
Once you link all your Menu items to your Page sections you are ready you need to edit the page where you want to add your Side-dotted menu and pick the Menu you created under Alea Page Settings -> Activate a Dotted-Style Side Navigation for this Page. (read more under the Page Settings section).

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 which 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

  • General Header Settings
  • Subheader Settings
  • Header Icons
  • Side Fly-Out

General Header Settings

This section describes how to setup your Alea Header, Sticky Header, Transparent header & Mobile Header.
Step 1 - Go to Theme Options > Header > Main in your Dashboard. Apart from uploading your logos here you can manage you main Header options like Header heights, background color etc.
Step 2 - Go to Theme Options > Header > Sticky Header. This is the behavior of your header where it stays fixed at the top of the browser screen when you scroll down the page.
Step 3 - Go to Theme Options > Header > Transparent Header. Here you can manage the Transparent Header settings like Transparent Logo Transition Effect, Transparent Header Background Color, Transparent Header Opacity, Text Color, Hover Text Color etc. Transparent Headers are an alternative to regular headers that can be used to overlay the page content, once a user scrolls down they transform to a regular header. They are activated on a per page basis under Alea Page Settings. Read more on that in the Alea Page Settings section.
Step 4 - Go to Theme Options > Header > Mobile Header. You can manage the properties of your Mobile header here, like colors, show search in mobile, override mobile logos etc.

Setup your Subheader Area

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). You can manage quite a few options here, colors, info position, social icons etc.
You can also add custom Menus to your Subheader Area, just head over to Widgets > Menus > Manage Locations and assign a Menu to your Sub-Header Menu Navigation Slot. Another way to add items including a Menu to the subheader are is by adding Widgets to the Subheader Widget Area (under Appearance > Widgets. In our Demo we have added the WPML language switcher to the Subheader Widget Area.

Setting up Header Icons

A few of the Main Navigation Styles (Stripe and Solid) allow addition of custom "Alea: Icon Text Widget" widgets to the area of the header above the Menu for displaying business specific data like contact/location information.
Step 1 - Make sure you are using one of the 2 Main Navigation Styles (Stripe or Solid) that support the Header Icon Widgets.
Step 2 - Go to Appearance > Widgets. Drag and drop the "Alea: Icon Text Widget" widget into the "Header Icons Widget Area" widget area and add your details. Pick the icon you want to use and add its class into the "Icon" field, here's our Icon Classes here.

Setting up the Side Fly-Out widget area

The Side Fly-Out widget area is the right off-screen area that slides in to the left once you click on the hamburger menu button in the top right of your header.
In order to get it enabled you need to simply add some widgets to your "Side FlyOut Widget Area" widget area under Appearance > Widgets. In our Demo we have added a Custom Menu, a Text and an Alea Latest Posts widgets to it.

Main Theme Color

Alea 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 Main Color and select your desired Theme Color if you want to override the default theme one. The Customize section lets you preview Live the changes on your website even before you have saved.
Most theme elements that feature an accent theme color will inherit your main theme color. Some elements allow overriding it with a custom one within the Element editor popups. We specifically override the theme color (with custom CSS via Page Settings - the cog icon in the top right of the Page Editor screen) on many of our Demo pages in order to demonstrate different outcomes of the theme customization process. When editing such Demo pages you can click on the Page Settings Icon and remove all custom CSS that override the default theme functionality in order for your theme color to take full effect.

General Theme Options

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

Setting Theme Fonts (Google Fonts)

Theme Options provide a whole section dedicated to setting your Alea 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 Theme Options > Typography in your Dashboard.
Step 2 - Enter your Google Fonts API key here and click "SAVE CHANGES". Get one here.
Step 3 - 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' and 'Open Sans' ship with the theme so you don't need to add them manually). Once you pick the font you want to add the available styles/font-weights 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, so make sure to save on your page load time by only picking the styles you want to include. Once you have added all the fonts you need click on Save Changes.
Step 4 - 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.

Inline Font setting per Page via Page Settings

You probably have noticed we have different fonts on some of our Demo pages overriding the default fonts selected in our Theme Options. You can also do this on a specific page by simply a few lines of CSS in your Page Settings (the COG icon - top-right of the Backend Visual Editor).
For example this will override the heading tags on a specific page:
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

h1,h2,h3,h4 {
    font-family: Roboto;
}
The first line imports the "Roboto" Google Font for this page, the rest sets the Roboto font as the font-family to be used by the heading tags on this specific page. Of course this technique is preferred only if you want to override your global settings from Theme Options. More on Page Settings here.

Using Custom Fonts

Apart from using Google fonts you can also use custom fonts like we have in several of our Demo pages (check out the heading font in the header). To do that follow the steps below.
Step 1 - Copy your font files to your webserver via FTP in your Child theme's designated folder. General Information on @font-face & file formats.
Step 2 - Add the fonts via font-face CSS rule to your Child theme (the example below has the font files in a folder called 'custom_fonts' in the root folder of the child theme). Make sure the relative path to your font files from the Child theme CSS file is correct.

/* Custom Font */
@font-face {
    font-family: 'Julietta';
    src: url('custom_fonts/Julietta.eot');
    src: url('custom_fonts/Julietta.eot?#iefix') format('embedded-opentype'),
        url('custom_fonts/Julietta.woff') format('woff'),
        url('custom_fonts/Julietta.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1,h5 {
    font-family: 'Julietta';
}
Step 3 - At the bottom of the code above we are setting the newly added font to be used by elements h1 and h5.

Footer Setup

Alea 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 Theme 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. Footer Column number is dynamic - depending on what Footer Column widget areas are active (have widgets in them) your footer will be split into up to 4 columns.

Sidebars

You can customize your global Sidebars and Post/Page Sidebar Layouts under the Theme 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 (widget areas). 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 Alea 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 Alea easily by adding custom widgets to your widget areas (Sidebars/Footer columns). By default Alea comes with the following widget areas: Alea 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 Alea 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 Theme Options > Sidebars 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.

Alea Specific Widgets

Alea ships with a few custom widgets:
Alea: Contact Info - Use it to display contact info into your Sidebar/Footer column.
Alea: Icon Text Widget - Use it to display Icon - Text details in the header for Stripe or Solid Navigation styles.
Alea Latest Posts - Use it to display a number of latest Posts into your Sidebar/Footer column.

Creating Pages

Content management is a breeze with Alea and it requires no coding skills. Using a highly customized version of the WPBakery Page Builder 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 Alea:

  • General
  • Design Options tab
  • Overlay tab
  • Background tab
  • Effect tab
  • Managing Columns
Step 1 - Go to Pages > Add new in your Dashboard. Add a Title to your Page (top field).
Step 2 - Switch to WPBakery Page Builder (Blue button on top of the edit page screen) in case you have WordPress 5+ (Gutenberg editor enabled), then click on Backend Editor if you are currently under Classic Mode (button below Title field).
If you have already upgraded to WordPress 5+ (the one with Gutenberg editor) you can easily switch editors by clicking on the WPBakery Page Builder/Gutenberg Editor buttons at the top of your edit page screen.
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 (X 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 - Columns gap
You can set the gap between columns in your row in this section, pick one of the values if you want to override the default.
Step 4 - 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 5 - Equal height
Check this option if you want your Row Columns to have equal height.
Step 6 - 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 7 - 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 8 - Optionally add a CSS Animation to your Row.
Step 9 - 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. 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 (Overlay)

You can add custom background overlays to your Rows with Alea. Click on the Overlay when editing Row Settings to access the Overlay Options. You can pick custom color(s) or a gradient of colors for your Overlay. Make sure you set the Alpha Transparency (to less than 100) when picking a color if you want a background image underneath the overlay to be visible.
You can further pick a Shape border to your Row, set its position, height & color. Feel free to experiment with this section to get the desired result. Check out some of the cool Shape Borders that Alea allows you to create below.

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

Using the last 2 tabs (Background & Effect) you need to have the Parallax & Video Backgrounds for VC Plugin (ships with the theme) installed. They extend the Row Settings and allow configuring Row backgrounds in a different way than the other background options that are default for Page Builder so make sure to not mix them up, your rule of thumb should be - if using the Background & Effect tabs use only them for setting your Row background options. More on installing the plugin - check your Plugin Installation section. For more info on the plugin check the Plugins section in this documentation.
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 WPBakery Page Builder 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 tab) - Extended via Parallax & Video Backgrounds for VC Plugin

Using the last 2 tabs (Background & Effect) you need to have the Parallax & Video Backgrounds for VC Plugin (ships with the theme) installed. They extend the Row Settings and allow configuring Row backgrounds in a different way than the other background options that are default for Page Builder so make sure to not mix them up, your rule of thumb should be - if using the Background & Effect tabs use only them for setting your Row background options. More on installing the plugin - check your Plugin Installation section. For more info on the plugin check the Plugins section in this documentation.
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 Element > Section Borders page in the Demo to see some examples (some of the section borders shown there are generated via the Overlay tab -> Use shape border).

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 element to the bottom of the Column. The X 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 you with the options to modify each columns background, CSS animation as well as add ID/CSS classes to your Column if you wish to style it via CSS.
Useful Classes - Alea comes with a few useful CSS classes that help you modify a Column's behavior for Mobile:
Class Function
reset_padding_in_responsive_column Resets padding of a column in Responsive Mode. For example you have set a left, top and bottom padding of 20% for a column in the Design Options for regular Desktop screens, in mobile you want that padding to be reset to equal left and right paddings. (Sets columns's Padding in Responsive to "0 12% 0 12%")
reset_side_padding_in_responsive_column Resets only side paddings of a column in Responsive Mode. For example you have set a left padding of 20% for a column in the Design Options for regular Desktop screens, in mobile you want that padding to be reset to equal left and right paddings. (Sets columns's Side Paddings in Responsive to "12%")
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. (Sets columns's Padding in Responsive to "0 15px 0 15px")
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. (Sets columns's Side Padding in Responsive to "15px")
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. (Sets columns's Margins in Responsive to "0")

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 X Icon to remove your Element.

Alea Studio

Alea WordPress Theme allows you to easily add fully predesigned, Alea specific sections to your page with just the click of a button without any content importing. Build whole pages in a matter of minutes!
To access Alea Studio simply heade over to the Templates section (the icon next to the Plus Icon in the top left when in Backend Editor), then click on Default Templates tab. Clicking on one of the predesigned sections will automatically add it to your page where you can further modify it.
Notice towards the end of the video we modify the Alea Page Settings to disable the default Page Heading and Top Margin, and activate the Transparent Header. Head over to the Page Settings section (a few sections down) to read more on this topic.

Custom Templates (My Templates)

With Alea WordPress Theme you can create your own custom templates and reuse content easily throughout your website. When editing a page you can save the whole page as a template or just a single section/row from it. To access Templates click on the icon next to the Plus Icon in the top left when in Backend Editor.
The Popup you see next lists your previously saved templates and lets you Save the current page as a template. To Save your current Page as a new template enter a unique name in the field and click on Save Template.
Apart from saving whole pages as templates you can save single Row Page Sections only so you can easily reuse them. To do so edit a Row, then click on the Element Settings icon in the top right, then click on the Save as Template link. Enter your new Row Section Template title in the popup that comes up and click on Save Changes.
Adding your Custom Templates to Pages is done by accessing the My Templates popup (click on the icon next to the Plus Icon in the top left when in Backend Editor). You will then see a listing of your Saved Templates, to add one to your current page hover it and click on the Plus Icon.

Additional Shortcodes Dropdown

Apart from the Page Elements described in the above section Alea 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 Alea Style Button element within your Content or Text Block element.

Code Example

[boc_button href="http://google.com" btn_content="Button Title" target="_self" size="btn_medium" color="btn_theme_color" btn_style="" border_radius="btn_rounded" icon="boc_i-arrow-pointing-to-right" icon_pos="icon_pos_after" icon_effect="btn_icon_anim_out"]

Attributes

Attribute Possible Values
href The URL your button will link to
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", "btn_full_width"
color "btn_theme_color", "btn_white", "btn_dark", "btn_royalblue", "btn_bondi", "btn_emerald", "btn_jade", "btn_turquoise", "btn_azure", "btn_blue", "btn_green", "btn_limegreen", "btn_yellow", "btn_orange", "btn_pink", "btn_red", "btn_apple", "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 add an icon class from the list of Theme Icons, for example: boc_i-arrow-pointing-to-right
icon_pos "icon_pos_before", "icon_pos_after"
icon_effect Leave empty for None or "btn_icon_anim_out" or "btn_icon_anim_in"

Icon

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

Code Example

[boc_icon size="normal" icon_position="center" icon_color="#ff1956" has_icon_bg="" icon_bg="#ffffff" icon_bg_border="#ffffff" border_radius="100%" icon="fa fa-star" margin_top="" margin_bottom=""]

Attributes

Attribute Possible Values
icon Add the icon class from the list of Theme Icons, for example: fa fa-star-o
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="60px" css_classes="mobile_h20"]

Attributes

Attribute Possible Values
height Enter your height in PX, for example "20px"
css_classes You could override the height you set in the previous parameter for Mobile devices by adding a helper class here, for example mobile_h20. This will render your spacing element as 20px in height in Responsive Mode. Possible values are: mobile_h20, mobile_h40, mobile_h60, mobile_h80, mobile_h100, mobile_h200

Table

Generates a custom HTML table.

Code Example (in Text Editor, not Visual)

<table class="alea_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 css_class=""]Some text[/highlight]

Attributes

Attribute Possible Values
css_class Add a custom class to it if you wish to style it further

Tooltip

Creates a Alea 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 Alea 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 Alea Page Settings

Alea features custom settings for your pages that you can set globally under Theme Options (Theme Options > General in your Dashboard - read more in the Theme Options section) and individually on a per Page basis in your Edit Page screen under the Alea Page Settings section (the section will be above or below your WPBakery Page Builder 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 (Full width or Boxed).
Set explicit Page background if you are using the Boxed Wrapper style - Overwrite Global Page Background set in Theme 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.
Show Page Heading - This is the area that contains the Page Title and Breadcrumbs, right below the header. If ON you can further set: Show Breadcrumbs, Tall Heading Area, White Text in Page Heading
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 Theme Options > Header > Transparent Header.
Activate Preloader Animation for this Page - Set to ON if your global "Preloader Animation" setting found in Theme Options > General is set to OFF and you want to overwrite it and enable the Preloader Animation Spinner for the current page.
Activate a Dotted-Style Side Navigation for this Page - Select a dotted Side Nav for this page similar to this page in our Demo. Make sure you have created a Menu and it matches the section IDs in your page. For more information check the Menu Setup Section -> Side Dotted Menu.
Disable Header for this Page - Set to ON if you want your main Header disabled for this page. For example our Coming Soon Page in our Demo.
Disable Footer for this Page - Set to ON if you want your Footer disabled for this page. For example our Coming Soon Page in our Demo.

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.

Create your Blog Posts

If WPB Page Builder is disabled by default for your Posts you can enable it by going to WPBakery Page Builder -> Role Manager -> Post types and tick the Post checkbox
Creating Posts with Alea 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

Alea 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 Templates

Alea supports 3 custom Blog Post templates you can choose from for your Blog post items:
1. Featured Image above content Example
2. Full Width Featured Image BGR Example
3. Side Meta Example
You can set the template you want to use for your Blog Posts globally under Theme Options > Blog > Single Post Style. You could override this value on a per Post basis when editing a Post in the Post Template dropdown.

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 Alea 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.

Custom Blog listing Page

If you want a custom Blog page where you would list your blog items with a post grid for example you can create one yourself then manually add this new page to your menus. Here's an Example of such a page in our Demo. You would create your page like you normally would, then add your customizable Blog grid item. Make sure you have featured images added to all your Post items as post grids display only items that have one.

Creating a Coming Soon... Page

To create a Coming Soon page like the one in our Demo do the following:
Step 1 - Go to Plugins > Add New in your Dashboard and find the "T(-) Countdown" plugin using the Search (Search by "T Countdown").
Step 2 - Install the plugin and Activate it.
Step 3 - Go to the plugin Settings (Dashboard > Settings > T(-) Countdown) and add this Alea specific CSS to the "Custom CSS" field:
.alea-dashboard {
	min-height: 120px;
	width: 100%;
	display: table;
	margin: 0 auto;
	background: transparent;
	padding: 0;
}
.alea-dash {
	display: table-cell;
	text-align:center;
	color: #333;
	border: 10px solid transparent;
	line-height: 38px;
	padding-bottom: 38px;
}
.alea-digit {
	font-size: 44px;
	line-height: 50px;
	display: inline-table;
	width: 25px;
	text-align: center;
}
.alea-dash_title {
	line-height: 22px;
	display: block;
	position: relative;
	top: 72px;
	white-space:nowrap;
	text-align:center;
}
.white_text .alea-dash {
	color: #fff;
}

@media only screen and (max-width: 480px) {
	.alea-dash {
		display: block;
	}
}
Step 4 - Create a New page (Pages > Add New). Design your Page anyway you like then to add the Countdown animation to it simply add a Text Block Element and inside it place the shortcode for your countdown like so:
[tminus style="alea" t= "15-12-2015 12:45:05"][/tminus]
Use "alea" for the style attribute and for the "t" (time) attribute pass your launch date and time in the "DD-MM-YYYY HH:MM:SS" format. Read more on the shortcode on the plugin official page.

Creating Portfolio Items

Alea 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 WPBakery Page Builder for your Content and you don't see the Dark Blue VC button (Backend Editor/Classic Mode) head over to Dashboard > WPBakery Page Builder 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

Alea 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. Youtube and Vimeo platforms both offer buttons that generate this video embed code for you.
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

Alea supports 4 different Portfolio Item Templates.
Side Media (Default) Template - 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.
Wide Media - 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.
Side Vertical Gallery - 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 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 Alea. 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

Alea 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

Alea 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 Alea'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.

Alea styling for your forms (style presets)

Alea 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* full_name placeholder "Your Name *"] </p>
<p>[email* email placeholder "Your Email *"] </p>
<p>[text subject placeholder "Subject *"] </p>
<p>[textarea message x5 placeholder "Message *"] </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_theme_color class:btn_circled class:btn_medium_stretched "Submit"]</p>

Style 2

<p>[text* full_name class:input_bottom_line placeholder "Your Name *"] </p>
<p>[email* email class:input_bottom_line placeholder "Your Email *"] </p>
<p>[textarea* message x3 class:input_bottom_line placeholder "Message *"] </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>
<div class="h10"></div>
<p>[submit class:btn_theme_color class:btn_theme_color class:btn_circled class:btn_medium_stretched "Send"]</p>

Subscribe Form

<div class="vc_row wpb_row">
<div class="vc_col-sm-2"></div>
<div class="vc_col-sm-3">[text* your-name placeholder "Your Name"]</div>
<div class="vc_col-sm-3">[email* your-email placeholder "Email"]</div>
<div class="vc_col-sm-2">[submit class:button class:btn_medium class:btn_full_width class:btn_theme_color class:btn_circled "Submit"]</div>
<div class="vc_col-sm-2"></div>
</div>

Subscribe Form (Style 2)

<div class="vc_row wpb_row">
<div class="vc_col-sm-2"></div>
<div class="vc_col-sm-3">[text* your-name class:input_bottom_line placeholder "Your Name"]</div>
<div class="vc_col-sm-3">[email* your-email class:input_bottom_line placeholder "Email"]</div>
<div class="vc_col-sm-2">[submit class:button class:btn_medium class:btn_full_width class:btn_theme_color class:btn_rounded "Submit"]</div>
<div class="vc_col-sm-2"></div>
</div>

Subscribe Form for Dark Backgrounds (Style 2)

<div class="vc_row wpb_row">
<div class="vc_col-sm-2"></div>
<div class="vc_col-sm-3">[text* your-name class:input_dark placeholder "Your Name"]</div>
<div class="vc_col-sm-3">[email* your-email class:input_dark placeholder "Email"]</div>
<div class="vc_col-sm-2">[submit class:button class:btn_medium class:btn_full_width class:btn_azure class:btn_rounded "Submit"]</div>
<div class="vc_col-sm-2"></div>
</div>
The Contact Forms available in our Demo can all be imported along with the full Demo import so if you wish to experiment with them you can import the Demo in a testing environment to do so. Bear in mind that the Mail tab is where you set where emails will be sent and you should configure that correctly and have a correctly working mail server setup (localhosts usually do not have one). To test whether mails get sent on your webserver you can use a plugin like Check Email

Creating custom Contact Pages

Using Alea WordPress Theme you can create custom Contact pages 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 > Miscellaneous. As you can see below these are just regular pages with custom elements added to them. Setting up your contact forms is reviewed in the previous section (Creating Contact Forms).

WPBakery Page Builder

Using a highly customized version of the WPBakery Page Builder plugin Alea WordPress theme offers a user friendly Drag'n'Drop interface for easy page creation and editing. Content management is a breeze with Alea and it requires absolutely no coding skills.
You get to use WPBakery Page Builder for FREE with Alea! You don't need to activate the plugin as it runs FREE with the use of our theme as we have purchased an extended license for the theme. You don't need to buy the plugin, it's fully functional as a part of the theme. However if you want the premium features i.e. support from WPBakery) then you need to purchase a separate license from CodeCanyon. We will update WPBakery Page Builder to the latest version with theme updates, so you just need to wait for the next theme release.
Adding and editing Page Elements is pretty straightforward with WPBakery Page Builder, 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 WPBakery Page Builder'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 - $12 Worth with the purchase of a Regular license of Alea 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 WPBakery Page Builder 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 - $26 Worth with the purchase of a Regular license of Alea that is suitable for use on 1 website! You don't need to activate the plugin as it runs FREE with the use of our theme as we have purchased an extended license for the theme. You don't need to buy the plugin, it's fully functional as a part of the theme. However if you want the premium features then you need to purchase a separate license from CodeCanyon.
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.
Here's a list of our Revolution sliders, you can download from here and import them. Click on the links below, save the file, then import it with the Import Slider button mentioned above.
company-slider.zip - used on the Company Slider page.
home_video_slider.zip - used on the Home Video Slider page.
medical-slider.zip - used on the Medical page.
light-slider.zip - used on the Business Slider page.
shop_slider.zip - used on the Shop page.
vimeo-hero.zip - used on the Outdoors page.
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

After you import the Slider Demos you can modify them according to your needs. When in Editor mode you can click on each layer and modify it or change its settings.
Apart from Revolution Slider's default buttons Alea allows you to add Theme style buttons to your slides so they match Alea's default button styles. 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 Alea 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="fa fa-heart"></i></a>
As you can see adding a Alea 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 class passed:
<i class="fa fa-heart"></i>
Here is a sample code for a White Color Outline Alea 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 Alea'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.
To prevent loss of data it's always a good idea to make backups of your sliders/WP installation before updating.
If the Alea 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.
Alea 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.

Translation (WPML or Polylang)

Alea Theme uses PO/MO translation files that are an industry standard for translation of WordPress websites. In theme folder you will find a folder called languages. You will find the English language POT translation template file in that folder that is ready to create translations from.
alea.pot - The POT file contains a list of all text strings in the theme. The text strings are in English and you can use this file as an input for creating your own language PO file.
If your language isn't included in the theme language files. You have to create a new PO file from the original alea.pot located in the languages folder then save the new .po file with your language code for example de_DE.po
boc-shortcodes-and-widgets.pot - The POT file contains a list of all text strings in the Alea Shortcodes & Widgets plugin. The text strings are in English and you can use this file as an input for creating your own language PO file for the strings in our plugin (the file is located in /wp-content/plugins/boc_shortcodes_and_widgets/languages).
In order to generate your own language PO/MO files we recommend using the "Loco Translate" or POEDIT app. Using both you can open the default POT file that comes with the theme and generate your own language PO file which you can further generate a MO file from. To activate your language head over to Settings -> General -> Site Language. If you want a multilanguage site we recommend using the PolyLang plugin or the premium WPML plugin. You can find further info on their implementation on the corresponding website of each plugin.

Woocommerce plugin

Alea 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 install the plugin, activate it and finalize its setup.

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 > Products and setting up your Woocommerce Theme Options (scroll down).

Woocommerce Theme Options

Alea has some custom Theme Options related to Woocommerce that will help you manage your Online store. Head over to Dashboard > Theme Options > Woocommerce to explore them.
Here's what you can customize within Alea'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="70px"]</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 (check the Revolution Slider section on how to import this specific slider if you haven't yet) and we want to show on top of our Shop page and "[boc_spacing height='70px']" is simply a Alea "spacing" shortcode of 70 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.

WC Secondary Product Thumbnail Plugin

In our Theme Demo you can see a second product thumbnail shows once you hover a product in your product listing pages. This is achieved easily by installing the "WC Secondary Product Thumbnail", the rest is done by the theme. As stated in its description it adds a hover effect that will reveal a secondary product thumbnail to product images on your WooCommerce product listings.

Child Theme

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

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 by overriding styling or functionality in the Child theme only without changing the code of the parent theme. This way if the parent theme gets updated the code changes remain intact and do not get lost.

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.

Importing Theme Options from Parent to Child theme

Important: If you are switching to a Child theme from using the default Alea theme you may want to Import the Theme Options that you have saved before as they apply only to the theme currently in use. You can go to Theme Options -> Import Options -> Export then COPY the encoded TEXT in the Textbox. You can now switch to your Child theme, head over to Theme Options -> Import Options -> Import and PASTE the encoded TEXT into the Textbox and click on the Import Theme Options button. Your Theme Options should now be imported to your Child Theme from your Parent theme.

Overriding templates in a Child theme

In case you want to customize the HTML output of a certain area of your Alea WordPress theme, you can override parent template files in your child theme. This WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated. A child theme can override any parental template by simply using a path/file with the same name. That means when you want to override a template file, you can copy the original file from the parent theme and paste it in the child theme folder with the same file name (directory path should be the same). WordPress will then use the file of the child theme instead of the parent template. Afterwards you can edit the file in your child theme folder and make your changes.
For Example:
1. You want to edit the page.php
2. Open the page.php file and save a copy in the child theme
3. Edit and save the page.php in the child theme
Read more on Modifying your Theme and using Child Themes here.

Using Theme Hooks to modify content

Alea includes custom action hooks so you can make modifications using your Child theme's functions.php file. By using filters and hooks you won't have to worry about keeping track of modifications to the template files in the parent theme when the parent theme is updated. Here's the current list of action hooks we have provided for you to use, if you need one that is not in the list make sure you open ticket in our Support Forum and we can add one to the theme.
Actions Description Location
boc_after_body_opening_tag This hook is executed right after body tag in HTML. header.php
boc_after_subheader_start This hook is executed right after the Subheader start. header.php
boc_before_logo This hook is executed right before the logo markup. header.php
boc_after_logo This hook is executed right after the logo markup. header.php
boc_before_mobile_menu_popup_closing_tag This hook is executed right before the mobile menu closing tag. header.php
boc_after_content_opening_tag This hook is executed right after the page content opening tag. header.php
boc_before_content_closing_tag This hook is executed right before the page content closing tag. footer.php
boc_after_footer_opening_tag This hook is executed right after the footer opening tag. footer.php
boc_before_footer_closing_tag This hook is executed right before the footer closing tag. footer.php

Theme Filters

boc_override_default_page_settings_page_heading
Location: /includes/meta_boxes.php
Description: Overrides the default Page Settings value for Show Page Heading. Default is on.
Example:
function my_page_heading_option($fruits) {
	return 'off';
}
add_filter('boc_override_default_page_settings_page_heading', 'my_page_heading_option');
boc_override_default_page_settings_content_top_margin
Location: /includes/meta_boxes.php
Description: Overrides the default Page Settings value for Page Content Top Margin. Default is on.
Example:
function my_page_content_top_margin($fruits) {
	return 'off';
}
add_filter('boc_override_default_page_settings_content_top_margin', 'my_page_content_top_margin');
boc_override_default_page_settings_transparent_header
Location: /includes/meta_boxes.php
Description: Overrides the default Page Settings value for Activate Transparent Header. Default is off.
Example:
function my_page_transparent_header($fruits) {
	return 'on';
}
add_filter('boc_override_default_page_settings_transparent_header', 'my_page_transparent_header');

Global Custom CSS

Alea provides you with a useful way of adding Global CSS rules to your website without editing any files. Simply head to your Theme Options > Custom CSS in your Dashboard and type in any CSS you want globally included into all your pages.
For instance the example above changes the body text color to black for all your pages.

Custom Page CSS (Custom CSS Settings)

Alea 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 Alea features we used the Custom Page CSS to overwrite Theme Options on different pages. For example on Pages > Agency Green page we have overwritten the Heading font of our Demo to implement the Source Sans pro font for headings on this page only.

Helper CSS Classes

Alea 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 Alea elements provide an "Extra class name" field where you can add CSS classes to them.
Class Function
center Add this class to a row or column to center elements within it i.e. you want buttons centered in a column or a row.
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 in order for elements in it to inherit a white color.
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).
text_shadow Apply a text shadow to the specified text element. Applied to the big heading on Consulting Green page for example.
heading_left_line Apply a left line effect to the specified heading element. Applied to the big heading on Company Green page for example.
hide_in_responsive Hide this element in Responsive mode (screens smaller than 768px in width)
reset_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).
reset_side_padding_in_responsive_column Add when you want the Side Paddings (left & right) you have assigned to a Column in the Design Options tab to be disregarded in Responsive Mode (on smaller screen devices).
no_padding_in_responsive_column Add when you want the Paddings you have assigned to a Column in the Design Options tab to be reset to "0" 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 Optionstab to be reset to "0" 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 reset to "0" under Responsive Mode.
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.
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 Azure page, Read more button below the ALEA COMPANY PROUDLY PRESENTS heading.
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.
btn_full_width Add to a button to make it Full Width in size - take the container's width
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 > Company Magenta - Our Awesome Team section the borders among the 4 columns with testimonials are accomplished by adding the "row_img_featured_texts_border" class to the 2 rows.
small_video_link Add this class to an anchor tag (link) to create a small Active color Video icon before the link text. Check the About Us 2 page in the Demo (in the Header before the WATCH ALEA IN ACTION text). To render the video icon white add this additional class "white", like so "small_video_link white". Add a Text Block, use the TEXT editor instead of the VISUAL and paste this inside:
<a class="small_video_link white mfp_iframe_popup uppercase" href="https://vimeo.com/32944253"><span style="color: #ffffff;">Watch Alea in action</span></a>
video_link (inverted) Add this class to an anchor tag (link) to create a large Video icon like the one found on Agency Azure page from the demo, in the column to the left of the "We are Alea company" heading. If you want a different style of the video button add an extra "inverted" class like so: "video_link inverted". Add a Text Block, use the TEXT editor instead of the VISUAL and paste this inside:
<a class="video_link mfp_iframe_popup" href="https://vimeo.com/32944253">Video</a>
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). Example can be found on Services 3 page in our Demo - the 3 images below the header banner.
white_frame_img Sets a white frame and a light grey drop shadow to an image.
Used on Pages > Mobile Blue for the Image (top left).
push_down_130 Sets a top offset of 130px for an image relative to its default.
Used on Pages > Mobile Blue for the large Phone(s) Image at the page top to push it down 130 pixels and make it overlay the next Row.
push_up_60 Sets a negative top offset of 60px for an element relative to its default.
Used on Pages > Medical Page for the 3 column below the slider.
max_w50 Sets a max-width of 50px to the element. Useful on SVG images, to set a max width to them, as by default they are 100% wide. Alternatives are max_w30 and max_w100, or you can make one yourself with simple CSS like so:
.max_w200 { max-width: 200px }

Used on Pages > Medical Page for the icons within the 3 column below the slider.
hover_box_up Add this class to an Element to add a cool Sliding Up effect on hover. Take a look at the Company Red page (Awesome Service Bundle) or Agency Green (Awesome Service Bundle section) in the Demo.
mm_hide Add this class to a Mega Menu Column container Menu item to hide the Heading of the Column
bouncing Add to anything you want to add a Bouncing effect to, for example an Icon element pointing down. For example the icon below the Header heading in the Single Page from the Demo
fade_down Add to anything you want to add a Fade Down effect to, for example an Icon element pointing down. For example the icon below the Header heading in the Company Magenta from the Demo
boc_offset_left Offsets an element to the left of its original position on a page. Check the "A WordPress Theme that rocks!" blog post for example (the blockquote in its content is offset to the left by adding this class).
boc_offset_right Offsets an element to the right of its original position on a page. Check the "A WordPress Theme that rocks!" blog post for example (the image in its content is offset to the right by adding this class).
row_overflow Allows a Row to have its overflow CSS property to get the 'visible' value, thus enable overflowing rows, as by default Page builder sets full width rows to have an overflow: hidden. If you imported the Demo and edit the Services Pink page you will notice we added this class to the gray section that holds the white block holding the icons and goes below the Awesome Service Bundle section so that when we set a negative top margin to the white inner Row that holds the icons will be visible even though it overflows the parent gray Row.
slight_shadow Applies a slight box-shadow CSS property to the current element. Alternatives that you can experiment with are: slight_shadow_heavy, grey_shadow, medium_shadow, big_shadow.
grey_shadow_column Applies a slight box-shadow CSS property to the current column.
parallax_scroll_me (speed_5) Adds a parallax scrolling effect to the element that takes place when a user scrolls the page. Check the images in the Company Green page from the Demo for example. You can modify the default speed and direction of moving you can add an extra class that is in the following format: "speed_-3" where "-" sets the direction and the number "3" sets the speed. Another example would be "parallax_scroll_me speed_10" and "parallax_scroll_me speed_-12"
section_icon_separator Apply to an icon that you want to use as a section separator like the one at the bottom of the Services page from the Demo for example. If you import the Demo and edit that page you can inspect that Icon in the Editor to see how this is further achieved.
row_overflow Add class to a Row the you want to overflow on top of a previous row

"Particles" effect

The Particles effect you can see a preview of on our About Us page from the Demo can be created by adding the "particles_animation" ID to a Row element and you will have the cool effect take place in your Row. By default the particles layer will be added below your content so that actions like buttons etc will still work. If you want to place the "particles" canvas on top of everything that goes into your Row though so that the particles hover effect takes place fully then simply add the "particles_on_top" CSS class to that same Row!

Raw JS on a Page

Alea 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 Alea (Manual)

Updating Alea 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 Alea Theme by activating a different theme.
Step 3 - Delete Alea Theme, don't worry your content will not be lost.
Step 4 - Upload the latest version of alea.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). Your content (Pages/Posts/Media/Theme Options) will not be lost when you update your theme.

Automatic Theme Updates

You can also take advantage of the Envato Market WordPress Plugin to automatically update your theme.
Same applies here, 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). Your content (Pages/Posts/Media/Theme Options) will not be lost when you update your theme.

Optimize Alea for Page Load Speed

Alea is a theme with plenty of features and internal resources. Even though it is coded with optimization in mind there are things to do on your server side to significally improve Page Load speed as WordPress is generally heavy on servers. Apart from using a good hosting here's what you can do to greatly improve page load speed & user experience.

Use a Caching plugin - Important!

Caching is VERY important as it will speed up your site significantly and it's considered a MUST for shared hosting plans. We setup "WP Super Cache" for our Demo but you can use alternatives like "WP Total Cache" to cache your website content. They Cache your pages into static HTML files so they are served straight away when requested by the client browser instead of building the pages dynamically, running hundreds of queries etc. upon every page load. These plugins also offer additional features for minifying your JS/CSS file resources that will greatly improve performance as well. Read More >

Minify your Resources - Important!

Minification is the process of taking a piece of code and removing all unnecessary characters from it (white spaces, line breaks, and so on). Minified files perform exactly the same as the original code, they just take up a little less space because they cut out extraneous information. Minification is particularly popular for scripts, stylesheets, and other similar website resources. In our Demo we use the Autoptimize plugin. After you set it up and run it, clear your cache (look at the point above) and reload your page to regenerate the source files and cache. Read More >

Using a CDN

Using a CDN (we use CloudFlare - one of the best free CDNs out there) to serve your static resources is a great way to speed up your site, especially if you are on a hosting plan. Static resources usually take up most the loading time for your site so by using a CDN that hosts your resources on data centers across the world on very fast servers it can really speed things up. You will notice results immediately especially if you have done Step 1 already. All your resources will be combined into single JS and CSS files, they will be minified, they will be cached and loaded off of a CDN.

Optimize your images

Make sure any image you upload to your WP installation is optimized for web. You can also use plugins that optimize your WP images for you for example WP Smush. This will reduce image size, page load times and overall performance.

Version Log

Version 1.10 (22 Apr. 2019)

  • Updated MouseWheel smoothscroll library
  • Added a Theme Option for "Always Sticky" Mobile header
  • A few fixes on Demo Import

Version 1.00 (27 Mar. 2019) - Official Release