{"id":450,"date":"2020-08-10T15:35:58","date_gmt":"2020-08-10T21:35:58","guid":{"rendered":"https:\/\/help.marketingservices.dev\/?p=450"},"modified":"2020-11-27T10:28:08","modified_gmt":"2020-11-27T16:28:08","slug":"edit-your-site-with-divi-builder","status":"publish","type":"post","link":"https:\/\/help.marketingservices.dev\/?p=450","title":{"rendered":"Edit your site with Divi Builder"},"content":{"rendered":"\n<p>Getting your business up and selling is possible with Website Express. This powerful product allows you to quickly and easily create a website and online store powered by WordPress and WooCommerce. To make the transition to ecommerce seamless, we also have a visual builder, called Divi Builder, within every Website Express account. This allows you to design and create beautiful websites without having to write a single line of code.&nbsp;<\/p>\n\n\n\n<p>Before we jump in, let\u2019s make sure we\u2019re familiar with Divi Builder.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Divi. The Ultimate WordPress Theme And Visual Page Builder\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/q9XI0Lo-SWE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Divi Builder is a WordPress plugin that allows you to insert, remove, and edit content blocks on the front end of your website. It boasts unlimited layout possibilities, and its fluid content areas are perfect for a responsive design approach.  It allows those site owners with little or no design, or development experience, to create beautiful sites, with a simple drag and drop interface. <\/p>\n\n\n\n<p>Let\u2019s start editing your website using Divi Builder!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Divi Builder<\/h2>\n\n\n\n<p>On the Website Express\/Pro dashboard, there is a button, &#8220;<strong>Edit My Site<\/strong>&#8220;. Click it to start editing the front end, or the content of your website. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Jumping-into-Divi-Builder.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/visual-builder\/\">Editing text and images on your website<\/a><\/h2>\n\n\n\n<ul><li>It\u2019s time to customize your site! Let\u2019s start with text elements. Click on the text box you\u2019d like to edit and start making changes. <\/li><li>Alternatively, when you hover over an element, a small dark toolbar will appear. Click on the <strong>gear icon<\/strong> to pull up a window that provides more options for editing and customization. Click on the window\u2019s green checkmark to save any changes.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"564\" src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.05.10-PM-1024x564.png\" alt=\"\" class=\"wp-image-453\" srcset=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.05.10-PM-980x540.png 980w, https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.05.10-PM-480x264.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<ul><li>This same process also works with any buttons on the page. However, as buttons have more options, you\u2019ll need to open the editing modal to further customize it. You can do this by double-clicking the button, or opening it by clicking the gear icon in the same way that you did with the text box.<\/li><li>Now it\u2019s time for images! Many templates will have a large picture set as the background or banner across the top of the website. To change the image, simply hover over it (while not interfering with text or other elements) and double-click. An editing modal should pop up. Click on the \u201c<strong>Background\u201d<\/strong> section. Your current background image should be showing. Click the garbage can icon to delete the placeholder image and then click  \u201c<strong>Add image<\/strong>\u201d. You can either drag the image from a file on your computer or click to browse your files.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"566\" src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.59-PM-1024x566.png\" alt=\"\" class=\"wp-image-455\" srcset=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.59-PM-980x541.png 980w, https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.59-PM-480x265.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<ul><li>To edit other images on the site, simply double-click the image and replace it with your own.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Editing-text-and-images.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding and removing elements on your website<\/h2>\n\n\n\n<ul><li>If there are any elements (text blocks, images, etc.) that you don\u2019t want on your website, simply hover over the element and select the garbage can icon.<\/li><li>If you want to add elements to your page, either:<ul><li>Hover over the area you\u2019d like to add an element and click the grey \u201c+\u201d,<\/li><li>Hover over the element above the spot you\u2019d like your new element to be placed, and look for a green \u201c+\u201d.&nbsp;<em>You may have to actually click on the element above for it to appear<\/em>.&nbsp;<\/li><\/ul><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.47-PM-1024x543.png\" alt=\"\" class=\"wp-image-456\" srcset=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.47-PM-980x520.png 980w, https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-06-04-at-12.04.47-PM-480x255.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<ul><li>This will bring up an \u201c<strong>add row<\/strong>\u201d selector with different options as to the number of columns in your new element. Perhaps you would like three blocks of text side-by-side? Choose the row with three columns. Maybe a wide picture on the right and a narrow text box on the left? Choose the row that shows the corresponding spacing. Just want something to go straight across your entire page? Simply choose the first option available, the one with a single column.<\/li><li>A window will appear with several different element options. Search for the <strong>Image <\/strong>option to add a picture, the <strong>Text <\/strong>option for adding text, or browse to see what other options are available.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Adding_Deleting-Elements.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Saving your work and moving on to edit another page<\/h2>\n\n\n\n<ul><li>Once you\u2019re happy with how your website looks, or every so often along the way, you\u2019ll want to save your progress. Look for the purple icon with three dots at the bottom of your page and click it. The icon should multiply and you\u2019ll now have several purple icons. You\u2019ll also have a green \u201c<strong>Save<\/strong>\u201d button in the bottom right corner. Click it to save your changes.<\/li><li>To edit another page (<em>ex. the Shop page<\/em>), click \u201c<strong>Exit Visual Builder<\/strong>\u201d at the top of your page. Once you\u2019ve done so, you\u2019ll see your page exactly as your customers will see it. Next, navigate to the page you&#8217;d like to edit next and then re-enable the visual builder using the button at the top of the screen.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Saving-your-work.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Changing the logo and contact information on your website<\/h2>\n\n\n\n<ul><li>To change the logo and contact information in the top bar of the website you will need to navigate to the <strong>WordPress Dashboard<\/strong>. Click the name of your business in the top left corner of the screen. Once in your WordPress dashboard, in the left navigation bar click the Divi tab (towards the bottom of the side navigation menu).&nbsp;<\/li><li>You are now on the <strong>General Divi Settings tab<\/strong>. The top row is where you are able to change the logo. Click the &#8220;Upload&#8221; button.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Changing-the-logo.mp4\"><\/video><\/figure>\n\n\n\n<ul><li>Once you\u2019ve uploaded your logo, scroll all the way to the bottom of the page and click the green \u201c<strong>Save changes<\/strong>\u201d button.<\/li><li>Next, we\u2019ll input your business\u2019 contact information. Back in the left navigation. You may notice that the Divi Builder tab has extended to include several sub-headings. Click on \u201c<strong>Theme Customizer<\/strong>\u201d.<\/li><li>A new page will load. This is an alternative editor. Click on the \u201c<strong>Header and Navigation<\/strong>\u201d section, and then \u201c<strong>Header Elements<\/strong>\u201d. The navigation bar should now contain two text bars for you to insert your business\u2019 information.<\/li><li>Click the blue \u201c<strong>Publish<\/strong>\u201d button at the top of the page to save your changes to your webpage.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.marketingservices.dev\/wp-content\/uploads\/2020\/08\/Change-the-contact-information.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>Congratulations, you now have the knowledge you need to edit your website!<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.woocommerce.com\/\"><em>WooCommerce<\/em><\/a><em>&nbsp;and&nbsp;<\/em><a href=\"https:\/\/www.elegantthemes.com\/blog\/theme-releases\/divi-3\"><em>Divi Builder<\/em><\/a><em>&nbsp;have extensive documentation and tutorials on how to set up, edit, manage, and operate your store.&nbsp;<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting your business up and selling is possible with Website Express. This powerful product allows you to quickly and easily create a website and online store powered by WordPress and WooCommerce. To make the transition to ecommerce seamless, we also have a visual builder, called Divi Builder, within every Website Express account. This allows you [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[19],"tags":[],"_links":{"self":[{"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/posts\/450"}],"collection":[{"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=450"}],"version-history":[{"count":9,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/posts\/450\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=\/wp\/v2\/posts\/450\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.marketingservices.dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}