Bridge - Retina Multi-Purpose WordPress Theme
Responsive Retina AJAX/Parallax Theme
Welcome to Bridge - Retina Multi-Purpose WordPress Theme
Installing Bridge
Once you've downloaded the installation file on ThemeForest, extract it and locate a file called Bridge.zip. You can install the theme by using one of two installation methods:
-
WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
-
Login to WordPress admin
-
Go to admin panel > Appearance > Themes > Add New > Upload Theme
-
Click on "Choose File" and select Bridge.zip
-
Click on "Install Now"
-
FTP upload - If you wish to install via FTP, here are the steps you need to take:
-
Using FTP client, login to the server where your WordPress website is hosted
-
Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
-
Using FTP client, upload the Bridge directory to themes directory on remote server
Once installation is complete, your Bridge theme will be ready to use. You should now see "Qode Options" appear in the WordPress admin panel.

Great - you can now start building your site!
If writing permissions aren't set for folders containing CSS and JS files on your server you will see a warning message at the top of theme options page. In order to remove that message, you need to change permissions for wp-content/themes/bridge/css and wp-content/themes/bridge/js folders and set them to 755. We recommend setting writing permissions in order to optimize your site performance. If you have any issues with this, please contact your hosting service provider. Alternatively, you can submit a ticket to http://qode.ticksy.com/ with FTP access fo your site, and we will take a look at it.
Importing Demo Content
You can either start building your site from scratch, or import one of our demo sites and then modify it to fit your needs. We will now explain how to do the latter.
Bridge comes with one-click import module. Here's what you need to do:
-
Login to WordPress admin
-
Go into admin panel > Qode Options > Qode Import
-
Choose the demo site that you wish to import from the dropdown menu
-
From the dropdown menu on the right, choose what type of content you'd like to import:


