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:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to admin panel > Appearance > Themes > Add New > Upload Theme
    3. Click on "Choose File" and select Bridge.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
    3. 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.

Qode Options

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:

  1. Login to WordPress admin
  2. Go into admin panel > Qode Options > Qode Import
  3. Choose the demo site that you wish to import from the dropdown menu
  4. From the dropdown menu on the right, choose what type of content you'd like to import:

    Qode Import

    Qode 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.
  5. 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.
  6. 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:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate bridge.zip
  3. Extract bridge.zip and locate the bridge folder
  4. 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:

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

Once you've installed Bridge, you can start building your site.

Setting Up the Header

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

To set it up, go to 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.

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.

Logo AdminLogo Front

Menu Creation

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

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

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

MenusTop Navigation

Menus on Site

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

Footer Admin

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.

Show Top/Bottom Footer - Admin

Show Top/Bottom Footer - Front

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.

Widgets

Footer Widgets

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.

Classic Editor ButtonBackend Editor Button

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.

Publish Button

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:

  1. Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
  2. Font Eleganthttp://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.

Add New Post

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

Blog Post Format

Let's go over the possible options:

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

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

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:

Qode SEO

Qode General

Qode General

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.

Qode Header

Qode Title

Qode Title

Qode Scroll Title Animations

Content Bottom

Qode Content Bottom

Qode Sidebar

Qode Sidebar

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

No Sidebar Layout

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

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.

Qode Options - General

Design Style
Settings
Custom Code
SEO

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.

Qode Options - Logo

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.

Header

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

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

Header Position

Qode Options - Header Admin

Qode Options - Header Front

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.

Header
Menus
Qode Search
Side Area
Fullscreen Menu
Header Top

Header Top Admin

Header Top - Front

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

Header Button Icons - Admin

Header Button Icons - Front

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.

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

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
Breadcrumbs
Title Scroll Animations

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

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
Text
Header & Menu
Page Title
Page Subtitle
Footer
Portfolio

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
Buttons

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

Message Boxes
Blockquotes
Social Icons
Testimonials
Counters
Horizontal Progress Bars
Pie Charts
Tabs
Tags
Process
Input Fields
Highlights
Toggle Accordion
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

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:

Full Screen Section

Sidebar

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

Widget Styles

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
Buttons Style
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 both the Blog Masonry and Blog Masonry Full Width page templates.

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

Blog List

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

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.

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.

Masonry Style
Blog Large Image Simple
Blog Large Image With Dividers Style
Blog Vertical Loop
Masonry - Date in Image Style
Blog Single
Quote / Link
Blog Slider
Blog Carousel Slider Style
Blog Simple Slider Style

Portfolio

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

Portfolio Single Project
Portfolio List
Thin Plus Only Hover

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
Show Social Share
404 ERROR PAGE

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

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
Google Map Settings
Upper Section Settings
Contact Form Settings

Parallax

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

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

Visual Composer

This section allows you to control Visual Composer settings.

Contact Form 7

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. 

WooCommerce

Here you can define styles for your WooCommerce Shop pages.

Product List
Product Single
Cart Page

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.

Reset

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:

Page Attribute

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

Qode Header

Qode Title

Qode Scroll Title Animations

Qode Content Bottom

Qode Blog

Qode Sidebar

Qode SEO Fields

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

Full Screen Sections

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

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:

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

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

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

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:

Qode Portfolio Images (multiple upload)

This section allows you to upload multiple images at once:

Upload Portfolio Images

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

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.

Upload Single Portfolio Images/Videos

Note that you can combine both (single and multiple) upload methods.

Qode Additional Portfolio Sidebar Items

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

Portfolio Item

Qode General

Qode Header

Qode Title

Qode Scroll Title Animations

Qode Content Bottom

Qode 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

Slider Type - Admin

Qode Slide Image

Slider Type - Front

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
Qode Slide General
Qode Slide Graphic
Qode Slide SVG
Qode Slide Title
Qode Slide Subtitle
Qode Slide Text
Qode Slide Buttons
Qode Slide Content Positioning
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.
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.

Slider Shortcode - Admin

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.

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.

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.

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.

Add New Testimonial

Qode Testimonials

Next, there are a few fields to fill in:

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" then choose Testimonials.

Next, please fill out the following fields:

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

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

Widgets

Widget Areas

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

Admin Menus

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

Admin Edit Menus Manage Locations

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

Note that you must assign your menu to a location in order for it to be visible.

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

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

Triangle in Menu

Let's go over them:

Wide Menu

 

Wide Menu Dropdown

Anchors (One Page Site Functionality)

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

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

    Edit Row

    Add Anchor ID

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

    Anchor in Menu

Add New Element in Shortcodes

Qode Elements (shortcodes) in VC

Accordions

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.

Separator

Separators

Separator with Text

Separator with Icon

Empty Space

Tabs

 

Horizontal Left

 

Tabs Horizontal Left

 

Tabs boxed

 

Tabs Boxed

Tabs vertical left

Tabs Vertical Left

Highlights

Highlights

Portfolio List

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

Portfolio Slider

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

Portfolio Slider

Parallax Layers

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

Counter

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

Counters

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.

Cover Boxes

Icon List Item

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

Call to Action

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

Call to Action

Blockquote

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

Blockquotes

Button

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

Buttons

Image With Text

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

Message

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

Message Boxes

Pie Chart

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

Pie Chart

Pie Chart With Icon

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

Pie Chart - Icon

Pie Chart 2 (Pie)

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

Pie Chart

Pie Chart 3 (Doughnut)

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

Pie Chart

Progress Bar - Horizontal

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

Progress Bar - Horizontal

Progress Bar - Vertical

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

Progress Bar - Vertical

Progress Bar - Icon

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

Progress Bar - Icon

Line Graph

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

Linegraphs

Qode Pricing Tables

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

Pricing Tables

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

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.

 

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.

Dropcaps

Dropcap

List - Ordered

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

Lists

List - Unordered

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

Icon

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

Icons

Social Icons

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

Lists

Icon With Text

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

Icon with Text

Latest Posts

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

Blog Masonry

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

Image With Text Over

Image With Text Over allows you to display interactive images.

Image with text over

Image Hover

Image Hover allows you to display interactive images.

Team

This shortcode allows you to easily present your team.

Team

Service Table

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

Service Tables

Qode Clients

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

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

Animated Icons with Text

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

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

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.

Process

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

Qode Pricing List

This shortcode allows you to easily present your prices.

Pricing List

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

Qode Elements Holder

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

Qode Elements Holder

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. 

Countdown

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

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

Qode Google Map

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:

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

    Add New PluginInstall WooCommerce Plugin

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

    WooCommerce Products Image Sizes

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

    Choose Woo Page Template

 

Single Product

 

Choose Woo Page Template

 

Shop with Sidebar

 

Shop With Sidebar

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

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

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

    Add New PluginContact Form 7 Plugin

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

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

Contact Form 7 Shortcode

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

Note: For more information on defining Contact Form styles, see Qode Options > Contact Form 7.
You can read more about the Contact Form 7 plugin at https://wordpress.org/plugins/contact-form-7/.

3rd Party Integration

If you wish to integrate a newsletter sending service, you need to additionally install a plugin called "Forms: 3rd-Party Integration." You can check out the link to their site here: https://wordpress.org/plugins/forms-3rdparty-integration/.

Contact Form 7 Shortcode

 
Once you've completed the installation process and activated this plugin, navigate to Contact > 3rdparty Services from the admin panel in order to set options. For more information on setting it up, check out the following link: https://wordpress.org/plugins/forms-3rdparty-integration/screenshots/.