January 12, 2018

Posted by: Lauren Carhart

Categories:

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 very user-friendly 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'll type in your full website address and add /wp-admin at the end. 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, the admin area, or the dashboard of the website. This is where you will go to make technical changes, but most 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. If there are any updates available, the "Updates" area will usually have a red notification on it to alert you of how many are available. We recommend checking this weekly.

 

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 tool panel accessible. Navigate to the page you want to edit, and click the option in the top panel 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 (MP4 Uploads)

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 the MP4 file. 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 Videos (Embedded from YouTube)

In a separate browser tab, open up the YouTube video you want to embed. Click "share" below the video. Then click. A long piece of code will appear to the right of the video. Copy that code and navigate back to your website. If you want to change a video that's already on your site, hover over the video and click the gear icon in the gray panel. You will see a long piece of code and will erase it and paste the code you just copied. Click the green checkmark to save. If you want to add a new video, hover over the area and click a gray + sign that appears. A list of modules will appear. Click "Code". When the code box pops up, paste the code that you copied from YouTube. Click the green check mark to save.

 

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. 

 

Updating a Number Counter

Hover over the number counter you want to change and click the gear icon in the gray panel. Simply erase the number that is there under "Number" and type the new number. Click the green check mark to save and exit.

 

Adding/Editing Testimonials Using Strong Testimonials Plugin

If you have the Strong Testimonials plugin installed, this area is for you. In the dashboard, click "testimonials" in the left panel. You will then see a list of your testimonials. To edit one, click on the title. In the new window that appears, you can change the title and the body text. When you're finished, click the blue "update" button to the right of the page. To add a new testimonial, click the "add new" button at the top of the page. Type in your title at the top and type the body text in the larger area below the title. Click the blue "publish" button to the right of the page. 

 

Updating a Form Using CaptainForm Plugin

Editing form fields

If you have the CaptainForm plugin, you will need to edit this form in the backend. In the dashboard, click "CaptainForm" in the left panel. You will then see a list of your forms if you have more than one. To edit a form, click on the title of the form. Your form will appear. You will notice the fields turn blue when you hover your mouse over them. To edit one, hover until the field is blue and then click on it. Options will appear to the left of the form. Here, you can change the label/name of the field, change whether or not the field is required, and if there are dropdowns or multiple choices in your field, you can edit those as well. CaptainForm saves automatically every few seconds so you don't have to worry about click a save button.

How to access your database of form entries

If you want to access the database of form entries, head to the CaptainForm plugin in the left panel on the dashboard. To expand the options for your form, click on the right-pointing arrow all the way to the right hand side of your form bar. It is located next to the trash can icon. When clicking this arrow, the arrow will toggle to a downward position and open additional tools below the form bar. Click on "submissions". Here, you will see all submissions that have been submitted through this particular form. You can use the search bar at the top to find a specific submission and you can also export the entire list into a CV spreadsheet file by clicking the dropdown to the right of the page that says "export to".

Adding or changing an email address recipient

To change the email address that receives form notifications, click CaptainForm in the left panel of your dashboard. Click on the title of your form. Click on "2 Settings" at the top of the page towards the right. This will open a dropdown menu. Click "notifications". Towards the top of the page, you will see "Email Notifications" followed by "Recipients". Below, you will see the email(s) that are currently receiving notifications for this particular form. To change an email address, hover over the email until you see an orange button with a pencil icon that says "edit". Click the button. A dialog window will appear where you can change the email address. Click the teal "save notification" button to close the box. Then click the teal "save changes" button at the top right of the screen to save all changes. To add an additional email address, click the yellow "new recipient" button. Type the email address in the blank field in the dialog box that appears. Click the teal "save notification" button to close the box. Then click the teal "save changes" button at the top right of the screen to save all changes.

Tell us what you think!