It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Zo2 Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

Heading Styles

[zt_columns] [zt_column md="6"]

This is Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus

[/zt_column] [zt_column md="6"]

This is Heading 2

[/zt_column] [/zt_columns] [zt_columns] [zt_column md="6"]

This is Heading 3

[/zt_column] [zt_column md="6"]

This is Heading 4

[/zt_column] [/zt_columns] [zt_columns] [zt_column md="6"]

This is Heading 5

[/zt_column] [zt_column md="6"]

This is Heading 6

[/zt_column] [/zt_columns]

Code

[zt_columns] [zt_column md="4"]

#wrapper {
  position: relative;
  float: left;
  display: block;
}

Use <pre> or <div class="zt-code1">Here goes your code</div>

[/zt_column] [zt_column md="4"]

#wrapper {
position: relative;
float: left;
display: block;
}

Use <div class="zt-code2">Here goes your code</div>

[/zt_column] [zt_column md="4"]

File

#wrapper {
position: relative;
float: left;
}

Use <div class="zt-code3"><h4>Name of your file</h4>Here goes your code</div>

[/zt_column] [/zt_columns]

HightLight

[zt_columns] [zt_column md="6"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight1">Your highlight phrase goes here!</span>

[/zt_column] [zt_column md="6"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight2">Your highlight phrase goes here!</span>

[/zt_column] [/zt_columns] [zt_columns] [zt_column md="6"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight3">Your highlight phrase goes here!</span>

[/zt_column] [zt_column md="6"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase

Use <span class="zt-highlight4">Your highlight phrase goes here!</span>

[/zt_column] [/zt_columns]

Lists Icon

[zt_columns] [zt_column md="3"] [zt_i classIcon="fa fa-angle-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-angle-down[/zt_i] [zt_i classIcon="fa fa-arrow-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-down[/zt_i] [zt_i classIcon="fa fa fa-caret-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa fa-caret-down[/zt_i] [zt_i classIcon="fa fa-chevron-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-down[/zt_i] [zt_i classIcon="fa fa-chevron-circle-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-circle-down[/zt_i] [zt_i classIcon="fa fa-caret-square-o-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-caret-square-o-down[/zt_i] [zt_i classIcon="fa fa-arrow-circle-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-circle-down[/zt_i] [zt_i classIcon="fa fa-hand-o-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-hand-o-down[/zt_i] [zt_i classIcon="fa fa-long-arrow-down" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-long-arrow-down[/zt_i] [/zt_column] [zt_column md="3"] [zt_i classIcon="fa fa-angle-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-angle-left[/zt_i] [zt_i classIcon="fa fa-arrow-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-left[/zt_i] [zt_i classIcon="fa fa fa-caret-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa fa-caret-left[/zt_i] [zt_i classIcon="fa fa-chevron-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-left[/zt_i] [zt_i classIcon="fa fa-chevron-circle-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-circle-left[/zt_i] [zt_i classIcon="fa fa-caret-square-o-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-caret-square-o-left[/zt_i] [zt_i classIcon="fa fa-arrow-circle-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-circle-left[/zt_i] [zt_i classIcon="fa fa-hand-o-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-hand-o-left[/zt_i] [zt_i classIcon="fa fa-long-arrow-left" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-long-arrow-left[/zt_i] [/zt_column] [zt_column md="3"] [zt_i classIcon="fa fa-angle-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-angle-right[/zt_i] [zt_i classIcon="fa fa-arrow-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-right[/zt_i] [zt_i classIcon="fa fa fa-caret-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa fa-caret-right[/zt_i] [zt_i classIcon="fa fa-chevron-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-right[/zt_i] [zt_i classIcon="fa fa-chevron-circle-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-circle-right[/zt_i] [zt_i classIcon="fa fa-caret-square-o-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-caret-square-o-right[/zt_i] [zt_i classIcon="fa fa-arrow-circle-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-circle-right[/zt_i] [zt_i classIcon="fa fa-hand-o-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-hand-o-right[/zt_i] [zt_i classIcon="fa fa-long-arrow-right" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-long-arrow-right[/zt_i] [/zt_column] [zt_column md="3"] [zt_i classIcon="fa fa-angle-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-angle-up[/zt_i] [zt_i classIcon="fa fa-arrow-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-up[/zt_i] [zt_i classIcon="fa fa fa-caret-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa fa-caret-up[/zt_i] [zt_i classIcon="fa fa-chevron-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-up[/zt_i] [zt_i classIcon="fa fa-chevron-circle-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-chevron-circle-up[/zt_i] [zt_i classIcon="fa fa-caret-square-o-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-caret-square-o-up[/zt_i] [zt_i classIcon="fa fa-arrow-circle-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-arrow-circle-up[/zt_i] [zt_i classIcon="fa fa-hand-o-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-hand-o-up[/zt_i] [zt_i classIcon="fa fa-long-arrow-up" iconCircle="no" iconSize="small" spinningIcon="no"]fa fa-long-arrow-up[/zt_i] [/zt_column] [/zt_columns]

Messages Box

[zt_message_box type="success" icon="fa fa-sun-o"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s[/zt_message_box] [zt_message_box type="info" icon="fa fa-info-circle"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s[/zt_message_box] [zt_message_box type="warning" icon="fa fa-warning"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s[/zt_message_box] [zt_message_box type="danger" icon="fa fa-users"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s[/zt_message_box]

Block Quotes

[zt_blockquotes author="Lorem Ipsum" link="#"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.[/zt_blockquotes] [zt_blockquotes author="Lorem Ipsum" link="#" type="big"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.[/zt_blockquotes] [zt_blockquotes author="Lorem Ipsum" link="#" type="box"]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.[/zt_blockquotes]