Skip to content


Mr Bubbles from SEO WEB Designs.

Hey Again!

Okay, first let’s answer a question. Why do we need Themify?

WordPress is a great Content Management System and at its heart, it is a blogging platform: very strong on content and the best in the business for SEO. But, by itself, it’s a little limited in terms of design and customisation.

So, we have two options. On the one hand, we could do some major coding to take WordPress to the next level in design. However, this isn’t a user-friendly option for most people, as it would require learning how to write and edit code.

On the other hand, we could use Themify—software that integrates into WordPress to extend its design functionality. With Themify’s ingenious Drag & Drop Builder, very little coding is needed. (Some coding is needed at a global site-wide level but not at a local Page or Post level.)

It goes without saying that Themify enables anyone to extend WordPress’s functionality, and it’s therefore the obvious choice between the two options.

This tutorial is best viewed on a desktop or tablet.

Hello Themify!

Logged into the website, you’ll find the Themify Builder just below the Page and Post Editor in a section entitled “Themify Custom Panel”.

Screenshot #1

Mastering WordPress tutorial.

Hover over the the green plus  button in the top of the left hand sidebar and you’ll see all the modules available to drag & drop into the Builder.

Screenshot #2

Mastering WordPress tutorial.

You can work in the back-end as usual but that’s so last tutorial.

The great news is that with the Themify Builder, you can now work on the front-end … and see your changes in real time.

Front-End Editing: Yay!

You may recall that we introduced you to two important terms in a previous tutorial on Mastering WordPress & Themify.

The front-end and the back-end, recall?

Yep, the front-end is that which is publicly visible to viewers. The shiny, pretty version. And yep, the site’s back-end is that which is only visible to you. Your WordPress Dashboard.

Well, those words are going to take on new meaning with Themify. Why? Because you can edit or create content on both the back-end and the front-end of your site.

Yes, with the default WordPress Editor you’ve seen up until now, only working on the back-end was possible. With Themify, you can work on the front-end and see the edits you make in real time.

Excited? I can feel it from here.

Okay, so let’s introduce you to the Themify Builder using the front-end display.

Screenshot #3

Mastering WordPress tutorial.

Wowsers! Yep, that looks all sorts of complicated … but hang in there. I’ll show you what you need to know. (You’ll learn the rest over time.)

Rows, Columns & Modules

The “big concept” to catch when using the Themify Builder is the difference between the three building components:

Rows, Columns & Modules

Let’s consider each in turn…

1 = (Purple) Row Segments

The purple row segments are the foundational “building blocks” of the webpage. The settings selected at a row level govern all the columns and modules dragged into the row.

2 = (Orange) Columns

The orange columns help to style each column, a little like adding an extra coat of paint when necessary. This the component you’ll use least.

3 = (Blue) Modules

There are a a number of blue modules available, things like Text Modules and Image Modules. These are the “bricks”, and they are dragged into the rows/columns to build each row as required.

WordPress, Themify Rows, Columns & Modules

The best way to actually grasp this is to open the Themify Builder and take note of the three building components for yourself.

So, in a moment, I’ll invite you to go to the Pages dashboard in the back-end of this site. You’ll find a page with your name. This is your test page. In time, you can create others but this will be a place to start your experimenting.

That excitement is building, isn’t it?

I am, however, going to ask you to curb the eagerness a little while longer. Complete the rest of this tutorial before diving in.

Using the Themify Builder

Since most of the pages on the Encounter Youth website are already built (or are built by Administrators on the site), the most important thing you’ll need to learn now is this: adding content and images to an existing page or to our pre-designed Blog Template.

As we’ll discuss blogging in the next tutorial, let’s just point out a few quick steps on using the Themify Builder.

Step 1: Turn on the Builder

The first step is simple.

Turn on the builder either in the toolbar or in the content link as indicated below.

Easy as.

Screenshot #4

Mastering WordPress tutorial.

Step 2: Edit the Relevant Module

As the row and columns will typically be set up already, you’ll generally be adding content into Text Modules and images into Image Modules.

It’s as easy as clicking on the relevant Module.

Text Modules

Clicking on a Text Module will open the default WordPress Editor in a lightbox as shown below…

Screenshot #5

Mastering Themify tutorial.
Click the pencil icon or simply click anywhere on the blue module and…

Screenshot #6

Mastering Themify tutorial.
…the WordPress Editor opens for you in a lightbox. Happy editing!

Image Modules

Similarly with Image Modules…

Screenshot #7

Mastering Themify tutorial.
Click anywhere on the blue Image Module…

Screenshot #8

Mastering Themify tutorial.
…and viola! This lightbox opens in which you can upload a new image.

Okay, enough already! Your turn. Go play!

Or check out these following helpful links:

Master WordPress & Themify

Touchstone FAQs