-
All - imports pages, content, widgets, and settings. We recommend this for users who want to import pages exactly as they appear in the demo.
-
Content - imports pages and their content only. Recommended for users who want to see how we've created our page layouts, but who want to keep their own settings in Qode Options.
-
Widgets - imports widgets only. Recommended for users who'd like to use the widget areas that we created and want to import that only.
-
Options - imports settings in Qode Options only. Recommended for users who would like to achieve the same look and feel of our demo site, but who do not require our page layouts.
-
If you wish to import media files (images, videos, sounds), check the "Import attachments" box.
Please note that the images we use are copyrighted, and if you'd like to publish them on your site, you would need to purchase them separately. We bought most of our images on Shutterstock.
-
Click on the "Import" button.
If you wish to import the LayerSlider demo slider, you need to locate the xml export folder in the previously downloaded package from ThemeForest. Inside, you'll find the LayerSlider_Export.zip file. Next, go to LayerSlider from the WordPress admin panel and upload this file under the Import section.
Installing Woocommerce
If you plan on building an online shop with Bridge, please read the WooCommerce section of this user guide before installing the demo content.
Updating Bridge
Auto-Update Feature
You can now enable the Auto-Updating feature for Bridge. To do this, please first make sure that you have the Envato WordPress Toolkit plugin installed. If you haven't already installed this plugin, you should see a notification on the top of your Dashboard stating that some required plugins haven't been installed or activated. Install and activate all of the required plugins, including the Envato WordPress Toolkit.
After you have installed and activated the Envato WordPress Toolkit, please go to Envato Toolkit from your dashboard and enter your Marketplace Username and API Key. You can find your API Key by logging into your profile on Themeforest and navigating to Profile > Settings > API Keys.
When you have entered your Marketplace Username and API Key and clicked Save Settings, a new tab will appear at the top of the screen named "Themes". Click on this tab to see all the themes you have purchased. If there is an update available for a theme, you will be notified here. To update your theme, just click on the "Update Automatically" link.
Please note that each time you use the Auto-Update feature to update the theme, a backup file of the old version of the theme will be stored on your server in ".../wp-content/envato-backups".
Manual Update
You can update your theme manually by performing the following steps:
-
Download the latest theme zip file from ThemeForest
-
Extract it and locate bridge.zip
-
Extract bridge.zip and locate the bridge folder
-
Copy/Replace content of the bridge folder to the /wp-content/themes/bridge folder of your web site.
Important F.A.Q.
1. Why can't I save my menu?
WordPress by default has a limited number of menu items. When you import our demo site, which contains a lot of menu items, you might not be able to save changes you make to a menu. You can fix this problem by contacting your hosting and asking them to add the following lines to php.ini file:
suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000
2. Why is there a smiley displayed on blank pages?
This problem is most likely related to JetPack and memory settings of your hosting. You can either disable JetPack or read what the JetPack developer wrote: Regarding the memory limit, please refer to the WordPress Codex section concerning this problem. Some sites that load many plugins alongside WordPress ultimately require a higher memory limit than WordPress defaults to, but since this is limited to specific hosts and configurations, it must be dealt with on an individual basis. You'll find the Codex article at: http://codex.wordpress.org/Common_WordPress_Errors#Allowed_memory_size_exhausted
3. How do I optimize my site?
Please use this tool to investigate reasons for slow loading: https://developers.google.com/speed/pagespeed/insights/?hl=en
4. How to translate or rename default theme labels?
You can use the Codestyling localization plugin (http://wordpress.org/plugins/codestyling-localization/) to translate/rename all the theme's labels. Another solution is to edit the Theme folder/languages/en_US.po file directly in editor and manually edit labels you want to translate.
5. Why do I see a white screen when importing demo content?
If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 120 seconds. Possible ways of achieving this are:
-
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 Bridge, you can start building your site.
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 Qode 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 Qode 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 Qode 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.


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.



Now let's set up the footer by going to Qode 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 Qode 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 Bridge demo site, then you do not need to do anything more. Otherwise, go to Qode 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 Qode 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 Bridge 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:
-
Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
-
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.

- Enter a title for your post in the text field near the top.
- 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:
- Click on "Add Element" and choose "Text Block"
- Delete any default text in the pop-up window and click on "Add Media" in the upper left corner
- Click on "Create Gallery" from the menu on the left
- Select images that you wish to add, and click the "Create a new gallery" button
- You can write captions for the images and reorder them by clicking and dragging
- 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.
- 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.
- Then click on "Add New Category".
- Once you've checked the categories where you want this post to go to, click the "Publish button".
- 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.
Note that most of them are the same custom fields you'll find when creating standard pages.
Qode 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.

Gallery Post Format
- Gallery Type - This option is only available when the post type is set to "Gallery". Here you can define whether you would like the gallery to be displayed as a slider, or as a masonry layout of images.
Qode 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 Qode 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 Qode Slider, you can find it by going to WP admin panel > Qode 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.
- Dimensions for Masonry Gallery - Set the dimensions for the featured image of this post which will be applied when using the "Blog Masonry Gallery" 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.
Qode Post Layout
- Single Post Type - Choose a template for this single post. You cna choose between the "Standard" and "Image Title Post" templates.
- Post Layout - Choose a post layout for this post when it is displayed in the "Blog Compound" blog list. You can choose between a "Default" and "Split" layout.
- 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.
- Scroll Amount For Sticky Header Appearance - Define how much you would like the user to scroll down the page before the sticky header appears.
- Hide Sticky Header Initially - Set this option to "Yes" if you would like the header to be initially hidden when the "Sticky" type of header is chosen.
Qode 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.
- Spacing After Title - Define the spacing after the title. This option will also take effect if the title is disabled, and will move the content down for the set value.
Qode 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.

- 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 Chequered
- Blog Compound
- Blog Gallery
- Blog Headlines
- 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 Masonry Gallery
- Blog Pinterest
- Blog Small Image

- Blog Vertical Loop

You can access Qode 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
Settings
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 Qode SEO - If you're using your own SEO plugins, you can turn off Qode SEO here. We recommend for beginners to keep Qode 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."
Google Maps
- Google Maps API Key - Insert your Google Maps API key here. You can find instructions on how to create a Google Maps API key here.
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.
Note that you can set your own header and sticky section heights by going to Qode Options > Header.
- 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.
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 2nd and 3rd level menu items. The 2nd and 3rd level menu items can open when the user hovers over a 1st level menu item, when a user clicks on a 1st level menu item, or they can be set to slide in when the 1st level menu item is clicked.
- Vertically Center Content - Set this option to "Yes" if you would like the content in the left menu to be vertically centered.
- 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
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.
Qode Search
- Enable Qode Search Bar - Choose "Yes" if you want to enable Qode 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.
- Qode 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 Qode 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 Header Top Background Color - Set a background color for the Mobile Header Top.
- 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.
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 Qode 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 Qode 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.
Button V2
- Typography Options - Set typography styles for the button v2 shortcode.
- Style Options - Set colors for the button V2 shortcode.
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.
Qode 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 Qode 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.
Note: In the documentation, when referring to "Masonry," we are referring to all Blog Masonry types of blog templates.
Blog Single pages are those that display a single blog post.
Blog List
- 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/Pinterest/Headlines - Choose a pagination type for the Masonry, Pinterest, and Headlines 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.
Masonry Gallery Style
- Title Style - Define the look of titles in the Masonry Gallery blog lists.
- Post Info Style - Define the look of the Masonry Gallery post info.
- Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.
Gallery Style
- Title Style - Define the look of titles in the Gallery blog lists.
- Post Info Style - Define the look of the Gallery post info.
Chequered Style
- Title Style - Define the look of titles in the Chequered blog lists.
- Post Info Style - Define the look of the Chequered post info.
- Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.
Blog Large Image Simple Style
- 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 blog list.
- Hover Type - Choose a hover type for the Masonry - Date in Image blog list.
Pinterest Style
- Pinterest Style - Define styles for the Pinterest blog list.
- Title Style - Define the look of titles in Pinterest blog lists.
- Post Info Style - Define the look of the post info in Pinterest lists.
- Post Info Quote/LinkStyle - Define the look of the post info for quote and link posts.
Blog Single
- Choose a Default Type for Single Post Pages - Choose the default template for your single posts. You can choose between "Standard" and "Image Title Post" templates. You can change this template on a post to post basis in the single posts' options if needed.
- Sidebar Layout - Choose a sidebar layout for your blog single posts.
- Sidebar to Display - Choose a custom widget area to display in your sidebar.
- Share/Like Layout - Choose a layout for the Share and Like buttons on single posts.
- 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.
Pagination Style
- Pagination Style - Set styles for the pagination on your blog lists.
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.
Twitter
- Connect With Twitter - Use this button to connect the twitter widget with your twitter 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.
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.
Here you can create up to 3 different custom styles that can later be applied to forms you create via the Contact Form 7 shortcode.
When referring to form elements, we are referring to text input fields, text areas, and select lists. When viewers click on a particular element, that element is in "focus;" you can stylize it differently from the rest to make it stand out.
- 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 Type - Choose a layout type for single product pages.
- Related and Upsells Sections H Tag - Choose a heading tag for realted product and Upsells sections on product single pages.
- 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 Bridge cart icon, and a Font Elegant cart icon.
Maintenance Mode
This section allows you to set a single page for visitors to see while your site is under construction. While Maintenance Mode is enabled, they will see this page no matter what section of your site they try to access. However, note that all pages will still be visible to you while you are logged into admin.
- 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.
Import/Export Options
You can use this panel to export and import your theme options. Please note that if you import theme options, your current options will be rewriten.
- Export - Copy the code from this field and save it to a textual file to export your options. Save that textual file somewhere so you can later use it to import options if necessary.
- Import - To import options, just paste the code you previously saved from the "Export" field into this field, and then click the "Import" button.
Reset
- Reset to Defaults - Choose "Yes" and save changes if you wish to reset all Qode 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. Bridge 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 Chequered
- Blog Compound
- Blog Gallery
- Blog Headlines
- 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 Masonry Gallery
- Blog Pinterest
- 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.
Please note that any settings you save here will override the global settings you've set in Qode 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.
Qode 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 Qode 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 Qode Slider, you can find it by going to WP admin panel > Qode 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.
- 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.
Qode 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.
Qode 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.
Qode 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.
- Qode 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.
Qode 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.
- 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.
Qode 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 Qode Slider or Layer Slider at the top of the page.
Note: This template currently doesn't support Ajax, and so you would need to have Ajax disabled for this page in order for it to display properly (for information on how to disable Ajax, see Qode Options > General > Settings of this user guide). However, we plan on implementing Ajax in future theme updates.
To create a new portfolio item, go to:
- Portfolio > Add New from the admin panel.
- Enter a title for your portfolio item in the text field near the top.
- 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.
- Then click on "Add New Portfolio Category".
- 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.
Note that most of them are the same custom fields you'll find when creating standard pages.
Qode 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.
Qode Portfolio Images (multiple upload)
This section allows you to upload multiple images at once:

- Click the "Upload" button.
- Fill your gallery with images. You can do this by simply dragging and dropping them into the window.
- Alternatively, click on "Add to Gallery" on the left, and select files from your media library to add.
- Once added to the gallery, you can write captions for the images and reorder them by clicking and dragging.
- Click the "Update gallery" button.
Qode Portfolio Images/Videos (single upload)
This section is legacy from the old Bridge 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.

Note that you can combine both (single and multiple) upload methods.
If you wish to add another item to your portfolio sidebar, you can do so here.

Qode 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 Qode 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 Qode Slider, you can find it by going to WP admin panel > Qode Slider > Sliders.
- Portfolio Type - Choose a layout for your portfolio single project. Selected type overrides chosen default portfolio type under Qode 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.
- Show Badge - Set this option to "Yes" if you would like to display a badge on the portfolio item.
- Badge Text - Input the text you would like displayed on the badge.
- 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.
- 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.
Qode 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.
- 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.
Qode 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.
- 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 Qode 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 Qode 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:
Qode Slide Type
- Slide Background Type - Choose whether you want to use an image or video.

Qode 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.
Qode 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.
Qode Slide General
Qode 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.
Qode Slide SVG
- SVG Source code – Paste your SVG source code here. Any CSS styling for SVG can be entered in Qode 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.
Qode 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).
Qode 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.
Qode Slide Text
- Slide Text - Enter body text here.
- Text Style - Define text styles for body text.
- Padding - Define padding for the text.
Qode 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.
Qode 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).
Qode Slide Scroll Animations
This section allows you to set up animations for slide content. Leaving the fields empty will result in the default fade-out animation. If you set "Animate Whole Slide Content Group at Once on Scroll", all the slide content will be animated simulataneously and the options you set will apply for each part of the slide content. If you set this field to "No" You will be able to enable a scrolling animation for each item in the slide content separately and create separate 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.
Please note that you must fill out both start and end point animation fields in order for the animation to work.
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 Qode Slider > Sliders from the admin panel. In the page backend, under Qode General, there's a field called "Layer Slider or Qode Slider Shortcode." Paste your shortcode here.

