{"id":81,"date":"2019-11-26T00:52:15","date_gmt":"2019-11-26T00:52:15","guid":{"rendered":"http:\/\/dev.wp.dnngo.net\/doc\/?page_id=81"},"modified":"2021-02-08T06:37:19","modified_gmt":"2021-02-08T06:37:19","slug":"content-layouts","status":"publish","type":"page","link":"https:\/\/doc.dnngo.com\/glend\/theme-plugin-pro\/layout\/content-layouts\/","title":{"rendered":"Content Layouts"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This theme includes all the content layouts used on the demo site. You can edit them, and also create your own layouts.<\/p>\n

Reminder<\/span> Since browser cache exists, your page probably won\u2019t display the setting result properly after saving. Therefore, you need to press Ctrl+F5 to refresh your page.[\/vc_column_text]

<\/div>[vc_single_image image=”194″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Control Panel Area<\/h3>[vc_column_text]You will go to the control panel area of Content Layout after clicking the Add Layout. Some default layouts are included, you can change and delete them, don\u2019t forget to save at last.[\/vc_column_text]
<\/div>[vc_single_image image=”195″ img_size=”full” style=”vc_box_shadow”]
<\/div>

Layout<\/h3>[vc_column_text]Choose the layouts you want and drag them to the Container area.[\/vc_column_text]
<\/div>[vc_single_image image=”197″ img_size=”full” style=”vc_box_shadow”]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Pane<\/h3>[vc_column_text]Pane is the container that can make page apply modules, you can drag them to columns.[\/vc_column_text]
<\/div>[vc_single_image image=”199″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Pane Settings<\/h6>[vc_column_text]Pane Name<\/strong> – Set the name of pane.[\/vc_column_text]
<\/div>[vc_column_text]Background Settings<\/strong> – You can set background image and background color for the pane.[\/vc_column_text]
<\/div>[vc_column_text]Custom CSS<\/strong> – You can add the pre-built CSS of the theme to pane.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Row Settings<\/h3>[vc_column_text]Click the edit button on the right of Row, you will go to the interface of row settings.[\/vc_column_text]
<\/div>[vc_single_image image=”201″ img_size=”full” style=”vc_box_shadow”]
<\/div>
General<\/h6>[vc_column_text]Layout<\/strong> – You can quickly set the column layout by clicking the corresponding icons, as well as customize layout. In custom layouts, you can enter the 1\/12, 2\/12, 3\/12, 4\/12, 5\/12, 6\/12, 7\/12, 8\/12, 9\/12, 10\/12, 11\/12, 12\/12, 1\/5, 2\/5, 3\/5, 4\/5 and 5\/5 these numbers.[\/vc_column_text]
<\/div>[vc_single_image image=”202″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Row stretch<\/strong> – The style of the row, and there are 4 styles included.[\/vc_column_text]
<\/div>[vc_column_text]Default<\/strong> – Set the width of content to be the same as the width of the theme.[\/vc_column_text]
<\/div>[vc_column_text]Stretch row<\/strong> – Set the width of row to be full width, the content width is the same as the theme width.[\/vc_column_text]
<\/div>[vc_column_text]Stretch row and content<\/strong> – Set the content of row and content to be full width, there is extra spacing beside the 2 sides of content.[\/vc_column_text]
<\/div>[vc_column_text]Stretch row and content (no paddings)<\/strong> – Set the width of row and content to be full width.[\/vc_column_text]
<\/div>[vc_single_image image=”204″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Full height row<\/strong> – Set the height of the row to be the same as the height of the browser window.[\/vc_column_text]
<\/div>[vc_column_text]Equal height<\/strong> – Set every column of the row to have the same height.[\/vc_column_text]
<\/div>[vc_single_image image=”205″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Content position<\/strong> – Use flexbox alignment utilities to vertically align columns.[\/vc_column_text]
<\/div>[vc_row_inner][vc_column_inner width=”1\/3″]

top<\/h4>[vc_single_image image=”206″ img_size=”full” style=”vc_box_shadow”][\/vc_column_inner][vc_column_inner width=”1\/3″]

middle<\/h4>[vc_single_image image=”207″ img_size=”full” style=”vc_box_shadow”][\/vc_column_inner][vc_column_inner width=”1\/3″]

bottom<\/h4>[vc_single_image image=”208″ img_size=”full” style=”vc_box_shadow”][\/vc_column_inner][\/vc_row_inner]
<\/div>[vc_column_text]Justify Content<\/strong> – Use flexbox alignment utilities to horizontally align columns.[\/vc_column_text]
<\/div>[vc_column_text]CSS Animation<\/strong> – You can add entering animation for elements, choose animation style and animation time. For animation effect, please check this demo page<\/a>.[\/vc_column_text]
<\/div>[vc_column_text]Extra class name<\/strong> – Extra CSS can be added to the row.[\/vc_column_text]
<\/div>
Custom CSS<\/h6>[vc_column_text]You can add the pre-built CSS of the theme to the row.[\/vc_column_text]
<\/div>[vc_single_image image=”210″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Typography<\/h6>[vc_column_text]You can set the text style of the row. For example: text size, color, font family and etc.[\/vc_column_text]
<\/div>[vc_single_image image=”211″ img_size=”full” style=”vc_box_shadow”]
<\/div>
Hide Element<\/h6>[vc_column_text]You can set to hide rows under some resolutions.[\/vc_column_text]
<\/div>
Background<\/h6>
<\/div>[vc_column_text]Background Style<\/strong> – Set the style of the background.[\/vc_column_text]
<\/div>[vc_column_text]1. Single Color<\/strong> – Set background to be single color.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row bg_type=”bg_color” bg_color_value=”#20a3fc”][vc_column]
<\/div>
<\/div>
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>[vc_column_text]2. Gradient Color<\/strong> – Set background to be gradient color.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row bg_type=”grad” bg_grad=”background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #20A4FC), color-stop(100%, #89479B));background: -moz-linear-gradient(top,#20A4FC 0%,#89479B 100%);background: -webkit-linear-gradient(top,#20A4FC 0%,#89479B 100%);background: -o-linear-gradient(top,#20A4FC 0%,#89479B 100%);background: -ms-linear-gradient(top,#20A4FC 0%,#89479B 100%);background: linear-gradient(top,#20A4FC 0%,#89479B 100%);”][vc_column]
<\/div>
<\/div>
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>[vc_column_text]Gradient Type<\/strong> – Set the direction of the gradient color.[\/vc_column_text]
<\/div>[vc_column_text]Gradient End Color<\/strong> – Set the end color of the gradient color.[\/vc_column_text]
<\/div>[vc_column_text]Gradient Start Color<\/strong> – Set the start color of the gradient color.[\/vc_column_text]
<\/div>[vc_column_text]3. Image<\/strong> – Set background to be image.[\/vc_column_text]
<\/div>[vc_column_text]4. Parallax<\/strong> – Set parallax background image.[\/vc_column_text]
<\/div>[vc_column_text]Parallax Style<\/strong> – The style of parallax. There are 2 styles included, Fixed at its position and Parallax on scroll.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row bg_type=”image” parallax_style=”vcpb-default” bg_image_new=”id^991|url^http:\/\/doc.dnngo.com\/dngthemepro\/wp-content\/uploads\/2019\/03\/ourservice-pricing-bg.jpg|caption^null|alt^null|title^ourservice-pricing-bg|description^null” bg_image_repeat=”no-repeat” bg_img_attach=”fixed” enable_overlay=”enable_overlay_value” overlay_color=”rgba(0,0,0,0.74)” el_class=”mb-40″][vc_column]
<\/div>
<\/div>

Fixed at its position<\/h4>
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row bg_type=”image” parallax_style=”vcpb-vz-jquery” bg_image_new=”id^991|url^http:\/\/doc.dnngo.com\/dngthemepro\/wp-content\/uploads\/2019\/03\/ourservice-pricing-bg.jpg|caption^null|alt^null|title^ourservice-pricing-bg|description^null” bg_image_repeat=”no-repeat” enable_overlay=”enable_overlay_value” overlay_color=”rgba(0,0,0,0.74)”][vc_column]
<\/div>
<\/div>

Parallax on scroll<\/h4>
<\/div>
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>[vc_column_text]Parallax Factor<\/strong> – When choosing Parallax on scroll, you can set the displacement range of the background image, also set for different resolutions.[\/vc_column_text]
<\/div>[vc_column_text]5. YouTube Video<\/strong> – YouTube video can be used as background.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>[vc_column_text]YouTube ID<\/strong> – You need to enter the video ID. To get your YouTube ID, visit the video on YouTube.com, and view the url in the browser\u2019s address bar.\u00a0The ID will be after the \u201cv=\u201d part of the url. In the following url example, the ID is \u201cAkcUoA2f-jU\u201d.\u00a0https:\/\/www.youtube.com\/watch?v=AkcUoA2f-jU[\/vc_column_text]
<\/div>[vc_column_text]Placeholder Images<\/strong> – Set the cover image of video.[\/vc_column_text]
<\/div>[vc_column_text]Loop<\/strong> – Set to play video in a loop.[\/vc_column_text]
<\/div>[vc_column_text]Muted<\/strong> – Set whether to mute video.[\/vc_column_text]
<\/div>[vc_column_text]Start Time(s)<\/strong> – Set the start time of the video.[\/vc_column_text]
<\/div>[vc_column_text]End Time(s)<\/strong> – Set the end time of the video.[\/vc_column_text]
<\/div>[vc_column_text]Play video only when in viewport<\/strong>\u00a0– Set to play video only when you scroll down the page to video area.[\/vc_column_text]
<\/div>[vc_column_text]Display Color Overlay<\/strong> – You can set to add a shade layer to the background, and you can set the color and transparency of the shade layer.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>[vc_column_text]Enable slanted background<\/strong> – Set whether to slant the background. You can also set the angle of the tilt.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row bg_type=”bg_color” el_class=”dng-bg-skew” bg_color_value=”#20a3fc”][vc_column][vc_row_inner][vc_column_inner]
<\/div>
<\/div>
<\/div>
<\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row][vc_column]
<\/div>
<\/div>
Anchor<\/h6>[vc_column_text]Anchor ID<\/strong> – Anchor ID.[\/vc_column_text]
<\/div>[vc_column_text]Anchor Title<\/strong> – The text of title.[\/vc_column_text]
<\/div>
Fixed Element<\/h6>[vc_column_text]Allow to set extra elements to row, and be able to add rotating animation to elements.[\/vc_column_text]
<\/div>[\/vc_column][\/vc_row][vc_row][vc_column]

Column Settings<\/h3>[vc_column_text]Click the edit button on the right of the column, you will go to the interface of column settings.[\/vc_column_text]
<\/div>[vc_single_image image=”213″ img_size=”full” style=”vc_box_shadow”]
<\/div>
General<\/h6>[vc_column_text]CSS Animation<\/strong> – You can add entering animation to elements, choose the animation style and animation time. You can check the animation effect from this demo page<\/a>.[\/vc_column_text]
<\/div>[vc_column_text]Content position<\/strong> – Use flexbox alignment utilities to vertically align columns.[\/vc_column_text]
<\/div>[vc_column_text]Extra class name<\/strong> – Extra CSS can be added to columns.[\/vc_column_text]
<\/div>
Background Settings<\/h6>[vc_column_text]You can set background image and background color for columns.[\/vc_column_text]
<\/div>
Responsive Options<\/h6>[vc_column_text]You can set columns on different resolutions.[\/vc_column_text]
<\/div>[vc_single_image image=”215″ img_size=”full” style=”vc_box_shadow”]
<\/div>[vc_column_text]Default Width<\/strong>\u00a0– Set the width of column.[\/vc_column_text]
<\/div>[vc_column_text]Device<\/strong>\u00a0–\u00a0 Extra small < 576px,\u00a0\u00a0Small \u2265 576px,\u00a0Medium\u00a0\u2265 768px,\u00a0Large \u2265 992px,\u00a0Extra large \u2265 1200px.[\/vc_column_text]
<\/div>[vc_column_text]Offset<\/strong> – Set the offset of column.[\/vc_column_text]
<\/div>[vc_column_text]Device Width<\/strong> – Set the width of column under different resolutions. The default width of mobile is full width.[\/vc_column_text]
<\/div>[vc_column_text]Order<\/strong> – Set the display order.[\/vc_column_text]
<\/div>
Custom Css<\/h6>[vc_column_text]You can add pre-built CSS of the column.[\/vc_column_text]
<\/div>
Hide Element<\/h6>[vc_column_text]You can set to hide columns under some certain resolution.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row][vc_column][vc_column_text]This theme includes all the content layouts used on the demo site. You can edit them, and also create your own layouts. Reminder Since browser cache exists, your page probably won\u2019t display the setting result properly after saving. Therefore, you need to press Ctrl+F5 to refresh your page.[\/vc_column_text][vc_single_image image=”194″ img_size=”full” style=”vc_box_shadow”][vc_column_text]You will go to the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/81"}],"collection":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":17,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":956,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/81\/revisions\/956"}],"up":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/doc.dnngo.com\/glend\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}