Once we’ve finished building your website, the main pages of your site will be designed according to your satisfaction. However, you may well want to make changes down the track and you may want to create your own secondary pages, too.
This post will guide you in how to make edits using Themify’s fantastic Drag & Drop Builder, which we install in all our Classic and Premier Themes.
Making Changes Using Builder
While some of your WordPress pages may be designed with the typical back-end WordPress Visual Editor (which you became familiar with in learning to master WordPress), the Themify Builder offers far more functionality and allows you to work on the front-end of your site. (Yes, you can work on both the front-end and the back-end with the Themify Builder.)
It will serve you well to create a test page on your site and explore the potential of this tool, but to make simple edits using the Themify Builder, follow these steps:
Having logged in, activate the Themify Builder by clicking on Themify Builder → Turn on Builder in the topbar:
The Drag & Drop Builder will appear at the bottom of your screen:
In the new Themify framework, the Builder will appear as a column in the left sidebar like this:
Hovering your mouse over the page will highlight (1) ROW SEGMENTS (grey bar) and (2) MODULE CONTAINERS (blue boxes).
Blue Module Containers (for Text, Images, Galleries, etc.) are positioned within the grey Row Segments.
To make simple edits to an existing page, select the pencil (edit) icon on the (blue) Module Container.
Selecting the edit icon on a Module Container, will open the module:
This is a Text Module. You will notice that it is the same layout as the WordPress Visual Editor. You can enlarge the module (using the little arrow on the bottom right-hand corner), you can move the module around the screen to improve your view of the text you’re editing, and you can preview the changes you’ve made. Once you’re done, select SAVE.
If you have a very busy module (especially a gallery or slider module with many images), the save process may take between 3-5 seconds. Make sure you not only wait for (1) the confirmation tick (see below) but also wait for (2) the blue highlight of the module you’ve just edited to disappear. This can take another couple of seconds after the tick itself disappears. If you rush on to Step 4, you may lose some of your work.
Before editing a busy module, first click on the copy icon. In the event that you lose the module, you can then select paste to retrieve it. Of course, working in the Themify Builder back-end is far more reliable, so you may want to make bigger edits in the back-end.
Once you’ve saved the module, it will close. And you’ll be back at Step 1. Up until this point, your changes have NOT been applied “live” yet. If you make a mistake, you can still select UNDO and make changes:
To apply your changes live, select SAVE again. Wait for the tick confirmation. Voila! You’re done.
In the new Themify framework, the SAVE button appears in the page’s topbar.
On bigger sites, we add a caching plugin to improve speed and performance. In order to affect front-end edits immediately, you’ll have to go to the back-end editor (select Edit Post in the WordPress Toolbar) and click “Update”. This will flush the cache and affect changes immediately. Otherwise, your edits will only take affect when the cache flushes according to the prescribed settings.
See Themify’s video on the Drop & Drag Builder here.