Pre-Order Apps, Inc. - White-label Apps for Square

$1M+ Brandable E-Commerce Apps

• created: 01/01/2014
• last update: 03/22/2021
• by: Pre-Order
• email: support@getpreorder.com
• View Changelog »

OFFICIAL SQUARE PARTNER

Installing Pre-Order & Importing Demo Content

This step is meant for Pre-Order Installation Specialists and Experts.

1. CPanel/FTP upload - Here are the steps you need to take:
   1. Copy files to new directory/folder
   2. Go to /config/settings.php and change Line 4 to the new website URL - ie. $siteroot = 'https://clientname.sqdash.co/';
   3. Open .sql file with DB content and do a find and replace of the old URL with the new. Start with http://oldurl.com/ to http://newsite.url/ then do it again without the / and it should be 33 replace instances, then 10.
   4. Create a new DB + User with all privileges, then open PHPMyAdmin and import the new .sql file
   5. Go to /framework/mysql.class.php and update Lines 5-7 with new db info.

Once installation is complete, your Pre-Order will be ready to customize. You should be able to know type in your URL and see the default Pre-Order Demo. Log in to your Admin area simply by logging in with the Admin login info that was provided to you and begin customizing!

Updating Pre-Order

Auto-Update Feature

Coming Soon

Manual Update

Coming Soon

1. Instruction 1
2. Instruction 2
3. Instruction 3
4. Instruction 4

Important F.A.Q.

1. FAQ Question?

FAQ Question

suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000

2. FAQ Question?

Further Description example...

3. FAQ Question?

4. FAQ Question?

5. FAQ Question?

• By Wp-config.php changes - set_time_limit(120);
• In htaccess - php_value max_execution_time 120;
• In php.ini file - max_execution_time = 120

Ask your hosting provider to take care of this for you.

Once you've installed Pre-Order, you can start building your site.

Setting Up the Header

One of the first things you might want to do is to set up the header area. This section contains the logo, menu, search bar, side area icon, and other optional widgets.

To set it up, go to Pre-Order Options > Header from the admin panel. The settings you define here will be the default settings for all pages on your site. If you need help with any of the options, please refer to Pre-Order Options in this user guide. Some options, such as the header skin and background color, can be overridden on the page level by going into the page's backend. For more information on how local page settings work, see Pages.

Uploading Your Logo

Now let's add a logo. Go to Pre-Order Options > Logo from the admin panel and click the upload button next to the "Logo Image - normal" field. You should now have a visible logo in your header area.

Menu Creation

To create a menu, go to Appearance > Menus from the admin panel. Click on "Create a new menu." Enter a name for your menu, and then click on "Create Menu".

Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.

Underneath the menu items, under the section Menu Settings, check "Top Navigation" and click "Save Menu" in order to activate the menu you've just created. You should now have a functional menu on your pages.

Footer

Now let's set up the footer by going to Pre-Order Options > Footer from the admin panel.

The settings you define here will be the default settings for all pages on your site. Make sure that Show Footer Top and Show Footer Bottom are enabled. If you need help with any of the options here, please refer to Pre-Order Options in this user guide.

To add content to your footer, you need to activate widgets by going to Appearance > Widgets from the admin panel. On the right side of your page are widget areas for the footer, named Footer Column 1, Footer Column 2, Footer Column 3, and Footer Column 4. On the left side of your page are the available widgets. Simply drag the widget you'd like to one of the Footer Column widget areas on the right.

To add content to the footer bottom, add widgets to one of the Footer Bottom widget areas.

General Look and Feel

Finally, let's set up the general look and feel of your site. If you'd like to keep the fonts and colors you see on the Pre-Order demo site, then you do not need to do anything more. Otherwise, go to Pre-Order Options > General. Under Design Style, choose a default font family for your site, as well as the default content background color.

Now that you've set up some basic elements, you're ready to begin building your pages.

Building Pages

To create a new page, go to Pages > Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.

At the bottom section of your screen are local page settings. Any settings you define here will override the global settings you've set in Pre-Order Options. It is generally a good practice to set up the look of your pages on a global level, and then override settings on a local level, if necessary. This will save you a lot of time, unlike if you were to set up every page locally.

Now let's start adding elements to your page. Make sure that you're in the backend editor. If the blue button on the top left says BACKEND EDITOR, click it to enable the Visual Composer. Once you're in backend, the button will say CLASSIC MODE. You can now click on "Add Element" and start building your page. You can read more about elements in the Custom Shortcodes section of this user guide.

Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.

Additional Notes

Font Icon Packs

Please note that Pre-Order comes with two font icon packs: Font Awesome and Font Elegant. You can see an overview of all the available icons in both of these icon packs at the following links:

1. Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
2. Font Elegant: http://www.elegantthemes.com/blog/resources/elegant-icon-font

Blog Posts

To create a new blog post, go to Posts > Add New from the admin panel.

1. Enter a title for your post in the text field near the top.
2. Next, at the right side of your screen, in the section called Format, choose a format for your blog post.

Let's go over the possible options:

• Standard - this is the default blog format. You can start adding content with the Visual Composer.

  

• Gallery - this format features an image gallery slider. In order for it to work, you need to add a gallery at the top of your page.

  

  You can do this by following these steps:
  1. Click on "Add Element" and choose "Text Block"
  2. Delete any default text in the pop-up window and click on "Add Media" in the upper left corner
  3. Click on "Create Gallery" from the menu on the left
  4. Select images that you wish to add, and click the "Create a new gallery" button
  5. You can write captions for the images and reorder them by clicking and dragging
  6. Click the "Insert gallery" button. Click on "Save changes"
• Link - a field called Link post format will unfold at the bottom section of the page where you can enter full URL of the page you wish to link.

  

• Quote - a field called Quote post format will unfold at the bottom section of the page. Here you can enter the quote you wish to display.

  

• Video - a field called Video post format will unfold at the bottom section of the page. Here you can enter your video links. You can either link from Youtube or Vimeo, or alternatively, host your own videos. If self-hosting, you need to upload the video files to the Media Section and then enter the path to the video files in the corresponding fields. We recommend uploading videos in all 3 formats, in order to cover all modern browsers. Under Video image you can upload a background image that will be visible while the video loads.

  

• Audio - a field called Audio post format will unfold at the bottom section of the page. Here you can enter the path to the audio file that you have previously uploaded to the Media Section.

  

Now it's time to categorize this post.

1. Under Format, in the section called Categories, select the categories that you wish to add this post to. Alternatively, if you'd like to create a new category, click on "+ Add New Category." A text field will unfold where you can enter a name for the category.
2. Then click on "Add New Category".
3. Once you've checked the categories where you want this post to go to, click the "Publish button".
4. Under the Categories section are the Tags and Featured Image sections. Here you can add tags to your post, and upload an image to be displayed for this post on blog list pages, respectively.

Now that you've set up your blog post, let's go over the custom fields.

Pre-Order SEO Fields

In order to improve your page ranking on search engines, you can fill out the following custom SEO fields:

• SEO Title - Enter a relevant title for your page here.
• Meta Keywords - Enter relevant keywords here, separated by commas.
• Meta Description - Enter a short description for your page.

Pre-Order General

• Page Background Color - Choose a background color for your page.
• Page Transition - Choose a type of Ajax transition for page loading. Select "No animation" if you want the page to load regularly, without Ajax.
• Hide Feature image - If you enable this option, the featured image will be hidden on your blog single page.
• Layer Slider or Pre-Order Slider Shortcode - If you wish to have a slider on your page, copy and paste the slider shortcode here.

You can find the Layer Slider shortcode by going to WP admin panel > LayerSlider WP > All Sliders.

As for the Pre-Order Slider, you can find it by going to WP admin panel > Pre-Order Slider > Sliders.

• Dimensions of image for Blog Masonry - Date in Image - Set the dimensions of the image for this post which will be applied when using the "Blog Masonry - Date in Image" blog list.
• Always put content below header - Set this option to "Yes" if you would like the content to always display below the header. This option is useful if you are using a transparent header, and would like the content to display below and not behind the header.

Pre-Order Header

• Header Skin - You can choose a header style to be applied. "Light" displays white navigation links and the "Light" logo, while "Dark" displays black navigation text and the "Dark" logo. If you want to set a custom text color for the navigation links and use the default logo, leave this field empty.
• Enable Header Style on Scroll - Enabling this option will change the header skin (dark/light style) depending on the skin set in the row settings.
• Initial Header Background Color - Choose a background color to be applied to the header area.
• Initial Header Transparency - Set the transparency level for the header background on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Pre-Order Title

• Don't Show Title Area - You can choose to hide the title area on your page.
• Animations - Choose a way to animate the title area upon page load. "Text right to left" will make title text slide in from the right side of the page and then settle into position. "Title area top to bottom" will make the title area gradually unfold. Select "No animation" to have a static page title area.
• Don't Show Title Text - You can choose to hide the title text on your page.
  • Title Text Alignment - Choose an alignment for the title text.
  • Title Text Style - Define styles for the title text.
• Background Color - Choose a background color for the title area.
• Don't Show Background Image - You can choose to hide the background image on your page.
  • Background Image - Choose an image for the title area background. For optimal viewing, we recommend that your image is in full HD resolution of 1920 pixels in width.
  • Pattern Overlay Image - If you wish to use a pattern over the title area, upload it here. This image will be repeated to cover the entire title area.
  • Responsive Background Image - Choose "Yes" if you want to make the title image responsive. Note that title area height will be defined by height of the image after it resizes to fit the browser's width.
  • Parallax Background Image
    • Choose "Yes" if you want to make the title image parallax.
    • Choose "Yes, with zoom out" if you want viewers to have a perception of zooming out of the image, along with the parallax.
      Your image should be larger than the title area, in order to be able to shrink and not have any gaps appearing at the sides of the page. We recommend a width of 2500 pixels and a height that's at least 20% more than the title area height. The parallax image will be limited in height by title area height (any excess will be cropped). We recommend that your image is at least this height, in order for the parallax effect to work properly.
• Title Height - Enter a height for the title area in pixels.
• Separator Under Title Text - Choose "Yes" if you want a separator to appear under title text.
• Separator Color - Choose a color for the separator.
• Enable Angled Title - Set this option to "Yes" if you would like to enable an angled title area.
  • Angled Direction - Choose the direction of the angled shape.
  • Background Color  - Set a background color for the angled title.
• Enable Breadcrumbs - Choose "Yes" if you want breadcrumbs to appear in the title area.
  • Breadcrumbs Color - Choose a color for breadcrumbs text.
• Subtitle Text - Enter a subtitle for your page here.
• Subtitle Text Color - Choose a color for subtitle text.

Pre-Order Scroll Title Animations

• Enable Whole Content Title Animations  - Set this option to "Yes" if you would like to enable an animation on the whole title area and all its content.
  • Scrolling Animation Start Point - Here you can set the properties for the first keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will start in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the begining of the animation (e.g. opacity: 1;).
  • Scrolling Animation End Point - Here you can set the properties for the last keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will end in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the end of the animation (e.g. opacity: 0;).
• Enable Page Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title. You can use the options described above to create your animation.
• Enable Page Separator Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title separator. You can use the options described above to create your animation.
• Enable Page Subtitle Animations  - Set this option to "Yes" if you would like to enable an animation on the page subtitle. You can use the options described above to create your animation.
• Enable Page title Breadcrumbs Animation - Set this option to "Yes" if you would like to enable an animation on the page title breadcrumbs. You can use the options described above to create your animation.

Content Bottom

• Show Content Bottom Area - Choose "Yes" to enable the content bottom area on your page.
• Background Color - Choose a background color for the content bottom area.
• Custom Widget - Choose a custom widget area to display in the content bottom.
• Display in Grid - Choose "Yes" if you want the content bottom area to be fitted in a centrally positioned grid.

Pre-Order Sidebar

• Layout - You can choose a sidebar layout for your page.
• Choose Widget Area in Sidebar - Choose a custom widget area to display in your sidebar.

In case you don't want sidebar layout, your blog post will appear like this below:

Blog Lists

You may choose the way your Blog post List will show to visitors (list of all posts with pagination)

In WP admin > Pages find dropdown list "Templates" on the right and choose one of the options

• Blog Large Image

  

• Blog Large Image Simple
• Blog Large Image Whole Post
• Blog Large Image With Dividers

  

• Blog Masonry

  

• Blog Masonry - Date in Image

  

• Blog Masonry Full Width
• Blog Masonry Full Width - Date in Image
• Blog Small Image

  

• Blog Vertical Loop

  

You can access Pre-Order Options from the WordPress admin panel. The settings found here are applied globally and will affect all pages of the site. However, note that many of these options can be overridden locally by applying settings on individual pages or on shortcode elements.

General

This section allows you to set up general settings for your site that will affect its look and functionality. The Design Style section has options for setting fonts, colors, and layout. The Settings section has options for page transitions, animations, scrolling, and more. The Custom Code and SEO sections are where users can add their custom code and SEO settings.

Design Style

• Font Family - Choose a Google font to be used as the default font on your website. It will get applied to the html body tag and will appear on all page elements, unless overridden. To browse through Google fonts, see https://www.google.com/fonts.
• Additional Google Fonts - If you would like to enable some additional Google Fonts for your website, set this option to "Yes". Then, you will have the option to enable up to five additional fonts.
• First, Second, Third, and Fourth Main Color - This section allows you to globally manage colors on your site. Many elements (buttons, icons, separators, etc.) will be displayed in one of the four predefined colors. You can define these colors and apply them in order of dominance. The First Main Color will be the most widely used color, and the Fourth Main Color will be the least used color. Keep in mind that these colors can be, in many cases, overridden in shortcode options, should you decide that you want to use a different color on a certain element.
• Content Background Color - Choose a color to be applied to the main page section where content (text, images, etc.) goes.
• Box Background Color - Choose a color to be used as the default background color for any portfolio or blog posts that appear on your pages.
• Text Selection Color - Choose the color viewers see when selecting text on your site.
• Enable Overlapping Content - Set this option to "Yes" if you would like your content area to overlap the Slider or Title Area by the amount of pixels you specify.
  • Overlapping Amount (px) - Enter the amount of pixels you would like the content area to overlap the Slider or Title Area.
  • Overlapping Left/Right Padding - Set left/right padding for the content area. This option only takes effect on Default (in grid) templates.
• Boxed layout - If you choose a boxed layout for your site, the content will be fitted in a centrally positioned grid. Otherwise, your content will be able to cover full width of the page.
  • Page Background Color - Choose a color to be applied to the page background area. This area is underneath the page content area and is visible on the sides of the screen.
  • Background Image - If you wish to use an image in the background, upload it here. For optimal viewing, we recommend that your image is in full HD resolution of 1920x1080 pixels. Your background image will stay fixed on the page and will not scroll down as viewers scroll. We also recommend that your image be in optimized size in order to reduce page loading time.
  • Background Pattern - Alternatively, if you wish to use a pattern for the background, upload your image here. This image will be repeated over the entire background area.
• Passepartout – Choose "Yes" to set a passepartout around site content.
  • Passepartout Color – Choose a color for the passepartout.
  • Passepartout Size (%) – Enter a size for the passepartout in relation to site width.
  • Align Header With Passepartout – Set this option to "Yes" if you would like your header content to be aligned with the inner edges of the passepartout.
  • Set Header Inside Passepartout - Set this option to "Yes" if you would like to set the whole header between the left and right passepartout border.
  • Vertical Menu in Passepartout - Set this option to "No" if you would like to exclude the Vertical Menu from the Passepartout.
  • Align Footer With Passepartout - Set this option to "Yes" if you would like to align the footer footer content with the inner edges of the passepartout.
  • Top Passepartout – Set this option to "No" if you would like to disable the top frame of the passepartout.
    • Fix Top Passepartout - Set this option to "Yes" if you would like to fix the top border of the passepartout to the top of the screen.
    • Show Bottom Passepartout on Pre-Order Slider – Set this option to "Yes" if you would like the bottom frame of the passepartout to be visible on the Pre-Order Slider. This option is available only if "Top Passepartout" is set to "No".
  • Bottom Passepartout – Set this option to "No" if you would like to disable the bottom frame of the passepartout.
    • Fix Bottom Passepartout – Set this option to "Yes" if you would like to fix the bottom frame of the passepartout to the bottom of the screen.
• Always put content below header - Set this option to "Yes" if you would like the content to always display below the header. This option is useful if you are using a transparent header, and would like the content to display below and not behind the header.
• Initial Width of Content - Choose the initial width of your content in grid. This option only takes effect on pages set to the "Default Template" and rows set to "In Grid".

Settings

• Page Transition - Choose a type of Ajax transition for page loading. Select "No animation" if you want pages to load regularly, without Ajax. In order for the transitions to work properly, you should ensure that in Settings > Permalinks > Common Settings, Post name is selected. Otherwise, your transitions might not work properly.
  • Animate Header  - Set this option to "Yes" if you would like to include the header area in the Ajax page transition animation.
• Loading Animation - Choose "Yes" if you want viewers to see an animated graphic while your site pages load.
  • Loading Animation Graphic - Choose the animation graphic to be displayed. You can customize it further by choosing its color.
  • Loading Image - Alternatively, upload an image or "gif" file to be used as the loading graphic.
  • Center Loading Animation to Browser Window - Set this option to "Yes" if you would like to center the loading animation in regards to the browser window when the left menu is enabled. Otherwise the loading animation will be centered in regards to the content (disregarding the left menu area).
• Smooth Scroll - Choose this option to apply a smooth scrolling effect on your site pages (does not apply to Mac and touch devices).
• Elements Animation on Mobile/Touch Devices - For optimal viewing experience of your site on mobile and touch devices, element animation on them is disabled by default (this applies to buttons, icons, images, etc.). Enabling this option might interfere with elements displaying properly, and so we recommend you keep this option disabled.
• Show "Back To Top Button" - Enable this option if you want a "back to top" button to display at the bottom right corner of every page.
• Responsiveness - By default, this option is set to "On" to enable your site layout to adapt to the viewing environment. We recommend you keep this option enabled in order to give viewers optimal user experience across all devices.
• Sidebar Responsiveness for Tablet Devices (Portrait View) - Enabling this option will enable the responsive sidebar on tablet devices in portrait view. The default behavior is for the responsive sidebar to be enabled for mobile devices.
• Favicon Image - Upload your favicon image.
  We recommend you upload a 16x16 pixel "ico" file format.
• List of Internal URLs Loaded Without AJAX (Separated With Comma) - If you've enabled Ajax transitions but want certain pages on your site to load without it, you can disable it for those pages by entering their full URLs here (for example: ";http://www.mydomain.com/forum/"). This is important if you're using plugins where Ajax needs to be disabled for them to work properly.

Custom Code

