Buttons, Columns and Other Useful Design Elements

The following design elements can be used within any WordPress Page or Post when using the Text Editor (rather than the Visual Editor). They can also be used within a standard Text widget. Examples are shown below with code samples just after.

Responsive Video Embed

<div class="videoembed-wrap">
    <div class="videoembed">[embed]VIDEO URL[/embed] or VIDEO EMBED CODE</div>
</div>

Contact Information Box

Contact Information

Jane Q. Smith

555-555-5555

123 John St. New York, NY 99999

This is the place to list additional info such as store hours or whatever you like.

Google Map Embed

<div class="contactinfo">
    <div class="contactinfo-inner">
        <h4>Contact Information</h4>
        <p class="name">NAME</p>
        <p class="phone">PHONE</p>
        <p class="email">EMAIL</p>
        <p class="address">ADDRESS</p>
        <p class="addinfo">ADDITIONAL INFO</p>
    </div>
</div>
<div class="mapembed-wrap">
    <div class="mapembed">
        GOOGLE MAPS EMBED CODE
    </div>
</div>

Testimonial

“Lorem ipsum dolor sit amet, id falli inermis duo, mea agam clita nostrud et. Vim ei dicit facete, his aliquam accusamus repudiandae id. Ne stet tracta tos vis. Vel ei autem velit. Te ius ridens everti, est alii epicuri an. Lorem ipsum dolor sit amet, id falli inermis duo.”
John Smith – Some Company, Inc.

Small Testimonial

“Lorem ipsum dolor sit amet, id falli inermis duo, mea agam clita nostrud et. Vim ei dicit facete, his aliquam accusamus repudiandae id. Ne stet tracta tos vis. Vel ei autem velit. Te ius ridens everti, est alii epicuri an. Insolens dignissim aliquando ad eos. d mea labore virtute dissentiunt. Utroque periculis percipitur ei seat leon ibiza.”
John Smith – Some Company, Inc.
<div class="testimonial">
CONTENT
<span class="test-author">NAME</span>
</div>
<div class="testimonial small">
CONTENT
<span class="test-author">NAME</span>
</div>

Horizontal Divider

<div class="hdivider"></div>

Buttons


Default Button Blue Button Pink Button Black Button Gold Button Red Button Turquoise Button Green Button Purple Button Orange Button Dark-Blue Button Rust Button
<a href="http://www.mylink.com" class="button">Default Button</a>
<a href="http://www.mylink.com" class="button blue">Blue Button</a>
<a href="http://www.mylink.com" class="button dark-blue">Dark-Blue Button</a>
<input type="submit" value="Default Button" class="button" />
<input type="button" value="Default Button" class="button" />

Large Buttons


Default Button Blue Button Pink Button Black Button Gold Button Red Button Turquoise Button Green Button Purple Button Orange Button Dark-Blue Button Rust Button
<a href="http://www.mylink.com" class="button large">Default Button</a>
<a href="http://www.mylink.com" class="button large blue">Blue Button</a>
<a href="http://www.mylink.com" class="button large dark-blue">Dark-Blue Button</a>
<input type="submit" value="Default Button" class="button large" />
<input type="button" value="Default Button" class="button large" />

Small Buttons


Default Button Blue Button Pink Button Black Button Gold Button Red Button Turquoise Button Green Button Purple Button Orange Button Dark-Blue Button Rust Button
<a href="http://www.mylink.com" class="button small">Default Button</a>
<a href="http://www.mylink.com" class="button small blue">Blue Button</a>
<a href="http://www.mylink.com" class="button small dark-blue">Dark-Blue Button</a>
<input type="submit" value="Default Button" class="button small" />
<input type="button" value="Default Button" class="button small" />

Columns

One-Half

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Half

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="one-half first">CONTENT</div>
<div class="one-half">CONTENT</div>

Columns

<div class="one-third first">CONTENT</div>
<div class="one-third">CONTENT</div>
<div class="one-third">CONTENT</div>

Columns

Two Thirds

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="two-thirds first">CONTENT</div>
<div class="one-third">CONTENT</div>

Columns

One-Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

One-Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

One-Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

One-Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

<div class="one-fourth first">CONTENT</div>
<div class="one-fourth">CONTENT</div>
<div class="one-fourth">CONTENT</div>
<div class="one-fourth">CONTENT</div>

Columns

Two Fourths

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="two-fourths first">CONTENT</div>
<div class="one-fourth">CONTENT</div>
<div class="one-fourth">CONTENT</div>

Columns

Three Fourths

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

One Fourth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat.

<div class="three-fourths first">CONTENT</div>
<div class="one-fourth">CONTENT</div>

Columns

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="one-fifth first">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>

Columns

Two-Fifths

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="two-fifths first">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>

Columns

Three-Fifths

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="three-fifths first">CONTENT</div>
<div class="one-fifth">CONTENT</div>
<div class="one-fifth">CONTENT</div>

Columns

Four-Fifths

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

One-Fifth

Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt.

<div class="four-fifths first">CONTENT</div>
<div class="one-fifth">CONTENT</div>

Top