It should look something like this:
[qode_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', 'fade', 'slide-vertical-up', 'slide-vertical-down', and 'slide-cover.'
- 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 Qode 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 Qode 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
The Qode Slider provides two sets of breakpoints which you can choose from. You can view these breakpoint sets by going to Qode Slider > Sliders where all the breakpoints and default coefficients are listed, and you can choose which set you would like to use by changing the value of the “responsive_breakpoints” attribute in the slider shortcode (this attribute takes the values “set1”, or “set2”).
After you have chosen which set of breakpoints you would like to use, you can then set breakpoint coefficients for each element in the slider which contains some text (Title, Subtitle, Text, and Button). These breakpoint coefficients control the responsiveness of the text in your slider. The breakpoint coefficient can be any number between 0 and 1 (1 meaning that the text stays in its originally set size).
The size of the text is calculated by taking the original text size you set, and multiplying it with the coefficient. The result will be rounded to the nearest whole number and this will become your new text size.
For example, if you set your slider text size to 12px and are using the first set of breakpoints (set1) and the default coefficient values, then your text will stay at 12px inside the first two breakpoints (which have a default coefficient of 1, so 12 x 1 = 12). At the third breakpoint (between 1200px and 900px, according to set1), your text will shrink to 10px since the default coefficient is 0.8 (12 x 0.8 = 9.6, which is rounded to 10), at the fourth breakpoint (between 900px and 650px, according to set1), your text will shrink to 8px since the default coefficient is 0.7 (12 x 0.7 = 8.4, which is rounded to 8), etc.
To create a client carousel, go to Qode 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.
- 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."
- A text field will unfold where you can enter a name for the carousel.
- Then click on "Add New Carousel".
- 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 Qode 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.

Qode 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.
You can now assign your masonry gallery item to a category. On the right side of the screen you will see a section named "Masonry Gallery Categories." Here you can select the category that you wish to add this item to. If you would like to add a new category, click on the “+ Add New Masonry Gallery Category” link and a text field will appear in which you can enter a name for your new category. Then click on “Add New Masonry Gallery Category”.
Underneath the Categories section is the Featured Image section. Here you can set a background image for your masonry gallery item. Please note that your image should be in corresponding proportions to item Size you had previously set in order to display properly. If using Square Big or Square Small, the image should be square. If using Rectangle Portrait or Rectangle Landscape, the image should be in 1:2 or 2:1 format, respectively.
After you have uploaded an image, click the “Publish” button.
Finally, in order to display your masonry gallery items on a page, go to that page from the backend and click the “Add Elements” button, and from the elements menu select "Masonry Gallery".
You can now edit how your items will display by filling out the following fields:
- 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".
You can further customize your masonry gallery by navigating to Qode Options > Elements > Masonry Gallery from the admin panel. For more info, see the Qode Options section of this user guide.


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
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:
-
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."

-
Add another row shortcode to your page. This row will be a menu item in the Content menu.
-
Click on the "Edit this row" button and choose "Yes" under "Row in content menu."
-
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.
-
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).

