What is a Theme?
The theme is a collection of templates and style guides that defines the appearance of your website. Each team comes with a different design, layout, and features. All the newly created websites come with the default theme, which you can change based on your taste and requirements of your website.
How to choose a WordPress theme?
How to change Theme?
In the Dashboard, go to Appearance → Themes.
The first theme in the list is the one you are currently using. You can click the Customize button to edit the theme.
You can browse through the collection of themes to select another theme you want to use.
Image of the Themes window in the Dashboard
Hover the cursor over the theme you are interested in and click Theme Details to see more details about the theme.
Click the Live Preview button to see how your website will look like with a specific theme.
After you selected a theme click Activate button.
How to customize my theme?
1. In the Dashboard Navigation, go to Appearance and select Customize from the drop-down menu.
Image of the Dashboard navigation fragment with Customize option
2. On the page that opens, you can modify your theme in real time. On the left you will see a list of the available options and on the right a live preview of your site and how those changes will affect it.
Image of the Customization window in the Twenty Nineteen theme.
Site Identity allows you to change the site title and a tagline.
Colors - you can change the color of some of the elements on your website, depending on the theme you are using.
Menus - allows you to create the new menu as well as assign different menus to different menu locations. For example, the Twenty Nineteen theme has three menu locations - primary, footer menu, social links menu.
Widgets - allows you to add different widgets (such as calendar, recent post, categories, tag cloud, etc.) to footer or sidebar.
Homepage Settings - here you can change what your homepage displays - a static page or a posts page.
3. While you customizing your website, you can see preview the changes in a real time. After you finish making edits, press the Publish button on the top of the customization pane to save the changes and update your theme.
The number of customization options depends on the theme you choose, different themes have different customization options. For example, the Twenty Nineteen theme, which is installed by default when the new website is created, has 5 main customization options - Site Identity, Colors, Menus, Widgets, Homepage Settings. Another theme - Divi, has twice as many customization options.
Image of the Customization window in the Divi theme
What are plugins and widgets?
Plugins and widgets help you to better customize your website and add necessary functions.
Plugins are extensions or programs which add extra functionality or improve performance of your website. UO Blogs has a limited number of approved plugins which can be used on the websites created through UO Blogs. Plugins must be installed and activated in order to be used on a website. Some of the plugins run in the background and others are visible on the website.
Widgets allow you to add and display content in so-called widget areas (usually sidebars and footer) to enhance usability and structure of your website. Some example of widgets include Archive, Calendar, Recent Posts, Search, etc.
How to add a plugin?
To add a plugin go to the Dashboard navigation and select Plugins. In the Plugins window you can search plugins by filtering them by categories in the search bar ( Appearance, Education, Forms & Surveys, Media, etc) or viewing all available plugins.
Click the Activate button to install the plugin. Make sure you read the Documentation about the plugin which is available by clicking on the Documentation action link bellow the Activate button.
Image of the Plugins window
How to add a widget?
1. Go the the Dashboard Navigation. Click on Appearance and select Widgets.
In the Widgets window, the available widgets are listed on the left side. On the right side, there are the different widget areas where the widgets can be placed. The number and type of widget areas depend on the theme you are using. For example, the Divi theme has a Sidebar widget area and six Footer widget areas. The Twenty Nineteen theme has only one widget area in the Footer.
Image of the Widgets window
2. Select the widget you want to use from the list. A short description of the widget is available below each widget. Click on the triangle sign on the right side of the widget's name to display the widget areas where the selected widget can be added. Click on the on the widget area (for example, the Footer Area #1) and click Add Widget.
You can also drag the widget and drop it in the widget area on the right.
Image of the Widgets window with highlighted Archives widget
3. After you click the Add widget button the widget will be placed in the widget area on the right. Each widget has different configuration options, which you can edit. Click Save to save the widget and display it on the website.
Image of the Widgets window with highlighted Archives widget in the Footer Area #1
Selected Documentation
What is the Divi Theme?
Divi is a WordPress theme, which includes drag & drop page builder. It allows you to build just about any type of website due to its various customization options, numerous layouts, website elements, as well as complete control over colors and fonts. No coding or design knowledge is necessary.
The Divi theme comes with detailed documentation, including videos, on every aspect of using Divi.
Divi's drag & drop page 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 type of website with the same content and design. The only difference is the interface.
The Back-end Builder lives in the WordPress Dashboard and replaces the standard post or page editor. The Visual Builder allows you to build your website on the front end, enabling you to instantly see any changes you made. You can switch between two builders at any time.
Image of the Divi's Back-end Builder by Elegant Themes
Image of the Divi's Visual Builder by Elegant Themes
How to start working with the Divi Theme?
First, you need to install the Divi Theme to your website. The Divi theme can be installed like any other WordPress theme.
1. In your Dashboard go to Appearance → Themes.
2. In the window which displays all the available WordPress themes browse for the Divi theme. You can use the Search Bar on the upper top corner to find the theme.
3. When you found the Divi theme, hover over your cursor over the Divi theme and press the Activate button.
Image of the Themes window with Selected Divi theme
4. After you installed the Divi Theme, you can use Divi's drag & drop builder.
How to start using the Divi's drag & drop builder?
1. Start by creating a new page or a new post. In the Dashboard click on Pages → Add New or Posts → Add New, depending on what you want to build.
2. In the Add New Post (or Add New Page) window, under the Title field, you should see the Use the Divi Builder button.
Image of the Add New Post window with highlighted Use the Divi Builder button
3. When you press the Use the Divi Builder button, the three different options on how you can use the Divi Builder will appear.
Build From Scratch – “Build your page from the ground up. Don’t worry, you can access our premade layouts at any time”
Choose a premade layout – “Choose from hundreds of world-class premade layouts or start from any of your existing saved layouts”
Clone existing page – “Jumpstart your layout design by duplicating another page that you’ve already built”
Build From Scratch
After you select the Build From Scratch option, you will be redirected to the back-end Divi Builder, which enables you to build the website, using different elements as building blocks.
Under the Title field, there will be two buttons - Return to the Standard Editor, which allows you to exit the Divi Builder and return to the previous WordPress configuration, and Build on the Front End button, which allows you to use the Divi Visual Builder to build a website on the front end.
Image of the back-end Divi Builder
If you decide you want to use one of the Divi's pre-made layouts, you can access the Divi Layout Library by pressing plus sign on the top left side of the Divi Builder panel.
Choose a Premade Layout
If you select an option "Choose a premade layout" you will be redirected to the Layout Library, which consists of 150+ premade layouts. On the left hand, you will see Categories pane which allows you to filter the layouts based on the category (e.g. Art & Design, Community & Non-profit, Education).
Image of the Divi's layout library
Click on the layout to view more details about it. In the pop-up window, you will see the short description of the layout and the layouts of different pages which are included in the selected layout pack.
Click View Live Demo to preview how the layout will look like.
Click Use This Layout to start making changes for your own website.
Image of the Layout Details pop-up window
After you click Use This Layout you will be redirected to the back-end Divi Builder, where you can start making changes. By clicking on the Build On the Front End button you can switch to Divi Visual Builder to create the website on the frond end.
Image of the back-end Divi Builder
Structure of the Divi Builder
The Divi Builder uses three main building blocks: Sections, Rows and Modules.
There are three main types of building blocks in the Divi Builder: Sections, Rows and Modules. You can create countless versions of page layouts by using the variations of those building blocks.
Image of the Divi main building blocks by Craig Longmuir on Divi Theme Examples
Sections are the biggest blocks and are used to create large groups of content, they are the first thing you add to your page. Sections host groups of rows.
Rows are designed to host modules. There are many different column types for the rows and once you choose the column type you can then place different modules into specific columns.
Modules are the smallest building blocks and are designed to host your content. As for now, there are 46 different Divi modules (e.g. audio, contact form, gallery, post slider, full width menu, map, social media follow). Once you have added a module into the Divi builder you can customize it with your own content and style it within the module settings.
Web accessibility checklist
1501 Kincaid Street
Eugene, OR 97403
P: 541-346-3053
F: 541-346-3485