• Custom CSS - Advanced users can enter custom CSS here.
• Custom SVG CSS – You can input any custom SVG CSS into this field and it will take effect on your site.
• Custom JS - Advanced users can enter custom JS here. Entered code will be executed on domready.

SEO

• Google Analytics Account ID - If you're using Google Analytics to monitor site traffic, enter your account ID here. For more information on this, see https://www.google.com/analytics/.
• Disable Pre-Order SEO - If you're using your own SEO plugins, you can turn off Pre-Order SEO here. We recommend for beginners to keep Pre-Order SEO active.
  • Meta Keywords and Meta Description - In order to improve your site ranking on search engines, we recommend you fill out the Meta Keywords and Meta Description fields.
  • For "Meta Keywords" enter relevant keywords for your site, separated by commas. For example, "Dog, cat, pet shop, pet toys, New York."
  • For Meta Description, enter a short description of your site. For example, "Tom's wonderful pet shop in New York."

Logo

This is where you can upload your website logos. If your pages use different header styles, you might want different logos to be displayed in different circumstances. In addition, if using a sticky header, you might want a simplified version of your logo to appear on the sticky. This is the place where you can upload and manage all your logo images.

Sizing

The logos displayed on your page are limited in size by header height. For example, if your logo is 100 pixels in height and your header is 90 pixels high, the logo will slightly shrink in size in order to fit into the header area. The same principle applies to logos that appear on sticky; they are limited by sticky section height.

Retina

To make your logos retina ready, upload ones that are twice as high as the header. For example, a header of 90 pixels in height would require a logo that's 180 pixels high. This principle applies to all logos you upload.

• Logo Image - normal - This logo is used when no header skin is chosen. We recommend not choosing a header skin in cases where you want to fully customize the header with your own colors. You might want to decide on the look of your header before choosing a logo to upload here.
• Logo Image - Light - This logo is used when "Light" header skin is chosen. A Light header skin has white navigation text and is typically used on dark header backgrounds. A lightly colored logo is appropriate here, in order to be clearly visible on such background. For more information on header skins, see Header.
• Logo Image - Dark - This logo is used when "Dark" header skin is chosen. A Dark header skin has black navigation text and is typically used on light header backgrounds. A darkly colored logo is appropriate here, in order to be clearly visible on such background. For more information on header skins, see Header.
• Logo Image - Sticky Header - This applies when you're using the Sticky or Sticky Expanded header type. It's the logo viewers see once they scroll down and the sticky section appears. It's typically a smaller version of the original logo.
• Logo Image - Fixed Advanced - This applies when using the Fixed Advanced header type. This is the logo viewers see once they scroll down and the fixed section appears. It's typically a smaller version of the original logo.
• Logo Image - Mobile Header - This applies in the Mobile Header. This is the logo the viewer sees when viewing the theme from a mobile device or smaller screen (under 1000px width).
• Logo Image - Side Menu Area Bottom - This logo is displayed at the bottom of the side menu area when the “initially hidden” side menu area type is selected. 

Header

This section allows you to set up the header area. The first choice to make is whether you'd like to have a top menu or left menu navigation. You can then optionally enable a search bar, side area, header top area, and/or fullscreen menu. Each of these can be customized with text styles, colors, and content alignment.

Furthermore, each hierarchy level in menus can separately be customized. For example, if a menu contains About > Our Staff > John Doe, then About is considered 1st level, Our Staff is 2nd level, and John Doe is 3rd level.

Header Position

Switch to Left Menu - Choose "Yes" if you want to use a left menu for main navigation. This menu stays fixed in place and will not scroll when viewers scroll down the page.

• Left Menu Area Type - There are 2 types to choose from: the left menu can always be open, or it can initially be hidden and open once viewers click on the button.
  • Enable transparent left menu area - Applies when the Always Opened type is chosen. This option makes the left menu background transparent upon page load. Once viewers start scrolling down, the transparency fades and the background comes into view again. This feature is useful if you have a slider or image at the top of your page and don't want the menu background to obstruct it.
  • Button Color - Applies when the Initially Hidden type is chosen. Here you can choose a color for the button that opens and closes the hidden menu.
  • Button Margin Top - Set a top margin for the Left Menu button. Applies when the Initially Hidden type is chosen.
  • Left Menu Area Width - Choose a width for your left menu area.
• Submenu Opening Style - Specify the opening style for the 2^nd and 3^rd level menu items. The 2^nd and 3^rd level menu items can open when the user hovers over a 1^st level menu item, when a user clicks on a 1^st level menu item, or they can be set to slide in when the 1^st level menu item is clicked.
• Left Menu Area Background Color - Choose a color to be applied to the left menu background.
• Dropdown Background Color - Set a background color for the dropdown menu when "Submenu Opening Style" is set to "Float In".
• Dropdown Alignment - Set the alignment for the dropdown menu when "Submenu Opening Style" is set to "Float In".
• Left Menu Area Background Image - If you want to use an image for the left menu background, upload it here. This image will automatically be fitted to cover the entire menu area. If your image is smaller than the menu area, it will get stretched out. A larger image will get shrunk. For optimal viewing, we recommend that your image is the same width as the left menu area and is 1080 pixels high. The background image will stay fixed on the page and will not move as viewers scroll down.
• Left Menu Area Text Color (for Widgets) - Choose a color for widgets (such as social icons) that appear in the left menu area.
• Content Alignment - Choose from left, centered, or right alignment for content in the left menu area.
• 1st, 2nd, and 3rd Level Menu Style - Define text styles for all hierarchy levels that appear in the left menu. Each level can be custom styled and you can choose text color, hover color, font family, font size, line height, font style, and font weight.

Header

• Header in Grid - Choose "Yes" if you want your header content to be fitted in a centrally positioned fixed grid. Otherwise, it will stretch across full width of the page.
• Header Type - Choose your header type from one of the following:
  • Regular - This is a standard header that stays on top of the page. When viewers scroll down, it goes out of view. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This a good choice if you want a simple look for your site.
  • Fixed - This header stays fixed on top of the page when viewers scroll. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This is a good choice if you want your viewers to have access to top navigation at all times.
  • Fixed Minimal - This header stays fixed on top of the page when viewers scroll. The logo is displayed in the center, the full screen menu icon to the left, and the search icon to the right (please note that when using this header only the fullscreen menu is available, and both the fullscreen menu and the search need to be turned on in Pre-Order Options > Header). When this header is enabled, the Header Bottom Right Widget Area and Side Area are disabled and can't be used. This header is a good choice if you want a minimalistic header.
  • Fixed Advanced - This header stays fixed on top of the page when viewers scroll. But unlike the Fixed header, only the logo is visible after scroll. The menu is hidden and appears on hover. By default, the logo is above navigation text and both elements are centered. This is a good choice for sites with a grid layout.
  • Fixed Header Top - Only the Header Top stays fixed to the top of the page when users scroll. The logo is displayed in the Header Bottom in center position, while the menu is displayed in the Header Top, along with the Search and Side Area buttons. There is also a Header Bottom Center widget area which displays its content beneath the logo. The Full Screen Menu is disabled when this header type is chosen, and only the "Search Covers Header" search type is available. This header is a good choice if you would like viewers to only have access to the site navigation when they scroll, without a logo and widgets being displayed around it. It can also be used if you would like a fixed menu on mobile devices.
  • Sticky - This header is initially on top of the page and goes out of view when viewers scroll. It then reappears and stays sticky on top after a certain amount of scroll. By default, the logo is aligned left and navigation text is aligned right, both elements in line. This is similar to the fixed header, and is a good choice if you have content at the top of your pages which you don't want to obstruct by a fixed header.
  • Sticky Expanded - The difference between this header type and the Sticky header is that here, the logo is above navigation text and both elements are aligned left by default. When the sticky header appears, the logo is aligned left and navigation text is aligned right, both elements in line. Since this was a common layout in earlier days of web design, this is a good choice if you want an old-school look.
  • Sticky Divided - The difference between this header type and the Sticky header is that here, the logo is centrally positioned and has menu navigation text on both sides of it. When the sticky header appears, the logo is gone and only the menu stays sticky on top. This is a good choice for sites that have layout in grid.

  

• Scroll Amount for Sticky - This option applies to the sticky header types. Set the amount of scroll (in pixels) after which the sticky header will appear.
• Menu Position - Choose an alignment for your menu.
• Center Logo - Choose "Yes" if you want to center the logo and position it above the menu.
• Animate Centered Logo - This option applies to the Fixed header type. Enable it if you want the centered logo to shrink in size after scroll. Otherwise, it will remain in full size.
• Header Height - Define the header area height in pixels.
  • Initial - refers to the header viewers see upon page load.
  • After Scroll - refers to the fixed or sticky header viewers see after scroll. This applies to all header types other than Regular.
• Header Bottom Background Image - Set a background image for the Header Bottom when using the "Fixed Header Top" header type.
• Header Skin - Choose a predefined header style to be applied. "Light" displays white navigation text and the "Light" logo, while "Dark" displays black navigation text and the "Dark" logo. If you want to set a custom color to navigation links and use the default logo, leave this field empty.
  Note: To manage logos, go to Pre-Order Options > Logo. Define custom color to main navigation links under Pre-Order Options / Fonts section
• Enable Header Style on Scroll - Enabling this option will change the header skin (dark/light style) depending on the skin set in the row settings.
• Header Background Color - Choose a background color to be applied to the header area.
  • Initial - refers to the header viewers see upon page load.
  • After Scroll - refers to the fixed or sticky header viewers see after scroll. This applies to all header types other than "Regular".
• Header Transparency - Set the transparency level for the header background on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.
• Header Bottom Border Color - Choose a color for the border underneath the header area.
• Header Bottom Border Transparency - Set the transparency level for the header bottom border on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Menus

• Background Color of 1st Level Menu - Set a color for the menu backgorund. This options is available only when the "Fixed Advanced" header is selected.
• Dropdown Menu Item Separators - Choose "Yes" if you want to display horizontal separators between dropdown menu items in a classic menu (vertical separators in wide dropdown menus are enabled by default).
• Border Around Dropdown Menus - Choose "Yes" if you want to have a border around the classic menu.
• Dropdown Menu Item Separator and Border Color - Choose a color for horizontal (classic dropdown) or vertical (wide dropdown) separators between dropdown menu items. This option also applies to border around dropdown menus.
• Dropdown Menu Background - Choose the background color and transparency level for the dropdown menus.
• Enable Full Width Background for Wide Dropdown Type - Set this option to "Yes" if you would like menus set to "wide" to span the whole width of the screen.

Pre-Order Search

• Enable Pre-Order Search Bar - Choose "Yes" if you want to enable Pre-Order search functionality. A search icon will appear in the header next to main navigation and when clicked, a search bar will unfold at the top of the page. This bar automatically closes when viewers scroll down. You can further customize it with your own background and text colors.
  • Pre-Order Search Type – Choose a predefined types of search bar.
    • Icon Pack - Choose the icon pack you would like to use for the search icon.
    • Search Bar Height – Set a height for your search bar.
    • Fullscreen Search Overlay Animation - Choose an animation type for the fullscreen search.
    • Fullscreen Search Icon Color - Set a color for the search icon when using the fullscreen search.
    • Cover Only Header Bottom - Set this option to "Yes" if you would like the search bar to cover only the Header Bottom.
  • Search Background Color – Set a background color for your search bar.
  • Search Input Text – Define styles for the search text:
    • Text Color – Set a color for the text you type into your search bar.
    • Disabled Text Color – Set a text color for the text in your search bar when inactive.
    • Font Size (px) – Set a font size for your search bar text.
    • Text Transform – Set a text transform style for the text in your search bar.
    • Font Family – Choose a font family for the text in your search bar.
    • Font Style – You can choose between “normal” and “italic”.
    • Font Weight – Set a font weight for the text in your search bar.
    • Letter Spacing (px) – Set letter spacing for the text in your search bar.
  • Search Label Text – Define styles for the search text:
    • Text Color – Set a color for the text you type into your search bar.
    • Font Size (px) – Set a font size for your search bar text.
    • Text Transform – Set a text transform style for the text in your search bar.
    • Font Family – Choose a font family for the text in your search bar.
    • Font Style – You can choose between “normal” and “italic”.
    • Font Weight – Set a font weight for the text in your search bar.
    • Letter Spacing (px) – Set letter spacing for the text in your search bar.
  • Initial Search Icon - Define styles for the search icon in the header:
    • Icon Size - Set a size for the search icon in the header.
  • Search Icons – Define styles for icons in the search bar when it is open:
    • Color – Set a color for the icons in the search bar.
    • Hover Color  - Set a hover color for the icons in the search bar.
    • Disabled Color - Set a color for the search icon when inactive.
    • Size - Set a size for the icons in the search bar.
  • Search Close icon - Define styles for the Search Close icon.
  • Search Bottom Border - Define styles for the search bottom border.

Side Area

• Enable Side Area - Choose "Yes" to allow viewers to open a sidebar. A sidebar icon will appear in the header next to main navigation and when clicked, a right sidebar will unfold. You can fill the sidebar with content by adding widgets in Appearance > Widgets.

  

  

  • Side Area Type - Choose the type of side area you would like to use.
    • Side Area Button Icon Pack - Choose an icon pack for the side area button.
    • Side Area Icon - Choose an icon for the side area button.
    • Side Area Width – Set a width for the side area (available only when using “Slide from right over content” side area type).
    • Content Overlay Background Color – Set background color for the content overlay when side area is active (available only when using “Slide from right over content” side area type).
    • Content Overlay Background Transparency – Set a transparency for the content overlay background color (available only when using “Slide from right over content” side area type).
  • Side Area Title - Enter a title to appear at the top of the side area.
  • Background Color - Choose a color to be applied to the side area background.
  • Padding - Define padding for the side area.
  • Side Area Alignment - Choose a text alignment for the side area.
  • Text - Define styles for paragraph text that appears in the side area. You can choose text color, hover color, line height, text transform, font size, letter spacing, and font weight.
  • Title - Define styles for title text that appears in the side area. You can choose text color, font size, letter spacing, and font weight.
  • Close Icon Style - Choose a style for the close ("X") button in the upper right corner of the side area. "Dark" displays a black button, and "Light" displays a white button.

Fullscreen Menu

• Enable Fullscreen Menu - Choose "Yes" to allow viewers to open a fullscreen menu. A fullscreen menu icon will appear in the header next to main navigation and when clicked, the fullscreen menu will open.
  • Fullscreen Menu Overlay Animation - Choose an animation for the fullscreen menu appearance.
  • Logo image for Fullscreen menu - Choose a logo to display on the fullscreen menu. It will appear in the upper left corner and is limited in size by header height. For more information on how logos are displayed, see Pre-Order Options > Logo.
  • Menu Icon Style - Choose a style for the Fullscreen Menu icon.
  • 1st and 2nd Level Style - Define text styles for all hierarchy levels that appear in the fullscreen menu. Each level can be custom styled and you can choose text color, text hover color, background hover color, font family, font size, line height, font style, font weight, and letter spacing.
  • Background - Choose a background color and transparency level to be applied to the fullscreen menu.

Header Top

• Show Header Top Area - Choose "Yes" to display the Header Top area, which is a small section that appears at the very top of the page. This area is meant for placing Header Left and Header Right widgets (social icons, language selector, etc.). You can add widgets by navigating to Appearance > Widgets.
  • Hide on Scroll - Choose "Yes" to hide the header top area when viewers scroll down. This applies when fixed header types are chosen.
  • Hide Top Bar on Mobile Header - Set this option to "Yes" if you would like to hide the header top when viewing your site in mobile view. 
  • Background color - Choose a background color to be applied to the Header Top area.
  • Bottom Border - Define bottom border styles for Header Top area.
    • Border Color - Choose bottom border color for Header Top area.
    • Bottom Border Width - Enter bottom border width for Header Top area.
  • Padding - Set a left/right padding (in percentages) for the Header Top area.

Mobile Menu

• Mobile Menu Item Separator Color - Choose color for mobile menu horizontal separators.
• Mobile Header&Menu Background Color - Choose color for mobile header&menu background.
• Mobile Menu Button Icon Pack - Choose an icon pack for the mobile menu button.
• Mobile Menu Icon - Choose an icon for the mobile menu button.

Header Button Icons (Search Bar, Side Area, and Fullscreen Icon)

• Color - Choose a color for icons that appear in the header area, in line with main navigation text - the search bar, side area, and/or fullscreen icon.
• Hover Color - Choose a hover color for header icons.
• Icon Size - Enter a size for header icons in pixels.
• Side Menu / Fullscreen Menu Icon Size - Choose a predefined size for header icons - Normal, Medium, or Large.

Language Switcher

This section is only available when the WPML Multilingual Plugin has been installed, and you can use it to style the WPML Language Switcher.

• Left / Right Spacing Between Languages in List  - Set the spacing between languages in the horizontal language switcher.

Footer

This section allows you to set up the footer area. There are two footer sections that can either be hidden or shown: the footer top and footer bottom. The footer top can be split into columns and is appropriate for placing widgets, such as menus, images, and social icons. The footer bottom is a simple section at the bottom of the page and is meant for placing copyright text. Both footer "Widgets."

• Uncovering Footer - Choose "Yes" if you want your footer to gradually appear on scroll.
• Footer Background Image - Set a background image on the whole footer (Footer Top and Footer Bottom).
• Show Footer Top - Choose "Yes" to show the larger of the two footer sections. The footer top can be split into columns and is appropriate for placing widgets (such as menus, images, and social icons). You can add these by navigating to Appearance > Widgets.
  • Footer in Grid - Choose "Yes" if you want your footer top content to be fitted in a centrally positioned grid. Otherwise, it will stretch across full width of the page.
  • Footer Top Columns - Choose the number of columns for your footer top area.
    • Footer Top Column Alignment - You can set a text alignment for each footer top column separately.
  • Set Footer Columns to be One by One on Tablet Portrait - Set this option to "Yes" to set the footer columns to display one by one (one below the other) when viewed on tablet devices in portrait view.
  • Footer Top Colors - Choose colors for various elements in the footer top area.
  • Footer Top Background Image - Set a background image for the Footer Top.
  • Footer Top Border - Set border styles for the footer top.
  • Footer Top Paddin - Set padding for the Footer Top.
  • Enable Angled Footer - Set this option to "Yes" if you would like to enable an angled footer.
    • Angled Shape Direction - Set a direction for the angled footer.
    • Background Color - Set a background color for the angled footer.
