divi themedivi builder, and then load them on different posts or pages. additionally, divi comes...

11
Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017 Page 1 Divi Theme The Divi theme is a very powerful, highly customizable theme for WordPress. To activate the theme on your WordPress site, go to the Dashboard of your site. From there, go to Appearance > Themes and select Divi. The Divi Builder The Divi theme comes with a page builder that can be used for posts, pages, and projects. This builder makes it very easy to make pages exactly the way you want them to look. To start using the Divi Builder, go to the page or post you’d like to edit or create and select Use The Divi Builder. The Divi Builder will then replace the area where you’d normally input text. Sections, Rows, and Columns The Divi Builder organizes content into sections. Inside each section of your post, you can have any number of rows, and you can then separate those rows into many different combinations of columns of varying sizes. You can add sections by selecting Standard Section or Fullwidth Section. To add rows, select Add Row, and to add columns, select Insert Column(s) and then choose a division of columns from the pop-up window.

Upload: others

Post on 08-Aug-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 1

Divi Theme The Divi theme is a very powerful, highly customizable theme for WordPress. To activate the theme on your WordPress site, go to the Dashboard of your site. From there, go to Appearance > Themes and select Divi.

The Divi Builder

The Divi theme comes with a page builder that can be used for posts, pages, and projects. This builder makes it very easy to make pages exactly the way you want them to look. To start using the Divi Builder, go to the page or post you’d like to edit or create and select Use The Divi Builder. The Divi Builder will then replace the area where you’d normally input text.

Sections, Rows, and Columns The Divi Builder organizes content into sections. Inside each section of your post, you can have any number of rows, and you can then separate those rows into many different combinations of columns of varying sizes. You can add sections by selecting Standard Section or Fullwidth Section. To add rows, select Add Row, and to add columns, select Insert Column(s) and then choose a division of columns from the pop-up window.

Page 2: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 2

Page 3: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 3

Modules

In Divi, modules are what actually hold the content that you want displayed on your post. Inside of each column that you made, there will be an option to Insert Module(s).

Page 4: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 4

Clicking on that option will create a pop-up windows in which you can select which module you would like. There are many different types of modules you can add: images, videos, text, and anything else you could need for creating your own site.

Page 5: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 5

For a full list of modules and what they do, visit: http://www.elegantthemes.com/gallery/divi/documentation/ and scroll down to the section titled The Divi Modules. Portfolios and Projects Out of these modules, there is a special type called a Portfolio. A Portfolio is a way to organize a number of special post types called Projects. To add a project, from the dashboard, select Projects > Add New.

Next, give your project a title and featured image. You can then put in the content of the project, either using WordPress’s default editor, or the Divi Builder. Select Publish. Now go to a page that you want to include a portfolio of those projects and add a portfolio module.

Page 6: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 6

When a portfolio is selected, you are given the chance to change a few settings about the portfolio, such as whether to make it a Fullwidth posts page, or a Grid-based post page. You can also limit the posts number and choose whether to only show projects of a certain category (or categories).

Below is an example of the grid-based portfolio page with four separate projects.

Page 7: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 7

Libraries The Divi theme also has a convenient feature where users can save layouts that you created using the Divi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking pages. Divi Theme Customizer Divi has added a few new features to the WordPress customizer. The customizer can be accessed either from Appearance > Customize or Divi > Theme Customizer. Most of the settings here are for changing small details like text size or color or the general layout of certain pages.

Besides those settings, two main things to take note of here; the first being under Header & Navigation > Primary Menu Bar, you are given the option to Hide Logo Image, which removes the Divi logo at the top of the screen, and shown below.

Page 8: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 8

The second is under Mobile Styles, you can customize how your website is viewed from mobile devices such as a tablet or phone.

Page 9: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 9

Divi Theme Options Sometimes it is necessary to change some of Divi’s default options to get the site looking the way you want it to. To do this, from the dashboard go to Divi > Theme Options. You will then be brought to a page that is titled epanel and you can adjust various parameters here. In General Settings, you can replace the default Divi logo by uploading a different image in Logo.

Page 10: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 10

Also, in Navigation, you can choose which links to display in the menu at the top of your screen by selecting them.

The other settings are for small changes to the website, so it is recommended that you change them only if you are sure you know what they do.

Page 11: Divi ThemeDivi Builder, and then load them on different posts or pages. Additionally, Divi comes with a few pre-loaded layouts that you can use to quickly create professional-looking

Academic Technologies | Library 222 | http://www.skidmore.edu/academic-technologies/ Author: Neale Donovan Class of 2017

Page 11

Role Editor Divi has added a Role Editor to the theme, which can be accessed from Divi > Role Editor. On this page, you can choose which user roles (Administrator, Editor, Author, and Contributor) have certain permissions. For example, you can make it so Editors can or cannot change the color settings, or something similar, on the site.