{"id":52,"date":"2019-11-26T00:23:34","date_gmt":"2019-11-26T00:23:34","guid":{"rendered":"http:\/\/dev.wp.dnngo.net\/doc\/?page_id=52"},"modified":"2021-02-08T01:17:44","modified_gmt":"2021-02-08T01:17:44","slug":"content-builder","status":"publish","type":"page","link":"https:\/\/doc.dnngo.com\/obvio\/content-builder\/","title":{"rendered":"Content Builder"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]Content Builder is a powerful and intuitive page editor with minimum complexity. Beautiful websites can be quickly created by simply selecting and dragging &amp; dropping, without any code, what you see is what you get.[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1561022909154-194d0e13-c79b\" class=\"dg-heading text-left\" >Upload Resource Files<\/h3>[vc_column_text]There are many resource files and templates included in the Content Builder module, so you need to upload the files via FTP by manual.<\/p>\n<p>You will find the ContentBuilder folder in the purchased product, please upload it to the Portals_default directory of your site with FTP software. There are many files that need to be uploaded, so please wait with patience. Once the upload is done, then you can start to use the Content Builder module.[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1561108829570-99fbcd08-c9e4\" class=\"dg-heading text-left\" >Quick Start<\/h3>[vc_column_text]Login to your site with the administrator account, add the DNNGo Content Builder module to a full width pane. Click the \u2018+\u2019 symbol on the left of the control panel, or click the \u2018Click to add content\u2019 in the module. Then select a section area in the pop-up box to be added to a page. Please check the following video to know more detailed usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-52-1\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Quick-Start-1.mp4?_=1\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Quick-Start-1.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Quick-Start-1.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575299886493-d893aab3-0daf\" class=\"dg-heading text-left\" >Add content block<\/h3>[vc_column_text]There are 180 predefined content blocks included in this theme, and you can add elements to sections just simply by clicking or dragging &amp; dropping. Please check the following video to know more detailed usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-2\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Content-Block.mp4?_=2\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Content-Block.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Content-Block.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575300572569-a6bee045-c67e\" class=\"dg-heading text-left\" >Text Editor<\/h3>[vc_column_text]This theme includes a feature-rich WYSIWYG editor. Please check the following video to know more detailed usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-3\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Text-Editor.mp4?_=3\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Text-Editor.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Text-Editor.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575777351872-dc04bbc0-7d46\" class=\"dg-heading text-left\" >Quick Setup icon<\/h3>[vc_column_text]This theme integrated Font Awesome 5, Linearicons and Animation icon, you can choose to use them quickly through the editor. Please check the following video to know more detailed usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-4\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Icon.mp4?_=4\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Icon.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Icon.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575779317469-ceb18596-2ab8\" class=\"dg-heading text-left\" >Cropping images<\/h3>[vc_column_text]You can quickly crop images with the editor. Please check the following video to know more detailed usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-5\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Cropping-images.mp4?_=5\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Cropping-images.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Cropping-images.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575334929242-fa107934-94ab\" class=\"dg-heading text-left\" >Section Settings<\/h3>[vc_column_text]Please check the following video to know usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-6\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Section-Settings.mp4?_=6\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Section-Settings.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Section-Settings.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575335452619-5b7e019e-8a8b\" class=\"dg-heading text-left\" >Box Settings<\/h3>[vc_column_text]You can set background image, content width, font color and etc. for section areas. Please check the following video to know usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-7\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Box-Settings.mp4?_=7\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Box-Settings.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Box-Settings.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575337663586-1eaf6df8-b979\" class=\"dg-heading text-left\" >Multiple Column Layout<\/h3>[vc_column_text]Please check the following video to know usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-8\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Multiple-Column-Layout.mp4?_=8\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Multiple-Column-Layout.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/06\/Multiple-Column-Layout.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575353747742-cd5840bd-8701\" class=\"dg-heading text-left\" >Set Lightbox<\/h3>[vc_column_text]You can set lightbox for images and links. When clicking images or links, images, videos or maps will be displayed as lightbox. Please check the following video to know usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-9\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/lightbox.mp4?_=9\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/lightbox.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/lightbox.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h5  id=\"dg-heading1575355694666-db0bec70-6107\" class=\"dg-heading text-left\" >Image (Lightbox)<\/h5>[vc_column_text]First, please set the Link Type to be Image (Lightbox), then enter an image URL in the Image URL, or upload an image.[\/vc_column_text]<div class=\"pb-20\"><\/div>[vc_single_image image=&#8221;339&#8243; img_size=&#8221;full&#8221; style=&#8221;vc_box_shadow&#8221;]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1575358158656-2c5ddfce-b4b3\" class=\"dg-heading text-left\" >YouTube Video (Lightbox)<\/h5>[vc_column_text]Please set the Link Type to be YouTube Video (Lightbox), then enter a video URL in the YouTube URL. For instance: https:\/\/www.youtube.com\/embed\/AkcUoA2f-jU, \u2018AkcUoA2f-jU\u2019 is the video ID, and you can use your own video ID instead.[\/vc_column_text]<div class=\"pb-20\"><\/div>[vc_single_image image=&#8221;342&#8243; img_size=&#8221;full&#8221; style=&#8221;vc_box_shadow&#8221;]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1575361523859-536f6c1c-9c86\" class=\"dg-heading text-left\" >Vimeo Video (Lightbox)<\/h5>[vc_column_text]Please set the Link Type to be Vimeo Video (Lightbox), then enter a video URL in the Vimeo URL. For instance: https:\/\/player.vimeo.com\/video\/106249100, \u2018106249100\u2019 is the video ID, you can use your own video ID to replace it.[\/vc_column_text]<div class=\"pb-20\"><\/div>[vc_single_image image=&#8221;345&#8243; img_size=&#8221;full&#8221; style=&#8221;vc_box_shadow&#8221;]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1575361699992-97e9cdd9-4e9b\" class=\"dg-heading text-left\" >HTML5 Video (Lightbox)<\/h5>[vc_column_text]You need to set the Link Type to be HTML5 Video (Lightbox), then enter a video URL in the HTML5 URL. Please note the video format has to be MP4.[\/vc_column_text]<div class=\"pb-20\"><\/div>[vc_single_image image=&#8221;347&#8243; img_size=&#8221;full&#8221; style=&#8221;vc_box_shadow&#8221;]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1575362322663-71c45351-4ef4\" class=\"dg-heading text-left\" >Google Map (Lightbox)<\/h5>[vc_column_text]You need to set the Link Type to be Google Map (Lightbox), then input a map URL in the Google Map URL. Such as:<\/p>\n<p style=\"overflow: auto;\">https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3023.4180044887703!2d-73.99952068428715!3d40.730826844399864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25990e23d7e8d%3A0xfa615edfd1b67e18!2sWashington%20Square%20Park!5e0!3m2!1sen!2sus!4v1575362448308!5m2!1sen!2sus<\/p>\n<p>[\/vc_column_text]<div class=\"pb-20\"><\/div>[vc_single_image image=&#8221;350&#8243; img_size=&#8221;full&#8221; style=&#8221;vc_box_shadow&#8221;]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1593933252570-962dd0a4-db9d\" class=\"dg-heading text-left\" >Lightbox Group<\/h5>[vc_column_text]You can link multiple images to the same lightbox.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-10\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/group.mp4?_=10\" \/><a href=\"https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/group.mp4\">https:\/\/doc.dnngo.com\/kella\/wp-content\/uploads\/2020\/07\/group.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-20\"><\/div><h5  id=\"dg-heading1610615216462-87d9a387-85b2\" class=\"dg-heading text-left\" >Content (Lightbox)<\/h5>[vc_column_text]You can set lightbox for the HTML content.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-11\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Lightbox-content.mp4?_=11\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Lightbox-content.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Lightbox-content.mp4<\/a><\/video><\/div>[\/vc_column_text]<div class=\"pb-40\"><\/div><h3  id=\"dg-heading1575363452835-4a4ca86c-bc05\" class=\"dg-heading text-left\" >Save Section<\/h3>[vc_column_text]You can save the created page content as a section. Please check the following video to know usage steps.<\/p>\n<div style=\"width: 1600px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-52-12\" width=\"1600\" height=\"900\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Save-Sectio.mp4?_=12\" \/><a href=\"https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Save-Sectio.mp4\">https:\/\/doc.dnngo.com\/obvio\/wp-content\/uploads\/2021\/01\/Save-Sectio.mp4<\/a><\/video><\/div>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text]Content Builder is a powerful and intuitive page editor with minimum complexity. Beautiful websites can be quickly created by simply selecting and dragging &amp; dropping, without any code, what you see is what you get.[\/vc_column_text][vc_column_text]There are many resource files and templates included in the Content Builder module, so you need to upload the files via [&hellip;]<\/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:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/52"}],"collection":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":76,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":946,"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/pages\/52\/revisions\/946"}],"wp:attachment":[{"href":"https:\/\/doc.dnngo.com\/obvio\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}