How to Use a WordPress Site Designed with Divi 3.0

Published by: Lauren Carhart on: January 12, 2018 4:14 PM under Web Design, Tutorials, Tools and Tips



In case you haven’t heard, Elegant Theme’s newest version of the WordPress page builder theme, Divi 3.0, is just about the best theme out there. Fully equipped with a backend page builder along with frontend editing, Divi is user-friendly for any type of user and provides website developers (like us) with much more design flexibility than most WordPress websites offer. In this blog post, we’re going to provide instructions on how to use the frontend editing page builder to edit the content on your WordPress website.

 

First, to login to your new website, you will head to www.yourdomain.com/wp-admin. You will then be prompted to enter your username and password which should be provided by your web designer. After logging in, you will be brought to the site’s dashboard where you will see a panel on the left with different options. This area is often referred to as the backend, or admin area, of the website. This is where you will go to make technical changes, but all content changes will be made on the frontend of the website, meaning the part of the website that everyone views.

 

Changing Your Password

Your web designer would have had to use a generic password to set you up, so you will want to change it to something you will remember. To change your password, click on the “Users” tab in the left panel. Click your name, and then click "Generate Password". Here, you can type a new password and click save. Please do not change any username/passwords for Navitas Marketing staff. If you see a username that looks suspicious to you, please do not delete it. Notify your designer instead.

 

Adding a New User

Hover your mouse over “Users” and click “Add New”. Create a username and add the user’s email address and first and last name. To add a password, click “Show Password”. It will automatically fill in with a long generic password which you can erase and type in whatever you want. It may warn you that your password is weak, meaning not original enough. You can still use the desired password even if it's marked as weak, by checking the box next to “confirm use of weak password”. Always set the “role” as “administrator” if you want the user to have full access to editing the website. If the user is solely a blog writer, you can give them “author” access to limit what they can edit.

 

Updating WordPress, Divi, or Other Plugins

Updates are constantly coming out for the Divi builder, all your plugins, and WordPress itself. It's important to keep these up to date to avoid any issues. In the backend or "dashboard" of the site, hover over "Dashboard" in the left panel and click "Updates" in the tab that appears. Select all themes/plugins that need updating and click the "Update" button. 

 

Navigating to the Frontend For Editing Content

You will need to navigate to the frontend of the website. To toggle between the front end and the back end, click the name of your website in the far top left corner. You will see a little house icon next to the website name. When clicking this, you will be brought to the frontend where you can view your site, but you will still have the top option panel accessible. Navigate to the page you want to edit, and click the option at the top that says “Enable Visual Builder”. This will bring you to an editable version of the page and you will see different option panels appear when you hover your mouse over items on the page. As you move from page to page to make your edits across the site, you will see that you need to click “Enable Visual Builder” on each page to make it editable again.

 

Editing Text

Hover your mouse over the text you would like to edit and click to start typing. The text is directly editable as if you were composing an email. To make part of the text bold or italic, these options are located in a small gray panel that appears over the text when you start typing.

 

NOTE: Before moving on, you must save your changes. Do this by clicking the circular purple "..." icon at the bottom of the page to expand more options, then click the teal “save” button in the bottom right corner. It will take a couple seconds to do its job, and then it will let you know your changes were saved by showing a checkmark on the button.

 

Swapping Images

These instructions are for single images only, not for an image gallery or portfolio. If you hover over an image, you will see a similar gray panel appear over it. Clicking the gear icon (second icon in the row) will bring you to settings in a mini pop up window. Here, you can click “upload” or click the preview of the image that is currently on the site to open the upload image window. Click “upload files” in the top left corner if you are adding a photo that has never been used on the site. If the photo has been uploaded in the past, you can select it right from the gallery in this window. Click the blue “upload image” button in the bottom right corner. You will then be taken back to the main screen, and you will click the green checkmark button in the mini window to save. 

 

NOTE: this doesn’t save the changes to the page itself. You still need to click the teal “save” button in the bottom right corner to save all changes. This is true for all content.

 

Adding a New Page

If you’re looking to add a new page to your site consisting of basic text, you can easily do so! Your designer has created a page template for you to make it a quick and easy task. First, head to the backend of the site (the dashboard) and click “Pages” in the left panel. Then click “Add New” in the top left corner. Give your page a title at the top. Then click the large purple button that says “Use the Divi Builder” and you will see the page changes a bit. You can then click “Load Layout” in the purple area. A Layout is Divi’s name for a template. A window will appear and you will want to click “Your Saved Layouts”. There may be many layouts in the area, so please confirm with your designer which is the correct layout to choose. It may be named something like “Page Template”. Once you know the proper layout, click on it and all the modules within the page will populate. For the simplest way of editing, migrate to the front end of the site, or Visual Builder, to make your changes. Do so by clicking the blue button titled “Use Visual Builder”. You will be brought to the front end of the site. To change any areas of text, click and start typing (as mentioned previously). You can add additional modules such as images by hovering over the area and clicking the gray + sign. A window will appear and will display different modules you can add. To add a photo, click “Image”. You can follow the instructions above for “Swapping Images” to complete this task. Don't forget to save your changes and publish your page by clicking the circular purple "..." button at the bottom and "Save Draft" or "Publish" if you're ready to go live.

 

Special Divi Plugins and Other Features

 

You may or may not find this section useful. It depends on your website and the kind of features it holds.

 

Adding a Blog Post

If your site features a blog, you will want to go to your dashboard and click “Posts” in the left panel. Click “Add New” at the top. Add a title and the blog text below it. In the right sidebar, you can add a new category or check off existing ones that are relevant. This keeps certain blog posts together that coordinate so viewers can sort through your posts easily. Click “Set Featured Image” below that to set an image for your post. Click Publish at the top to save.

 

Changing/Adding Videos

Hover over the video section to click the gear in the gray panel, same as the photos. You will see a list of tabs called “new video”. Click the gear icon within each tab to change the video. Upload a URL. You can simply paste a YouTube URL in this section. Click the green check mark button to save and go back. To add a new video file, you will click the gray plus sign button beneath the “new video” tabs. Add the videos the same way you changed the previous ones. Click the check mark to go back, and again to save and exit the window.

 

Changing/Adding MP3 Clips

Hover over the MP3 box to click the gear icon in the gray panel. Click the Audio tab (under the Text tab). Click upload. Click Upload Files in the top left of the window. There, you can select your mp3 file. Click save. Click the green check mark to save and exit. 




Share This Blog Entry



Discussions and Blog Talk




Back to Blog