Welcome to Alea Documentation

Theme Installation

Installation via WordPress

Installation via FTP

Migration from another theme

Plugin Installation

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

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

General Theme Options

Setting Theme Fonts (Google Fonts)

Inline Font setting per Page via Page Settings

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

h1,h2,h3,h4 {
    font-family: Roboto;
}

Using Custom Fonts

/* 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';
}

Footer Setup

Sidebars

Overwriting Layouts for Specific Pages/Posts

Widgets

Adding widgets

Alea Specific Widgets

Creating Pages

• 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

Alea Studio

Custom Templates (My Templates)

Additional Shortcodes Dropdown

Button

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

Icon

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

Spacing

Code Example

[boc_spacing height="60px" css_classes="mobile_h20"]

Attributes

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

Highlight

Code Example

[highlight css_class=""]Some text[/highlight]

Attributes

Tooltip

Code Example

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

Attributes

Text Message

Code Example

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

Attributes

Manage Alea Page Settings

Select your Website's Home Page

Create your Blog Posts

Post Formats

<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

Post Categories

Post Tags

Select your Website's Blog Page

Custom Blog listing Page

Creating a Coming Soon... Page

.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;
	}
}

[tminus style="alea" t= "15-12-2015 12:45:05"][/tminus]

Creating Portfolio Items

Portfolio Item Formats

<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

Portfolio Item Templates

Creating a Portfolio Page

Creating a custom Portfolio Page

Creating a Contact Form

Alea styling for your forms (style presets)

Demo Contact Forms

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>

Creating custom Contact Pages

WPBakery Page Builder

Parallax & Video Backgrounds for Visual Composer plugin

Revolution Slider plugin

Importing Theme Revolution Slider Demos

Modifying the Demos

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

<i class="fa fa-heart"></i>

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

Updating your Revolution Slider Plugin

Contact Form 7 plugin

Really Simple CAPTCHA

Translation (WPML or Polylang)

Woocommerce plugin

Install Woocommerce

Import Demo Data

Woocommerce Theme Options

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

WC Secondary Product Thumbnail Plugin

Child Theme

What is a Child Theme?

Why use a Child Theme?

Importing Theme Options from Parent to Child theme

Overriding templates in a Child theme

Using Theme Hooks to modify content

Theme Filters

function my_page_heading_option($fruits) {
	return 'off';
}
add_filter('boc_override_default_page_settings_page_heading', 'my_page_heading_option');

function my_page_content_top_margin($fruits) {
	return 'off';
}
add_filter('boc_override_default_page_settings_content_top_margin', 'my_page_content_top_margin');

function my_page_transparent_header($fruits) {
	return 'on';
}
add_filter('boc_override_default_page_settings_transparent_header', 'my_page_transparent_header');

Global Custom CSS

Custom Page CSS (Custom CSS Settings)

Helper CSS Classes

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

<a class="video_link mfp_iframe_popup" href="https://vimeo.com/32944253">Video</a>

.max_w200 { max-width: 200px }

"Particles" effect

Raw JS on a Page

Updating Alea (Manual)

Automatic Theme Updates

Optimize Alea for Page Load Speed

Use a Caching plugin - Important!

Minify your Resources - Important!

Using a CDN

Optimize your images

Version Log

Version 1.30 (7 Dec. 2022)

• Updated Libraries and plugins
• A few fixes on Demo Import

Version 1.20 (12 Apr. 2020)

• Updated Libraries and plugins
• A few fixes on Demo Import

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