• Show Footer Bottom - Choose "Yes" to show the smaller of the two footer sections. This area is at the very bottom of the page and is typically used for placing copyright text.
  • Footer in Grid - Choose "Yes" if you want your footer bottom content to be fitted in a centrally positioned grid. Otherwise, it will stretch across full width of the page.
  • Footer Bottom Columns - Choose a number of columns for the footer bottom area. Please note that if you set the number of columns to 1, then you should enter your footer content in the Footer Bottom Center widget area. If you set your number of columns to 2, then you should enter the content in the Footer Bottom Left and Footer Bottom Right widget areas. If you set your number of columns to 3, then all three Footer Bottom widget areas will be in use.
  • Footer Bottom Colors - Choose colors for various elements in the footer bottom area.
  • Footer Bottom Border - Set border styles for the footer bottom.
  • Footer Bottom Padding - Set padding for the Footer Bottom.
  • Footer Bottom Background Image - Set a background image for the Footer Bottom.
  • Custom Menu Item Spacing - Set spacing between menu items in the Custom Menu widget. This option only applies when the Custom Menu widget is set in the footer bottom.

Title

This section allows you to set up the title area. You can animate it, define colors or images, add breadcrumbs, and more. For styling the title font, see Fonts.

Title

• Don't Show Title Area - Set this option to "Yes" if you would like to hide the title area from all pages on your website.
• Animations - Choose a way to animate the title area upon page load. "Text right to left" will make title text slide in from the right side of the page and then settle into position. "Title area top to bottom" will make the title area gradually unfold. Select "No animation" to have a static page title area.
• Don't Show Title Text - Set this option to "Yes" if you would like to hide the title text.
• Title Text Alignment - Choose from left, centered, or right title text alignment.

  

  

• Text Size - Choose a predefined title text size - Small, Medium or Large.
  Note that you can define styling for each of these sizes by navigating to Pre-Order Options > Fonts.
• Text Shadow - Choose "Yes" if you want your title text to have a drop shadow.
• Background Color - Choose a background color to be applied to the title area.
• Background Image - If you wish to use an image for the title area background, upload it here.
  For optimal viewing, we recommend that your image is in full HD resolution of 1920 pixels in width.
• Background Responsive Image - Choose "Yes" if you want to make the title image responsive.
  Note that title area height will be defined by height of the image after it resizes to fit the browser's width.
  • Parallax Title Image:
    • Choose "Yes" if you want to make the title image parallax.
    • Choose "Yes, with zoom out" if you want viewers to have a perception of zooming out of the image, along with the parallax.
      Your image should be larger than the title area, in order to be able to shrink and not have any gaps appearing at the sides of the page. We recommend a width of 2500 pixels and a height that's at least 20% more than the title area height. The parallax image will be limited in height by title area height (any excess will be cropped). We recommend that your image is at least this height, in order for the parallax effect to work properly.
  • Title Height - Enter a height for the title area in pixels.
• Pattern Overlay Image - If you wish to use a pattern over the title area, upload it here. This image will be repeated to cover the entire title area.
• Show Title Separator - Choose "Yes" if you want a separator to appear under title text.
  • Title Separator Color - Choose a color for the title separator.
  • Title Separator Width - Enter a width for the separator in - pixels.
• Enable Angled Title - Set this option to "Yes" if you would like to enable an angled title area.
  • Angled Shape Direction - Set a direction for the angled title shape.
  • Background Color - Choose a background color for the angled shape.
• Bottom Border - Choose "Yes" if you want the title area to have a bottom border.
  • Bottom Border Color - Choose a color for the bottom border.
  • Border in Grid - Set this option to "Yes" if you would like the border to be in grid.
• Margin After Title for Default Template - This option applies only for pages that use the Default Template. Here you can set a bottom margin for the title area in pixels.
• Margin After Title for Default Template on Touch Devices - This option applies only for pages that use the Default Template. Here you can set a bottom margin for the title area on touch devices (in pixels).

Breadcrumbs

• Enable Breadcrumbs - Choose "Yes" if you want breadcrumbs to appear in the title area.
  • Breadcrumbs Color - Choose a color for breadcrumb text.

Title Scroll Animations

In this section you can define animations for your page title area and all the separate elements of the title area.

• Enable Whole Content Title Animations  - Set this option to "Yes" if you would like to enable an animation on the whole title area and all its content.
  • Scrolling Animation Start Point - Here you can set the properties for the first keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will start in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the begining of the animation (e.g. opacity: 1;).
  • Scrolling Animation End Point - Here you can set the properties for the last keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will end in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the end of the animation (e.g. opacity: 0;).
• Enable Page Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title. You can use the options described above to create your animation.
• Enable Page Separator Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title separator. You can use the options described above to create your animation.
• Enable Page Subtitle Animations  - Set this option to "Yes" if you would like to enable an animation on the page subtitle. You can use the options described above to create your animation.
• Enable Page title Breadcrumbs Animation - Set this option to "Yes" if you would like to enable an animation on the page title breadcrumbs. You can use the options described above to create your animation.

Fonts

This section allows you to set up font properties for different elements on your site, which is essential for achieving a consistent design.

Headings

• H1-H6 Style - Define text styles for all the heading levels.

Headings Responsive

Here you can set up responsive styles for headings (H1-H6), when viewed on tablet and mobile devices.

Text

• Paragraph - Define styles for paragraph text.
• Paragraph Responsive (Tablet Portrait View) - Set styles for paragraph text when viewed on a tablet in portrait view.
• Paragraph Responsive (Mobile Devices) - Set styles for paragraph text when viewed on mobile devices.
• Links - Define styles for link - text.

Header & Menu

• 1st, 2nd Level Menu - Define text styles for 1st and 2nd hierarchy levels in the top navigation menu.
• 2nd Level Wide Menu - Define text styles for the 2nd hierarchy level in the wide menu.
• 3rd Level Menu - Define text styles for the 3rd hierarchy level in the top navigation menu.
• Fixed Menu - This applies when using the Fixed or Fixed Advanced header types. Here you can define text styles for the fixed menu.
• Sticky Menu - This applies when using the sticky header types. Here you can define text styles for the sticky menu.
• Mobile Menu - Define text styles for the narrow version of the menu, as seen on mobile devices.
• Header Top - Define styles for text that appears in the header top area.

Page Title

• Small Type - Define styles for title text of type "Small."
• Medium Type - Define styles for title text of type "Medium."
• Large Type - Define styles for title text of type "Large."

Page Subtitle

• Subtitle - Define styles for subtitle text.
• Large Type - Define styles for subtitle text of type "Large."

Footer

• Footer top title styles - Define styles for titles that appear in the footer top.
• Footer top text styles - Define styles for text that appears in the footer top.
• Footer top link styles - Define styles for links that appear in the footer top.
• Footer bottom text styles  - Define styles for text that appears in the footer bottom.
• Footer bottom link styles - Define styles for links that appear in the footer bottom.

Portfolio

• Categories Filter - Define styles for the category filter text.

Elements

This section allows you to set up properties for different elements (shortcodes). Note that these settings can be overridden locally in shortcode options when adding elements to your page.

Separators

• Normal - Define styles for separators of type "Normal".
• Small - Define styles for separators of type "Small".
• Separator with Icon - Define styles for separators with icons.

Buttons

Define styles for the default, white, small, large, and extra large buttons.

Message Boxes

• Message Box Style - Define styles for message boxes.
• Message icon style - Define styles for message box icons.

Blockquotes

• Blockquote Style - Define styles for blockquotes.

Social Icons

• Social Icons style - Define styles for social icons.

Testimonials

• Testimonials Style - Set a border radius for the testimonials navigation.
• Testimonials Text Style - Define text styles for testimonials.
• Testimonial Author Style - Define text styles for the testimonials author.

Counters

• Counters Style - Define styles for counters.

Horizontal Progress Bars

• Progress Bar Style - Define styles for horizontal progress bars.

Pie Charts

• Pie Chart Style - Define styles for pie charts.

Tabs

• Text Style - Define text styles for tabs.
• Border Style - Define border styles for tabs.

Tags

• Tags Style - Define styles for tags.

Process

• Circles Background Hover Color - Set the process circle's background color on hover.
• Text Style - Define text styles for process shortcode.

Input Fields

• Input Fields Style - Define styles for input fields.

Highlights

• Highlight Color - Choose a color for highlighted text.

Toggle Accordion

• Toggle Title - Define styles for the titles of Toggle Accordions.

Back to Top Button

• Icon Style - Set styles for the Back to Top icon.
• Background - Set styles for the background of the Back to Top butoon.
• Border  - Set styles for the border of the Back to Top button.
• Button Size - Define a size for the Back to Top button.
• Button Position - Define the position of the Back to Top button.

Slider Navigation Interface

In this section you can define the size, position, and styles for navigation buttons in the Pre-Order Slider, Carousel Sliders, Flex Sliders, as well as styles for bullet navigation.

Masonry Gallery

• Space Between Items - Define a space between Masonry Gallery items.

This section allows you to define masonry gallery item styles for every item size (Square Big, Square Small, Rectangle Portrait, and Rectangle Landscape). For each of these sizes, you can edit the following:

• Title Style – Define styles for item title.
• Text Style – Define styles for item text.
• Button Style – Define styles for the button.
• Icon Style – Define styles for the icon.
• Overlay Style – Define image overlay color and transparency.
• Text Alignment - Set text alignment for the masonry gallery item.
• Content Padding - Set padding for the masonry gallery item.

Full Screen Section

• Navigation Button Size - Set a size for the Full Screen Sections navigation buttons.
• Navigation Position - Set a position for the full screen sections navigation buttons.
  • Buttons Position - Set the position of buttons from the top/bottom edges of the screen.
• Icon Arrow Style - Set styles for the Icon Arrow.
• Navigation Button Background - Set styles for the navigation button.
• Navigation Button Border - Set styles for the navigation button border.

Sidebar

This section allows you to set up global styles for the sidebar.

Widget Styles

• Title Style - Set styles for widget titles.
• Text Style - Set styles for widget text.
• Link Style - Set styles for widget links.

Pre-Order Slider

Here you can set up your slider buttons style and slider height for smaller screens. For more information on creating a slider, see the Pre-Order Slider section of this user guide.

General Style

• Slider Height For Tablet Portrait and Mobile Landscape View (px) - Define slider height when viewed on mobile phones landscape view and table devices portrait view. 
• Slider Height For Mobile Devices - Define slider height when viewed on mobile phones. 

Buttons Style

• Button 1 Style - Define styles for the slides button 1.
• Button 2 Style - Define styles for the slides button 2.

Custom Cursor Navigation

You can upload custom cursors for the slider and set the size of the clickable area for left and right slider navigation.

Blog

This section allows you to set up blog pages.

Blog List pages are ones that display multiple blog items using one of the predefined blog layout templates. Each of these templates can separately be customized.

Blog Single pages are those that display a single blog post.

Blog List

The Text in Box field refers to individual blog posts' accompanying text. Choose "Yes" if you want this block of text to have a different background color from the page content color, giving it a boxed effect.

• Pagination - Choose "Yes" if you want pagination on your blog lists.
• Archive and Category Layout - Choose a default layout to be applied to archived blog lists and category blog lists.
  Note: Viewers will be able to access the archived blog lists (for example, "October 2013") once you activate the Archives widget in Appearance > Widgets.

  Category blog lists contain blog posts from a certain category (for example, "Art") and viewers can access them by following the link in the blog post info bar or sidebar.

• Archive and Category Sidebar - Choose a sidebar layout for your archived blog lists and category blog lists.
• Hide Comments - Choose "Yes" if you want to hide the number of comments from the blog post info bar.
• Hide Author - Choose "Yes" if you want to hide the author's name from the blog post info bar.
• Likes - Choose "Yes" if you want to hide the number of likes from the blog post info bar.
• Pagination Page Range - Enter the number of numerals you want displayed in the pagination. For example, enter "3" to get "1 2 3 ..." Make sure that Pagination is set to "On" for this setting to work.
• Number of Words in Blog Listing - Enter the number of words to be displayed per post on your blog list. This refers to words regardless of character length.
• Number of Words in Masonry - Enter the number of words to be displayed per post on the Masonry blog lists. This setting overrides the Number of Words in Blog Listing entry.
• Number of Words in Large Image - Enter the number of words to be displayed per post on the Blog Large Image lists. This setting overrides the Number of Words in Blog Listing entry.
• Number of Words in Small Image - Enter the number of words to be displayed per post on the Blog Small Image lists. This setting overrides the Number of Words in Blog Listing entry.
• Content Position - Choose the positioning for the content on pages set to a blog list template. You can choose to display the content either above the blog list, or above both the blog list and sidebar. Please note that this setting is only for pages set to a blog list template, not for archive pages.
• Pagination on Masonry - Choose a pagination type for the Masonry blog lists.
• Show Category Filter on Masonry - Choose "Yes" if you want a category filter to appear at the top of the Masonry blog lists.
• Full Width Masonry Margin - Set a margin (in pixels or percentages) for the Masonry Full Width blog template.

Blog Large Image Style

The Text in Box field refers to individual blog posts' accompanying text. Choose "Yes" if you want this block of text to have a different background color from the page content color, giving it a boxed effect.

• Large Image Style - Define the look of the Blog Large Image and Blog Large Image Whole Post lists.
• Title Style - Define the look of titles in the Blog Large Image and Blog Large Image Whole Post lists. Please note that these settings also take effect on single post titles.
• Post Info Style - Define the look of the Blog Large Image and Blog Large Image Whole Post post info. Please note that these settings also take effect on the post info on single posts.
• Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.

Blog Small Image Style

The Text in Box field refers to individual blog posts' accompanying text. Choose "Yes" if you want this block of text to have a different background color from the page content color, giving it a boxed effect.

• Small Image Style - Define the look of the Blog Small Image lists.
• Title Style - Define the look of titles in the Blog Small Image lists. 
• Post Info Style - Define the look of the Blog Small Image post info.
• Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.

Masonry Style

• Masonry Style - Define the look of the Masonry blog lists.
• Title Style - Define the look of titles in the Masonry blog lists. 
• Post Info Style - Define the look of the Masonry post info.
• Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.

Blog Large Image Simple

• Box Content Style - Define styles for the content box.
• Title Style - Define the look of titles in the Blog Large Image Simple lists. 
• Date Style - Define the look of dates in the Blog Large Image Simple lists.
• Quote/Link Date Style - Define the look of dates in quote and link posts

Blog Large Image With Dividers Style

• Text Box Background Color - Set a background color for the text box.
• Title Style - Define the look of titles in Blog Large Image With Dividers lists. 
• Post Info Style - Define the look of the Blog Large Image With Dividers post info.
• Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.

Blog Vertical Loop

• Title Style - Define the look of titles in the Vertical Loop lists. 
• Next Post Title Style - Define the look of titles for the next post.
• Post Info Style - Set a style for the post info.
• Quote/Link Title Style - Define the look of titles for quote and link posts.
• Quote/Link Post Info - Set a style for post info in quote and link posts.
• Next/Prev Button Style - Set a style for the next/previous post button.

Masonry - Date in Image Style

• Text Box Background Color - Set a background color for the text box.
• Title Style - Define the look of titles in the Masonry - Date in Image lists. 

Blog Single

• Sidebar Layout - Choose a sidebar layout for your blog single posts.
• Sidebar to Display - Choose a custom widget area to display in your sidebar.
• Show Blog Author - Choose "Yes" if you want your blog single posts to contain an "About the author" section.
• Blog Single Spacing - Set spacing for blog single posts.

Quote / Link

• Box Background Color - This option applies to blog posts that are either in Quote or Link format. The box color you set here will be visible on both Blog List and Blog Single pages.

Blog Slider

Blog Carousel Slider Style

• Title Style - Set styles for the slider title.
• Post Info Style - Set styles for the post info.
• Day Style - Set styles for the day (in post info), when post info position is set to bottom. (if not set, it will be inherited from Post Info Style)
• Blog Slider Spacing - Define spacings for the slider.

Blog Simple Slider Style

• Title Style - Set styles for the slider title.
• Post Info Style - Set styles for the post info.
• Blog Slider Spacing - Define spacing for the slider content.
• Box Style - Define styles for the box.

Portfolio

This section allows you to set up page properties when displaying a single portfolio project.

Portfolio Single Project

• Portfolio Type - Choose a default layout for portfolio single projects from one of the following:
  • Portfolio small images - All images are displayed in a column, with accompanying text in a right sidebar.
  • Portfolio small slider - A slider is displayed, with accompanying text in a right sidebar.
  • Portfolio big images - All images are displayed across full width of the page content area, with accompanying text underneath.
  • Portfolio big slider - A slider is displayed across full width of the page content area, with accompanying text underneath.
  • Portfolio custom - Choose this option if you want to build your portfolio pages as you would a regular page, without your content following one of the predefined layouts. As with regular pages, you can choose between in grid (fixed) or full width template.
  • Portfolio gallery - All images are displayed in a gallery layout, with accompanying text underneath.
