We are going to tell you about a powerful tool called Themler. You can use Themler to create themes for different websites, blogs and online stores.
With Themler you work with actual CMS data modifying pages, articles, blog post and products directly in WordPress, Joomla and other supported CMS. While designing, you can use pre-designed sections and receive the instant result, or go with full customization of the smallest details.
So let’s introduce you to Themler, step by step.
Instaling Themler
We’ll start with visiting themler.io website. Themler is available for desktop, and as a plugin for WordPress, Joomla and some other supported CMS, we will demonstrate Themler’s features using the WordPress plugin as an example. Download the Themler theme for WordPress. The theme is installed as usually for WordPress themes, as a zipped package, from the WordPress admin panel -> Appearance -> Themes... Activate the Themler theme.
Themler plugin is installed together with the theme, and therefore it is easy for any WordPress user. After activation, the Themler tab appears in the WordPress panel.
Adding the Content
We begin with the Home template, which is used for the website’s front page. Let’s add a section to it from our Library which has many well-designed pages and sections of various themes, layout and structure. Let’s change the default Header section to an Intro section with the overlapping Header. We’ll add more sections by clicking the small green plus in the left panel, and this will add the sections into the Content Area. Those sections will be shown only on the Home page. We will describe the area highlighting later.
User Interface
Themler’s user interface consists of several essentials. At the top there is the Ribbon toolbar. The File tab provides access to the main theme operations including Save, Export, Import and others. The Home tab allows editing of the most popular parameters of the selected element. Edit provides the quick access to the main properties of a selected element. The Insert and the Design Tabs will be described later.
At the top right there are supported Responsive modes. Also, Save/Publish Theme options, the “Refresh Content” option loads the recent changes from the CMS . “Apply Theme to CMS” applies changes made in Themler to your CMS.
In the Left panel you see the following tabs. In Pages, you can access the website pages, Posts allows accessing the blog posts, Store is used in eCommerce themes, and it contains store related pages, such as: the Products, the Product Details, containing details of the selected product, and the Shopping Cart.
Also, we see Outline containing the hierarchy of section elements, and Sections with the list of sections. The left panel may be hidden, if unnecessary, by clicking the stripe with the arrow, and reopened again. Now it is time to explain the color highlighting in the Editor.
There are several areas for adding contents highlighted with the color border. Orange shows the areas shared among all templates, Blue is for areas of the active template, and in Green the content of the current page is stored.
The Property Window (PW), located in the right part of the UI, allows the maximum customization of the selected element. The Property Window contains practically all properties that can be changed in the selected control.
The Right Panel is opened automatically, if you click More, or the arrow in the right lower corner of the group in the Ribbon. You can open the right panel by clicking the stripe with the arrow to the right of the screen, you can fix the panel and hide it, if need.
At the bottom of the screen there is a bar with the Layout View, Margins, and Path. The Layout View, when enabled, shows the structure of the page. Margins show the control’s margins on mouse hovering, and are enabled by default, but can be disabled. The Path shows the nesting of elements and containers. Clicking the Path’s links, we navigate the elements and containers fast and easily.
Working with the Content
Now, let’s proceed to the page contents. Change the image. In the opened dialog, there are numerous images from the Billion Photos library, available for the subscription. Let’s also change the Heading, click the Heading field and start typing the new texts. Move Subheading below the Heading. It is very simple, as the position into which the element may be placed is highlighted with the color of the area, in this case, blue. Now, we will change the position of the container with text in the section. To center the container in the section, simply select “Positioning -> Center-Center” in the Ribbon.
Let’s create a section from scratch. Add a Blank section, add a container, add a Row with Columns. Add a text into the left column. Modify the text and make it the Heading 2. Add another text and modify it. Insert an Icon. Change the default icon, find and select one from the Billion Photos library. Move the icon above the Heading.
Copy the contents of the left column into the right. Copy and paste the icon into the second column. Copy and paste the Heading and Text. The placeholder for pasting in the right cell is shown in green as it is the content area.
Change the icon in the second cell, then the texts. We will now show how to change the column width, just grab and pull the border of the right cell. In the top Ribbon there is also the Width option, in which you can select the size of columns in percents, and also set the widths for the Responsive modes.
Add Padding for the Row… Add background and padding for the cells and center the contents in the cells… Change spacing between the cells. Open additional properties clicking the arrow in the right lower corner of the group. We see the cell properties in the Right Panel. Let’s change the Margin.
Back in the left panel, in the Outline, we do not only see the control hierarchy, but also can move elements on the page with simple clicking and dragging. Let’s switch icons in the columns. We see that there are wrong Headings under the icons, we will fix that later.
Now in the Ribbon, we will change the width of the row to Wide, and then switch back to the Sheet width.
To apply changes made in the editor click the “Apply Theme to CMS” icon in the top right corner of the top toolbar.
WordPress Admin
Switch to the WordPress admin. Please note that the content added in the Themler editor will be converted into the shortcodes. After Conversion, visually the content can be edited only in Themler, in WordPress the normal text will be no longer shown, and the visual editing of the shortcodes will not be available. Let’s fix the wrong Headings under the icons. Locate the text in the code, edit it, then click “Update”.
Theme Settings
We are now proceeding to Theme Settings. The Design Tab contains the properties that set the style for the whole theme. Let’s change the colors, choosing different color schemes… Now, we will choose a different Font Scheme.
To modify the Default Style used for an element by default, do the following. Select More Styles. Change the color and the size of the Heading 2, which will be now shown like this throughout the whole website… To quit the Default Styles, switch to the Home Tab.
Shared Areas
To illustrate the use of the shared areas, let’s modify Header. This can be done in any template of your website, but the effect will be seen on all other pages, since the area is shared. We can also hide the shared Header for some templates. In this example, we will hide the Header for the Home page, and will unhide it again. For the Responsive mode changes are applied to the selected mode and the lower.
For example, if you change the background for the Tablet Mode, it will also affect the Phone View, but the Desktop and the Laptop Modes will look unchanged… For example, if we hide the Logo for phone, for the higher modes it will be shown.
Switching to the Page template we see the same shared Header we had been editing on the Home page.
Blog and Post Templates
Another popular area of the modern websites is Blog. To show you how to use Blogs in Themler, switch to the Blog template. Let’s change the template choosing any from the gallery. When switching to the Post template we see the same styles, as it uses the same Posts control as in the Blog.This looks incorrectly, let’s fix this. To customize only the Post template, click Customize Template Style, this means that other templates including the Blog will not be affected.
Let’s choose a different layout for the Post in the Ribbon. Much better now! Right?!
For the Post Images, usually, you can see that the LightBox option is enabled by default, this will enlarge the image on click. To turn this option, let’s switch to the Posts control, and for that on the lower toolbar, choose Posts. On the Ribbon select Posts -> Post Content -> LightBox. Switch the LightBox off.
Working with the Sidebar
Proceeding to Sidebar. Like the Header and the Footer, the Sidebar is the shared area, meaning it is the same for all templates. By default, we see the Left Sidebar, which is not typical for a blog. We will disable the Left Sidebar and will enable the Right. Let’s add widgets, for that we need Widget Areas, we have one by default, but we will add one more for example. Click “Apply Theme to CMS”. Switch to the CMS Admin.
We see the new Widget Area appeared. Add the Recent Posts widget into the Primary Widget Area, that was by default, and the Search Widget into the new Widget Area. Switch to Themler. Refresh Content. We see that now there are widgets in the areas in the Sidebar. Let’s change the color of the links in the Recent Posts. Select More Styles -> Link -> the red color. You see that now links are red. Note that this option changes the link color only for the specific Widget Area, the rest of the theme will be using the default styles.
Working with the Footer
Finally, we will change the Footer, that is also shared, and is common for all templates. Select a design from the Billion Themes library. We see that there are the BackLinks in the Footer that are added by default. Those links can be edited and can be turned off. To do that, select Home -> Settings. In the right panel scroll down to the Backlinks, turn the switches off.
We have finished the introduction to the Themler’s basics and principles. We do hope you liked it. Visit Themler.io for more information.
All the best! Bye!
See Also
Video Tutorials
We are going to tell you about a powerful tool called Themler. You can use Themler to create themes for different websites, blogs and online stores.
With Themler you work with actual CMS data modifying pages, articles, blog post and products directly in WordPress, Joomla and other supported CMS. While designing, you can use pre-designed sections and receive the instant result, or go with full customization of the smallest details.
So let’s introduce you to Themler, step by step.
<br>
<iframe width="850" height="480" src="//www.youtube.com/embed/hBXuh2ltlBM?rel=0" frameborder="0" allowfullscreen></iframe>
<br>
<br>
**Instaling Themler**
We’ll start with visiting themler.io website. Themler is available for desktop, and as a plugin for WordPress, Joomla and some other supported CMS, we will demonstrate Themler’s features using the WordPress plugin as an example. Download the Themler theme for WordPress. The theme is installed as usually for WordPress themes, as a zipped package, from the WordPress admin panel -> Appearance -> Themes... Activate the Themler theme.
Themler plugin is installed together with the theme, and therefore it is easy for any WordPress user. After activation, the Themler tab appears in the WordPress panel.
<br>
**Adding the Content**
We begin with the Home template, which is used for the website’s front page. Let’s add a section to it from our Library which has many well-designed pages and sections of various themes, layout and structure. Let’s change the default Header section to an Intro section with the overlapping Header. We’ll add more sections by clicking the small green plus in the left panel, and this will add the sections into the Content Area. Those sections will be shown only on the Home page. We will describe the area highlighting later.
<br>
**User Interface**
Themler’s user interface consists of several essentials. At the top there is the Ribbon toolbar. The File tab provides access to the main theme operations including Save, Export, Import and others. The Home tab allows editing of the most popular parameters of the selected element. Edit provides the quick access to the main properties of a selected element. The Insert and the Design Tabs will be described later.
At the top right there are supported Responsive modes. Also, Save/Publish Theme options, the “Refresh Content” option loads the recent changes from the CMS . “Apply Theme to CMS” applies changes made in Themler to your CMS.
In the Left panel you see the following tabs. In Pages, you can access the website pages, Posts allows accessing the blog posts, Store is used in eCommerce themes, and it contains store related pages, such as: the Products, the Product Details, containing details of the selected product, and the Shopping Cart.
Also, we see Outline containing the hierarchy of section elements, and Sections with the list of sections. The left panel may be hidden, if unnecessary, by clicking the stripe with the arrow, and reopened again. Now it is time to explain the color highlighting in the Editor.
There are several areas for adding contents highlighted with the color border. Orange shows the areas shared among all templates, Blue is for areas of the active template, and in Green the content of the current page is stored.
The Property Window (PW), located in the right part of the UI, allows the maximum customization of the selected element. The Property Window contains practically all properties that can be changed in the selected control.
The Right Panel is opened automatically, if you click More, or the arrow in the right lower corner of the group in the Ribbon. You can open the right panel by clicking the stripe with the arrow to the right of the screen, you can fix the panel and hide it, if need.
At the bottom of the screen there is a bar with the Layout View, Margins, and Path. The Layout View, when enabled, shows the structure of the page. Margins show the control’s margins on mouse hovering, and are enabled by default, but can be disabled. The Path shows the nesting of elements and containers. Clicking the Path’s links, we navigate the elements and containers fast and easily.
<br>
**Working with the Content**
Now, let’s proceed to the page contents. Change the image. In the opened dialog, there are numerous images from the Billion Photos library, available for the subscription. Let’s also change the Heading, click the Heading field and start typing the new texts. Move Subheading below the Heading. It is very simple, as the position into which the element may be placed is highlighted with the color of the area, in this case, blue. Now, we will change the position of the container with text in the section. To center the container in the section, simply select “Positioning -> Center-Center” in the Ribbon.
Let’s create a section from scratch. Add a Blank section, add a container, add a Row with Columns. Add a text into the left column. Modify the text and make it the Heading 2. Add another text and modify it. Insert an Icon. Change the default icon, find and select one from the Billion Photos library. Move the icon above the Heading.
Copy the contents of the left column into the right. Copy and paste the icon into the second column. Copy and paste the Heading and Text. The placeholder for pasting in the right cell is shown in green as it is the content area.
Change the icon in the second cell, then the texts. We will now show how to change the column width, just grab and pull the border of the right cell. In the top Ribbon there is also the Width option, in which you can select the size of columns in percents, and also set the widths for the Responsive modes.
Add Padding for the Row… Add background and padding for the cells and center the contents in the cells… Change spacing between the cells. Open additional properties clicking the arrow in the right lower corner of the group. We see the cell properties in the Right Panel. Let’s change the Margin.
Back in the left panel, in the Outline, we do not only see the control hierarchy, but also can move elements on the page with simple clicking and dragging. Let’s switch icons in the columns. We see that there are wrong Headings under the icons, we will fix that later.
Now in the Ribbon, we will change the width of the row to Wide, and then switch back to the Sheet width.
To apply changes made in the editor click the “Apply Theme to CMS” icon in the top right corner of the top toolbar.
<br>
**WordPress Admin**
Switch to the WordPress admin. Please note that the content added in the Themler editor will be converted into the shortcodes. After Conversion, visually the content can be edited only in Themler, in WordPress the normal text will be no longer shown, and the visual editing of the shortcodes will not be available. Let’s fix the wrong Headings under the icons. Locate the text in the code, edit it, then click “Update”.
<br>
**Theme Settings**
We are now proceeding to Theme Settings. The Design Tab contains the properties that set the style for the whole theme. Let’s change the colors, choosing different color schemes… Now, we will choose a different Font Scheme.
To modify the Default Style used for an element by default, do the following. Select More Styles. Change the color and the size of the Heading 2, which will be now shown like this throughout the whole website… To quit the Default Styles, switch to the Home Tab.
<br>
**Shared Areas**
To illustrate the use of the shared areas, let’s modify Header. This can be done in any template of your website, but the effect will be seen on all other pages, since the area is shared. We can also hide the shared Header for some templates. In this example, we will hide the Header for the Home page, and will unhide it again. For the Responsive mode changes are applied to the selected mode and the lower.
For example, if you change the background for the Tablet Mode, it will also affect the Phone View, but the Desktop and the Laptop Modes will look unchanged… For example, if we hide the Logo for phone, for the higher modes it will be shown.
Switching to the Page template we see the same shared Header we had been editing on the Home page.
<br>
**Blog and Post Templates**
Another popular area of the modern websites is Blog. To show you how to use Blogs in Themler, switch to the Blog template. Let’s change the template choosing any from the gallery. When switching to the Post template we see the same styles, as it uses the same Posts control as in the Blog.This looks incorrectly, let’s fix this. To customize only the Post template, click Customize Template Style, this means that other templates including the Blog will not be affected.
Let’s choose a different layout for the Post in the Ribbon. Much better now! Right?!
For the Post Images, usually, you can see that the LightBox option is enabled by default, this will enlarge the image on click. To turn this option, let’s switch to the Posts control, and for that on the lower toolbar, choose Posts. On the Ribbon select Posts -> Post Content -> LightBox. Switch the LightBox off.
<br>
**Working with the Sidebar**
Proceeding to Sidebar. Like the Header and the Footer, the Sidebar is the shared area, meaning it is the same for all templates. By default, we see the Left Sidebar, which is not typical for a blog. We will disable the Left Sidebar and will enable the Right. Let’s add widgets, for that we need Widget Areas, we have one by default, but we will add one more for example. Click “Apply Theme to CMS”. Switch to the CMS Admin.
We see the new Widget Area appeared. Add the Recent Posts widget into the Primary Widget Area, that was by default, and the Search Widget into the new Widget Area. Switch to Themler. Refresh Content. We see that now there are widgets in the areas in the Sidebar. Let’s change the color of the links in the Recent Posts. Select More Styles -> Link -> the red color. You see that now links are red. Note that this option changes the link color only for the specific Widget Area, the rest of the theme will be using the default styles.
<br>
**Working with the Footer**
Finally, we will change the Footer, that is also shared, and is common for all templates. Select a design from the Billion Themes library. We see that there are the BackLinks in the Footer that are added by default. Those links can be edited and can be turned off. To do that, select Home -> Settings. In the right panel scroll down to the Backlinks, turn the switches off.
We have finished the introduction to the Themler’s basics and principles. We do hope you liked it. Visit Themler.io for more information.
All the best! Bye!
<br>
### See Also
[Video Tutorials](page:4695)
<br>