- Our Story
- Our Services
- Our Work
- Mailing List
- Business Types
- Industries Served
- Free Resources
How to Use a WordPress Site Designed with Divi 3.0
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.
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.
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.
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 round 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.
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” 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.
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.
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.