TF Page Builder Quick Guide

With TF Page Builder, you can quickly build website pages in Joomla. This guide will help you to understand how the page builder works and create your first page.

Web pages contain content, structure and styling.

  • Content is the information to be displayed. The source of content can be articles, modules, users, images or you can enter the content in the component itself.
  • Structure is how the content is displayed - as paragraph, heading, links, lists, and so on or some combination of these. 
  • Styling includes formatting of content like spacing, alignment, colors and so on. The styling is applied using CSS classes.

A page is organised into one or more rows or sections. Each row can contain one or more columns. Each column can contain one or more elements.

Rows

Rows give you an initial horizontal structure to your front-end page where you can apply styling to an entire row and add columns to it. In other words, rows are wrappers for columns in which you can add your elements.

Columns

Similar to rows, columns are structures that help build the layout of a web page. A single row can be divided into multiple columns and each of these columns can contain elements.

Elements

Elements are basic content structures. There are many useful elements that you can add to your website easily.

Create Your First Page

TF Page Builder follows bottom-up approach where you can re-use your elements, columns and rows. You start by creating elements, columns and rows. Then, add these to the pages.

Lets create a page that displays text - "Welcome to My Site!"

Step 1: Create Element

Create a new element of type "Text". Under the content tab, enter the description text - Welcome to My Site!. Under the Styles tab, select the Font Type as Lead.

Step 2: Create Column

Create a new column and give it a title like "Default Column".

Step 3: Create Row

Create a new row and give it a title like "Container Row". Under the Styles tab > Container Settings, select Container type as Container.

Step 4: Create Page

Create a new page and give it a title like "Home".

  • Under Rows tab, add a new row created in Step 3. Save the page.
  • You will see a new tab "Row 1". Add the column created in the Step 2. Again, save the page.
  • Now, you will see the option to add elements under Row 1 tab. Add the element created in Step 1. Save and Close.

Step 5: Add a Menu Item

Your first page is ready to be displayed on the front-end. Create a menu item of type TF Page Builder > Page. Select the page created in Step 4.