Shortcode Layouts

Winland Electronics, Inc. 9 Style Guide Overview 9 Shortcode Layouts

Introduction

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. With just one line shortcodes can embed files, create objects or determine layouts that would normally require more code. The actual code is handled behind the scenes, while shortcodes simply make reference to it and pass any additional attributes.  Shortcode = shortcut.

Using shortcodes for layouts means that you have greater control over individual content blocks within the site while maintaining the integrity and responsiveness of the site. The Magis website is based on a twelve-column fluid grid.

Style Guide
  • Text & Links
  • Form Elements
  • Shortcode Elements
  • Shortcode Layouts
    • Two Thirds Left
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper nullam amet platea per, cras duis lorem rutrum consectetur dapibus arcu lobortis class iaculis blandit pulvinar fusce praesent enim dictumst id himenaeos fringilla, accumsan luctus ad praesent dolor quis senectus vel velit iaculis velit fermentum vel nec auctor aliquam euismod diam, non habitasse risus dapibus facilisis platea aptent inceptos ultricies, ornare dapibus curae maecenas eleifend luctus sem tellus.
    • One Third Right
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium.
    • Add a two-column layout with the following:
      [two-thirds-left]...left column content...[/two-thirds-left] [one-third-right]...right column content...[/one-third-right]
    • Half Left
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper nullam amet platea per, cras duis lorem rutrum consectetur dapibus arcu lobortis class iaculis blandit pulvinar fusce praesent enim dictumst id himenaeos fringilla, accumsan luctus ad praesent dolor.
    • Half Right
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper nullam amet platea per, cras duis lorem rutrum consectetur dapibus arcu lobortis class iaculis blandit pulvinar fusce praesent enim dictumst id himenaeos fringilla, accumsan luctus ad praesent dolor.
    • [half-left]...left column content...[/half-left] [half-right]...right column content...[/half-right]
    • Third Left
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • Third
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • Third Right
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • [third-left]...left column content...[/third-left] [third]...middle column content...[/third] [third-right]...right column content...[/third-right]
    • Fourth Left
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • Fourth
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • Fourth
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper.
    • Fourth Right
       Lorem ipsum aliquam porta etiam neque odio, nostra turpis felis urna velit, tincidunt ornare pretium curae rhoncus justo potenti est nulla aptent ut tempus conubia tempus curabitur, himenaeos vulputate vitae faucibus semper
    • [fourth-left]...left column content...[/fourth-left] [fourth]...middle column content...[/fourth] [fourth]...middle column content...[/fourth] [fourth-right]...right column content...[/fourth-right]
    Style Guide
  • Text & Links
  • Form Elements
  • Shortcode Elements
  • Shortcode Layouts