Design That Works For You
Call Us Free: 1-800-555-5555

Typography

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H2 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H3 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H4 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H5 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H6 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

Message box styles:

This is a sample of the ‘info’ style message box shortcode. To use this style use the following under HTML mode: [message type="info"]Your info message goes here…[/message]
This is a sample of the ‘info’ style message box shortcode. To use this style use the following under HTML mode: [message type="success"]Your info message goes here…[/message]
This is a sample of the ‘info’ style message box shortcode. To use this style use the following under HTML mode: [message type="warning"]Your info message goes here…[/message]
This is a sample of the ‘info’ style message box shortcode. To use this style use the following under HTML mode: [message type="erroneous"]Your info message goes here…[/message]
This is an example of the 'preformatted' text.
To use this style use the following under HTML mode:
<pre>Your text goes here...</pre>

Blockquote styles:

This is an example of a blue ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="blue">Your blockquote message goes here…</blockquote>

This is an example of a red ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="red">Your blockquote message goes here…</blockquote>

This is an example of a green ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="green">Your blockquote message goes here…</blockquote>

This is an example of a orange ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="orange">Your blockquote message goes here…</blockquote>

This is an example of a grey ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="grey">Your blockquote message goes here…</blockquote>

List styles:

To use the list styles below create a list in the following format: <ul class="class name"><li>….</li><li>….</li>…</ul>

  • To apply this list style use: <ul class="list-1"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-2"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-3"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-4"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-5"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-6"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-7"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-8"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-9"><li>….</li><li>….</li>…</ul>
  • To apply this list style use: <ul class="list-10"><li>….</li><li>….</li>…</ul>

Dropcaps:

You can generate a dropcap by using the following shortcode sintax: [dropcap]A[/dropcap], the result:
Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.

Expandable Button shortcode:

You can generate a button by using the following shortcode sintax (if style is not specified it defaults to dark):
[button text="Read more…" title="Nice Button" url="http://link-goes-here.com/" align="left"]
Result:

Read more...

Here’s another example with longer text and ‘right’ alignment and the ‘title’ attribute ommitted, here’s the syntax:
[button text="This button is really long…" style="white" url="http://link-goes-here.com/" align="right"]
Result:

Looooooooooong button...

Small button example (if style is not specified it defaults to dark):
[small_button text="Read more…" title="Nice Button" url="http://link-goes-here.com/" align="left"]
Result:

Read more...

Small button example:
[small_button text="Read more…" style="white" url="http://link-goes-here.com/" align="right"]
Result:

Read more...

Sign Up Button

Sign Up button example:
[signup text="Read more…" target="_blank" url="http://link-goes-here.com/"]
Result:

Custom Button:

You can pick the colors, size and alignment of your button.
To generate a custom button use the following shortcode syntax:

Custom Button Custom Button Custom Button Custom Button Custom Button Custom Button Custom Button Custom Button

[custom_button text="Custom Button" title="Custom Button" url="http://www.your-link-goes-here.com/" size="medium" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]

The “size” options are: ‘small’, ‘medium’, ‘large’ and ‘x-large’.:

X-Large Custom Button

[custom_button text="X-Large Custom Button" title="X-Large Custom Button" url="http://www.your-link-goes-here.com/" size="x-large" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]
Large Custom Button

[custom_button text="Large Custom Button" title="Large Custom Button" url="http://www.your-link-goes-here.com/" size="large" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]
Medium Custom Button

[custom_button text="Medium Custom Button" title="Medium Custom Button" url="http://www.your-link-goes-here.com/" size="medium" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]
Small Custom Button

[custom_button text="Small Custom Button" title="Small Custom Button" url="http://www.your-link-goes-here.com/" size="small" bg_color="#FF5C00" text_color="#FFFFFF" align="left" target="_self"]

Right alignment:

Large Custom Button

[custom_button text="Large Custom Button" title="Large Custom Button" url="http://www.your-link-goes-here.com/" size="large" bg_color="#FF5C00" text_color="#FFFFFF" align="right" target="_self"]

Divider Shortcodes

There are two types of dividers:

[divider]
[divider_top]

Will produce:


Pullquote & Blockquote styles:

This is a left pullquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.

[pullquote style="left"]Your quote text goes here...[/pullquote]
  • Note: Another attribute besides style="left" is quote="light" which is optional and switches the color of the quote graphic to light color for use against darker backgrounds, if not specified then it defaults to dark
This is a right pullquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.

[pullquote style="right"]Your quote text goes here...[/pullquote]
  • Note: Another attribute besides style="right" is quote="light" which is optional and switches the color of the quote graphic to light color for use against darker backgrounds, if not specified then it defaults to dark

This is an example of a ‘blockquote’. Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.

<blockquote>Your blockquote text goes here...</blockquote>
  • Note: To switch the color of the quote graphic to light color for use against darker backgrounds, add a class "bq-light", if not specified then it defaults to dark

Disclaimer

Important: This demo is purely for demonstration purposes and all the content are designed to showcase the QualiFire WP theme on a live site. All images are copyrighted to their respective owners.

Sign Up Today

Get the latest news and events by subscribing up for our newsletter