Open "Theme Options -> Custom Code"

If you want to add a quick custom code to the theme, you can do it in Theme Options -> Custom Code

For example your Google Analytics code can be pasted into the "Custom Tracking/Analytics" field.

Before you start

It is important that you create a parent category for all your blog categories. In the above screenshot we have a parent category called "Uncategorized" and several sub-categories under it. Please replicate a similar structure before doing the next steps in this lesson.

Enable Blog and select your main Blog category from the previous step

Open Theme Options panel (1) and select Blog (2) from the left menu. Then make sure the "Show Blog" is checked. Under it there is a selectbox where you need to select the main/parent category you have created in the first step of this lesson.

Create your first Blog Post

Click on the "Add New" button (2) and fill in the Title (3) and Content (4) of your new Blog Post. Then assign it to some category (5) and Publish it (6)

See the Result

Open your website and click on the Blog link (1)

See the Result

As you can see, your first Blog Post has been published, congrats!

Overview - What is what

On the above screenshot you can see a little more detailed information on what is what on Slider Manager screen.

Click the "Add New" button

After clicking to this button (1), the "Add New Slider" dialogue appears.

Fill in the name of your new Slider

Fill in the name of your new Slider (1)
Confirm by clicking the "Add New" button (2)

Create the first Slide

NOTE: If necessary, click the "Add Slide" button in order to see the Slide just like in the screenshot above

Click to the "Upload / Insert" button (1) to attach some image to your first Slide

Attach an Image to your first Slide

Either upload an image in the "From Computer" tab or use an image(s) you have already uploaded from the "Media Library" tab. In this step we will show the second option because we have already uploaded some images.

(1) Click on the "Media Library" button
(2) Click to the "USE" button near by wished image

Setting up first Slide info

1.) URL to redirect, after clicking slide
2.) Slide Title
3.) Slide Description
4.) List of actions after clicking ( Open in Lightbox, Go to url, Do nothing )
5.) Transitions ( if slider type supports them )

Set your Slider settings

1.) Click to the "Settings" tab
2.) Select wished slider tab
3.) Fill custom info ( like width, height and others )

Save Slider

1.) Save Slider

Preview Slider

1.) Hit the Preview Button, and check your First Slider

Move Slide

Delete Slide

Result after deleting slide

First look at the page

Change Settings

See changes

Current Slider

Select New Slider In Theme Options

View Changes

Post has global sidebar

Add new sidebar in post writepanels

Add New Sidebar 2

Add Sidebar 2



Category with Old Sidebar

Select New One


Current look

Change Template


Prepli jsme na gallery page, kterou jsme delali v minulem tutorialu, a zvolili jako parent nasi novou album page


Open these 3 tabs in your web browser

(1) Open: Theme Options -> Template Builder
(2) Open: Pages -> Add New Page. Create a new Page and save it, then open it in Step (3)
(3) Open the Page you have just created

Add New Template

(1) Click the "Add New" button

Enter a name for your new Template

(1) Enter a name for your new Template
(2) Save it

Template Selection

(1) Your new Template has now been added to the Template Selection

You can of course create as many Templates as you want. You can even duplicate them if necessary.

Insert your first Module

On the left-hand side you can see the list of available Modules. You can hover over them for preview.

Now use your mouse to drag and drop one of the Modules (1) into the Canvas (2) on the right-hand side.


Save your Template

(1) Click the "Save Changes" button.

Each module has already some demo content inside it so we will have a look at it in the next Step.

Inserting the Template into your Page

We are using shortcodes to insert a Template Builder's Template. You can insert such shortcode into any of your posts or pages. You can either memorize the shortcode or you can use our Shortcode Generator (2)

(1) Start by refreshing to page so the Shortcode Generator gets updated with your newly created Template Builder's Template
(2) Click on the Shortcode Generator icon and select your newly created Template (3) from the Template Builder selection

You can also rearrange the position of the Template Builder's shortcode inside your Page, you can have content above it or below it, you can have more Templates on one page, etc. It is quite flexible so just play around with it.

Save the Page

Before you can see the result of your work, you need to save the Page by clicking the "Save Changes" button (1)

Show me the results!

Switch to your 3rd tab in your web browser (1) which we opened in the first Step of this lesson and refresh the page (2)

Getting some Modules

Let's start by dragging and dropping some of the Modules onto the Canvas.

(1) Twitter
(2) Accordeon
(3) Heading
(4) Alert Box

When you are done click the Save Changes button (5)


After clicking the Save Changes button, let's have a look on your page to see the default content of those Modules.

(1) Twitter
(2) Accordeon
(3) Heading
(4) Alert Box

Editing a Module

To edit a module click on it or click directly on the little arrow

Edit Module screen

Now simply change the Module options to your liking (1)
Click the OK button to save the changes on this screen (2)
But don't forget you still need to save the whole Template by clicking the Save Changes button (3). If you wouldn't save it in step (3) then you would lose your changes if you left.

View Your Changes

Now let's have a look at the changes we have made. As you can see, the Heading Module has indeed changed.

Click the Add New Row button at the top of the Canvas

As you can see, there are 2 buttons in the middle of the canvas. These are used to add new Rows. Click the button at the top.

See the result & Click the Add New Row button at the bottom of the Canvas

We have now successfully added a new Row at the top of the canvas.

Now click the Add New Row button at the bottom of the canvas. Notice how the green lines suggest you where the new Row will be created.

See the Result

Great! We have just created 2 new Rows, one at the total top and one at the total bottom.

If you want to create new Rows rather in the middle of the canvas, there are now buttons for it as well (1)

Add Second Column

The buttons on the left and right side of the Canvas are used for adding new Columns.

Notice how the green lines suggest you where the new Column will be created.

(1) Click the Add New Column button

See the Result and Add one more Column

As you can see, the Column has been edit and all the Columns in that row has been automatically re-sized to be balanced and visible. If needed, please simply re-adjust the size of your columns.

(1) Click the Add New Column button again to add one more Column

See the Result

Now we have 3 Columns in our top Row, all perfectly balanced and visible. If needed, please simply re-adjust the size of your columns.

Different ways of re-sizing your Column

There are a few ways how you can change the width of your Column:

1) Click on the input field (says 50% in the screenshot above) and select the desired size or width from the drop down menu

2) Select the "50%" text with your mouse and simply re-write it using your keyboard. You do not have to write % at the end, the system will add it for you. Also if you just write for example "33", the system will help you by changing it to the "33.33%" after you save it. So now press ENTER to save it or TAB to save and jump on to the next Column size.

How to Delete a Module

To delete a Module in Template Builder, simply drag it out of the Canvas. You will then be prompted with the "are you sure" window to avoid any unfortunate situations.

How to Delete a Column

To delete a Column in Template Builder, simply hover your mouse over that Column and you will see a Close button in the upper right corner. Notice how the red border suggests you what exactly will be deleted. If the Column you are trying to delete will have some Modules inside, then you will be prompted with the "are you sure" window to avoid any unfortunate situations.

How to Delete a Row

In order to delete the whole Row, you need to delete all Columns inside that particular Row. Please refer to the "How to Delete a Column" step above and simply delete all the Columns in the Row you wish do delete.

What is what

Here is a rough guide of what is what in case you find yourself confused with the names and labels.

In the above screenshot we have opened the "Uncategorized" category and we will edit it in the next steps. Let's do it!

Open a category in Site Preferences

(1) Open Site Preferences
(2) Select a category you would like to edit, in our case it's a category called "Uncategorized"
(3) Change some of the preferences to your liking, just pay close attention to what we change in our screenshots
(4) Save changes

See the Results

The above screenshot pretty much sums up what has changed.