-
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 Qode 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 (pinterest) with space, masonry (pinterest) 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 (pinterest) With space Portfolio Type.
-
Box Background Color - Applies when Standard and Masonry (pinterest) 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.
-
Filter Color - Set a color for the filter.
-
Filter Order By - Choose how to order the items in the filter.
-
Enable Number of Items in Filter - Set this option to "Yes" if you would also like to show the number of items in each filter category.
-
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 Pack - Choose an icon pack to use.
-
Icon - Choose an icon to be displayed.
-
Icon Type - You can choose between icon with border (Circle) and icon without border (Transparent).
-
Icon Size - Set a size for the icon.
-
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).
-
Title Font Weight - Set a font weight for the title.
-
Margin Bottom - Set a bottom margin for this element.
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.
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.
Qode 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:
-
Type - Choose between a Standard and Advanced Pricing Table type.
-
Image - Upload an image for the Adnvanced Pricing Table type.
-
Title - Name your pricing plan here.
-
Subtitle - Input a subtitle for the advanced pricing table type.
-
Short Info - Input a short description for the advanced pricing table type.
-
Additional Info - Input additional information for the advanced pricing table type.
-
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.
Please note that you must have social sharing enabled in Qode Options in order for this to take effect.
-
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 Qode 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.
-
Image Size - Choose a size for the featured image.
-
Image Width - Set a width for the featured image if you chose the "Custom" option in the Image Size field.
-
Image Height - Set a height for the featured image if you chose the "Custom" option in the Image Size field.
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.
-
Image Shader Hover Color - Choose a hover color for the image overlay.
-
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.
Qode 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 Qode 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.
Qode 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 Qode 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.
Qode Pricing List
This shortcode allows you to easily present your prices.

