In addition to the specific page templates listed above, you'll notice Boulder ships with a lot of other types of pages with all sorts of goodies included in them. These don't use specific page template per se. They are brought to life through a combination of the wonderful Visual Composer plugin and a series of Shortcodes and custom post types we have made which are bundled in the CommerceGurus Toolkit plugin.

Using Visual Composer

Visual Composer is one of the best Page builder plugins available for WordPress. It allows you to quickly make complex page layouts with minimal technical skills. We've shipped lots of example pages in the demo data provided with the theme. In addition to the demo data, we've also provided a copy of the Visual Composer docs in the /Boulder_PACKAGE/Documentation/visualcomposer folder. I would recommend spending some time to read these in detail to fully understand how to use Visual Composer.

CommerceGurus Shortcodes integrated into Visual Composer

We've deeply baked in some interfaces to our CommerceGurus Toolkit shortcodes right into the Visual Composer user interface. To access these shortcodes in Visual Composer: When you're creating a new page in WordPress click the "Backend Editor" button which will activate Visual Composer.

Go ahead and create a new row and then hit the large plus symbol (+) which will open the shortcode lightbox. 

You should see an option called "CommerceGurus Shortcodes".

Go ahead and click on CommerceGurus Shortcodes which will filter down the list of shortcodes we've integrated into Visual Composer. The best way to get to know what each of these do is through experimentation. Most of them are very simple. The most complex one which we use a lot in the demo data provided with the theme is the "CommerceGurus Content Strip" shortcode which is a very powerful and flexible shortcode. We think of content strips as sophisticated content banners which sit within visual composer columns and allow you to quickly create highly original elements on page layouts.

Content Strip Options

  • Content Strip height - set the height of the strip.
  • Link to wrap around content strip - If you want the entire strip to be clickable add a link to wrap around it.
  • Content Area Width - set the width the content within the strip will take up. This should be set as a percentage.
  • Bottom Margin - Add a bottom margin in px to the strip.
  • Message box background color - The background color of the strip.
  • Vertical Position - This is the vertical position of the content within the strip.
  • Horizontal Position - This is the horizontal position of the content within the strip.
  • Text alignment - Not to be confused with horizontal positioning, this is the alignment of the content independent of it's position.
  • Text color - for now - just 2 simple options - Light/Dark.
  • Text animation effect - choose from a series of predefined animation effects to apply to the content within the strip upon load.
  • Text fade out on scroll - activating this will add a "Medium" style fade out upon scrolling down the page.
  • Custom content css class - if you want to really target a specific strip with custom css you can add a custom class name here.
  • Content - the actual content of the strip itself.
  • Content strip background image - if you want to add an image to the strip you can select one here from the media library.
  • Type of background - if you upload an image you should set the background type to Parallax image.

The demo data is particularly useful for providing lots of examples of how to use Visual Composer to create really beautiful content pages with Boulder.