We’ve designed your webpages incorporating the incredible Themify software we’re under license to use. The reason for this is simple. Now you can edit your pages (and indeed, create your own) going forward independent of us. For simple information pages, we may just use the normal WordPress Visual Editor. (If you’re new to WordPress, please first see our tutorial on How to Master WordPress.) However, for creating custom pages, we use the Themify Drag & Drop Builder.
This is a page for you to learn and experiment on, using the Themify Builder. You can make a real mess of it, and that’s okay. This page is not seen by site visitors and it is not indexed by search engines.
There’s probably just one rule. Have fun!
Are You Ready?
Familiarise yourself with the steps below, and then check the settings I’ve used to create this page for you. Finally, go wild. Mess it up. Do your own thing.
Step 1 – Logged into WordPress, turn on the Builder.
Simply click Turn On Builder in the top-bar and the Themify Builder will appear.
Do it now so that you can see how this page is arranged.
Step 2 – Plan In Row Segments, Work In Modules.
The grey Row Segments determine the settings for all the blue Modules within it.
(PS. In the new Themify interface, the Row segments are purple.)
In other words, sort of like, “think global, work local”.
With the Builder turned on, hover over this page to distinguish between the grey row segments and blue modules.
Plan how many Row Segments you may need, and drag in as many Modules as need to make your plan work.
The most important Row Segment settings will be discussed in Step 3.
Modules can be Text modules, Image modules, Slider modules, Button modules, and so on. Experiment with these modules to get a feel for what is possible.
You’ll see we’ve used Text and Image modules on this page.
Step 3 – Row Segments determine page width and height.
The most important settings in the Row Segment determine the width and height of the viewing page.
The first setting that affects these dimensions actually appears in the back-end of the page. In the Themify Custom Panel, the Content Width can either be set as Default or Fullwidth.
Default provides the standard viewing width (technically 1160px) but you can think of it as the width of an A4 page on desktop devices. (It will respond accordingly to the width of tablet and mobile devices.)
Fullwidth extends the page to the full width of a desktop device. (The smaller the device, the more the two widths harmonise. In other words, on mobile, Default and Fullwidth are the same.)
Incidentally, this page is set to fullwidth.
Okay, now let’s have a look at the most important Row Segment settings. You will notice that you can do the following:
Export and Import, Copy and Paste, Edit and Style, and Duplicate and Delete.
All these are useful, but the one you’ll utilise most is the Edit tool. Click on the Pencil icon.
Here you can determine the Row Segment’s width and height. It will affect all the Modules within it.
In the Styling tab, you can configure other settings like a background image or colour, the padding that you’re looking for (top, bottom, left or right), borders, and more. You can also hide a Row Segment on different devices via Visibility and add Animation too.
Experiment with the options here to see what is possible.
Yep! Don’t be scared to try anything you want on this test page. Rather make a mess here than on a page we’ve designed for you.
Step 4 – Use the Module Settings for Specific Customisation.
Once you’ve determined the width and height of a Row Segment, use a Module’s settings to set the specific customisation you want.
While you may set a background colour or configure the padding in the Row Segment, generally speaking, you’ll use the Module itself to do the rest.
Two quick points here are worth making.
- Don’t double-up on settings. If you want to change the font size, for example, in a Text Module, don’t set it in both the Row Segment and Module. Choose one to avoid extraneous requests and conflicts occurring.
- When setting the padding (in either the Row Segment or Module), use pixels (px) for top and bottom padding, and percentages (%) for left and right padding. This will ensure that the tablet and mobile version come out well too. (Although you should still check using the responsive styling buttons in the Builder.)
Generally speaking, use the following:
• Top padding: anywhere between 30px and 50px
• Bottom padding: half the number you choose for top padding.
• Left and Right padding: anywhere between 2% and 10% depending on what you’re aiming for.
Have a look at the settings I’ve used in the Row Segments and Modules, and then experiment with your own.
Remember to SAVE your Modules and to press the orange SAVE button in the Themify Builder itself to ensure your hard work is not lost.