Thrive Knowledge Base

How to Use the Page Blocks in Smart Landing Pages

If you use Smart Landing Page templates to build the pages of your website, you also have the possibility to add "Page Blocks" to the page.

Note: For the moment, the "Page Blocks" are available for a few of the Smart Landing Page sets. When selecting a template, you will see an icon next to the name of the Smart Landing Page sets which indicates that the "Page Blocks" are available for the respective set:

These "Page Blocks" were created specifically to match the Smart Landing Page sets, so they will inherit the colors of your Smart Landing Page, when you insert them to the page. Thus, these will give you an even easier and faster way for the building, as well as the customization, of your page.

Here are the steps for using these "Page Blocks":

Add a "Page Block"

First of all, naturally, you will need to apply a Smart Landing Page template to your page. If you require detailed information on how to do this, please take a look at our article here.

Once a Smart Landing Page template is used on your page, the option of adding "Page Blocks" will become available for you. Smart Landing Page templates consist of several separate sections (usually "Background Sections") added to the page.

If you hover over these sections, you will see a plus sign appear in the bottom middle part of the section:

Then, if you hover over the plus sign, it will be turned into the "+ Page Block" option. With the help of this option you will be able to add the "Page Block" to the page, so once you see it, click on it:

This will open a pop-up window with all the available "Page Block" types that you can choose from:

Page Block Types

By default, all the "Block Types" are displayed in the pop-up window, so you can scroll down to see each of the available "Page Block" types.

Additionally, as you can see on the left side of the pop-up window, all of the available "Page Blocks" are also divided into different types/categories:

These types/categories are meant to help you find a suitable "Page Block" even faster. If you click on one of these "Page Block" types/categories, from the left side of the pop-up window, you will see the "Page Blocks" that belong to the respective type/category appear in the pop-up window.   

So for example, if you are looking to add a "Page Block" that has the purpose of being a "Call to Action", you can click on the "Call to Action" type/category and you will see the "Page Blocks" that were created with the goal of being call to actions:

Then, you can easily select the "Page Block" that is the most suitable for your goal. You can do this with any of the types/categories.

So if you do not want to look through all the "Page Block" types, but rather see one that is specific to the available categories, then just click on one of types/categories, and you will be able to choose a "Page Block" from the ones that belongs to that certain type/category. 

After you have found the "Page Block" that you want to use, click on it and it will automatically be inserted to your page.

Use the Landing Page Block Options

Once the "Page Block" is added to your page, you will see its "Main Options" appear in the left sidebar of the editor:

You can use these options to customize the "Page Block" as follows:

Match Colors of Landing Page

This option refers to the smart color matching that is applied and activated by default for every "Page Block". This means that the "Page Block" automatically inherits the colors of your Smart Landing Page, when you insert it to the page.

You can see that this option is active because the switch next to it is green. If for some reason you want to deactivate the option, meaning that you do not want the "Page Block" to inherit the colors from the Smart Landing Page, click on the switch next to the option:

After you deactivated the "Match Colors of Landing Page" option, you will see a list with every color that is used inside the "Page Block".

This list varies depending on how many colors are there in the the "Page Block". After deactivating the color matching, you can change either of these colors without affecting the other parts of the page where the same template color is used. 

In order to change one of the colors, click on the box with the respective color and use the color picker that opens to select another color instead of the current one. You can either select the new color using the color picker, or enter its code in the "HEX/RGB" field and then click on "Apply":

Later on, if you want to use the "Match Colors of Landing Page" option again, all you have to do it to activate it (click on the switch next to it) and you will see that the "Page Block" will have the colors of the Smart Landing Page again.

Inherit Width from Landing Page

This option can be used to adjust the width of the "Page Block". By default, the "Inherit Width from Landing Page" option is activated, which means that the width of the "Page Block" is the same as that of the Smart Landing Page template.

However, if you want to modify this, you can deactivate the option, by clicking on the switch next to it:

Once you do this, you will see the additional width options appear:

With these options you can change the width of the content that is inside the "Page Block".

Content Maximum Width

You can modify the width by either dragging the slider under the  "Content Maximum Width" option, or by entering a value manually in the field next to it.

Content cover entire screen width

Moreover, if you want, you can also make the content of the "Page Block" cover the entire screen width by clicking on the switch next to the "Content cover entire screen width" option.

Section Minimum Height

This option allows you to adjust the height of the "Page Block". In order to do that, either drag the slider under the "Section Minimum Height" option, or enter a value manually in the field next to it:

Match height to screen

With this option, you can make the height of the "Page Block" match the screen. If this is what you want, just click on the switch next to this option:

Vertical Position

Just as its name says, the "Vertical Position" option can be used to adjust the vertical position of the content inside the "Page Block". You can choose to place the content at the top, at the center, or at the bottom of the "Page Block". Simply click on the position you want to use and the content will be placed accordingly on the page, in the "Page Block":

General Options

The more general options are also available for the "Page Block". These can be found under the "Main Options" in the left sidebar, when the "Page Block" is selected:

You can use these options to further customize the "Page Block"

If you need detailed information on how to use the general options, check out our knowledge base, because we have separate tutorials on each of them.

Customize the content of the "Page Block"

After adding and customizing the way the "Page Block" looks like, it is also very important to customize its content. When you insert the "Page Block" to your page it contains default content like the ‘lorem ipsum’ texts, or general images.

These must be changed in order to make the "Page Block" unique and specific to your page. Therefore, make sure to change all such default content by replacing them with your own texts, images, button texts etc.

You can do this very easily. First, click on the respective element from the “Page Block”. This will make the options of the respective element appear in the left sidebar. Use the options of the particular elements to customize their content.

For instance, if you have selected a text, you can delete it directly from the editor and replace it with your own text. If it is an image that you have selected, then use the “Replace Image” option from the sidebar to change it with your picture etc.

Keep in mind that it is essential to personalize the various elements of the “Page Block” this way, so that they represent your own business/services.

Repeat

After you have finished setting up your first "Page Block", you can continue with adding as many different types of “Page Blocks” as you need, repeating the same steps, in order to create the page that you want.

Using "Page Blocks", as well as all the other features of Smart Landing Page templates will make your job a lot easier, and it will give you the possibility to create the page you want in at least half the usual time it would normally take to create it. 

If you need more information on how various Thrive Architect elements work, please check out our page with tutorials.

Hopefully, this article was useful for you. If so, please give it a smile below :)

>