Solstice comes with simple to use shortcodes built right in, such as buttons and columns. To use the shortcodes, follow the instructions below.

Buttons

Button shortcode can be added to any page, post, or widget. To add, use the following:

[button url="http://bottomlessdesign.com/demos/solstice/" label="Example Button" size="small" target="_blank"]Example Button

[button url="http://bottomlessdesign.com/demos/solstice/" label="Example Button" size="medium" target="_blank"]Example Button

[button url="http://bottomlessdesign.com/demos/solstice/" label="Example Button" size="large" target="_blank"]Example Button

The button shortcode supports 5 attributes: url, label, color (optional), size (optional), and target (optional).

Columns

Columns shortcode can be added to any page, post, or widget. Columns can be created as one half, one third, two thirds, or one fourth of the content area’s width. To add, use the following:

[one_third]
Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third]
Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third]

[one_third_last]
Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.
[/one_third_last]

Notice the addition of “_last” to the last column’s shorcode. This is necessary for the columns to display properly.

Columns are available in the following widths:
[one_fourth]…content goes here…[/one_fourth]
[one_half]…content goes here…[/one_half]
[three_fourth]…content goes here…[/three_fourth]
[one_third]…content goes here…[/one_third]
[two_third]…content goes here…[/two_third]

Images can be inserted into the column shortcode and HTML can also be used (such as links or bold/italic text).

Pull Quotes

Pull Quotes can be added to any page, post, or project. To use a Pull Quote, go to the Text view and add a class of pull-left or pull-right to your desired quote. For example:

<span class="pull-left">Place your (left) Pull Quote text here. Lorem ipsum dolor sit amet, adipiscing elit. Pascidunt neque non nulla pellentesque.</span>

Place your (left) Pull Quote text here. Lorem ipsum dolor sit amet, adipiscing elit. Pascidunt neque non nulla pellentesque.

Praesent placerat auctor massa, et tempus eros tempus in. Donec id egestas felis. Aliquam rhoncus nibh sed lorem bibendum, sed suscipit ex varius. Vivamus maximus luctus tortor eu varius. Mauris a tortor vitae sapien sagittis viverra vulputate ut eros. Curabitur enim dui, tincidunt a varius quis, dapibus sed nulla.

Pellentesque auctor metus tellus, ut dictum purus blandit tincidunt. Nullam hendrerit magna enim, ut pharetra diam aliquet quis. Aenean venenatis commodo lacus, sed interdum odio euismod at. Morbi posuere dui eget felis fringilla, id pulvinar massa suscipit. Etiam varius felis eu purus rutrum, quis euismod sem pharetra. Cras efficitur scelerisque velit, sed tincidunt magna blandit pulvinar.

<span class="pull-right">Place your (right) Pull Quote text here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium.</span>

Place your (right) Pull Quote text here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium.

Morbi at libero velit. Integer accumsan ligula ac sollicitudin lobortis. Pellentesque vitae convallis dolor. Aenean semper nisl id accumsan pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Sed imperdiet neque eu eros pulvinar condimentum. Mauris neque mauris, consectetur et cursus eget, sagittis non nibh. Ut vitae egestas dui. Pellentesque et accumsan neque. Aenean quis neque nec nunc elementum facilisis non non velit. Vivamus et luctus nibh.

Integer eget massa cursus arcu convallis accumsan. Aliquam aliquet diam ac velit lacinia, nec egestas nisl posuere. Curabitur fermentum libero eu nisl auctor, ac pretium eros lobortis. Pellentesque urna ligula, mollis vitae suscipit non, lobortis id nisi.