HOW TO MASTER
THEMIFY
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.
[themify_icon icon="fa-mortar-board" style="large"]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
Hover over the the green plus [themify_icon icon="ti-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
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 the previous tutorial on Mastering WordPress.
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
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.
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
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
Screenshot #6
Image Modules
Similarly with Image Modules...
Screenshot #7
Screenshot #8
Okay, enough already! Go play!
Logged into this Dummy Site, head to the Pages Dashboard where you'll find a page with your name.
Click the "View" button to open the page on the front-end ... and have fun!
You may also want to check the tutorials on Choosing a Password, Creating a Gravatar and Creating a Blog if you haven't done so already.