What is WordPress?

WordPress is a free, third-party management system for creating, building, and maintaining a website. Often chosen for its ease of use and approachability, WordPress allows those without computer programming background to easily create and manage websites, whether for personal or business use.

Hosting

Hosting is what makes your website accessible on the internet: it allows you to store your website on a server and makes it public. Check out this video to learn more about hosting.

The Dashboard

This is the WordPress Dashboard:

It contains all the navigation for your website, including pages, blog posts, media, links, and more. The pages section contains all of the different pages on your website. Below the Dashboard title you can see the tab “Avada”, a type of page builder. Check out this video to learn more about the WordPress Dashboard.

Customizing Your Website

Page Builders

Page builders are extensions for WordPress that allow a user to easily create and edit a page’s layout. Popular ones include Elementor, Divi Builder, and Thrive Architect. For today’s article, we will use Avada. If you would like to download Avada to follow along, use this link to go to their website.

Check out this blog to learn more about the different page builders.

Adding Pages

On WordPress, you can view all of your pages in the “Pages” tab, located on the lefthand side:

Every page that you post to your website can be found here. You can access, edit, and sort through them from this menu.

To add a page, click the “Add New Page” button just below the Pages tab. Here you will have your new, blank page:

Note: The title you give your page will not appear in the content of the page. It will appear in the name of the tab with your page open and in the URL of the page.

As seen above, there are two blue buttons that control the content and function of the page. The Back-end builder focuses on more complex details about the page. If you’re wanting an in-depth review of Avada, check out this video.

The Live builder will take you to a preview of the website page, where you can edit the content. Here is what the live builder looks like in Avada:

Now, let’s look at how to add content.

Adding Content

First, Avada prompts you to add a container. A container is used to position and divide up the page content: if you wanted to have two columns of text, you would have two containers. Avada provides a variety of containers to choose from. Consider what you want your web page to look like, and choose what best fits you. For this tutorial, we will use the 1/1 container, or the default page container:

By right-clicking the container, you are able to edit, remove, clone, and perform other operations on the container.

To add content, click the blue plus button. Avada provides a large variety of elements to choose from, ranging from code blocks to YouTube videos. Let’s add a textbox:

Our textbox has been added to the page. Shift your attention to the left-hand side, where customization tools for the element have appeared. You are able to add media embedded in the text as well.

Note: If you are familiar with CSS, there are options at the bottom of the left hand menu to add CSS class wrappers and CSS ID wrappers.

By hovering over the center of the element, you can see options to edit the properties of the textbox, such as clone, edit, delete, and more:

You can edit the title and header of the page by hovering over the middle of the element as well.

Example: Object Oriented Programming Article

Let’s look at a step by step example together. For this example, we will be using the Object Oriented Programming blog located here. We will start after the page is created, in the Live Builder menu.

Changing the Title

Our title for the article is: Understanding the Core Principles of Object Oriented Programming. Let’s edit the title bar to change it.

1. Click “Edit Global Page Titlebar”

2. Scroll down in the left-hand menu and paste the title in the “Page Title Bar Heading Custom Text”

3. See the title update in real time on the web page.

Adding a Header

For every header, body, or different section of text, we’ll need a textbox. Let’s go through the process of adding a textbox for a header and customizing it:

1. We’ll first select the text box element from the menu.

2. Then, we’ll add in the text:

3. Then, we will select the “paragraph” dropdown and change it to Heading 2.

For our purposes, we’ll use the built-in text formatting for our headers. However, for this article, I want to change the color to blue. Simply select the text you want to change the color of, hover over it, and click “Font Color”.

Here’s the result:

Adding a Hyperlink

Now, let’s paste our body paragraph:

I want to add a link to direct the reader to read our Java programming tutorial.

1. Hover over the desired text, and select “Link Options”.

2. Next, choose Select Links:

3. Paste your link and hit “Set Link”.

For our purposes, we’ll select “Open in a new tab” so we can redirect the user to the other website.

Here’s our current product:

Adding Images

Adding images in the LiveBuilder follows a similar process:

1. Add an image element

2. Select the blue plus sign to open the media

3. Add your desired image(s)

Look at the finished product here.

Publishing Your Page

Click the Save button in the top right corner. Head back to the WordPress dashboard and find the page you want to publish. On the right side of your screen, there should be a publish section. Click the Publish, or Update button to send it to the web!

Summary & Further Resources

WordPress is a powerful tool for creating and hosting your very own website. Page Building tools allow us to easily customize and build our websites from scratch, allowing simple drag and drop as well as programming.

More articles from us on WordPress:

Click here to see all our blogs on WordPress!