This article provides a brief outline of steps you need to take to setup your new Hosted account with Bridge. You can see a demonstration of quick setup and customization of a Bridge pre-made design below which covers many of the steps outlined here.
Be sure to see our general overview for using your Hosted account and logging into WordPress here
Getting On Board
When you first login to WordPress, you will see some default notifications and the Envato Hosted getting started wizard:
- Click the X to dismiss the WP Bakery Page Builder (aka Visual Composer) activation request. This plugin is bundled with your theme and does not require activation.
- Click Let's Start! To run through the wizard. Please note that adding your domain here does NOT point the domain or make your site go live if your domain is already registered somewhere else with an existing site. It only submits a request to update your account and temporary URL. When you are ready to launch your site, you may then update the name servers at your domain host to get your new site to appear when your domain is typed into the browser. (We've linked a guide for that below)
Step 1 - Install Updates & Plugins
Before you can load any page templates, or import full demo content, you will need to install or update the required plugins that come with your theme, if prompted.
You will typically see a notice at the top of your page if plugins need to be installed or updated:
Click Begin installing (or updating) plugins
If you do not see this notice, skip to the next section for installing WooCommerce.
- At the top of the list you will see a count of how many plugins need to be installed, activated or updated.
- Each install or update must be done one at a time.
- Do not use the bulk action menu to attempt a mass-install or update
- Click Install under any plugin with a Required tag that is not yet installed and click Return to Required Plugin Installer when it is done. Please note, some plugins can take several minutes. Be patient and do not navigate away from the page while the installer runs in the background.
- Update Slider Revolution and Visual Composer if available, one at a time.
- Activate required plugins if they are deactivated.
Bundled plugins such as WP Bakery Page Builder (Visual Composer), Revolution Slider, LayerSlider, etc that come with your theme are managed by the theme and cannot be updated manually on the main Plugins page. You may safely dismiss and ignore any activation or registration notices for these plugins as they will be updated when the theme is updated via the above process.
Install Contact Form 7
Many Bridge demos use Contact Form 7 instead of the preset contact page template. This includes forms you see in the Footer or sidebar of some demos.
- Go to Plugins > Add New and type Contact Form 7 into the Search field at top-right
- Click Install on the Contact Form 7 plugin
- Activate when complete
- This adds a new admin menu item Contact where you may find the default Contact form.
Step 2 - Configure WordPress
- Go to Settings > General
- Enter your site name and tagline (or leave the tagline blank) and click Save.
- Go to on WP Bakery Page Builder > Role Manager
- Select Custom from the Post Types drop-down and ensure Page, Portfolio and Post are checked, then click Save.
Step 3 - Load a Pre-Made Design
Next, where you will begin depends on how you signed up for Envato Hosted.
- If you chose a Qode design via https://envato.com/websites, your design and plugins will be pre-installed and you can skip to Step 4
- If you signed up directly from the Bridge page on themeforest.net, you'll need to decide if you want to start building your site from scratch, or if you want to start from one of the premade designs. The benefit of starting from scratch is that you have the cleanest results and only the content you have created. When using a demo, you have the benefit of pre-made layouts you can customize to some degree, but will need to delete all the demo pages and posts you won't use later when you're ready to launch.
To load a pre-made design:
- Click on Qode Import in your WordPress admin sidebar
- Choose the demo you would like to load from the drop-down.
- You may reference the demo names and numbers on the Bridge Theme Demo. To get the number, click the thumbnail to view the demo and check the URL. For example http://bridge77.qodeinteractive.com/ is New Demo 77 - Modern Furniture
If your demo requires a plugin that is not installed, it will be noted to the right of the import drop-down under Qode Import. Click the Install link to install required plugins then return to the Qode Import screen.
- Select All from the Import Type drop-down
- Check the box to Import attachments or you will not get any images
- Click Import to begin the import.
- Be patient! This import process can take several minutes while large images and content is transferred to your site. Do not navigate away from the page and wait until it says complete at 100% before continuing.
Install WooCommerce (optional)
If your site will have an online store, you must install the WooCommerce plugin. If your demo requires this plugin, it will be noted to the right of the import drop-down under Qode Import, otherwise you may install it manually following these steps:
- Go to Plugins > Add New and type WooCommerce into the Search field at top-right
- Click Install on WooCommerce
- Activate when complete
- You will be brought into the WooCommerce wizard.
When you are ready to get into detailed setup of your shop or products, refer to the WooCommerce documentation suite:
Step 4 - Configure Theme Options
You can customize most aspects of your theme such as colors, fonts, layout and element visibility through the theme options panel.
- Click on Qode Options in your WordPress admin menu to get started
- Go through each tab to customize the settings where desired.
- Click Save Changes when finished
Common Settings to check are:
- Your Google Maps API key under General
- Your Logo set under Logo
- Your Email Address set under Contact Page (if using the contact page template)
- The Social Icon links set under Social
Step 5 - Customize Your Content
To begin customizing a pre-made page layout, view the page on the front-end and click Edit Page in your admin toolbar. The admin editor will appear.
For detailed documentation on WP Bakery Page Builder (Visual Composer) and the various elements you can add, see the Visual Composer Tutorials site
When editing Pages, Posts or Portfolio items designed using WP Bakery Page Builder, you may edit the content of an element by hovering over it and clicking the pencil icon.
To delete and element, column or container, click the trash can icon.
Sections may be dragged and dropped into a different order using the handle on the top left corner of each section.
To find out what kind of slider your home page uses:
- Go to Pages and locate the Home page (usually tagged with - Front Page) and click to edit it
- First, do you see a Slider section in your layout? This is typically at the top and will say Revolution Slider etc. If so, you have a Revolution Slider. If not, continue:
- Scroll down to the Qode General options and look at the Layer Slider or Qode Slider shortcode field:
- If your layout is using LayerSlider, the shortcode will say layerslider
- If it is using Qode Slider (most of them do) it will say qode_slider
Your shortcode will tell you the name of the slider it is using. In the above example, it is the Home Slider.
- Click on Qode Slider in your admin sidebar
- Click on a slide showing your home page's slider in the Slider column to edit it.
- The title of the slide is the large text title on your slide
- Any subtitle text is in the Qode Subtitle area
- Any smaller text/paragraph is in the Qode Text area
- You can have up to two buttons on the slide. To remove the button, backspace the button label and link fields content.
Refer to the Bridge Documentation link below for detailed help with sliders.
Any pre-made Revolution Slider loaded with your demo are found under Slider Revolution in your admin menu. Click on the slider thumbnail to enter the editor. View our Overview for Customizing slides
Importing Old Content
If you have pre-existing posts or products exported to XML format from another WordPress website, you may import them under Tools > Import
Important note for those of you migrating or importing content from a site that was not using Bridge:
Post types like portfolios, testimonials, etc from a different theme cannot be imported to Bridge and will need to be re-created using Bridge's post types.
Page layouts created in another theme that did not use Visual Composer will not look the same or show any content when imported to Bridge and will need to be recreated.
If you had posts such as Events or products that were created using a plugin on your old site, you need to install those plugins before importing your XML!
You will also need to do a few other things in WordPress before you're ready to launch:
- Customize Menus
- Customizing the Footer
- Setup Your Email if using an address on your domain in contact forms
- Point Your Domain
For detailed documentation on Bridge see the Bridge Documentation and Tutorials Site
For inspiration on how Bridge can be customized, see 30 Beautiful Examples of Sites Made With Bridge