Since you are familiar with basic formatting options, I will present some new modules and options which can be used in pages and posts

“Page Builder” can be used only on pages, so if you want to add some modules you will have to create new page, not post. Other formatting options can be used on post and pages with no problems.

With “Page Builder” you can create page however you want. It can contain sections, every section can be divided into smaller horizontal sections and in any section you can add some module or modules. Every section has its own settings where you can define background, colors, animations and more.

page-builderEvery module has its own options where you can define all details and if it is not enough, I can create custom style for some module. Every module can be added in any section on the page, and you can use more same modules in one page. And everything is easy to use, it comes down to clicking and drag&drop, and when you open some module it is easy to configure and create module like you want. every section, row and module can be cloned, there are icons for deleting, modifying and cloning for every element.You can see in the screenshot how it looks in admin area.

 

Below you can see “Accordion”, which can be used for Q&A or something similar where you have a lot of text (divided in smaller sections) and you want to save space.

How Accordion can be used?

Accordions are used in most cases for the content which is divided into more parts, like “questions and answers”, list of some tips, and similar.

Accordion will save vertical space

If the content from all parts would be just writen as normal text, it would take a lot of space, this way when visitor oppen some part, other parts close.

What can I put in the content?

You can add as much parts like this as you want. Here, in the content of the accordion you can add links, videos, images, basically anything that you can put into some post…

Will the content in Accordion affect SEO?

No. No mater that only one part of accordion is visible to the visitor at the time, in the source code ot the page the whole content of all parts is visible to search engines.

“This is “Testimonial” module, where you can add all info ybout the author, add his profile image and change color of the element if you want… Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.”

Kele

Designer, Freelance

This is “Special Section”, where you can choose predefined layout of more smaller elements.

This whole section is composed of this element, one element on the left side and two more below, this section has background with “Parallax effect”, image moves slower than the content while scrolling… Every element can contain some module and there is a list of arround 15 layouts to choose from…

Option 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Option 2

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Below you can see different ways to present some percentages, and also counters.

  • Bar counter 1 33%
  • Bar counter 2 81%
  • Bar counter 3 50%
  • Bar counter 4 75%

In this section I have placed different counters. For every counter you can set exact value in percents, you can set color for every counter, title… At the end there is “Countdown timer” which is used to count days, hours and minutes to any date&time in the future. It can count time until something start, until something expires…

%

Percentage of this in that

%

Percentage of that part

%

How many passed

%

Percentage of something

%

Number counter

%

Number counter 2

%

Number counter 3

Countdown timer

Days

:

Hours

:

Minutes

:

Seconds

Another great way to put more content into small space, by creating tabs for every type of the content…

By using “Tabs” you should only pay attention that the title for every tab is not long, so that all tabs fit in one line, otherwise some tabs could appear in the new row.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

  • Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  • In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
  • Nullam dictum felis eu pede mollis pretium.
  • Integer tincidunt. Cras dapibus.
  • Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

Default image border is thin and gray, but depending of purpose and situation there are some other types of border that can be applied to specific images. From left to right there are default border, white, dark, blue, green and purple. To apply custom border, when image is inserted into page, click on “Edit” icon and under “Image CSS Class” type “border-white”, “border-dark” and it goes on the same for all colors.

 

 

 

 

 

Eye Contact - using the 'windows to the soul' Eye Contact - using the 'windows to the soul' Eye Contact - using the 'windows to the soul' Eye Contact - using the 'windows to the soul'Eye Contact - using the 'windows to the soul' Eye Contact - using the 'windows to the soul'

There is also CSS Style which will remove border from image, which is usefull when image has transparent background. In that case in “Image CSS Class” has to be typed “no-border”. The last thing is that every border can be made to be thich and that way you can have image with thick blue border, thick purple border. For thick border “Image CSS Class” has to contain the code for border color and “thick” at the end, for example “border-blue thick”, “border-purple thick” and so on.

Deiric McCann - Speaking  Deiric McCann - Speaking

Now adding videos from YouTube is easier than ever. It can be done in two ways. You can add video over “Add Media” button in WordPress editor, where you select “Insert from URL” and just paste the link to the video. Second way to add video from YouTube is to use “tube” shortcode. All you have to do is to add simple shortcode into the content where you want video to appear and paste the link inside the shortcode… Like this:

tube

For audio files there is still the same player and it can be used with no problems…

“Add Media” option can be used for anything that can be added into the page: images, sounds, videos, flash content, content from some URL… Earlier it was more complicated and now it is all merged into this one great option.

What I have shown on this page is just a part of available modules. There are more options and they can be used in many ways. This theme has new area called “Projects” and it can be used to create portfolio, animated slideshows of images… I didn’t want to put too many sections and modules into this one page, but it is possible to create page however you imagine.

Toggle Module

This is “Toggle Module”. Compared to “Accordion” module, toggles are separate and they can be opened and closed independently. Here I have placed 3 modules in one line, but they can be arranged and placed anywhere, they are not merged into one module like “Accordion”, which works similar.

Toggle Module 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Toggle Module 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.