Short Codes – references

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.


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.

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.


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.

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.

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.


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.

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.


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

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

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

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


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

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.


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

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

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

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

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


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.

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.

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


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.

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.


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

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

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

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

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

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


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.

One Sixth Lorem ipsum dolor sit amet, consectetur


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.

CloseSuccess, you are about to catch on fire.

HideWarning, you are about to catch on fire.

RemoveError, you are about to catch on fire.


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?