Using WordPress
with Divi Theme
Wikistra MT, Nov 06 2019
1
Contents
Logging into WordPress 3
Your Dashboard 3
Pages & Posts 4
Editing a page 4
Adding a new page 5
Editing a post 6
Adding a new post 7
Uploading Files to the Media Library 8
Allowed File Types 8
Uploading Guidelines 8
Adding Files from the Media Library to a Page/Post 9
Introduction Divi Builder 9
Overview of the PageBuilder 9
The Basics 11
Get Started: Design Using Divi Builder 11
The Basic Modules 13
Edit Your Page Design 14
Example : Advance Modules Editing 17
More Information 19
Resources 21
Contact Us 21
2
Logging into WordPress
Log into WordPress
Your log-in page will usually be the site URL
followed
by /wp-admin.
For example:
http:// [Link]
Type in your user name and password
Click Log In
Your Dashboard
This is where you can administer the
content of your site.
Various content you can use are pages,
media, posts
3
Pages & Posts
Editing a page
Click on the Pages link from the Dashboard.
A list of all your current pages will appear.
Hover your mouse over one of the
page titles
Click Edit to edit page
Click Quick Edit to quickly edit the
title, link or template page
4
Adding a new page
From the menu, click
Add New.
Add title to make yours page title, example “Contact Us”
Add yours content to textarea if you want to use default page content
Click Publish to publish page
5
Editing a post
Click on the Posts link on the dashboard menu.
A list of your current posts will load.
Click on the title of the post you would like to edit.
The Edit post page will appear.
Make the changes you would like, and click Update to
publish your changes.
6
Adding a new post
To add a new post, click on the Add New button from the
Posts page.
The Add New Post page will appear.
Posts have a variety of options to choose from. Format:
Video, Audio, Quote, Gallery, Link
The Format option allows the post to be displayed in
different ways depending on the format selected, to find
out more about Post Formats go to page 12.
Tags: Add tags to keyword your posts (You can create your
own, or use what is already available.)
Categories: Use categories to set a post in a set category, ie
“News”, “Video”, “Lectures“. (You can create your own, or
use what is already available.)
7
Set Featured Image: Use an image to
display in the post.
Uploading Files to the Media Library
Uploading Guidelines
On the dashboard select Media then Add
New.
Drag and drop files from your computer
into the Upload Files page.
Or click on Add new and select your files using the dialogue.
Once something is upload a new modal will appear showing the file info including
the URL. Use this URL whenever you want to link to this file.
Allowed File Types: Picture (jpg, png, gif), Movie (mov, mpg, avi, 3gp), Documents
(pdf, doc, xls, ppt, docx, pptx, xlsx), Sound (mp3, ogg, wma, m4a, wav)
8
Adding Files from the Media Library
to a Page/Post
When working on a page or post, it is possible to
upload new files or add already uploaded files to
the post/page.
Click on Add Media located just above the Text
Input area. On the modal window that pops up,
select a file from your media library, or click the
Upload Files tab to add files from your computer.
Once you select a file,
choose how the file is
attached to the page/post
and click Insert into Page.
Introduction Divi Builder
Overview of the PageBuilder
The Divi Builder comes in two forms: The standard “Back-end Builder” and the
front-end “Visual Builder.”
Both interfaces allow you to build exactly the same types of websites with the
same content elements and design settings. The only difference is the interface.
The Back-end Builder lives inside of the WordPress Dashboard and it can be
accessed along with all of the other standard WordPress settings.
It sits inside the WordPress UI and replaces the standard WordPress post editor. It’s
great for making quick changes while you are inside the dashboard, but it’s also
9
confined by the dashboard and is rendered as a block-based representation of your
website. This tutorial will be focusing only on the visual builder.
Read Full Documentations:
[Link]
Every page that has the "Divi" label
must be edited with the Divi Builder.
Pages without the "Divi"
label can only create
standard designs / layouts
of text and images
10
Get Started: Design Using Divi Builder
In Page Menu, click Add new
Add your title page
Click Publish to publish page
After page publishe
Clik Use Divi Builder
After you publish your page WordPress a pup-up chose, Start build if you want
design page from scratch. Browse layout if you want to use template layout.
11
Click Build On The Front End to use live builder.
You can design a page easily and can directly view changes in each of its elements
12
The Basic Modules
Sections
Rows
Modules
MOdules are part of the elements/
objects design.
You can add elements like “Image” or
Video or Whatever you need
When you hover over an element, you
will see a plus icon. Click to add a
module and click a module
13
X icon to close module editor
Circle to Undo and Redo changes
Checklist icon to save module changes
Edit Your Page Design
If you want change or page design template, you can edit content.
Example:
Click view on one of the pages (use CTRL + click) to open in new page
14
Click Enable Visual Builder in header to edit page design
Hover your mouse over each design element
Click Gear icon to setting element
15
Change conten (text)
Tab Module Settings (Text Settings):
Content: settings content categories
Design: settings designs categories
Advance: advances settings
Use Content Settings Tab
Change text, background,
link, etc
Use Design Settings Tab
To change text color, margin &
padding element, spacing, etc
16
Clikc Save if you finish edit your content
Example : Advance Modules Editing
If you want change background a row
Hover mouse to row (row can have more than one column)
17
Click tab Content choose accordion
Backgoround
Click Tab Image Icon
Click image
Once you press the Image icon, a
pop-up will be display to choose the
image
Below row use 2 columns
18
Change button text and button link
More Information
Remove Maintenance Homepage
Click menu Settings > Reading
Choose Home page you want
Unchecklist “Discourage search
engines from indexing this site” if
you want Google/ Search Enginees to
index your web
Click Save Changes
19
See Yours Email From Contact Form
Click menu Contact Forms
Click one of the contact forms
Update Plugins
Update yours plugins to patch
security
Click menu Plugins
Clik update if you look new
update found
Click Delete to delete your
plugins that you don't use
20
Resources
For More advance Divi Builder editing
[Link]
Contact Us
Wikistra MT - Indonesia
21
