Video guides

There is a weird CSS quirk in some browsers that cause an element that has a top margin to collapse that margin like it has no margin applied at all (more about this).

As a rule of thumb when you build the layout please avoid vertical and top margins. Add spacing spacing between 2 elements by applying a margin bottom to the first so it will push the element under it and avoid margin top totally.

Also if you make a row and want to color the background of the row while having space from the margin of the row and the containing elements use padding vertical and not margin vertical.


1) Introduction

Learn how to install and configure the framework. See how WPS-Prime uses it’s own custom components/elements┬áto construct with Visual Composer.


Install WPS Prime and child theme

The options panel

Create menu & menu icons

Visual Composer and WPS Prime custom elements


2) Landing page construction section by section

You can learn in depth how to construct custom layouts and general good practices while planning section construction. See the landing page that is recreated in these videos


Create landing page Hero Image section

Create landing page 4 column (icon/text) mediabox section

6 columns gallery section with customized heading and icon

Full width row with equal height columns and vertical aligned content

Create a review slider section and learn more about 'Anything Slider'

Create a call to action section using text-block and a custom button


3) Other useful content building


Create a contact form and style it using the existing front end architecture


4) Developers guide


WPS Prime starter child theme explained

SASS front end architecture walkthrough