If you’ve been reading this guide since the beginning, then you should be ready to start building your own pages using the included Visual Composer plugin.
If you are not familiar with Visual Composer (aka WPBakery Page Builder), we highly recommend reading the official documentation here. In this chapter, we will cover only the basics of using this plugin.
Setting a Static Front Page
If you have imported one of the demo sites using the method explained in the “Getting Started” chapter, you can jump this section. But if you didn’t, please keep reading..
Let’s start by creating two pages: Home and Blog.
To create those pages, go to Pages > Add New, fill in the page title then click Publish.
Once the pages are created, go to Settings > Reading and set the option “Your homepage displays” to “A static page (select below)”. Now set “Homepage:” to your Home page and “Posts page:” to your Blog page. Then click Saves Changes.
Now, your homepage will display the content of your Home page and your Blog page will list your latest posts.
RedWaves make use of WordPress post meta-data to add some options on individual pages. These options are packed in one metabox “Page Options”.
Here is a brief explanation of each option;
Hide Title? – If enabled, page title will be hidden.
Primary Sidebar – The sidebar that will be used as Primary Sidebar. Set to “Inherit” to use the default one.
Secondary Sidebar – The sidebar that will be used as Secondary Sidebar. Set to “Inherit” to use the default one.
Sidebar Layout – Select an image to change the sidebar layout or select the first one to use the default layout. The Red rectangle is the Primary Sidebar and the Blue one is the Secondary Sidebar.
HTML Above Content – The content of this option will be displayed right above the page content (above the main container). You can add here any HTML code. You can add shortcodes too.
Using the Page Builder
Now let’s add some content;
From the post editor click the “Frontend Editor” button (make sure Visual Composer is installed and activated first). You will be redirected to VC frontend editor.
Basically, a row is a wrapper that holds one column or multiple columns depending on the row layout you choose.
Click “Add Element” and choose “Row”. Congrats! Now you have created your first row.
A column is block that holds other block of contents. In Visual Composer, these blocks are called elements (including rows and columns).
By default, each row will have one single full-width column created inside of it. But let’s say you want to have multiple columns in a row.
To divide your row into multiple columns, place your mouse over the row and click the small angle icon inside the blue rectangle.
Now click the 3 bars to change the row layout then choose the row layout you want or add a custom one then click “Update”.
Adding elements in Visual Composer is an easy task. You simply need to click the grey plus (+) sign then choose an element from the list that will appear.
Once the element is added, a settings panel will open to allow you to edit your element in real time. This procedure is the same for all Visual Composer elements including those exclusive to RedWaves.
When you finish editing your element, click Save changes then click Close.
Creating Contact Forms
In this section, we will show you how to create a responsive “Contact Me” form using the Contact Form 7 plugin.
First, make sure you have the plugin installed and activated on your website.
Second, go to Contact > Add New and add the below HTML code;
<div class="row grid"> <div class="grid-item col-md-6 col-sm-6 col-xs-12"> <p>[text* your-name placeholder "Your Name (required)"]</p> </div> <div class="grid-item col-md-6 col-sm-6 col-xs-12"> <p>[email* your-email placeholder "Your Email (required)"]</p> </div> <div class="grid-item col-md-12"> <p>[text your-subject placeholder "Subject"]</p> </div> <div class="grid-item col-md-12"> <p>[textarea your-message x8 placeholder "Message"]</p> </div> <div class="grid-item col-md-12"> <p>[submit class:sh-btn class:btn-primary class:btn-style-metro class:btn-block class:btn-lg "Send Message"]</p> </div> </div>
The above code make use of Bootstrap CSS classes to create a responsive contact form. If you know a bit of HTML, you can edit this code very easily. Please don’t hesitate to reach out for help!
Don’t forget to select the “Mail” tab to configure your form. Click Save to save your form.
Now you can add your form anywhere in your page using the form shortcode. Or you can simply use the “Contact Form 7” element in Visual Composer to add your form.
WordPress offers a user-friendly interface to manage menus. In RedWaves, we have extended this interface to add some useful features like Icons, Colored tags and even a built-in Mega Menu system.
RedWaves support 3 menu locations;
Topbar Menu – Menu assigned to this location on the Topbar when you enable Topbar Menu option (see Theme Options > Header > Topbar > Left/Right Items options).
Primary Menu – Menu assigned to this location will be displayed as primary navigation menu. Mainly in the header on Desktop devices.
Mobile Menu – Menu assigned to this location will replace your primary menu on mobile devices.
You can choose from 700+ icons to display in your menu. To add an icon to a menu item, simply click inside the Icon text box and a panel full of icons will appear. Now click an icon you want to add and its CSS class will be added to the text box that you previously clicked.
If you are having trouble finding the right icon, you can use the search bar inside the panel. For a full list of available icons check the official Font Awesome website.
Menu Tags (Colored)
You can add tags too to your menu. To add a tag, simply write anything (keep it short please!) inside the Tag label text box and pick a color from the color picker in the right. Make sure the color you choose is not the same as your menu background color.
There is nothing fancy with the built-in Mega Menu system. It only has the necessary tools to get the job done.
Let’s create a simple Mega Menu to get you started.
Assuming you have the below menu;
To convert this regular WordPress menu to a mega menu, start by enabling the “Enable Mega Menu?” checkbox.
Once enabled, more options will appear underneath;
Mega Menu Size – The size of the width of the mega menu. If you select Default, the menu will be 700px wide. If you select Custom, another text box will appear underneath where you can enter a custom width in pixels. If you select Wide, the mega menu and its content will be as wide as the header container. If you select Fullwidth, the mega menu will be stretched to fill the edges of the screen (left and right) but its content will be as wide as the header container.
Background Image – You can use this option to add a background image to your mega menu but some CSS adjustments might be required to position your image.
For the sake of our example, let’s select Custom as “Mega Menu Size” and set the size to 300px (enter 300 only).
Once the Top Level menu item has been configured, we need to add some CSS classes to its children (“Level 2” items in our example) to divide the menu into columns.
We will make use of Bootstrap’s Grid classes to divide the menu. To divide our menu into 2 columns, add “col-md-6” class into the “CSS Classes (optional)” text box to the two “Level 2” items.
You just need to remember the CSS class col-md-x where x varies from 1 to 12 to divide your menu. Use the class “col-md-6” to divide the menu to two columns, “col-md-4” to divide it to 3 columns, “col-md-3” to divide it to 4 columns, and so on.
Alternative Content – Sometimes, you might want to add other type of contents instead of the boring list of links. That’s why you have this text box where you can add a shortcode and it will be rendered normally.
No need to edit the “Level 3” items. If you followed our steps, your mega menu should look like this;
If you have changed “Level 1” and “Level 2” items hierarchy (Level 1 items become Level 2 and Level 2 items become Level 1), you need to Save your menu to refresh the options.