Once you've added the Qode 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).
Qode Elements Holder
The Qode 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.
-
Columns Proportion - If you choose to use two columns in the elements holder, you can set their proportions here.
-
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 Qode Elements Holder, you can add Elements Holder Items, and edit the following fields:
Now that you've added the element holder item, you can add any element from the list of shortcodes.
Qode Image Slider
The Qode 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.
Qode Vertical Split Slider
The Qode Vertical Split Slider is a modern and impressive slider that can take your presentation to a whole new level. For an example of it, see the following Bridge demo:
http://demo.qodeinteractive.com/bridge48/.
Once you've added the Qode Vertical Split Slider shortcode, click on the cross inside it and add the Left Sliding Panel and Right Sliding Panel. These panels act as placeholders for content that will go inside the slider.
Next, click on the cross inside the panels to add Slide Content Items. There are several options here that you can edit:
Background Color - Choose a background color for the Slide Content Item.
Background Image - Alternatively, you can upload an image to be displayed in the background.
Padding Left/Right - You can enter padding amount to be applied to the left and right sides (example: "25px").
Content Alignment - Choose from left, right, or centered content alignment.
Now that you've added Slide Content Items, you can add any element from the list of shortcodes. Content in each Item will be vertically centered.
Note: For optimal results, make sure that the left and right panels have the same number of Slide Content Items. This is needed in order for content to align properly.
Blog Slider
-
Slider Type - Choose the type of slider you would like to use.
-
Auto Start - Set this option to "Yes" if you would like to enable automatic changing of slides in the blog slider.
-
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.
Qode 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.
Qode 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.
Qode 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.
-
Show Separator - Set this option to "Yes" if you would like to display a separator.
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.
Product List - Pinterest
You can use this shortcode to display shop items in a pinterest style 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.
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.
Qode 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.
Qode 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").
Qode 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").
Qode Content Slider
You can use this shortcode to create a slider that can contain any other shortcode or content inside it.
-
Auto Rotate - Choose how many seconds you would like to pass before the current slide changes. You can also disable auto rotate here.
-
Enable Drag - Set this option to "Yes" if you would like to enable the slides to be draggable.
-
Show Direction Navigation - Set this option to "Yes" to enable navigation arrows on the slider.
-
Show Control Navigation - Set this option to "Yes" to enable navigation bullets on the slider.
-
Pause on Hover - Set this option to "Yes" if you would like to pause the slider auto rotation when the user hovers over the slider with their mouse.
After you have set up the Content Slider, you can add Content Slider Items into it. Each Content Slider Item is a separate slide in the slider, and you can add any shortcode into it.
You can use this widget to display your Twitter feed anywhere on your pages. To do this, you first need to go to Qode Options > Social, and click the Connect with Twitter button.
General
-
User ID - Input your Twitter user ID. You can find your user ID at the following link: http://mytwitterid.com/
-
Number of Tweets - Set the number of tweets to display.
-
Show Tweet Time - Set this option to "Yes" if you would like to display the time the tweet was posted.
Design Options
-
Author Name Color - Set a color for the author name.
-
Screen Name and Date Color - Set a color for the author's screen name and the date.
-
Text Color - Set a color for the tweet text.
Banner
You can use this shortcode to create a promotional banner.
-
Image - Upload the image for your banner.
-
Link - Enter a URL link for the banner to lead to.
-
Target - Choose whether you would like the link to open in the same browser tab ("Self") or a new browser tab ("Blank").
-
Vertical Alignment - Choose a vertical alignment for the banner content.
-
Content - Input the text you would like on the banner.
Text Marquee
You can use this shortcode to create a section with text that scrolls across the screen from left to right.
-
Title - Input a title for the marquee
-
Title Color - Choose a color for the title.
Expanding Images
You can use this shortcode to create an image gallery with one hero image and up to 8 surrounding images, which have an expanding animation when the shortcode comes into the viewport.
General
-
Hero Image - Upload the main, central image. This image will be set inside a laptop frame and surrounded by the other images.
-
Link - Input a URL for the hero image to link to when clicked on.
-
Target - Choose whether the link will open in the same browser tab ("Self") or a new browser tab ("Blank").
-
Title - Enter a title for the link.
In the Inner Side Images and Outer Side Images tabs, you can upload the remaining images you would like to display around the hero image, and add a link to each of these images.
Cards Slider Holder
You can use this shortcode to create a slider with tabbed cards. Each card can display its own set of slides. After you have created a Cards Slider Holder, you can start adding Cards Slider shortcodes into it and setting the following options for each one:
-
Card Header Image - Upload an image for the card header.
-
Card Background Color - Set a background color for the card.
-
Slider Images - Upload slider images to use in this card.
-
Set Middle Slide as Active on Load - Set this option to "Yes" if you would like the middle slide to be active on load.
-
Center Slider - Set this option to "Yes" if you would like to center the slider on your page.
-
Border Radius - Set this option to "Yes" if you would like the edges of the slides to be curved.
-
Box Shadow - Set this option to "Yes" if you would like to enable a shadow effect on the slider.
-
Hover Animaton - Set this option to "Yes" to enable a hover animation on the slides.
-
Show Navigation Bullets - Set this option to "Yes" to display navigation bullets on the slider.
Item Showcase
You can use this shortcode to create a showcase for a product or other item. The shortcode consists of a central image, and surrounding icons with text that can be used to describe the central image and provide more information about it.
-
Image - Upload an image.
-
Image Top Offset - If necessary, input a top offset for the image.
After you have added the Item Showcase shortcode, you can start adding Item Showcase List Items to it and setting the following options:
-
Icon Pack - Choose an icon pack to use.
-
Icon - Choose an icon.
-
Item Position - Choose whether this item will be displayed to the left or right of the central image.
-
Item Title - Input a title.
-
Item Text - Input some text for this item.
-
Item Link - Input a URL link for this item to lead to when clicked on.
-
Icon Color - Set a color for the icon.
-
Icon Background Color - Set a background color for the icon.
Crossfade Images
You can use this shortcode to create an image that fades into another image when hovered on.
General
-
Initial Image - Upload the initial image.
-
Hover Image - Upload the image you would like to appear on hover.
-
Title - Enter a title.
-
Link - Enter a link for the image to lead to.
-
Link Target - Choose whether you would like the link to open in the same browser tab or a new browser tab.
Design Options
-
Background Color - Choose a background color for the image.
Gradient Icon With Text
You can use this shortcode to create a stylized icon with text. On hover, the icon will switch from a solid color to a gradient.
General
-
Icon Pack - Choose an icon pack to use.
-
Icon - Choose an icon.
-
Title - Input a title.
-
Link - Input a link.
-
Target - Choose whether you would like the link to open in the same browser tab ("self") or a new browser tab ("blank").
Icon Settings
-
Icon Size - Choose a predefined size for the icon.
-
Custom Icon Size - Alternatively, set a custom size for the icon.
-
Icon Color - Set a color for the icon.
Text Settings
-
Title Tag - Choose a heading tag for the title.
-
Title Text Transform - Choose a text transform style for the title.
-
Title Text Font Weight - Choose a font weight for the title.
-
Title Color - Set a color for the title.
You can use this shortcode to create a stylized button.
General
-
Text - Input text to display on the button.
-
Link - Input a link for the button to lead to.
-
Link Target - Choose whether you would like the link to open in the same browser tab ("self") or a new browser tab ("blank").
-
Custom CSS Class - 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.
-
Icon Pack - Choose an icon pack to use.
-
Icon - Choose an icon to use.
Design Options
-
Color - Set a color for the button text.
-
Hover Color - Set a color for the button text on hover.
-
Background Hover - Set a background color for the button.
-
Hover Background Color - Set a background color for the button on hover.
-
Icon Left Border Color - Set a color for the left border of the icon.
-
Hover Icon Left Border Color - Set a color for the left border of the icon on hover.
-
Enable Shadow - Set this option to "Yes" if you would like to enable a shadow on the button.
-
Enable Icon Gradient - Set this option to "Yes" to enable a gradient overlay on the icon.
-
Font Size - Input a size for the button text.
-
Font Weight - Choose a font weight for the button text.
-
Margin - Set a margin for the button. Please input the margin in a topright bottom left format (e.g. 5px 10px 5px 10px).
Advanced Options
-
Hover Effect - Choose a hover effect for the button.
Call to Action Section
You can use this shortcode to create a section with a background image, title, text, and call to action.
General
-
Section Image - Upload a background image for the section.
-
Title - Input a title for the section.
-
Description - Input a description for the section.
-
Link - Input a link for the call to action button.
-
Link Text - Input text to display on the button.
-
Link Target - Choose whether you would like the link to open in the same browser tab or a new browser tab.
Design Options
-
Background Color - Set a background color for the section.
Advanced Options
-
Appear Animation Effect - Set this option to "Yes" if you would like the section to have an animation effect when it comes into the viewport.
Bridge 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:
- Go to Plugins > Add New from the admin panel.
- Type "WooCommerce" in the search field.
- Locate "WooCommerce - excelling eCommerce" in the search results and click on "Install Now".


- Once installation is complete, click on "Activate Plugin".
- You will see a notice saying "Welcome to WooCommerce � You're almost ready to start selling :)". If you plan on importing Bridge demo content, click on "Skip Setup". Otherwise, click "Install Pages".
- 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:

- See Importing Demo Content instructions in the Getting Started section of this user guide and perform the process explained there.
- 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
