{"id":3773,"date":"2015-12-27T14:11:40","date_gmt":"2015-12-27T14:11:40","guid":{"rendered":"http:\/\/localhost:8888\/fresh\/?page_id=3773"},"modified":"2017-01-26T13:45:40","modified_gmt":"2017-01-26T13:45:40","slug":"page-builder","status":"publish","type":"page","link":"https:\/\/demo.agnihd.com\/fortune\/documentation\/page-builder\/","title":{"rendered":"Page Builder"},"content":{"rendered":"

[vc_row padding_top=”100″ padding_bottom=”100″ el_id=”introduction” el_class=”introduction”][vc_column]

Introduction<\/span><\/h2>
<\/span><\/div><\/div>[vc_column_text]Cookie is integrated with awesome visual drag & drop page builder named Visual Composer<\/a>.\u00a0All sections and elements shown in the site are created with the help of visual composer. We have personally modified\/replaced\u00a0the 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.[\/vc_column_text][vc_column_text]To add the visual composer elements in page, please follow the steps below,[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″][vc_column_text css=”.vc_custom_1451286638169{margin-bottom: 0px !important;}”]Step 1<\/strong>[\/vc_column_text]
\r\n\t\t\t
\r\n\t\t\t\t\"\"<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″][vc_column_text css=”.vc_custom_1451286646123{margin-bottom: 0px !important;}”]Step\u00a02<\/strong>[\/vc_column_text]
\r\n\t\t\t
\r\n\t\t\t\t\"\"<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″][vc_column_text css=”.vc_custom_1451286651297{margin-bottom: 0px !important;}”]Step\u00a03<\/strong>[\/vc_column_text]
\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”60px”]
\r\n\t\t\t\t\t<\/span><\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t<\/span><\/span>\r\n\t\t\t\t<\/div>[vc_empty_space height=”60px”][vc_column_text]Below, a\u00a0simple diagram that helps you to work with\u00a0the basic tools\u00a0of the visual composer row & column elements.[\/vc_column_text][vc_row_inner el_id=”row-diagram” el_class=”row-diagram”][vc_column_inner]
\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”enabling-vc-post” el_class=”enabling-vc-post” bg_color=”#f6f7f8″][vc_column]

VC for Posts & Portfolio<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]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,[\/vc_column_text][vc_column_text css=”.vc_custom_1451297237778{margin-bottom: 0px !important;padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: #f0f1f2 !important;}”]Step 1<\/em> – Go to Visual Composer\/Role Manager<\/strong> from the left side admin menu.<\/p>\n

Step 2<\/em> – Click Posttypes<\/strong> dropdown and choose Custom<\/strong> from the list.<\/p>\n

Step 3<\/em> – Check\/Enable<\/strong> your desired posttype.[\/vc_column_text][vc_column_text]Note: team, testimonials, clients posttypes will not support visual composer, so you can simply ignore those posttypes<\/small>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]

\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”row_element” el_class=”row_element”][vc_column]

Row Element<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]Adding Row<\/strong> is the first\u00a0step that you should do for\u00a0building the website. You can modify the row settings by clicking Edit Row<\/a>[\/vc_column_text][vc_custom_heading text=”General” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes”][vc_column_text]You can choose your container type at Row stretch<\/strong>\u00a0and add ID, Class<\/strong> for this particular row.\u00a0Though all these above fields are optional, we highly recommend you to add the unique ID for every row.[\/vc_column_text][vc_custom_heading text=”Design Settings” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1451288831458{margin-top: 50px !important;}”][vc_column_text]By clicking Design Settings tab, you can add background image\/color<\/strong> for the particular row. And it also allows us to add paddings, margins, borders<\/strong> for all 4 sides individually.[\/vc_column_text][vc_custom_heading text=”Parallax Settings” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1451288857457{margin-top: 50px !important;}”][vc_column_text]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<\/strong> checkbox. Once you have checked\/enabled the parallax, all default parallax values will be applied to the row.[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]
\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”column_element” el_class=”column_element” bg_color=”#f6f7f8″][vc_column]

Add Columns<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]When you are adding Row,<\/strong>\u00a0the Column<\/strong>\u00a0will be added automatically with Row element. You can change the column setting by\u00a0Edit Column<\/a>[\/vc_column_text][vc_custom_heading text=”General” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes”][vc_column_text]General settings<\/strong> contain Alignment & Column skin tone Settings. Alignment setting can be overwritten by the inner level elements.[\/vc_column_text][vc_custom_heading text=”Design Settings” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1451290542547{margin-top: 50px !important;}”][vc_column_text]Similar to the\u00a0row, you can setup background image\/color,<\/strong>\u00a0paddings, margins, borders<\/strong> for this particular column.[\/vc_column_text][vc_custom_heading text=”Responsiveness” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1451290555877{margin-top: 50px !important;}”][vc_column_text]This is an important feature for each column. You can control the responsiveness of the column on each device as shown\u00a0in the image(right side) from the Responsive settings<\/strong>.[\/vc_column_text][vc_custom_heading text=”Animation Settings” font_container=”tag:h5|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1451290611587{margin-top: 50px !important;}”][vc_column_text]By default, Animation Settings<\/strong>\u00a0is disabled. You can choose your desired animation\u00a0to animate the inner elements. It also allows you to setup the delay, duration & offset<\/strong>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]
\r\n\t\t\t
\r\n\t\t\t\t\"\"<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”tab_accordion” el_class=”tab_accordion”][vc_column]