• Likes - Choose "Yes" to display the number of likes.
• Lightbox - Choose "Yes" if you want viewers to be able to click on images and have a lightbox slideshow open up.
• Number of Columns for Gallery Style - Choose the number of columns for the Portfolio Gallery single project layout.
• Sidebar layout - Choose a sidebar layout for your portfolio singe projects.
• Sidebar to Display - Choose a custom widget area to display in your sidebar.
• Portfolio Single Slug - If you wish to use a different URL slug for the portfolio single projects, enter it here. After saving, navigate to Settings>Permalinks and click "Save Changes" (without modifying anything else) in order for this setting to take effect.
• Disable Project Title Label - Set this option to "Yes" if you would like to hide the "About this project" label from portfolio single items.
• Sticky Side Text - This option applies to single project layouts that contain the text in a right sidebar. Choose "Yes" to make this text sticky.
• Enable Comments - Set this option to "Yes" if you would like to enable comments on portfolio single pages. Please note that the comment form will be disabled on all already existing portfolios and has to be manually enabled on each existing portfolio by going to the portfolio in question and under Discussion checking the Enable Comments checkbox (if you don't see the Discussion section, please make sure that it is enabled in Screen Options). For all new portfolios that are created after the "Enable Comments" option has been turned on, comments will be automatically visible.
• Enable Related Portfolios - Set this option to "Yes" if you would like to display related portfolio items on your single portfolio projects.
  • Image Proportion - Choose a proportion for related portfolio project featured images.
• Show Title on Navigation - Set this option to "Yes" if you would like to display the titles and categories of the next and previous projects on the portfolio single navigation.

Portfolio List

• Overlay Style - Define overlay style for the portfolio items in the portfolio list.
• Title Style (Standard and Masonry With Space) - Define styles for the title on portfolio lists set to Standard With Space or Masonry With Space type.
• Category Style (Standard and Masonry With Space) - Define styles for the category text on portfolio lists set to Standard With Space or Masonry With Space type.
• Title Style (Hover Text and Masonry Without Space) - Define styles for the title on portfolio lists set to Hover Text or Masonry Without Space type.
• CategoryStyle (Hover Text and Masonry Without Space) - Define styles for the category text on portfolio lists set to Hover Text or Masonry Without Space type.
• Category Filter Style - Define styles for the category filter holder.

Thin Plus Only Hover

• Icon Font Family - Set a font family for the plus icon that appears when the "Thin Plus Only" hover type is selected on portfolio lists.

Vertical Split Slider

• Navigation Style - Define styles for the vertical split slider navigation bullets.
• Navigation Size (px) – Set the size for the vertical split slider navigation bullets.
• Left Side Panel size (%) – Set the size for the left side panel of the vertical split slider (in percentages). The sum of the left and right panel sizes has to be 100%.
• Right Side Panel size (%) – Set the size for the right side panel of the vertical split slider (in percentages). The sum of the left and right panel sizes has to be 100%.
• Advanced Responsive - Set this option to "Yes" if you would like to enable advanced responsiveness for the Vertical Split Slider.

Social

This section allows you to manage social sharing on your site. You can select which social networks to enable, what elements of your site can be shared, and upload social share icons.

Social Sharing

• Enable Social Share - Choose "Yes" to enable social sharing on your site.

Show Social Share

• Posts - Choose "Yes" to enable social sharing on blog posts.
• Pages - Choose "Yes" to enable social sharing on pages.
• Media - Choose "Yes" to enable social sharing for images and videos.
• Portfolio Item - Choose "Yes" to enable social sharing on portfolio items.

Instagram

• Connect With Instagram - Use this button to connect the instagram widget with your instagram feed. See more in the Widgets section of this User Guide.

404 Error Page

Here you can set up the "404" page viewers see when an error occurs.

• Title - Enter a title to appear on the 404 page.
• Subtitle - Enter a subtitle to appear on the 404 page.
• Text - Enter text to appear on the 404 page.
• Back to Home Button Label - Enter a label for the "back to home" button.

Contact Page

This section allows you to manage the contact page. You can display a Google map with up to 5 different addresses pinned on it. Additionally, you can enable a contact form and an optional title area above it.

Contact Page

• Enable Google Map - Choose "Yes" to display a Google map on your contact page.
• Show Upper Section - Choose "Yes" if you want to display a title/subtitle section above the contact form.
• Enable Contact Form - Choose "Yes" to display a contact form.

Google Map Settings

• Google Map Address - Enter up to 5 addresses to be pinned on the Google map. Enter them in standard address format, for example, "Louvre Museum, Paris, France."
• Pin Image - Upload an image to mark your addresses on the map.
• Map Height - Enter a height for the map in pixels.
• Map Zoom - Choose a zoom factor for the map. The higher the number, the greater the zoom.
• Zoom Map on Mouse Wheel - Choose "Yes" if you want your viewers to be able to zoom in on the map with their mouse wheel. Otherwise, they will scroll over it.
• Custom Map Style - Choose "Yes" if you want to custom edit your map.
  • Color Overlay - Choose a color overlay for your map.
  • Saturation - Choose a level of saturation. The greater the number, the greater the saturation will be.
  • Lightness - Choose a level of lightness. The greater the number, the lighter your map will appear.

Upper Section Settings

• Section Alignment - Choose an alignment for the upper section.
• Title - Enter a title to be displayed in the upper section.
• Subtitle - Enter a subtitle to be displayed in the upper section.

Contact Form Settings

• Mail Send To - Enter an email address where you wish to receive data submitted through the contact form.
• Email From - Enter a default value to appear in the "From" field when you receive data through the Contact Form.
• Email Subject - Enter a default value to appear in the "Subject" field when you receive data through the Contact Form.
• Hide Website Field - Choose "Yes" if you want to hide the Website field in the contact form.
• Contact Form Heading - Enter a heading to be displayed above the Contact Form.
• Use reCAPTCHA - Choose "Yes" if you want to have a reCAPTCHA box under the Contact Form.
  • reCAPTCHA Public Key - Enter your reCAPTCHA public key here. For more information on this, see https://www.google.com/recaptcha.
  • reCAPTCHA Private Key - Enter your reCAPTCHA private key here. For more information on this, see https://www.google.com/recaptcha.

Parallax

This section contains options for parallax images used on your site.

• Parallax on Touch Devices - For optimal viewing experience, we recommend keeping this option disabled, as touch devices might not optimally display the parallax effect. When disabled, a static image will be displayed without the parallax functionality.
• Parallax Min Height - Enter a minimum height for parallax images as displayed on screen. This feature is meant to prevent them from appearing too small in height on smaller screens (phones, tablets, etc.).

Content Bottom

This section allows you to set up the content bottom area, which appears right above the footer. In order to fill it with content, choose a custom widget area to display. For example, you might want a Call to Action widget to appear here. For more information on this, see "Widgets."

• Enable Content Bottom Area - Choose "Yes" to enable the content bottom area on your site pages.
• Sidebar to Display - Choose a custom widget area to display in the content bottom.
• Display in Grid - Choose "Yes" if you want the content bottom area to be fitted in a centrally positioned grid.
• Background Color - Choose a background color for the content bottom area.

Visual Composer

This section allows you to control Visual Composer settings.

• Enable Grid Elements - Set this option to "Yes" if you would like to enable the Visual Composer Grid Elements post type and the Grid Content Elements. Please note that if Grid Elements are enabled, Ajax animations are disabled for your whole site.
  • Visual Composer Grid Element Styles - In this section you can set styles for the buttons, pagination, and arrows in the Grid Elements.

Contact Form 7

• Form Elements' Background - Define styles for the form elements' background.
• Form Elements' Border - Define styles for the form elements' border.
• Form Elements' Border Radius - Define a border radius for form elements.
• Form Elements' Text Style - Define text styles for the form elements.
• Form Elements' Padding - Set padding amount for form elements.
• Form Elements' Margin - Enter margins for form elements.
• Button Background - Define background styles for the form button.
• Button Border - Define border styles for the form button.
• Button Border Radius - Define a border radius for the form button.
• Button Text Style- Define text styles for the button.
• Button Height - Enter button height in pixels.
• Button Left/Right Padding - Set a left/right padding for the button.
• Button Hover Type - Choose a hover type for the contact form button.
• Textarea Height - Define a height for the textarea.

WooCommerce

Here you can define styles for your WooCommerce Shop pages.

Product List

• Product List and Related Products Column Number - Choose a number of columns for your product lists, and for related products on product single pages.
• Product Info Box Background Color - Set a background color for your product info boxes.
• Show Categories Above Title - Set this option to "Yes" if you would like to show the product categories above product titles. 
• Show Separator After Product Title - Choose whether you would like to display a separator after the product title.
  • Separator Styles - Define styles for your separator after product title.
• Show Orderby Dropdown - Set this option to "Yes" if you would like to dipslay an "orderby" dropdown on shop pages. This dropdown will let the user choose how they would like to sort products.
• Product Title - Define styles for the product titles on your shop page.
• Product Price - Define styles for the product prices on your shop pages.
• Product Sale - Define styles for the price of products on sale on your shop pages.
• Product "Out of Stock" - Define styles for the "Out of Stock" labels on your shop pages. This option also affects the "Out of Stock" labels on product single pages.
• "Add to Cart" Button - Define styles for the "Add to Cart" Button. This option also affects the "Add to Cart" Button on product single pages.

Product Single

• Product Title - Define styles for the product title on product single pages.
• Product Price - Define styles for the product price on product single pages.
• Quantity Buttons - Define styles for quantity selection buttons.

Cart Page

• Title Size - Set a font size for the title of the Cart Page.
• Line Height  - Set a line height for the title of the Cart Page.
• Letter Spacing - Set a letter spacing for the title of the Cart Page.

Product List - Elegant

• First Background Color - Set a background color for the first product in the row when using the Product List - Elegant shortcode.
• Second Background Color - Set a background color for the second product in the row when using the Product List - Elegant shortcode.
• Product Category - Define styles for the product category text.

Dropdown Cart

• Cart Icon Type - Choose between the default Pre-Order cart icon, and a Font Elegant cart icon.

Maintenance Mode

• Maintenance Mode - Choose "Yes" to enable Maintenance Mode.
• Maintenance Page - Choose the page you wish to be displayed to viewers. Note that only pages you've created using the Landing Page template will appear in the drop down list. For more information on page templates, see Pages.

Reset

• Reset to Defaults - Choose "Yes" and save changes if you wish to reset all Pre-Order Options values to defaults. 

When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. To do this, go inside the page backend and locate the section on the right called Page Attributes. Pre-Order comes with a variety of templates to choose from:

• Default Template - Choose this one if you wish to create a standard page with a boxed layout.
• Blog Large Image
• Blog Large Image SImple
• Blog Large Image Whole Post
• Blog Large Image With Dividers
• Blog Masonry
• Blog Masonry - Date in Image
• Blog Masonry Full Width
• Blog Masonry Full Width - Date in Image
• Blog Small Image
• Blog Vertical Loop - These templates are all meant for displaying blog posts.
• Contact Page - This is the template to use for your "contact us" page.
• Full Screen Sections - This template gives you the ability to create full screen sections on your page. When viewers scroll, the entire section scrolls down and takes them to the next section.
• Full Width - Choose this one if you wish to create a standard page with elements that go across full width of the page.
• Landing Page - This template is like the Full Width template, except that it hides the header and footer.
• Woo Commerce - Choose this one if you wish to create a shop.

Now that you've chosen a template, let's go over the custom fields.

This will save you a lot of time, unlike if you were to set up every page locally.

Pre-Order General

• Page Background Color - Choose a background color for your page
• Page Transition - Choose a type of Ajax transition for page loading. Select "No animation" if you want the page to load regularly, without Ajax.
• Layer Slider or Pre-Order Slider Shortcode - If you wish to have a slider on your page, copy and paste the slider shortcode here. You can find the Layer Slider shortcode by going to WP admin panel > LayerSlider WP > All Sliders. As for the Pre-Order Slider, you can find it by going to WP admin panel > Pre-Order Slider > Sliders
• Always put content below header - Set this option to "Yes" if you would like the content to always display below the header. This option is useful if you are using a transparent header, and would like the content to display below and not behind the header.

Pre-Order Header

• Header Skin - You can choose a header style to be applied. "Light" displays white navigation text and the "Light" logo, while "Dark" displays black navigation text and the "Dark" logo. If you want to set a custom color and use the default logo, leave this field empty.
• Enable Header Style on Scroll - Enabling this option will change the header skin (dark/light style) depending on the skin set in the row settings.
• Initial Header Background Color - Choose a background color to be applied to the header area.
• Initial Header Transparency - Set the transparency level for the header background on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Pre-Order Title

• Don't Show Title Area - You can choose to hide the title area on your page.
• Animations - Choose a way to animate the title area upon page load. "Text right to left" will make title text slide in from the right side of the page and then settle into position. "Title area top to bottom" will make the title area gradually unfold. Select "No animation" to have a static page title area.
• Don't Show Title Text - You can choose to hide the title text on your page.
  • Title Text Alignment - Choose an alignment for the title text.
  • Title Text Style - Define styles for the title text.
• Background Color - Choose a background color for the title area.
• Don't Show Background Image - You can choose to hide the background image on your page.
  • Background Image - Choose an image for the title area background. For optimal viewing, we recommend that your image is in full HD resolution of 1920 pixels in width.
  • Pattern Overlay Image - If you wish to use a pattern over the title area, upload it here. This image will be repeated to cover the entire title area.
  • Responsive Background Image - Choose "Yes" if you want to make the title image responsive. Note that title area height will be defined by height of the image after it resizes to fit the browser's width.
  • Parallax Background Image
    • Choose "Yes" if you want title image to have parallax effect.
    • Choose "Yes, with zoom out" if you want viewers to have a perception of zooming out of the image, along with the parallax.
      Your image should be larger than the title area, in order to be able to shrink and not have any gaps appearing at the sides of the page. We recommend a width of 2500 pixels and a height that's at least 20% more than the title area height. The parallax image will be limited in height by title area height (any excess will be cropped). We recommend that your image is at least this height, in order for the parallax effect to work properly.
  • Title Height - Enter a height for the title area in pixels.
  • Separator Under Title Text - Choose "Yes" if you want a separator to appear under title text.
  • Separator Color - Choose a color for the separator.
  • Enable Angled Title - Set this option to "Yes" if you would like to enable an angled title area.
    • Angled Direction - Choose the direction of the angled shape.
    • Background Color  - Set a background color for the angled title.
  • Enable Breadcrumbs Choose "Yes" if you want breadcrumbs to appear in the title area.
    • Breadcrumbs Color - Choose a color for breadcrumb text.
    • Subtitle Text - Enter a subtitle for your page here.
    • Subtitle Text Color - Choose a color for subtitle text.

Pre-Order Scroll Title Animations

• Enable Whole Content Title Animations  - Set this option to "Yes" if you would like to enable an animation on the whole title area and all its content.
  • Scrolling Animation Start Point - Here you can set the properties for the first keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will start in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the begining of the animation (e.g. opacity: 1;).
  • Scrolling Animation End Point - Here you can set the properties for the last keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will end in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the end of the animation (e.g. opacity: 0;).
• Enable Page Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title. You can use the options described above to create your animation.
• Enable Page Separator Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title separator. You can use the options described above to create your animation.
• Enable Page Subtitle Animations  - Set this option to "Yes" if you would like to enable an animation on the page subtitle. You can use the options described above to create your animation.
• Enable Page title Breadcrumbs Animation - Set this option to "Yes" if you would like to enable an animation on the page title breadcrumbs. You can use the options described above to create your animation.

Pre-Order Content Bottom

• Show Content Bottom Area - Choose "Yes" to enable the content in the bottom area on your page.
• Background Color - Choose a background color for the content bottom area.
• Custom Widget - Choose a custom widget area to display in the content bottom.
• Display in Grid - Choose "Yes" if you want the content bottom area to be fitted in a fixed, centrally positioned grid.
• Pre-Order Blog - This section applies when you're using one of the blog templates.
• Blog Category - You can choose which category of blog posts to display. Leave this field empty to display all categories.
• Number of Posts - You can enter the number of posts to display.
• Show Comments - Choose "Yes" if you want to show the number of comments in the blog post info bar.

Pre-Order Blog

• Blog Category - Choose the category of posts to display.
• Number of Posts - Choose the number of posts to display.
• Show Comments - Set this option to "Yes" if you would like to display comments.

Pre-Order Sidebar

• Layout - You can choose a sidebar layout for your page.
• Choose Widget Area in Sidebar - Choose a custom widget area to display in your sidebar.

Pre-Order SEO Fields

In order to improve your page ranking on search engines, you can fill out the following custom SEO fields:

• SEO Title - Enter a relevant title for your page here.
• SEO Keywords - Enter relevant keywords here, separated by commas.
• SEO Description - Enter a short description for your page.

Full Screen Sections

Since this page template is quite specific, we will cover its features now:

• Full screen sections are created by adding Row elements.
• When editing the Row element, you need to select "Row" under Row Type and "Yes" under the Use Row as Full Screen Section field.
• You can add any content within rows. Content in each section will be vertically centered.
• These pages do not have a title area, and you cannot add a Pre-Order Slider or Layer Slider at the top of the page.

To create a new portfolio item, go to:

1. Portfolio > Add New from the admin panel.
2. Enter a title for your portfolio item in the text field near the top.
3. Next, let's categorize this item. At the right side of your screen, in the section called Portfolio Categories, select the categories that you wish to add this item to. Alternatively, if you'd like to create a new category, click on "+ Add New Portfolio Category." A text field will unfold where you can enter a name for the category.
4. Then click on "Add New Portfolio Category".
5. Once you've checked the categories where you want this item to go to, click the "Publish" button.

Under the Portfolio Categories section are the Attributes, Featured Image, and Portfolio Tags sections. In Attributes, you can type in the order in which you'd like this portfolio item to appear in portfolio lists. In Featured Image, you can upload an image to be displayed for this item on portfolio lists. And in Portfolio Tags, you can enter tags for this item.

Now that you've set up your portfolio item, let's go over the custom fields.

Pre-Order SEO Fields

In order to improve your page ranking on search engines, you can fill out the following custom SEO fields:

• SEO Title - Enter a relevant title for your page here.
• Meta Keywords - Enter relevant keywords here, separated by commas.
• Meta Description - Enter a short description for your page.

Pre-Order Portfolio Images (multiple upload)

This section allows you to upload multiple images at once:

1. Click the "Upload" button.
2. Fill your gallery with images. You can do this by simply dragging and dropping them into the window.
3. Alternatively, click on "Add to Gallery" on the left, and select files from your media library to add.
4. Once added to the gallery, you can write captions for the images and reorder them by clicking and dragging.
5. Click the "Update gallery" button.

Pre-Order Portfolio Images/Videos (single upload)

This section is legacy from the old Pre-Order framework and is meant for uploading single files. The advantage of using this method is that you can upload videos and images, whereas in multiple upload, only images can be used.

Pre-Order Additional Portfolio Sidebar Items

If you wish to add another item to your portfolio sidebar, you can do so here.

Pre-Order General

• Date - You can set a date for your portfolio item.
• Page Background Color - Choose a background color for your page.
• Page Transition - Choose a type of Ajax transition for page loading. Select "No animation" if you want the page to load regularly, without Ajax.
• Layer Slider or Pre-Order Slider Shortcode - If you wish to have a slider on your page, copy and paste the slider shortcode here. You can find the Layer Slider shortcode by going to WP admin panel > LayerSlider WP > All Sliders. As for the Pre-Order Slider, you can find it by going to WP admin panel > Pre-Order Slider > Sliders.
• Portfolio Type - Choose a layout for your portfolio single project. Selected type overrides chosen default portfolio type under Pre-Order Options > Portfolio > Portfolio Type
  • Portfolio small images - All images are displayed in a column, with accompanying text in a right sidebar.

    

  • Portfolio small slider - A slider is displayed, with accompanying text in a right sidebar.

    

  • Portfolio big images - All images are displayed across full width of the page content area, with accompanying text underneath.

    

  • Portfolio big slider - A slider is displayed across full width of the page content area, with accompanying text underneath.

    

  • Portfolio custom - Choose this option if you want to build your portfolio pages as you would a regular page, without your content following one of the predefined layouts. As with regular pages, you can choose between in grid (fixed) or full width template.
  • Portfolio gallery - All images are displayed in a gallery layout, with accompanying text underneath.

    

  • Portfolio Big Slider - Modern - A redisign of thePortfolio Big Slider layout, now with a section beneath the slider for a social share icon, a print icon, and a like icon.

• Number of Columns - Choose the number of columns (if using the Portfolio Gallery layout).
• Image Proportions - Choose image proportions (if using the Portfolio Gallery layout).
• "Back To" Link - You can choose a "Back To" page to link to from your portfolio single project. An icon at the bottom of your page will appear and when clicked, it will take viewers to this page.
• Portfolio External Link - This applies to portfolio lists. If you wish to take viewers to an external site once they click on this portfolio item, enter its full URL here.
• Dimensions for Masonry - Choose an image layout for this portfolio item when it appears in a masonry type portfolio list.
• Always put content below header - Set this option to "Yes" if you would like the content to always display below the header. This option is useful if you are using a transparent header, and would like the content to display below and not behind the header.

Pre-Order Header

• Header Skin - You can choose a header style to be applied. "Light" displays white navigation text and the "Light" logo, while "Dark" displays black navigation text and the "Dark" logo. If you want to set a custom color and use the default logo, leave this field empty.
• Enable Header Style on Scroll - Enabling this option will change the header skin (dark/light style) depending on the skin set in the row settings.
• Initial Header Background Color - Choose a background color to be applied to the header area.
• Initial Header Transparency - Set the transparency level for the header background on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Pre-Order Title

• Don't Show Title Area - You can choose to hide the title area on your page.
  • Animations - Choose a way to animate the title area upon page load.
    • "Text right to left" will make title text slide in from the right side of the page and then settle into position.
    • "Title area top to bottom" will make the title area gradually unfold.
    • Select "No animation" to have a static page title area.
  • Don't Show Title Text - You can choose to hide the title text on your page.
    • Title Text Alignment - Choose an alignment for the title text.
    • Title Text Style - Define styles for the title text.
  • Background Color - Choose a background color for the title area.
  • Don't Show Background Image - You can choose to hide the background image on your page.
  • Background Image - Choose an image for the title area background. For optimal viewing, we recommend that your image is in full HD resolution of 1920 pixels in width.
  • Pattern Overlay Image - If you wish to use a pattern over the title area, upload it here. This image will be repeated to cover the entire title area.
  • Responsive Background Image - Choose "Yes" if you want to make the title image responsive. Note that title area height will be defined by height of the image after it resizes to fit the browser's width.
  • Parallax Background Image
    • Choose "Yes" if you want to make the title image parallax.
    • Choose "Yes, with zoom out" if you want viewers to have a perception of zooming out of the image, along with the parallax.
      Your image should be larger than the title area, in order to be able to shrink and not have any gaps appearing at the sides of the page. We recommend a width of 2500 pixels and a height that's at least 20% more than the title area height. The parallax image will be limited in height by title area height (any excess will be cropped). We recommend that your image is at least this height, in order for the parallax effect to work properly.
  • Title Height - Enter a height for the title area in pixels.
  • Separator Under Title Text - Choose "Yes" if you want a separator to appear under title text.
  • Separator Color - Choose a color for the separator.
  • Enable Angled Title - Set this option to "Yes" if you would like to enable an angled title area.
    • Angled Direction - Choose the direction of the angled shape.
    • Background Color  - Set a background color for the angled title.
  • Enable Breadcrumbs - Choose "Yes" if you want breadcrumbs to appear in the title area.
    • Breadcrumbs Color - Choose a color for breadcrumb text.
  • Subtitle Text - Enter a subtitle for your page here.
  • Subtitle Text Color - Choose a color for subtitle text.

Pre-Order Scroll Title Animations

• Enable Whole Content Title Animations  - Set this option to "Yes" if you would like to enable an animation on the whole title area and all its content.
  • Scrolling Animation Start Point - Here you can set the properties for the first keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will start in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the begining of the animation (e.g. opacity: 1;).
  • Scrolling Animation End Point - Here you can set the properties for the last keyframe in the scrolling animation. Use the Scrollbbar Top Distance field to set when your animation will end in relation to the distance of the scrollbar from the top of the page, and use the "Enter CSS declarations separated by semicolons" field to enter your css declarations for the end of the animation (e.g. opacity: 0;).
• Enable Page Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title. You can use the options described above to create your animation.
• Enable Page Separator Title Animations  - Set this option to "Yes" if you would like to enable an animation on the page title separator. You can use the options described above to create your animation.
• Enable Page Subtitle Animations  - Set this option to "Yes" if you would like to enable an animation on the page subtitle. You can use the options described above to create your animation.
• Enable Page title Breadcrumbs Animation - Set this option to "Yes" if you would like to enable an animation on the page title breadcrumbs. You can use the options described above to create your animation.

Pre-Order Content Bottom

• Show Content Bottom Area - Choose "Yes" to enable the content bottom area on your page.
  • Background Color - Choose a background color for the content bottom area.
  • Custom Widget - Choose a custom widget area to display in the content bottom.
  • Display in Grid - Choose "Yes" if you want the content bottom area to be fitted in a fixed, centrally positioned grid.

Pre-Order Sidebar

• Layout - You can choose a sidebar layout for your page.
• Choose Widget Area in Sidebar - Choose a custom widget area to display in your sidebar.

The Pre-Order slider gives you a powerful way to create some amazing sliders. It's easy to create, edit, and delete sliders using our custom interface.

Creating a Slider

To create a new slider, go to Pre-Order Slider > Add New Slide from the admin panel. Enter a title for your slide in the text field near the top. Next, the following fields are available for you to edit:

Pre-Order Slide Type

• Slide Background Type - Choose whether you want to use an image or video.

Pre-Order Slide Image

• Slide Image - Choose your slide image.
  Please note that the image will be fitted across full width of the screen. We therefore recommend that your image is in full HD resolution of 1920x1080 pixels.

  It is possible to display an image that doesn't go across full height of the screen. In that case, you would need to set a custom height for the slider. We'll explain how to do this later on, in Using Your Slider.

Overlay Image

If you wish to use an overlay (pattern) over the slide image, upload it here. This image will be repeated to cover the entire slide area.

Enable Image Animation

Set this option to "Yes" if you would like to enable a motion (zoom) animation on the image. Then simply choose the animation you would like to use in the "Animation Type" field.

Pre-Order Slide Video

• Video - webm, mp4, ogv - Enter the path to the video file that you have previously uploaded to the Media Section. We recommend uploading videos in all 3 formats, in order to cover all modern browsers.
• Video Preview Image - Choose a background image that will be visible while the video loads. This image will be shown on touch devices too.
• Video Overlay Image - Enable this option if you wish to use an overlay image (pattern) over the video.
  • Overlay Image - Choose your overlay image here.

Pre-Order Slide General

• Header Skin - You can choose a header style to be applied to the page when this slide is in focus. The header skin will also affect slide content (navigation, buttons, text) color. For more information on header skin, please see Pre-Order Options > Header of this user guide.
  Note that you must enable the dark/light effect for the slider in Pre-Order Slider > Sliders > Effect on header (dark/light style) in order for this to take effect. We'll explain this in more detail later on, in Finishing Touches.

  

• Navigation Color - Choose a color for the navigation buttons to be applied when this slide is in focus.
• Scroll to Section - You can choose to have an arrow appear on the slide that, when clicked, will take viewers to another section of the page. Here you can enter the section anchor. For example, '#contact.'
• Hide Slide Title - You can choose whether to show or hide the slide title
• Don't Show Slide Text Shadow - You can choose whether to show or hide a dropdown shadow on slide text.
• Graphic Animation - If you upload a graphic, this is how it will enter the slide.
• Content Animation - This is how content (title, subtitle, text, buttons) will enter the slide.

Pre-Order Slide Graphic

• Slide Graphic - You can choose a graphic to appear on your slide.
• Link - If you wish to link the graphic, enter full URL here.

Pre-Order Slide SVG

• SVG Source code – Paste your SVG source code here. Any CSS styling for SVG can be entered in Pre-Order Options > General > Custom SVG CSS.
• SVG Link – If you wish to link the SVG, enter the full URL you would like to link to here.
• SVG Drawing Animation – Choose "Yes" to enable the SVG drawing animation.
  • SVG Frame Rate – Enter an FPS (frames per second) value to define drawing speed.

Pre-Order Slide Title

• Title Style - Define text styling for the title.
• Separator After Title - You can choose to have a separator appear after title text.
  • Separator Color - Choose a color for the separator.
  • Separator transparency - Enter a value between 0 (fully transparent) and 1 (opaque).
  • Separator Width - Enter a width for the separator in percentages.
• Border Around Title - You can choose to have a border appear around title text.
  • Border Color - Choose a color for the border.
  • Border Transparency - Enter a value between 0 (fully transparent) and 1 (opaque).

Pre-Order Slide Subtitle

• Slide Subtitle - Enter subtitle here.
• Subtitle Position - Choose a position for the subtitle.
• Subtitle Style - Define text styling for the subtitle.
• Margin Bottom - Set a bottom margin for the subtitle.
• Padding - Define padding for the subtitle.

Pre-Order Slide Text

• Slide Text - Enter body text here.
• Text Style - Define text styles for body text.
• Padding - Define padding for the text.

Pre-Order Slide Buttons

• Button 1, Button 2 - You can enter labels and links for two different buttons to appear on the slide. You can also set a hover type for each button.

Pre-Order Slide Content Positioning

• Graphic Alignment - Choose an alignment for the slide graphic.
• Text Alignment - Choose an alignment for slide text.
• Separate Graphic and Text Positioning - You can choose to have all elements on the slide take on the same positioning settings you define, or you can position the graphic and text separately.
• Vertically Align Content to Middle - Set this option to "Yes" if you would like to align all of the slide content to the vertical center of the slide.
• Content Positioning - Your slide content (title, subtitle, text, buttons) is positioned within an invisible grid, in order to align with the rest of your page. The percentages you set here are in relation to this grid (and not to the slide background).
• Graphic Positioning - The graphic is positioned within an invisible grid, in order to align with the rest of your page. The percentages you set here are in relation to this grid (and not to the slide background).

Pre-Order Slide Scroll Animations

• Animate Whole Slide Content Group at Once on Scroll – If you wish the entire slide content to animate together on scroll, choose "Yes." Otherwise, you can set different animations for various slide elements (title, subtitle, graphic, text, buttons, and SVG) by filling out the fields for those respective elements.
  • Scrolling Animation Start Point – These are starting properties for the scrolling animation.
    • Scrollbar Top Distance (px) – Enter amount of scroll for animation to start. By default, the animation will start at 0px.
    • Enter CSS declarations separated by semicolons – Enter the starting animation style (example: opacity:1; transform:scale(1);).
  • Scrolling Animation End Point – These are ending properties for the scrolling animation.
    • Scrollbar Top Distance (px) – Enter amount of scroll at which animation ends. By default, the animation will end at 300px.
    • Enter CSS declarations separated by semicolons – Enter the ending animation style. 

Now it's time to add this slide to a slider. At the right side of your screen, in the section called Sliders, select the sliders that you wish to add this item to. Alternatively, if you'd like to create a new slider, click on "+ Add New Slider." A text field will unfold where you can enter a name for the slider. Then click on Add New Slider.

In the section underneath, called Attributes, you can type in the order in which you'd like this slide to appear in the slider. For example, enter "1" if you want this slide to be the first one to appear.

Once done, click the "Publish" button.

Using Your Slider

Finally, to display your slider on a page, copy its generated shortcode string and paste in into the appropriate custom field in the page backend. You can find the shortcode string by navigating to Pre-Order Slider > Sliders from the admin panel. In the page backend, under Pre-Order General, there's a field called "Layer Slider or Pre-Order Slider Shortcode." Paste your shortcode here.

It should look something like this:

[Pre-Order_slider slider='home-slider' auto_start='true' animation_type='slide' slide_animation='6000' height='' responsive_height='yes' background_color='' anchor='']

You can modify some sections of this code in order to achieve different effects.

• slider - this is the slider's slug. You can enter a different slug in order to change the slider you're using.
• auto_start - this controls whether slide transition starts automatically upon page load. Possible values are 'true' and 'false'.
• animation_type - this is the slide transition style. Possible values are 'slide' and 'fade'.
• slide_animation - this is the time between slide transitions, in milliseconds.
• height - you can set a height for the slider in pixels. For example, height='500', will set the slider height to 500px. If you don't enter anything, the slider will be full screen.
• responsive_height - possible values are 'yes' and 'no'. This will take effect only if you've entered a value for 'height.'
• anchor - if you wish to link to this slider, you'll need to have an anchor to link to. Enter your anchor name here, in lowercase letters. For example, anchor='slider'.
• responsive_breakpoints - Chose the breakpoint set you would like to use in the Pre-Order Slider for advanced responsiveness (described below). This attribute takes the values “set1”, or “set2”

Finishing Touches

You can further edit your slider by going to Pre-Order Slider > Sliders from the admin panel and clicking on your slider of choice.

• Effect on header (dark/light style) - If your slider contains slides with predefined header styles, you need to enable this option in order for it to take effect. Note that you can combine slides that use dark and light header styles - the header will change accordingly.
• Parallax effect - You can enable or disable the parallax effect on your slider.
• Advanced Responsiveness - If you set this option to "Yes" you will be able to define your own responsiveness settings for the slider (explained below). Please note that if you set this option to "Yes" improved logic for the responsiveness of the slider will be applied.

Breakpoint Coefficients and Breakpoint Sets

To create a client carousel, go to Pre-Order Carousel > Add New Carousel Item from the admin panel.

Enter a title for your carousel item in the text field near the top. Next, there are a few fields to fill in:

• Carousel Image - upload your image.
• Carousel Hover Image - you can optionally upload a different image for viewers to see once they mouse hover over the original image.
• Link - enter a link in full URL format that will open once viewers click on the item.
• Target - specify where the linked document should open.
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.

Now it's time to add this carousel item into a carousel.

1. At the right side of your screen, in the section called Carousels, select the carousels that you want to add this item to. Alternatively, if you'd like to create a new carousel, click on "+ Add New Carousel."
2. A text field will unfold where you can enter a name for the carousel.
3. Then click on "Add New Carousel".
4. Once you've checked the carousel(s) where you want this item to go to, click the "Publish" button.

Finally, to display your carousel on a page, go into the backend of that page and click on the "Add Element" button. Choose Pre-Order Carousel and fill out the following fields:

• Carousel Slider - Choose the carousel slider you want to display.
• Number of Visible Items - Choose how many carousel items you would like visible at the same time on the carousel.
• Order By - Carousel items can be organized by menu order, title, or date.
• Order - You can also choose between ascending or descending order.
• Show Items In Two Rows? - You can display carousel items in one or two rows.

Testimonials are a great way to show potential customers what others are saying about your business.

To create a testimonial, go to Testimonials > Add New from the admin panel. Enter a title for your testimonial in the text field near the top.

Pre-Order Testimonials

Next, there are a few fields to fill in:

• Author - Enter the testimonial author's name.
• Text - Enter the text of the testimonial.
• Website - Enter the address of the author's website.
• Rating - Choose a rating for this testimonial.

Now it's time to categorize the testimonial. At the right side of your screen, in the section called Testimonials Categories, select the categories that you wish to add this testimonial to. Alternatively, if you'd like to create a new category, click on "+ Add New Testimonials Category". A text field will unfold where you can enter a name for the category. Then click on "Add New Testimonials Category".

Underneath the category section is the Featured Image section, where you can optionally upload an image to be displayed with the testimonial. Once done, click the "Publish" button.

Finally, to display your testimonial on a page, go into the backend of that page and click on the "Add Element button". Now choose one of the following shortcodes:

Testimonials

• Category - If you wish to display a specific category of testimonials, enter the category slug here (for example: art. You can find the category slug by navigating to Testimonials > Testimonials Categories from the admin panel and clicking on your category of choice). Alternatively, leave this field empty to show testimonials from all categories.
• Number - Choose the number of testimonials to display on the page.
• Number per Slide - Choose how many testimonial items you would like to display on one testimonial slide.
• Order By - Testimonials can be organized by title, date, or random.
• Show Author Image - You can show or hide the author's image. This is the image uploaded in the "Featured Image" section on the backend testimonial page.
• Text Color - Choose a color for the testimonial text.
• Text Font Size - Choose a font size (in pixels) for the testimonial text.
• Author Text Font Weight - You can set the boldness of the font.
• Author Text Color - Choose a color for the author's name.
• Author Text Font Size - Choose a font size (in pixels) for the author's name.
• Show Navigation - You can show or hide the navigation buttons.
• Navigation Style - Navigation buttons can be light or dark - see what works best with your background color.
• Auto Rotate Slides - Set the length of time (in seconds) for which one testimonial will stay on the screen before switching to the next.
• Animation Type - You can choose between fade and slide effects.
• Animation Speed - Enter the speed of slide animation in milliseconds.

Testimonials Carousel

• Category - If you wish to display a specific category of testimonials, enter the category slug here (for example: art. You can find the category slug by navigating to Testimonials > Testimonials Categories from the admin panel and clicking on your category of choice). Alternatively, leave this field empty to show testimonials from all categories.
• Number - Choose the number of testimonials to display on the page.
• Number per Slide - Choose how many testimonial items you would like to display on one testimonial slide.
• Order By - Testimonials can be organized by title, date, or random.
• Show Title - Set this option to "Yes" if you would like to show the testimonial title.
• Show Rating - Set this option to "Yes" if you would like to show the testimonial rating.
• Show Author Image - You can show or hide the author's image. This is the image uploaded in the "Featured Image" section on the backend testimonial page.
• Text Color - Choose a color for the testimonial text.
• Text Font Size - Choose a font size (in pixels) for the testimonial text.
• Author Text Font Weight - You can set the boldness of the font.
• Author Text Color - Choose a color for the author's name.
• Author Text Font Size - Choose a font size (in pixels) for the author's name.
• Show Navigation - You can show or hide the navigation bullets..
• Navigation Style - Navigation buttons can be light or dark - see what works best with your background color.
• Slideshow Interval - Set the number of second you would like to pass before the slideshow displays the next slide.
• Animation Speed - Enter the speed of slide animation in milliseconds.

Testimonials Masonry

You can use this shortcode to display your testimonials in a masonry layout. Please note that this shortcode can only display eight testimonials at a time.

• Category - If you would like to display testimonials only from a specific category, please enter the category slug here.
• Order By - Choose how you would like to order the testimonials.
• Block Main Title  - Input a title for the central block.
  • Block Main Title Tag - Set a heading tag for the central block title.
  • Block Main Title Size - Set a size for the title of the central block.
• Block Main Description - Input a description for the central block.
• Block Main Button Text - Input text to display on the central block button.
  • Button Background Color - Set a background color for the button.
  • Button Link - Input a URL for the button to lead to.
    • Link Target - Choose whether the link will open in a new browser tab ("self") or the same one ("blank"). 
• Show Author Image - Set this option to "Yes" to display the testimonial authors' images.
• Title Tag - Choose a heading tag for the testimonial titles.
• Title Size - Set a size for the testimonial titles.
• Testimonial Backgorund Color - Set a background color for the testimonial blocks.

The Masonry Gallery is an attractive way to present your links and invite visitors to other sections of your site.

To create a masonry gallery, go to Masonry Gallery > Add New from the admin panel. Enter a title for your masonry gallery item in the text field near the top of the screen.

You can use the following fields to edit your masonry gallery item:

Masonry Gallery General

• Text – Enter text to display over the masonry gallery item.
• Link – Enter the URL that you would like this item to link to.
• Link target – Specify how the link should open:
  • Self – The link will open in the same tab the user was on.
  • Blank – The link will open in a new tab.
• Set Item in Parallax - Set this option to "Yes" if you would like to set the Masonry Gallery item in parallax.

Masonry Gallery Item Style

• Size – Choose from one of the predefined item sizes.
• Type – Your item can display with a button, with icon, or in standard format (with title only).
  • Button Label – Enter a label for the button. This option applies when using the "With Button" item type.
  • Icon Package – Choose an icon package and set the icon here. This option applies when using the "With Icon" item type.

• Category – If you would like to display a specific category of masonry gallery items, enter the category slug in this field (ex. "art." You can find the category slug by navigating to Masonry Gallery > Masonry Gallery Categories from the admin panel and clicking on your category of choice). Alternatively, leave this field empty to show items from all categories.
• Number – Choose the number of items to display on the page.
• Order – You can choose between ascending and descending order.
• Parallax Item Speed - Set a parallax speed for items which have the "Set Item in Parallax" option set to "Yes".
• Parallax Item Offset - Set an offset for items which have the "Set Item in Parallax" option set to "Yes". 

Widgets are easy to manage and can be incredibly useful to have on your site.

For Pre-Order, we've developed custom widgets and widget areas to give you even more functionality. You can also create multiple custom sidebars.

Widgets

• Call to Action - if you wish to use this widget, we recommend creating a custom widget area to add it to. Then, use this widget area for the Content Bottom. As a result, the Call to Action will display at the bottom of your pages, just above the footer.

  

  

• Woocommerce Dropdown Cart - this widget is meant to be used with the WooCommerce Dropdown Widget Area. If activated, you'll see an icon in the header that, when hovered over, displays how many items are in your cart.
  Please note that you need to have Woocommerce installed in order for this widget to take effect.

• Pre-Order Instagram Widget - You can use this widget to display your Instagram feed. You first need to go to Pre-Order Options > Social > Instagram, and click the "Connect with Instagram" button. This will open your browser and ask for permission to your Instagram feed.
  After you have enabled permission, you can add the widget to a widget area and set a title for the widget, define a tag if you would like to display images with only a certain hashtag in their description (caption), set the number of images you would like to display, define the number of columns, set one of three predefined image sizes, and set an images cache time. If you leave the image cache time empty, then your images will not be stored in cache and each time the page is reloaded they will be requested from Instagram. The image cache time is defined in seconds (only a number should be entered without a time unit, i.e. if you enter 600 the cache time will be set to 600s). If you have any issues with the Instagram feed, you can go to Pre-Order Options > Social > Instagram, and click "Reconnect to Instagram".

• Pre-Order Social Icon - You can use this widget to easily add social icons to widget areas.

Widget Areas

• Sidebar - this is the WordPress default widget area for blog posts.
• Sidebar Page - this is the default widget area for pages.
• Header Top Left - here you can add widgets to the left side of the Header Top.
• Header Top Right - here you can add widgets to the right side of the Header Top.
• Header Bottom Right - here you can add widgets to the right side of the Header Bottom (next to the menu).
• Side Area - here you can add widgets to the Side Area.
• Left Menu Area - here you can add widgets to the Left Menu area.
• Footer Column 1, 2, 3, & 4 - here you can add widgets to the Footer Top columns.
  Please note that you need to have the appropriate column layout enabled in Pre-Order Options in order for these widgets to appear.
• Footer Bottom Center - here you can add widgets to the Footer Bottom Center (for example, copyright text). 
• Footer Bottom Left - here you can add widgets to the Footer Bottom Left.
• Footer Bottom Right - here you can add widgets to the Footer Bottom Right.
• Header fixed right - this widget area is meant to be used only with the "Sticky Expanded" menu type.
• WooCommerce Dropdown Widget Area - this widget area is meant only for the WooCommerce Dropdown Cart widget.

To start creating your menu, go to Appearance > Menus from the admin panel.

At the upper left corner you'll see 2 tabs: Edit Menus and Manage Locations.

In Manage Locations, you can assign menus to two different locations: top navigation and fullscreen navigation. If using the Sticky Divided header type, you'll see two other locations: "left top navigation" and "right top navigation" (these locations apply to that specific header type).

Now let's go to Edit Menus. At the bottom of the page, in the section Menu Settings, you're also able to assign the current menu to a location.

When creating a menu, you can click on the little triangle on each menu item in order to open up a list of editable settings.

Let's go over them:

• Navigation Label - Here you can enter a navigation label for this menu item. By default, the label is the same as the page title.
• Title Attribute - The title attribute will pop up once viewers hover over the navigation label.
• Anchor - If you want this menu item to take viewers to a certain page section, enter the anchor here.
• Don't link - Enable this option if you don't want this menu item to be a clickable link.
• Don't show - Enable this option if you don't want this menu item to show. This is useful if you're creating a wide menu in which you need to have a 2nd level item in order to hold the 3rd level items, but you don't want the 2nd level items to show.
• Type - You can choose between 3 menu types. Leaving this field empty will display a dropdown menu. Note that you only need to make this setting for the parent menu item, and all its child items will follow.
• Wide menu position - If using a wide menu, choose an alignment. This option is useful if you don't have many columns and would like to set a certain position for them.

Wide Menu

• Icon Pack - Choose an icon pack to use.
• Icon - If using the "wide with icons" menu, you can choose an icon to appear next to this menu item.
• Custom widget area - You can choose a custom widget area to appear under the menu item. This only applies to wide menus, and is recommended for 3rd level navigation. For example, you could add an image to appear there.
• Show custom widget area in popup - Enable this option if you want the widget area to appear in a pop-up window once viewers hover over the menu item.

Anchors (One Page Site Functionality)

You can add anchors to menu items in order to scroll to the element on the page. In order to do that, you need to perform the following steps:

1. You need to set anchor ID(s) while editing the page. You can do that by editing properties of the Row element in Visual Composer. In the "Anchor ID" field, simply type in the name of the anchor. You can type any text without empty spaces.

   

   

2. You can repeat step 1 for several rows of the page.
3. Now you can edit the menu. In Appearance > Menus, find the page containing the anchors and drag multiple instances of it to the menu.
4. Edit each menu item and type in the anchor ID in the "Anchor" field.

   

Accordions

• Style - Accordion, Toggle, Boxed Accordion and Boxed Toggle

   

  Accordions

   

  

  Boxed Toggles

  

• Title - Title label for accordion section heading
• Title Color - Chose color for the Accordion title
• Background Color - Chose color for the Accordion background
• Title Tag - h2, h3, h4, h5 and h6

Image Gallery

• Gallery type - Chose between Flex slider fade, Flex slider slide, Nivo Slider and Image grid

   

  Image Gallery Flexslider, Nivo Slider

   

  

   

  Image Gallery with Frame

   

  

  Recomended size for the images in frame: 871 x 516px

   

  Image Gallery Image Grid

   

  

• Auto rotate slides - Choose a delay in seconds between each slide animation or disable auto rotation.
• Images - Upload or select gallery images
• Image size - Enter image size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively, enter image size in pixels: 200x100 (Width x Height). Leave empty to use "thumbnail" size.
• On click - Choose image behaviour on click
• Extra class name - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
• Enable Drag - Set this option to "Yes" if you would like to enable drag functionality on the image gallery (the images can be dragged left and right with the mouse pointer).
• Show Direction Navigation - Set this option to "Yes" if you would like to enable navigation arrows on the gallery slider.
• Show Control Navigation - Set this option to "Yes" if you would like to show navigation bullets below the gallery slider.
• Pause on Hover - Set this option to "Yes" if you would like the gallery slider to pause when hovered over.
• Frame - Choose wheather or not your images should appear in frame
• Choose Frame - Choose here frame type for your images
  • Default
  • Frame 1
  • Frame 2
• Column Number - Set a number of columns when using the "Image Grid" Type.
• Grayscale Images - Set this option to "Yes" if you would like to enable an effect where your images are grayscale and then gain color on hover. This option only applies when using the "Image Grid" Type.
• Spaces Between Images - Set this option to "Yes" if you would like to enable a space between images when using the "Image Grid" Type.

Row

Row is container element to which you can add other elements (shortcodes). This element can be full width or in grid. With CSS Animation you can set entering animation for this element and with Transition Delay you can set delay for chosen CSS Animation. Anchor ID is used in our anchor functionality. You can add row ID which can be referenced in main menu Anchor ID field.

• Extra class name - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.
• Row Type - Choose here row type
  • Row - simple row
  • Parallax - is our simple and easy plugin for creating image parallax effects when scrolling the page. If you set the parallax row to display full width, you can also choose to set the content for parallax rows to be in grid or full width in the "Content Width" field, and set the side padding when the content is set to full width.
  • Expandable - is full width container element which is initially closed. This element has two buttons which open / close this section when clicked. You can add every shortcode to this container element.

    

    • More Label - Give name to More Label (for example: "Click for More")
    • Less Label - Give name to Less Label (for example: "Click for Less")
    • Label Color - Choose text color for label More/Less
    • Label Hover Color - Choose text hover color for label More/Less
    • Label Position - Choose a text alignment for the More/Less labels
  • Content Menu - This is a menu built from page sections and can be used to create one page websites. Unlike top navigation, you can place the Content menu anywhere on your page. To create one, follow these steps:
    1. Add a row shortcode where you wish the Content menu to go. Edit this row and select "Content menu" under "Row Type." Click on "Save changes."

       

    2. Add another row shortcode to your page. This row will be a menu item in the Content menu.
    3. Click on the "Edit this row" button and choose "Yes" under "Row in content menu."
    4. Enter a menu label for this row in "Content menu title." In "Content menu icon," you can optionally choose an icon to appear next to this menu item.
    5. Fill in the "Anchor ID" field. This is required in order to link the menu item to this specific row. We recommend using lowercase letters and underscores (if necessary).

       

    6. Repeat steps 2-5, as required.
• Use Row as Full Screen Section - Set this option to "Yes" if you would like to use this row as a full screen section when using the "Full Screen Sections" template.
• Type - Choose between "Full Width " and "In Grid".
• Header Style - Set the header style (dark/light) for the header when scrolling over this row. For this option to work "Enable Header Style" needs to be set to "Yes" (either in Pre-Order Options > Header, or in page options)
• Anchor ID - Set an anchor ID for the row.
• Row In Content Menu - Set this option to "Yes" if you would like to add this row to the content menu (expained above).
• Angled Shape in Background - Set this option to "Yes" if you would like to make the row angled.
  • Angled Shape Position - Choose whether you would like the top, bottom, or both borders of the row to be angled.
  • Angled Shape Direction - Set a direction for the angled shape.
• Text Align - Set the text alignment for the row.
• Video Background - Set this option to "Yes" if you would like to use a video background in the row.
  • Video Overlay - Set this option to "Yes" if you would like to use an pattern overlay image on the video.
    • Video Overlay Image (pattern) - Upload the pattern image for the video overlay.
  • Video Background - Input links to your video file in all three required formats (webm, mp4, ogv).
  • Video Preview Image - Set a preview image for the video while loading.
• Background Image - Set an image to use for the row background.
• Set Background Image as Pattern - Set this option to "Yes" if you would like to use the background image as a pattern.
• Full Screen Height - This option is only available if you chose "Parallax" in the Row Type field. Set this option to "Yes" if you would like your parallax row to take up the full height of the screen.
  • Vertically Align Content to Middle - Set this option to "Yes" if you would like to vertically align the content of your parallax section to the middle of the screen.
• Section Height - This option is only available if you chose "Parallax" in the Row Type field. Here you can define the height of your parallax section.
• Parallax Speed - This option is only available if you chose "Parallax" in the Row Type field. You can define the speed of the parallax effect in this field.
• Background Color - Set a background color for the row.
• Border Bottom Color - Set a color for the bottom border of the row.
• Padding - Set a value for the left and right padding (in percentages).
• Padding Top - Set a top padding.
• Padding Bottom - Set a bottom padding.
• CSS Animation - Set a css entering animation for the elements in the row.
• Transition Delay - Set a delay time for the animation (in milliseconds).

Separator

• Type - Choose between Normal, Transparent and Small. If Small separator is chosen, you can set its width.
• Color - For Normal and Small, choose separator line color
• Transparency - For Normal and Small enter separator transparency (for example 0.4)
• Thickness - Enter separator height in pixels
• Top Margin - Enter top margin in pixels
• Bottom Margin - Enter bottom margin in pixels

Separator with Text

• Title - Enter the text (title) that belongs to separator
• Title position - Choose the positon for title on separator line
• Border - Choose whether you like your title have a border
• Border color - Choose color for your title border
• Background color - Choose title background color
• Title color - Choose text color for the title

Separator with Icon

• Icon - Choose an icon to be displayed.
• Color - Chose a color for the icon and the separator.
• Opacity - Set the opacity level on a scale of 0 to 1, where 0 is fully transparent and 1 is opaque.

Empty Space

• Height - Set a height for the empty space.
• Extra Class Name - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.
• Background Image  - Set a backgorund image for the empty space.
• Image Repeat - Choose if you would like the background image to be repeated.

Tabs

• Style - Choose here style for the Tabs
  • Horizontal Center
  • Horizontal Left
  • Horizontal Right
  • Boxed
  • Vertical Left
  • Vertical Right

Horizontal Left

Tabs boxed

Tabs vertical left

Highlights

Portfolio List

Portfolio Lists enable you to present your portfolio on a page.

• Type - You can choose between six layouts - standard, standard no space, hover text, hover text no space, masonry without space, masonry with space, masonry with space (image only), and justified gallery.

   

  Portfolio Standard

   

  

   

  Portfolio Hover Text

   

  

   

  Portfolio Hover Text No Space

   

  

• Hover Animation Type - Choose a hover animation for the portfolio list.
• Spacing Between Items - Set spacing between items when using the Masonry With space Portfolio Type.
• Box Background Color - Applies when Standard and Masonry with space types are selected. Here you can choose a background color for the text box. 
• Box Border - You can enable a border to appear around the text box.
• Columns - The portfolio list can be divided into 2, 3, 4, 5 or 6 columns.
• Portfolio Loading Type - Choose how you would like you portfolio list to load.
• Image Proportions - You can choose your image proportions here.
• Image Color Overlay - Set a color for the hover overlay. This option does not apply to the "Default" portfolio type.
• Row Height - Applies when the Justified Gallery portfolio type is selected. Set a height for the portfolio list rows.
• Last Row Behaviour - Applies when the Justified Gallery portfolio type is selected. Choose a behavior for the last row in your portfolio list.
• Justify Threshhold - Applies when the Justified Gallery portfolio type is selected. If the last row takes up more than this portion of the available width, it will be justified despite the defined alignment. Enter 1 to never justify the last row.
• Grid Size - Applies when Masonry without space type is selected. You can use either a 4 or 5 column grid layout. With the 4 column grid, 4 small images can fit across one row, or if large images are being fitted, 2 large ones will fit (a large image takes the width of 2 small ones). Likewise, with the 5 column grid, 5 small images can fit across a row.
• Order By - Portfolio items can be organized by menu order, title, or date.
• Order - Choose between ascending or descending order.
• Filter - You can show or hide the category filter, which is displayed on top of the page.
• Lightbox - Enable or disable the lightbox effect.
• Show View Button - Set this option to "No" if you would like to hide the "View" button from you portfolio list items.
• Show Load More - Enable or disable the Load More button.
• Number - Here you can define the number of portfolio items you wish to display on the page. Enter -1 to display them all.
• Category - If you want to show portfolio items from one specific category, enter the category slug here. Alternatively, to display all categories, leave this field empty.
• Selected Projects - If you want to list specific portfolio items, enter their project IDs, separated by commas. The project ID can be found in the URL when editing the single portfolio item. For example, in www.yoursite.com/wp-admin/post.php?post=164&action=edit, the ID is 164.
• Show Title - Choose if you would like the portoflio item title to be visible or not.
• Title Tag - You can choose a heading style to apply to the project titles.
• Title Color - Set a color for the title.
• Title Font Size - Set a font size for the title.
• Text align - Choose between left, centered, or right text alignment.
• Enable Separator Below Title - You can choose to have separators appear under portfolio item titles.
  • Separator Color - Set a color for the separator.
• Show Categories - Choose if you would like the portoflio item categories to be visible or not.
• Category Name Color - Set a color for the category name.

Portfolio Slider

The Portfolio Slider enables you to organize your portfolio items as an interactive slideshow which viewers can navigate through.

• Order By - Portfolio items can be organized by menu order, title, or date.
• Order - You can also choose between ascending or descending order.
• Number - Here you can define the number of portfolio items you wish to display on the page. Enter -1 to display them all.
• Category - If you want to show portfolio items from one specific category, enter the category slug here. Alternatively, to display all categories, leave this field empty.
• Selected Projects - If you want to list specific portfolio items, enter their project IDs, separated by commas. The project ID can be found in the URL when editing the single portfolio item. For example, in www(dot)yoursite(dot)com/wp-admin/post.php?post=164&action=edit, the ID is 164.
• Number of Items Shown - Set the number of portfolio items that will be shown at the same time in full width (on smaller screens/sizes, due to responsiveness, there will be less items shown).
• Lightbox - Enable or disable the lightbox effect.
• Title Tag - You can choose a heading style to apply to the project titles.
• Separator - You can enable a separator to appear between project title and category. This applies to text viewers see on image hover.
• Hide "View" Button - Set this option to "Yes" if you would like to hide the "View" button.
• Image Proportions - You can choose your image proportions here. We recommend using Landscape (500x380) for faster page loading time.
• Prev/Next Navigation - You can show or hide the navigation buttons.

Parallax Layers

You can use this shortcode to create an image composed of separate layers that follow the movement of the mouse.

• Layers - Upload your separate layers here.
• Full Screen Height - Set this option to "yes" if you would like the image to have a full screen height.
• Height - Define the height of the image.
• Content - Enter content to appear of the image layers. This content will be displayed as final (top) layer over all other layers

Counter

Counters are great for communicating information in the form of numbers.

• Type - You can choose between Zero or Random Counter.
  • Zero Counters start from zero and count up to the specified number.
  • Random Counters will display a random set of numbers before arriving to specified number.
• Box - You can fit the counter into a boxed layout.
• Box Border Color - Choose a color for box border, if boxed layout is enabled.
• Position - Choose between left, centered, or right alignment for the counter content.
• Digit - Enter the number you want the counter to arrive at.
• Font Size - Choose a font size (in pixels) for the counter number.
• Font Weight - You can set the boldness of the counter number.
• Font Color - Choose a color for the counter number.
• Text - Enter text you want to be displayed below counter number.
• Text Size - Enter a text size (in pixels).
• Text Font Weight - You can set the boldness of the font.
• Text Transform - You can choose a text transform style.
• Text Color - Choose a color for the text.
• Separator - You can enable a separator to appear between digit and text.
• Separator Color - Choose a color for the separator.
• Separator Transparency - Enter a value between 0 (fully transparent) and 1 (opaque).

Cover Boxes

Cover Boxes allow you to give a preview of your content in an interactive way, inviting viewers to follow the links and read more.

• Active Element - Enter the number of the cover box that you want to be active upon page load.
• Image - Upload your image here.
• Title - Enter the cover box title.
• Title Color - Choose title color.
• Text - Enter accompanying text here.
• Text Color - Choose text color.
• Link - Enter full URL of the link.
• Link Label - Enter link label here (for example, "Read More").
• Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Read More Button Style - Enable this option if you want the link to be displayed as a button. Otherwise, it will display as a hyperlink.

Icon List Item

They allow you to make lists using icons, rather than numbers or bullets.

• Icon - Choose an icon to be displayed.
• Icon Type - You can choose between icon with border (Circle) and icon without border (Transparent).
• Icon Color - Choose a color for the icon.
• Icon Background Color - Choose a color for the icon background (only works if Icon Type is Circle).
• Icon Border Color - Choose a color for the icon border (only works if Icon Type is Circle).
• Title - Enter title here. This will be the content of the list.
• Title Color - Choose a color for the title.
• Title size - Enter a size for the title (in pixels).

Call to Action

Call to Actions allow you to display bold messages on your page, inviting viewers to follow a link.

• Full Width - You can choose whether the Call to Action box will go across full width of the page, or be fitted inside a grid.
• Content in grid - You can choose whether content—text, icon, button—will go across full width of the page, or be fitted inside a grid.
• Type - The content can be text only (Normal) or text with an icon (With Icon).
• Icon - Choose an icon to be displayed.
• Icon Size - The icon can be small, medium, or large.
• Icon Color - Choose a color for the icon.
• Custom Icon - Alternatively, if you want to use a custom icon, upload it here.
• Background Color - Choose a color to be applied to the Call to Action box.
• Background Image - If you want to use an image for the box background, upload it here.
• Border Color - Choose a color for the box border.
• Padding Top - If you want to set your own padding, enter it here. This is the space (in pixels) between the text and the upper edge of the box.
• Padding bottom - If you want to set your own padding, enter it here. This is the space (in pixels) between the text and the bottom edge of the box.
• Default Text Font Size - Enter the size of the text (in pixels).
• Text Font Weight - You can set the boldness of the font.
• Text Letter Spacing - Use this option to specify the space between letters.
• Show Button - You can choose whether to show or hide button.
• Button Size - You can choose from one of the predefined button sizes.
• Button Text - Enter button text here.
• Button Link - Enter full URL of the button link.
• Button Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Button text color - Choose a color for the button text.
• Button hover text color - Choose a hover color for the button text.
• Button Background Color - Choose a color for the button background.
• Button Hover Background Color - Choose a hover color for the button background.
• Button Border Color - Choose a color for the button border.
• Button Hover Border Color - Choose a hover color for the button border.
• Content - Enter text to appear in the Call to Action here. You can optionally stylize it using the built-in text editor.

Blockquote

They're a great way to make a section of text stand out on your page.

• Text - Enter blockquote text here.
• Text Color - Choose a color for blockquote text.
• Width - Content width can be reduced from original size (enter the percentage of reduction).
• Line Height - Define the amount of space in between lines of text (in pixels).
• Background Color - Choose a color for the blockquote background.
• Border Color - Choose a color for the blockquote border.
• Show Quote Icon - You can enable or disable the quotations icon.
• Quote Icon Color - Choose a color for the quotations icon.

Button

Buttons are a widely used element on the web and can be used for a multiple of purposes.

• Size - You can choose from one of the predefined button sizes.
• Style -Choose between a default and white button style.
• Text - Enter button text here.
• Icon - You can choose an icon to be displayed in the button.
• Link - Enter full URL of the button link.
• Link Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• ID - Set a unique ID attribute for the button.
• Hover Type - Choose a hover type for the button.
• Color - Choose a color for the button text.
• Hover Color - Choose a hover color for the button text.
• Background Color - Choose a color for the button background.
• Hover Background Color - Choose a hover color for the button background.
• Border Color - Choose a color for the button border.
• Hover Border Color - Choose a hover color for the button border.
• Font Style - Choose between normal and italic font styles.
• Font Weight - You can set the boldness of the font.
• Text Align - Choose between left, centered, or right text alignment.
• Margin - You can enter margins for the button in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Border Radius - Enter a border radius number (in pixels) if you want your button to have rounded corners.

Image With Text

This shortcode allows you to quickly add an image with text on your page.

• Image - Upload your image here.
• Title - Enter a title for the image.
• Title Color - Choose a color for the title.
• Title Tag - You can choose a heading style to apply to the title.
• Content - Enter text here. You can optionally stylize it using the built-in text editor.

Message

They allow you to display hints, warnings, or any other messages that you wish to communicate to your viewers.

• Type - The message can contain either text only (Normal) or text with an icon (With Icon).
• Icon - Choose an icon to be displayed.
• Icon Size - The icon can be small, medium, or large.
• Icon Color - Choose a color for the icon.
• Icon Background Color - Choose a color for the icon background.
• Custom Icon - Alternatively, if you want to use a custom icon, upload it here.
• Background Color - Choose a color to be applied to the message box.
• Border - You can enable or disable a border around the message box.
• Border Width - Enter a size (in pixels) for the border width.
• Border Color - Choose a color for the box border.
• Close Button Color - Choose a color for the close (X) button.
• Content - Enter text to appear in the message box here. You can optionally stylize it using the built-in text editor.

Pie Chart

They are great for communicating information in a visual and easy to understand manner.

• Percentage - Enter the percentage number.
• Percentage Color - Choose a color for the percentage number.
• Percentage Font Size - Choose a font size for the percentage number.
• Percentage Font Weight - You can set the boldness of the percentage number font.
• Bar Active Color - Choose a color for the active part of the pie chart.
• Bar Noactive Color - Choose a color for the no-active part of the pie chart.
• Pie Chart Line Width - Enter a width for the pie chart line (in pixels).
• Title - Enter title here.
• Title Color - Choose a color for the title.
• Title Tag - You can choose a heading style to apply to the title.
• Text - Enter accompanying text here.
• Text Color - Choose a color for the text.
• Separator - You can enable a separator to appear between title and text.
• Separator Color - Choose a color for the separator.

Pie Chart With Icon

They are great for communicating information in a visual and easy to understand manner.

• Percentage - Enter the percentage number.
• Bar Active Color - Choose a color for the active part of the pie chart.
• Bar Noactive Color - Choose a color for the no-active part of the pie chart.
• Pie Chart Line Width - Enter a width for the pie chart line (in pixels).
• Title - Enter title here.
• Title Color - Choose a color for the title.
• Title Tag - You can choose a heading style to apply to the title.
• Icon - Choose an icon to be displayed inside the pie chart.
• Icon Size -You can choose from one of the predefined icon sizes.
• Icon Color - Choose a color for the icon.
• Text - Enter accompanying text here.
• Text Color - Choose a color for the text.

Pie Chart 2 (Pie)

They are great for communicating information in a visual and easy to understand manner.

• Width - Enter a width for the pie chart (in pixels).
• Height - Enter a height for the pie chart (in pixels).
• Legend Text Color - Choose a color for legend text.
• Content - In this section, you can edit parts of the pie chart - percentages, colors, legend labels - as well as add or remove data.

Pie Chart 3 (Doughnut)

They are great for communicating information in a visual and easy to understand manner.

• Width - Enter a width for the pie chart (in pixels).
• Height - Enter a height for the pie chart (in pixels).
• Legend Text Color - Choose a color for legend text.
• Content - In this section, you can edit parts of the pie chart—percentages, colors, legend labels—as well as add or remove data.

Progress Bar - Horizontal

They are great for communicating a large amount of information in a visual and easy to understand manner.

• Title - Enter title here.
• Title Color - Choose a color for the title.
• Title Tag - You can choose a heading style to apply to the title.
• Percentage - Enter the percentage number.
• Percentage Color - Choose a color for the percentage number.
• Percentage Font Size - Choose a font size for the percentage number.
• Percentage Font Weight - You can set the boldness of the percentage number font.
• Active Background Color - Choose a color for the active part of the bar.
• Active Border Color - Choose a border color for the active part of the bar.
• Inactive Background Color - Choose a color for the inactive part of the bar.
• Inactive Background Color Transparency - Enter a value between 0 (fully transparent) and 1 (opaque). This works if field above isn't empty.
• Progress Bar Height - Enter a height for the progress bar (in pixels).
• Progress Bar Border Radius - Enter a border radius number (in pixels) if you want your bar to have rounded corners.

Progress Bar - Vertical

They are great for communicating a large amount of information in a visual and easy to understand manner.

• Title - Enter title here.
• Title Color - Choose a color for the title.
• Title Tag - You can choose a heading style to apply to the title.
• Title Size - Alternatively, enter title size here (in pixels).
• Bar Color - Choose a color for the active part of the bar.
• Bar Border Color - Choose a color for the bar border.
• Background Color - Choose a color for the inactive part of the bar.
• Top Border Radius - Enter a border radius number (in pixels) if you want your bar to have rounded corners.
• Percent - Enter the percentage number.
• Percentage Text Size - Enter a text size (in pixels) for the percentage number.
• Percentage Color - Choose a color for the percentage number.
• Text - Enter accompanying text here.

Progress Bar - Icon

They are great for communicating a large amount of information in a visual and easy to understand manner.

• Number of Icons - Enter the number of icons you want to appear in the progress bar.
• Number of Active Icons - Enter the number of icons to appear active.
• Type - You can choose between Normal, Circle, or Square icon type.
• Icon - Choose an icon to be displayed.
• Size - You can choose from one of the predefined icon sizes.
• Custom Size - Alternatively, enter a custom icon size here (in pixels).
• Icon Color - Choose a color for inactive icons.
• Icon Active Color - Choose a color for active icons.
• Background Color - Choose a background color for inactive icons (only for Square and Circle types).
• Background Active Color - Choose a background color for active icons (only for Square and Circle types).
• Border Color - Choose a border color for inactive icons (only for Square and Circle types).
• Border Active Color - Choose a border color for active icons (only for Square and Circle types).

Line Graph

If you wish to present your information in a more mathematical way, the Line Graph is a great choice.

• Type - You can choose whether your line graph will have rounded or sharp edges.
• Width - Enter a width for the line graph (in pixels).
• Height - Enter a height for the line graph (in pixels).
• Custom Color - Choose a color for the x and y axis values.
• Scale Steps - Enter the number of steps which will appear on the y axis.
• Scale Step Width - You can enter the difference between two y axis steps here.
• Labels - Enter labels, separated by commas, for the x axis values here.
• Content - In this section, you can edit parts of the line graph—colors, legend labels, and data points.

Pre-Order Pricing Tables

They're a great way to present your business' pricing packages.

• Columns - Choose the number of pricing tables you want to display in a row.

Once you've added the Pricing Table holder, you can add pricing table elements inside it, and edit the following fields:

• Title - Name your pricing plan here.
• Price - Enter the price.
• Currency - Enter a currency symbol.
• Price Period - Set a billing frequency (monthly, yearly, etc.).
• Show Button - You can choose whether to show or hide the button.
• Button Text - Enter button text here.
• Button Link - Enter full URL of the button link.
• Button Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Button Size - You can choose from one of the predefined button sizes.
• Active - If you want to emphasize this pricing table, turn this option on.
• Active Text - Enter the active label text here (for example, "Best Choice").
• Content - List your pricing plan features here. You can optionally stylize them using the built-in text editor.

Social Share

Social Share enables your viewers to share your page via social networks.

• Show Share Icon - Set this option to "Yes" if you would like to display the "Share" icon.

Custom Font

If you need to use text styling that's not in one of the predefined heading or paragraph styles, you can do this by using the Custom Font shortcode.

• Font Family - Enter a font family name from the massive Google font collection (previously selected in Pre-Order options > General > Design Style > Font Family) or some of the system font (Arial, Verdana, Times New Roman).
• Font Size - Enter font size here (in pixels).
• Line Height - Define the amount of space in between lines of text (in pixels).
• Font Style - Choose between normal and italic font styles.
• Text Align - Choose between left, centered, or right text alignment.
• Font Weight - You can set the boldness of the font.
• Color - Choose a text color here.
• Text Decoration - You can choose Underline, Overline, or Line Through.
• Text Shadow - You can enable a text drop shadow.
• Letter Spacing - Use this option to specify the space between letters.
• Background Color - Choose a text background color.
• Padding - You can enter padding for the text in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Margin - You can enter margins for the text in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Border Color - You can choose a color for the text border.
• Border Width - Enter the border width (in pixels).
• Content - Enter your text here.

Dropcaps

• Type - Normal, Square and Circle
• Letter - Enter initial letter here
• Font Size - Set a font size
• Letter Color - Choose color for initial letter
• Background Color - (Only When Type are Square or Circle)
• Border Color - (Only When Type are Square or Circle)

List - Ordered

Lists are a great way to organize information and present it to potential customers.

• Content - You can enter list items and stylize them using the built-in text editor.

List - Unordered

Lists are a great way to organize information and present it to potential customers.

• Style - You can choose whether to have circles or numbers next to your list items.
• Number Type - You can choose between numbers inside circles or numbers with a transparent background.
• Animate List - Enable this option if you want the list to fade in upon page load.
• Font Weight - You can set the boldness of the font.
• Content - You can enter list items and stylize them using the built-in text editor.

Icon

Widely used on the web, icons are great for communicating all sorts of information.

• Icon - Choose an icon to be displayed.
• Size - You can choose from one of the predefined icon sizes.
• Custom Size - Alternatively, enter a custom icon size here (in pixels).
• Custom Shape Size - Enter a custom size (in pixels) for the surrounding shape of the icon (for square and circle icon types).
• Type - You can choose between Normal, Circle, or Square icon type.
• Icon Color - Choose a color for the icon.
• Icon Hover Color - Set a hover color for the icon.
• Border Radius - Enter a border radius for square icon type in pixels.
• Position - Choose between left, centered, or right icon alignment.
• Border - You can enable a square border around icon (for Square and Circle icon types).
• Border Color - Choose a color for the border (for Square icon type).
• Border Width - Set a width for the border (for Square icon type).
• Background Color - Choose a color for the icon background (for Square and Circle icon types).
• Hover Background  Color - Set a hover color for the icon background.
• Margin - You can enter margins for the icon in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Icon Animation - You can choose to have the icon animate once upon page load.
• Icon Animation Delay (ms) - If you want to delay the animation and not have it immediately upon page load, enter the delay time in milliseconds.
• Link - Enter full URL of the icon link.
  • Use Link as Anchor - Check the "Use this icon as Anchor" checkbox if you would like to use the icon as an anchor link instead of a regular link.
• Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.

Social Icons

Want to invite your viewers to follow you on social networks? Social Icons will make this easy.

• Type - You can choose between Circle, Square, or Normal icon type.
• Icon - Choose an icon to be displayed.
• Use Custom Size - You can set a custom icon size, or choose from one of the predefined sizes.
• Custom Size - Enter a custom icon size here (in pixels).
• Custom Shape Size - Enter a custom size (in pixels) for the surrounding shape of the icon (for square and circle icon types)
• Size - Choose from one of the predefined icon sizes.
• Link - Enter full URL of the icon link.
• Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Border Radius - Enter a border radius for square icon type in pixels.
• Icon Color - Choose a color for the icon.
• Icon Hover Color - Choose a hover color for the icon.
• Background Color - Choose a color for the icon background.
• Background Hover Color - Choose a hover color for the icon background.
• Background Color Transparency - Enter a value between 0 (fully transparent) and 1 (opaque).
• Border Width - You can set the icon border width (in pixels).
• Border Color - Choose a color for the border.
• Border Hover Color - Choose a hover color for the border.
• Icon Margin - You can enter margins for the icon in a top, right, bottom, left format (example: "25px 50px 25px 50px").

Icon With Text

This shortcode allows you to easily add icons with text to your page.

• Box Type - You can choose between Normal (no box) or Icon In a Box.
• Icon Pack - Choose an icon pack to use.
• Icon - Choose an icon to be displayed.
• Image - Alternatively, upload an image to be displayed.
• Icon Type - You can choose between Normal, Circle, or Square icon type.
• Icon/Image Position - Choose a position for the icon in relation to accompanying title and text.
• Icon Margin - You can enter margins for the icon in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Icon Size - You can choose from one of the predefined icon sizes.
• Use Custom Icon Size - Choose "Yes" if you want to use a custom icon size.
• Custom Icon Size inside a circle or square - Enter a custom icon size here (in pixels).
• Custom Icon Margin - This applies to the Left and Left From Title icon positions. Here you can set the spacing between icon and text (example: "15").
• Icon Color - Choose a color for the icon.
• Icon Animation - You can choose to have the icon animate once upon page load.
• Title - Enter accompanying title here.
• Title Tag - You can choose a heading style to apply to the title.
• Title Color - Choose a color for the title.
• Title Font Weight - Set a font weight for the title.
• Separator - Set this option to "Yes" to enable a separator.
  • Separator Color - Set a color for the separator.
  • Separator Top Margin - Set a top margin for the separator.
  • Separator Bottom Margin - Set a bottom margin for the separator.
  • Separator Width - Set a width for the separator.
• Text - Enter accompanying text here.
• Text Color - Choose a color for the text.
• Link - If you want to have an accompanying hyperlink, enter the full URL here.
• Link Text - Enter text for the hyperlink.
• Link Color - Choose a color for the hyperlink.
• Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Link Icon - Choose "Yes" to make the icon a clickable link.   

Latest Posts

This shortcode allows you to display your latest blog posts on a page.

• Type - Choose a layout type for blog post display (Images in Left Box, Minimal, Boxes)

   

  Images in Left Box

   

  

   

  Minimal

   

  

   

  Boxes

   

  

   

  Boxes With Dividers

   

  

• Number of Posts - Enter the number of posts you want display.
• Number of Columns - You can choose number of columns for Boxes and Boxes with Dividers types.
• Number of Rows - Choose the number of rows to use for the Boxes and Boxes with Dividers types.
• Text from edge - For the Boxes type, text can run across full width of the box, or it can have padding on the sides.
• Order By - Blog posts can be organized by title or date.
• Order - Choose between ascending or descending order.
• Category Slug - If you want to show blog posts from certain categories, enter the category slugs here, separated by commas. Alternatively, to display all categories, leave this field empty.
• Text length - Enter the number of characters, spaces included, that you want to display per post.
• Title Tag - You can choose a heading style to apply to the post titles.
• Display category - Choose whether to display the category tag.
• Display date - Choose whether to display the date.
• Display comments - Choose whether to display number of comments.
• Display like - Choose whether to turn on "likes."
• Display share - Choose whether to enable social sharing.

Latest Posts 2

You can use this shortcode to display a list of your blog posts on any page on your website.

General

• Number of Posts - Enter the number of posts you want display.
• Number of Columns - You can choose number of columns for Boxes and Boxes with Dividers types.
• Order By - Blog posts can be organized by title or date.
• Order - Choose between ascending or descending order.
• Category Slug - If you want to show blog posts from certain categories, enter the category slugs here, separated by commas. Alternatively, to display all categories, leave this field empty.
• Text length - Enter the number of characters, spaces included, that you want to display per post.
• Title Tag - You can choose a heading style to apply to the post titles.
• Display Featured Images - Set this option to "Yes" if you would like to display the featured images of your blog posts.

Design Options

• Title Color - Set a color for the title.
• Separator Color - Set a color for the separator.
• Excerpt Color - Set a color for the post excerpt text.
• Post Info Color - Set a color for the post info text.
• Post Info Separator Color - Set a color for the post info separator.
• Background Color - Set a background color for your posts.

Blog Masonry

This shortcode allows you to display your latest blog posts in masonry style.

• Number of Posts - Enter the number of posts you want displayed.
• Order By - Blog posts can be organized by title or date.
• Order - Choose between ascending or descending order.
• Category Slug - If you want to show blog posts from certain categories, enter the category slugs here, separated by commas. Alternatively, to display all categories, leave this field empty.
• Text length - Enter the number of characters, spaces included, that you want to display per post.
• Title Tag - You can choose a heading style to apply to the post titles.
• Display date - Choose whether to display the date.
• Display comments - Choose whether to display number of comments.

Image With Text Over

Image With Text Over allows you to display interactive images.

• Width - You can choose how much of the row's width will the image take up.
• Image - Choose an image to upload.
• Image Shader Color - Set a shader color for the image overlay. You can also set an opacity for the color using the "Alpha" slider in the color picker panel.
• Icon - Choose an icon to be displayed over the image.
• Icon Size - You can choose from one of the predefined icon sizes.
• Icon Color - Choose a color for the icon.
• Title - Enter title to be displayed over the image here.
• Title Color - Choose a color for the title.
• Title Size - Enter a size for the title (in pixels).
• Title Tag - You can choose a heading style to apply to the title.
• Content - Enter text which will be displayed on image hover. You can optionally stylize it using the built-in text editor.

Image Hover

Image Hover allows you to display interactive images.

• Image - Choose an image to upload.
• Hover Image - Choose a hover image to upload. This image will be seen once viewers hover over the original image.
• Link - If you want the image to have a link, enter its full URL here.
• Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Animation - You can choose to have the image animate once upon page load.
• Transition delay - If you want to delay the animation and not have it immediately upon page load, enter the delay time in milliseconds.

Team

This shortcode allows you to easily present your team.

• Type - Choose a type for your team element.
• Image - Choose your team member image.
• Name - Enter his/her name.
• Title Tag - You can choose a heading style to apply to the title.
• Name Color - Set a color for the team member name.
• Position - Enter his/her position.
• Position Color - Set a color for the team member position.
• Description - Enter accompanying text here. This will be seen on image hover.
• Background Color - Choose a background color for the team box.
• Overlay Color - Set an color for the team overlay.
• Box Border - You can choose to have a border around the team box.
• Show Separator - You can enable a separator to appear under the Position text.
• Separator Color - Set a color for the separator.
• Social Icons Color - Set a color for the social icons.
• Social Icon - Choose a social icon to be displayed.
• Social Icon Link - Enter full URL of the social icon link.
• Social Icon Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.

Service Table

They're a great way to present the services your business offers.

• Title - Name your service table here.
• Title Tag - You can choose a heading style to apply to the title.
• Title/Title Icon Color - Choose a color to be applied to the title and icon.
• Title Background Type - Choose whether you want the title background to have an image or solid color.
• Title Background Color - Choose a color for the title background.
• Background Image - Choose an image for the title background.
• Background Image Height - Enter a height (in pixels) for the background image.
• Icon - Choose an icon to be displayed.
• Icon Size - You can choose from one of the predefined icon sizes.
• Custom Size - Alternatively, enter a custom icon size here (in pixels).
• Content Background Color - Choose a color for the content background.
• Border Around - You can enable or disable a border around the service table.
• Border Width - You can set the border width (in pixels).
• Content - List your service table features here. You can optionally stylize them using the built-in text editor.

Pre-Order Clients

This shortcode allows you to quickly make a display of your clients.

• Columns - Choose the number of clients you want to display in a row.

Once you've added the Pre-Order Clients holder, you can add elements inside it, and edit the following fields:

• Image - Choose your client image here.
• Link - Enter full URL for the image link.
• Link Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.

Animated Icons with Text

The icons flip and text is revealed once viewers hover over the icons.

• Columns - Choose the number of icons you want to display in a row.

Once you've added the Animated Icons with Text holder, you can add elements inside it, and edit the following fields:

• Title - Enter a title here.
• Title Tag - You can choose a heading style to apply to the title.
• Text - Enter text here.
• Icon - Choose an icon to be displayed.
• Icon size - Enter a size for the icon (in pixels).
• Icon Color - Choose a color for the icon.
• Icon Background Color - Choose a color for the icon background.
• Border Color - Choose a color for the icon border.
• Icon Color on hover - Choose a color for the icon on hover.
• Icon background Color On Hover - Choose a color for the icon background on hover.
• Border Color On Hover - Choose a color for the icon border on hover.

Pre-Order Process Holder

This is a great way to let potential customers find out more about what your business does, and how it does it.

• Columns - Choose the number of process items you want to display in a row.
• Line between Process - You can enable or disable a horizontal line to appear between your process items.

Once you've added the Pre-Order Process Holder, you can add process items inside it, and edit the following fields:

• Type - You can choose to have an icon, image, or text appear in the process circle.
• Background Process Color - Choose a background color for the process circle.
• Background Process Transparency - Enter a value between 0 (fully transparent) and 1 (opaque).
• Border Process Color - Choose a border color for the process circle.
• Border Process Width - Enter the border width (in pixels).
• Icon - Choose an icon to be displayed (applies to the Icon in Process type).
• Size - You can choose from one of the predefined icon sizes.
• Icon Color - Choose a color for the icon.
• Image - Choose an image to be displayed (applies to the Image type).
• Text in Process - Enter text to appear in the process circle (applies to the Text in Process type).
  • Text in Process Tag - You can choose a heading style to apply to the text.
  • Text in Process Size - Alternatively, enter text size here (in pixels).
  • Text in Process Color - Choose a color for the text.
  • Text in Process Font Weight - You can set the boldness of the font.
• Link - Enter full URL for the process circle link.
• Link Target - You can choose where the link will open:
  • Self - it opens in the same tab the user was on.
  • Blank - it opens in a new tab.
• Title - Enter accompanying title here.
• Title Tag - You can choose a heading style to apply to the title.
• Title Color - Choose a color for the title.
• Text - Enter accompanying text here.
• Text Color - Choose a color for the text.

Pre-Order Pricing List

This shortcode allows you to easily present your prices.

Once you've added the Pre-Order Pricing List holder, you can add Pricing List Items inside it, and edit the following fields:

• Title - Enter a title for the pricing list.
• Title Color - Choose a color for the title.
• Title Font Size - Enter a font size for the title (in pixels).
• Title Tag - Alternatively, you can choose a heading style to apply to the title.
• Text - Enter the body text here.
• Text Color - Choose a color for the text.
• Text Font Size - Enter a font size for the text (in pixels).
• Price - Enter the price here. You can include any currency symbol.
• Price Color - Choose a color for the price.
• Price Font Size - Enter a font size for the price (in pixels).

Pre-Order Elements Holder

The Pre-Order Elements Holder allows you to display any combination of elements in an organized column structure.

• Background Color - Choose a background color for the elements holder.
• Columns - Choose the number of elements you want to display in a row.
• Width & Responsiveness - You can use the Width & Responsiveness tab to define at which breakpoint the Elements Holder will switch to one column, and set an alignment in responsive mode.

Once you've added the Pre-Order Elements Holder, you can add Elements Holder Items, and edit the following fields:

• Background Color - Choose a background color for the elements holder item.
• Background Image - Set a background image for the elements holder item.
• Padding - You can enter padding for the element in a top, right, bottom, left format (example: "25px 50px 25px 50px").
• Vertical Alignment - Set a vertical alignment for the Elements Holder Item.
• Advanced Scroll Animations – Choose "Yes" if you wish to use your own CSS animations. You can choose when the animations will start and end in the "Animation Start Position" and "Animation End Position" fields. Please note that you must fill out both of the following fields in order for them to work. You can enter any CSS.
  • Start Animation Style – Enter the starting animation style (example: opacity:1; transform:scale(1);).
  • End Animation Style – Enter the ending animation style (example: opacity:0; transform:scale(2);).

Now that you've added the element holder item, you can add any element from the list of shortcodes.

Pre-Order Image Slider

The Pre-Order Image Slider is a great way to showcase your images. 

• Images - Here you can upload images to be displayed in the slider.
• On Click - Choose image behavior on click.
• Slider Height - Define slider height in pixels.
• Navigation Style - You can choose between light or dark navigation buttons.
• Highlight Active Image - Choose "Yes" if you wish to highlight the active image by whiting out the others.
  • Highlight Inactive Color - Set a color for the overlay of inactive images.
  • Highlight Inactive Opacity - Set an opacity for the overlay of inactive images.

Countdown

The Countdown shortcode allows you to present a timer on your page which counts down to some event of your choice. 

• Year, Month, Day, Hour, Minute - Use these fields to specify how far away is your event, in order to set the timer.
• Month, Day, Hour, Minute, and Second Labels - If you wish to use labels other than the default "Months," "Days," etc., you can enter them here. You can also enter separate labels for singular variants.
• Color - Choose a color to be applied to the digits, labels, and separators (if enabled).
• Digit Font Size - Enter a font size (in pixels) for the digits.
• Label Font Size - Enter a font size (in pixels) for the labels.
• Font Weight -  Choose a font weight to be applied to the digits and labels.
• Show separator - You can enable a separator to appear between digits and labels.

Pre-Order Vertical Split Slider

Blog Slider

• Slider Type - Choose the type of slider you would like to use.
• Post Info Position - Choose a position for the post info.
• Image size – Set the proportions you would like blog images to display in.
  • Image Width - Set a width for the image if you choose "Custom" image size.
  • Image Height - Set a height for the image if you choose "Custom" image size.
• Order By – Select how to order your blog posts. Blog posts can be ordered by Menu Order, Title, or Date.
• Order – Choose between ascending and descending order.
• Number – Set the number of blog posts to display in the blog slider.
• Number of Blog Posts Shown – Choose number of posts that will display across full width of the screen (less will be shown on smaller screens, due to responsiveness).
• Category – If you would like to display only certain posts in the blog slider, input the category slugs of the categories you would like to display in this field, delimited by commas. Leave the field empty to display all categories.
• Selected Projects – If you would like to display only certain posts in the blog slider, enter the IDs of those posts here.
• Info Box Color – Set a color for the info box.
• Show Category Names – Select whether you would like to display category names on your blog slider.
  • Category Name Color – Set a color for your category names.
• Day Color - Set a color for the Day post info.
• Day Font Size - Set a font size for the Day post info.
• Mont Color- Set a color for the Month post info.
• Month Font Size - Set a font size for the Month post info.
• Show Date – Choose "Yes" if you wish the date to be displayed.
  • Date Color – Set a color for the date.
• Show Author - Set this option to "Yes" if you would like to show the author name.
  • Author Color - Set a color for the author's name.
• Title Tag – Set the heading tag for the post title.
• Title Color – Set the color for the title.
• Show Excerpt - Set this option to "Yes" if you would like to display the post excerpt.
  • Excerpt Length - Define the lenght of the post excerpt.
• Show Comments - Set this option to "Yes" if you would like to display the number of post comments in your post info.
  • Comments Color - Set a color for the comments post info.
• Show Read More Button - Set this option to "Yes" if you would like to show the "Read More" button.
• Prev/Next navigation – Select whether you would like the previous and next navigation to be displayed.
• Extra class name – If you wish to style this particular blog slider differently, you can use this field to add an extra class name to it and then refer to that class name in your css file.

Pre-Order Google Map

• Address 1-5 - Use these fields to input up to 5 addresses to display on your map.
• Map Height - Define a height for your map.
• Pin - Upload a custom pin image to use on your map.
• Custom Map Style - Set this option to "Yes" if you would like to define a custom style for your map.
  • Color Overlay - Choose a color for the map overlay.
  • Saturation - Set a saturation level, from -100 (least saturated) to 100 (most saturated).
  • Lightness - Set a lightness level, from -100 (darkest) to 100 (lightest).
• Map Zoom - Set a zoom level for the map, from 0 (whole world) to 19 (individual buildings).
• Zoom Map on Mouse Wheel - Set this option to "Yes" if you would like the user to be able to zoom in and out on the map with their mouse wheel. 

Pre-Order Animation Holder

You can use this element to animate other shortcodes. To do this, simply place the shortcode you would like to animate into the Animation Holder.

• Animation Type - Choose an animation type.
• Animation Delay - Set a delay time (in seconds) for the animation.

Pre-Order Video Box

• Video Link - Input a link to the video you would like to display in the video box.
• Image - Upload an image to display before the video starts playing.

Product List - Elegant

General

• Per Page - Choose how many products you would like to display per page.
• Columns - Choose how many columns you would like to display the products in.
• Category Slug - If you would like to display products from only certain categories, you can enter the category slugs here, separated by commas.
• Order By - Choose how you would like to order the products.
• Order - Choose between ascending and descending order.
• Product Title Tag - Choose a heading tag for the product titles.

Design Options

• Holder Padding - Set padding for the product holder in a top, right, bottom, left format (i.e. 10% 0 10% 0).
• Separator Color - Set a color for the separator.
• Price Color - Set a color for the price.
• Price Font Size - Set a font size for the price.
• Button Size - Choose a predefined size for the button.
• Button Hover Type - Choose a hover type for the button.

Product List - Masonry

You can use this shortcode to display shop items in a masonry layout.

General

• Per Page - Choose how many products to show per page.
• Columns  - Choose the number of columns to display the products in.
• Category Slug - If you would like to display products from only certain categories, please enter the category slugs here, seperated by commas.
• Order By - Choose how you would like to order the products.
• Order - Choose between an ascending and descending order.
• Product Title Tag - Choose a heading tag for the product title.
• Image Proportions - Choose in what proportions you would like to display your product images.

Design Options

• Hover Background Color - Choose a background color to appear on hover.
• Category Color - Choose a color for the category text.
• Separator Color - Choose a color for the separator.
• Price Color - Choose a color for the product price.
• Price Font Size - Set a font size for the price.

Pre-Order Horizontal Marquee

You can use the Horizontal Marquee element to create a interactive presentation that can contain any shortcode.

• Height - Set a height for the Horizontal Marquee.
• Spacing - Set a spacing between marquee items.

After you have set up the Horizontal Marquee element, you can start adding Horizontal Marquee items into it, and setting the following options:

• Width - Set a width for the item (in pixels).
• Vertical Alignment - Choose a vertical alignment for the content of the item.

Now you can add any other shortcode into the Horizontal Marquee item. 

Pre-Order Preview Slider

You can use this shortcode to create a slider in which each slide displays a main image, and a preview image that is set in a frame. After you have added the Preview Slider to your page, you can start adding Preview Slider Items into it. Each Preview Slider Item functions as a slide, and you can set the following options for each one:

• Main Image - Set a main image for the slider.
• Preview Image - Set a preview image for the slider.
• Link - Input a URL for the slide to lead to when clicked.
• Link Target - Choose whether the link will open in a new browser tab ("self") or the same one ("blank"). 

Pre-Order In-Device Slider

• Device - Choose the device in which you would like the slides to be shown.
• Image Titles on Hover? - Set this option to "Yes" if you would like to display the titles of your images on hover.
• Show Navigation Arrows? - Set this option to "Yes" if you would like to display navigation arrows on the slider.
• Autostart Slideshow - Set this option to "Yes" if you would like the slides to change automatically.
  • Time Between Slides​ - Set the amount of time (in milliseconds) you would like to pass before the slide changes.

After you have set up the in-device slider, you can add in-device slider items to it and set the following options for each one:

• Image - Upload an image.
• Title - Enter a title for this slider item.
• Link - If you would like the slider item to lead to some other page when clicked on, add the link URL in this field.
• Link Target - Choose whether you would like the link to be opened in the same tab ("self") or a new one ("blank").

Pre-Order comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:

http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

In order to setup WooCommerce with our theme, please perform the following steps:

1. Go to Plugins > Add New from the admin panel.
2. Type "WooCommerce" in the search field.
3. Locate "WooCommerce - excelling eCommerce" in the search results and click on "Install Now".

   

4. Once installation is complete, click on "Activate Plugin".
5. You will see a notice saying "Welcome to WooCommerce � You're almost ready to start selling :)". If you plan on importing Pre-Order demo content, click on "Skip Setup". Otherwise, click "Install Pages".
6. If importing the demo content, you should first set the product image sizes in order to achieve the same look that we did. Go to WooCommerce > Settings and click the "Products" tab. Under the section Product Image Sizes, enter the same values that we did:

   

   Note: if you wish to modify these sizes at a later date, you may need to regenerate thumbnails in order for it to take effect. This can be done with the following plugin: http://wordpress.org/plugins/regenerate-thumbnails/.
7. See Importing Demo Content instructions in the Getting Started section of this user guide and perform the process explained there.
8. Go into the backend of your shop page. This can either be a custom page you've created, or the shop page from the demo site that you've imported. Under Page Attributes, choose the WooCommerce template.

   

Single Product

Shop with Sidebar

Pre-Order makes it possible to create forms for various purposes with the help of Contact Form 7.

In order to setup Contact Form 7, please perform the following steps: 

1. Go to Plugins > Add New from the admin panel.
2. Type "Contact Form 7" in the search field.
3. Locate "Contact Form 7" in the search results and click on "Install Now".

   

4. Once installation is complete, click on "Activate Plugin".

Now when you use Visual Composer, you will see a new shortcode in the list of shortcodes - the Contact Form 7.

Click on this shortcode to add your form. There are several fields to fill in:

• Form title - Enter text to use as form title. Leave blank if no title is needed.
• Select contact form - Choose a previously created contact form from the drop down list.
• Style - You can style each form element individually in Pre-Order Options > Contact Form 7. Here you can choose which style will be applied.

3rd Party Integration