Formatting Template–Unpublished

A sample page containing a ton of sample formatting on a full-width page template. You get the sample content XML to import with purchase, so you can simply copy/paste what you need out for your own use!

Remember, with WordPress any page you see can be set as a home page.


Media Queries (Resize the page!)

While you’re browsing the site, resize your window to see the responsive design adapt to fit your screen.


[column_start width=”one_half”]

One Half Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end] [column_start width=”one_half last”]

One Half Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end]
[column_start width=”one_third”]

One Third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et.

[column_end] [column_start width=”one_third”]

One Third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et.

[column_end] [column_start width=”one_third last”]

One Third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et.

[column_end]
[column_start width=”one_third”]

One Third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et.

[column_end] [column_start width=”two_third last”]

Two Third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end]
[column_start width=”one_fourth”]

One Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci.

[column_end] [column_start width=”one_fourth”]

One Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci.

[column_end] [column_start width=”one_fourth”]

One Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci.

[column_end] [column_start width=”one_fourth last”]

One Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci.

[column_end]
[column_start width=”one_fourth”]

One Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci.

[column_end] [column_start width=”three_fourth last”]

Three Fourth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end]
[column_start width=”one_fifth”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet.

[column_end] [column_start width=”one_fifth”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet.

[column_end] [column_start width=”one_fifth”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet.

[column_end] [column_start width=”one_fifth”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet.

[column_end] [column_start width=”one_fifth last”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet.

[column_end]
[column_start width=”two_fifth”]

Two Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end] [column_start width=”two_fifth”]

Two Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end] [column_start width=”one_fifth last”]

One Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat mauris enim.

[column_end]
[column_start width=”three_fifth”]

Three Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end] [column_start width=”two_fifth last”]

Two Fifth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur.

[column_end]
[column_start width=”one_sixth”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end] [column_start width=”one_sixth”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end] [column_start width=”one_sixth”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end] [column_start width=”one_sixth”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end] [column_start width=”one_sixth”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end] [column_start width=”one_sixth last”]

One Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

[column_end]
[column_start width=”five_sixth”]

Five Sixth Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et orci feugiat placerat. Mauris enim nisl, euismod sit amet varius eu, aliquet et nunc. Vestibulum est ligula, consectetur a auctor a, dictum eu enim. In mollis felis et velit euismod in commodo risus iaculis. In nec est diam.

[column_end] [column_start width=”one_sixth last”]

One Sixth Lorem ipsum dolor sit amet, consectetur

[column_end] [column_clear]

Tabs!

The tabs are actually part of the Skeleton framework and use basic HTML, no need for plugins! Just copy and edit or duplicate what I have below to get started!

  • The tabs are clean and simple unordered-list markup and basic CSS. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis dolor a tellus suscipit posuere. Sed placerat nisi rutrum felis vestibulum scelerisque. Mauris dapibus vulputate ipsum, et bibendum tellus consequat ac.
  • The tabs are cross-browser, but don’t need a ton of hacky CSS or markup. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis dolor a tellus suscipit posuere. Sed placerat nisi rutrum felis vestibulum scelerisque. Mauris dapibus vulputate ipsum, et bibendum tellus consequat ac. Maecenas a diam eros. Morbi iaculis aliquam ante a accumsan. Quisque sed sem a nibh cursus condimentum. Donec vulputate urna nec turpis imperdiet et pharetra odio adipiscing. Phasellus congue felis et metus molestie sollicitudin. Ut turpis nibh, consectetur et accumsan eu, sagittis quis nisi.
  • The tabs work like a charm even on mobile devices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis dolor a tellus suscipit posuere. Sed placerat nisi rutrum felis vestibulum scelerisque. Mauris dapibus vulputate ipsum, et bibendum tellus consequat ac. Maecenas a diam eros. Morbi iaculis aliquam ante a accumsan.

[cudazi_message type=’success’ close=’Close’]Success, you are about to catch on fire.[/cudazi_message] [cudazi_message type=’warning’ close=’Hide’]Warning, you are about to catch on fire.[/cudazi_message] [cudazi_message type=’error’ close=’Remove’]Error, you are about to catch on fire.[/cudazi_message]

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a lorem et.


List: Standard

  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item

List: class=’circle’

 

  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item

List: class=’square’

 

  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item

List: class=’disc’

 

  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item
  • Example List Item

This is a blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at arcu quis nibh gravida bibendum. Vivamus sit amet neque dolor. Fusce vestibulum dui auctor dolor malesuada feugiat.

Piece of cake right?