Introduction

Cookie is integrated with awesome visual drag & drop page builder named Visual Composer. All sections and elements shown in the site are created with the help of visual composer. We have personally modified/replaced the visual composer elements for this particular theme completely. Apart from that, we also include the 30+ unique elements to taste the core functionalities of cookie.

To add the visual composer elements in page, please follow the steps below,

Step 1

Step 2

Step 3

Below, a simple diagram that helps you to work with the basic tools of the visual composer row & column elements.

VC for Posts & Portfolio

By default, visual composer is disabled for all posttypes except Pages. Fortunately, we can enable the visual composer for all our desired posttype by simply following the below steps,

Step 1 – Go to Visual Composer/Role Manager from the left side admin menu.

Step 2 – Click Posttypes dropdown and choose Custom from the list.

Step 3Check/Enable your desired posttype.

Note: team, testimonials, clients posttypes will not support visual composer, so you can simply ignore those posttypes

Row Element

Adding Row is the first step that you should do for building the website. You can modify the row settings by clicking Edit Row

General

You can choose your container type at Row stretch and add ID, Class for this particular row. Though all these above fields are optional, we highly recommend you to add the unique ID for every row.

Design Settings

By clicking Design Settings tab, you can add background image/color for the particular row. And it also allows us to add paddings, margins, borders for all 4 sides individually.

Parallax Settings

This parallax settings is disabled by default. If you want to convert your simple background to parallax background you have to enable the Background Parallax checkbox. Once you have checked/enabled the parallax, all default parallax values will be applied to the row.

Add Columns

When you are adding Row, the Column will be added automatically with Row element. You can change the column setting by Edit Column

General

General settings contain Alignment & Column skin tone Settings. Alignment setting can be overwritten by the inner level elements.

Design Settings

Similar to the row, you can setup background image/color, paddings, margins, borders for this particular column.

Responsiveness

This is an important feature for each column. You can control the responsiveness of the column on each device as shown in the image(right side) from the Responsive settings.

Animation Settings

By default, Animation Settings is disabled. You can choose your desired animation to animate the inner elements. It also allows you to setup the delay, duration & offset

Tab & Accordions

You can find the Tab & Accordions element at the botton of All tab, those elements are using the inbuilt functionalities of visual composer.

This tab & Accordion element will allow us to display all other elements as a tab/accordion’s content except the elements which are using jquery(isotope, masonry).

Tab & Accordion elements come with different styles and Alignments, you can combine any of the styles with alignment. And you also can set the active tab(will be opened by default) by entering the section number at the Active section text field on tab & accordion.

Note: For tab & accordion examples reference http://vcpreview.com/shortcodes/tabs/

Tab & Accordions(Deprecated)

You can find the alternative Tab & Accordions element under Deprecated tab, this elements are deprecated but the developers are guaranteed to keep this for more future releases.

This tab & Accordion element will allow us to display all other elements as a tab/accordion’s content except the elements which are using jquery(isotope, masonry).

Tab & Accordion elements come with different styles and Alignments, you can combine any of the styles with alignment. And you also can set the active tab(will be opened by default) by enabling Active checkbox on each tab & accordion section.

Contact Form 7 & Revolution Slider

Contact Form 7

Once you have created a contact forms at Contact/Contact Forms, all the contact forms’ name will be listed inside Contact Form 7 element. You can use all those created contact forms inside Page builder via this Contact Form 7 element.

Revolution Slider

Meanwhile, all sliders that you’ve created under Slider Revolution will be listed inside Revolution Slider 5 element.

Mailchimp Subscriber Form

Cookie has an inbuilt support with Mailchimp. If you have a Mailchimp account you can integrate your Mailchimp with API key at MailChimp for WP/MailChimp and below steps will help you to insert the mailchimp subscribe form which you have created via Mailchimp for WP/Forms.

Step 1 – Copy the shortcode from MailChimp for WP/Forms.

Step 2 – Click Add Element(+ sign) at backend editor and choose Text Block.

Step 3 – Paste the shortcode and Save Changes.