Tab & Accordions<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]You can find the Tab & Accordions<\/strong>\u00a0element at the botton of\u00a0All<\/strong> tab, those elements are using the inbuilt functionalities of visual composer.[\/vc_column_text][vc_column_text]This tab & Accordion element will allow us to display all other elements as a tab\/accordion’s\u00a0content\u00a0except the elements which are using jquery(isotope, masonry).[\/vc_column_text][vc_column_text]Tab & Accordion elements come with different styles and Alignments, you can combine any of the styles with alignment. And\u00a0you also can set the active tab(will be opened by default) by entering the section number at\u00a0the Active section<\/strong>\u00a0text field\u00a0on tab & accordion.[\/vc_column_text][vc_column_text]Note: For tab & accordion examples reference\u00a0http:\/\/vcpreview.com\/shortcodes\/tabs\/<\/small>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]
\r\n\t\t\t
\r\n\t\t\t\t\"\"<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”tab_accordion_dep” el_class=”tab_accordion_dep”][vc_column]

Tab & Accordions(Deprecated)<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]You can find the alternative\u00a0Tab & Accordions<\/strong>\u00a0element under\u00a0Deprecated<\/strong>\u00a0tab, this elements are deprecated but the developers are guaranteed to keep this for more future releases.[\/vc_column_text][vc_column_text]This tab & Accordion element will allow us to display all other elements as a tab\/accordion’s\u00a0content\u00a0except the elements which are using jquery(isotope, masonry).[\/vc_column_text][vc_column_text]Tab & Accordion elements come with different styles and Alignments, you can combine any of the styles with alignment. And\u00a0you also can set the active tab(will be opened by default) by enabling\u00a0Active<\/strong>\u00a0checkbox\u00a0on each tab & accordion section.[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]
\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”adding-contactform-revslider” el_class=”adding-contactform” bg_color=”#f6f7f8″][vc_column]

Contact Form 7 & Revolution Slider<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner width=”1\/2″][vc_custom_heading text=”Contact Form 7″ font_container=”tag:h6|text_align:left” use_theme_fonts=”yes”][vc_column_text]Once you have created a contact forms at Contact\/Contact Forms<\/strong>, all the contact forms’ name will be listed inside Contact Form 7<\/strong> element. You can use all those created contact forms inside Page builder via this Contact Form 7 element.[\/vc_column_text][vc_custom_heading text=”Revolution Slider” font_container=”tag:h6|text_align:left” use_theme_fonts=”yes”][vc_column_text]Meanwhile, all sliders that you’ve created under Slider Revolution<\/strong> will be listed inside Revolution Slider 5<\/strong> element.[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″]
\r\n\t\t\t
\r\n\t\t\t\t<\/a>\r\n\t\t\t\t
<\/figcaption>\r\n\t\t\t<\/figure>\r\n\t\t<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row padding_top=”100″ padding_bottom=”100″ el_id=”adding-subscribe-form” el_class=”adding-subscribe-form”][vc_column]

Mailchimp Subscriber Form<\/span><\/h2>
<\/span><\/div><\/div>[vc_row_inner][vc_column_inner][vc_column_text]Cookie has an inbuilt support with Mailchimp. If you have a Mailchimp account you can integrate\u00a0your Mailchimp with API key at\u00a0MailChimp for WP\/MailChimp<\/strong>\u00a0and below steps will help\u00a0you to insert the mailchimp subscribe form which you have created via Mailchimp for WP\/Forms.<\/strong>[\/vc_column_text][vc_column_text css=”.vc_custom_1451311429710{padding: 5% !important;background-color: #f6f7f8 !important;}”]Step 1<\/em> – Copy the shortcode from MailChimp for WP\/Forms<\/strong>.<\/p>\n

Step 2<\/em> – Click Add Element(+ sign)<\/strong> at backend editor and choose Text Block<\/strong>.<\/p>\n

Step 3<\/em> – Paste the shortcode and Save Changes.[\/vc_column_text][\/vc_column_inner][vc_column_inner css=”.vc_custom_1451308696652{margin-top: 50px !important;}”]

<\/div>
<\/figure><\/div>
<\/figure><\/div><\/div><\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row padding_top=”100″ padding_bottom=”100″ el_id=”introduction” el_class=”introduction”][vc_column][vc_column_text]Cookie is integrated with awesome visual drag & drop page builder named Visual Composer.\u00a0All sections and elements shown in the site are created with the help of visual composer. We have personally modified\/replaced\u00a0the visual composer elements for this particular theme completely. Apart from that, we also include the 30+ unique elements […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/pages\/3773"}],"collection":[{"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/comments?post=3773"}],"version-history":[{"count":0,"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/pages\/3773\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.agnihd.com\/fortune\/documentation\/wp-json\/wp\/v2\/media?parent=3773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}