skip to Main Content
Diamond Wordpress Theme

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Recent Works
Contact Us

12345 North Street, New York City, NY 555555
Phone: 1-800-555-5555
Mobile: 1-234-567-8910
Fax: 1-234-879-5641
Email: info@yourwebsite.com
Web: http://yourwebsite.com

This theme includes support for the Visual Composer plugin plus an additional plugin called “Visual Composer Extension” created specifically for our clients. The Visual Composer plugin and extension add a ton of drag and drop modules to your dashboard for quickly and easily building your site.

Make Sure WPBakery Page Builder Plugin Is Installed & Active
Make sure you have activated the WPBakery Page Builder plugin. This plugin is NOT built-into the theme (for good reasons) so it must be installed and activated as mentioned in the guide on “Installing Recommended Plugins“. After installing the theme you should have been prompted to install the recommended plugins. If you chose not to install the Visual Composer then now is the time to do so.

Define Main Settings

Go to Settings > WPBakery Page Builder to setup the plugin. The most important part is to enable the composer for the post types you want to use it on. This is actually done via the “Role Manager” tab and the “Post Types” settings. You can actually enable the page builder to be accessable depending on the user role but most likely you’ll only want to edit the “Administrator” settings.

Using The Page Builder Plugin
The Visual Composer is very easy and doesn’t really need much explanation, have a look at the screenshots below for a quick guide.

First, decide if you would like to use the Backend or Frontend editor and click the related button.

If you click on the + symbol the Visual Composer will open a window to add elements. Here you will find all of the Visual Composer and Diamond page building modules. To add a page element simply click on it.

In this theme we have enabled some additional options in your post editor which we think are really useful.

Formats: Diamond Styles for text highlights, thin font & white text, plus color buttons

Shortcodes: Add icons, a WPML language switcher, a PolyLang switcher, simple button, divider, spacing, staff social links or a shortcode for the current year

Font Sizes: Custom font size options (e.g. 9px, 10px, 12px, 14px, 16px, 18px etc.)

Font Family: Select a different font family for your text. If you would like to add a new font family to this dropdown, go to the theme Customizer and select the Typography tab. Here you will find an option to Load Custom Fonts. Just select your font from the dropdown and save.

By default the Diamond theme adds a 40px margin below all columns in the Visual Composer, this allows for a better responsive site but it’s also very important to consider it when building your site so you can create perfect spacing between your elements. This margin can be altered though via the Customizer under the Visual Composer panel:

Removing The Default Margin (not recommended)

If you enter 0px for the bottom column margin globally it will remove it everywhere and you will have to remember to add margins to your columns for responsive layouts where they turn from columns next to each other to stacked columns. Also it will be a lot harder for you to keep consistency throughout the site. It is highly recommended to use a default bottom margin throughout the site.

The Best Way Of Removing the Margin

There are many times where you may want to remove the bottom margin on your columns. For example if you insert a row with a single column and a background and some text and you want to give your row the exact same padding on the top and bottom you probably will want to remove the bottom margin on the column inside this row and you can do it easily via the row setting named “Remove Bottom Column Margin” simply enable it and you are good to go! This will add a unique class to the row which resets the margins on any columns inside the row.

Alternative method 1: Give your columns a 0px margin

Another way to reset your margins is to do so via the Visual Composer “column” settings when editing a column. For example if working on a row with a background and you want content in the middle (in one column) and you want to add padding to your row that is the same at the top and bottom rather then adding a 40px padding at the top and allowing the column to have a 40px bottom margin to give the impression of padding, it’s best to edit your column and remove the bottom margin, then you can apply a top and bottom padding directly to the row. In fact this is what I do often on my live demos.

In most situations you shouldn’t have to remove the bottom margin on columns, just remember it’s there and work smartly. The only cases where you would want to remove it is when adding rows with backgrounds for example and you want a smaller padding inside the row.

Alternative method 2: Remove Margin Via Row Column Spacing Setting

If you are using a row without any inner columns you can also remove this spacing by easily selecting 0px for your columns margin via the built-in setting and setting it to 0px:

The Diamond theme includes many custom Visual Composer modules that extend the page builder so you can add a lot more functions to your theme. All these modules have “blue” icons and are tagged under the “Diamond” filter.

Editing Diamond VC Modules

It’s not really recommended because these modules are updated and if you edit them you may not receive these updates. However, if you really want to edit any Diamond VC module you can create a vcex_templates folder in your child theme then open the Diamond theme and locate the vcex_templates folder instead the Diamond theme and copy over any file you wish to edit to your child theme’s new vcex_templates folder. The theme will then load the file from your child theme instead of the parent theme so you can edit it however you want, yay!

If you have various icon boxes and you want them to all be the same height it’s very easy to do. All you need to do is give each icon box the classname “equal-height-content”.

Editing Diamond VC Modules

It’s not really recommended because these modules are updated and if you edit them you may not receive these updates. However, if you really want to edit any Diamond VC module you can create a vcex_templates folder in your child theme then open the Diamond theme and locate the vcex_templates folder instead the Diamond theme and copy over any file you wish to edit to your child theme’s new vcex_templates folder. The theme will then load the file from your child theme instead of the parent theme so you can edit it however you want, yay!

Diamond includes a custom function for the Visual Composer (not included in the core plugin) that will allow you to specify the spacing between columns making it easier for you to create the best layout possible and not be stuck with the default 30px margin between columns. Simply click to edit your row and you should find the setting in the General tab. To create a row without any space between your columns simply set the “Spacing Between Columns” setting to 0px.

This is a guide showing how you can add a local scroll link to the Single Image Visual Composer module.

  1. Set the “On click action” setting to “Open custom link”.
  2. Add your link in the “Image Link” field
  3. Select “Local” from the “Link Target” field

Enabling the Full height row setting will make that specific row be the same height as the browser window when the page is loaded.

Example http://diamond-themes.com/agency/

The Visual Composer plugin includes built-in functions so that you can easily “map” any shortcode so you can use it in the Visual Composer. For example if you are using a 3rd party plugin that has it’s own custom shortcodes you can use the Visual Composer “Shortcode Mapper” admin to include that shortcode as a module in the page builder for inserting it wherever you want! Simply go to Visual Composer > Shortcode Mapper and click on the “Map Shortcode” button then follow the steps.

Adding Via Shortcode

The first method is a bit of a pain in the butt but if you are just adding a simple module it’s easy and quick. Simply create a new blank page and add the module to the page. Then switch to the default editor and copy the shortcode and use this to paste in a “Text” widget.

Sometimes you may want your columns for a particular row to be full-width on Tablets (or the browser at Tablet size). This can be done quickly via a setting in the Row see screenshot below:

The Diamond theme includes the ability to give any row a minimum height. This can be used for testing purposes if you just want to add some empty space while working on the site or it can be used to insert a row with a background and have it display at a particular height even though there isn’t any content added in the row.

Because the page builder doesn’t include 5 column layouts by default (due to how their bootstrap works, although they say they are adding support in an upcoming update) in the Diamond theme we’ve added a temporary fix so you can easily create 5 columns for any row!

Step 1: Create a 6 Columns Row

Simply create a new row with 6 columns.

Step 2: Add the “five-columns” Class to the row

Next add the classname “five-columns” to the row.

Step 3: Add your content to the first 5 columns

If working in the backend you will still see 6 columns, so only add content to the first 5. If you are using the front-end editor you will see the last column disappear though  And of course the live site will display only 5 columns.

Back To Top