Shortcodes


Flex Containers

The flex container is the foundation of the new shortcode framework. whatever elements you put in it will be squished, side by side into columns. it allows you to segment and combine shortcodes in useful ways.

this is a boring flex container


Columns

Flex containers will arrange almost any elements you put in them side by side and try to squish things to fit.  Columns are similar, except vertical containers. So you put each column you want inside the flex container and you have infinite columns(theoretically. not really). We can accomplish other elements with these two as building blocks.

column 1

Pede morbi egestas justo pulvinar, convallis parturient ipsum rutrum sit, est nulla congue. Quia orci lobortis deserunt mauris ac sit, minus nibh malesuada nam consequat volutpat felis. Amet fusce, urna odio sagittis justo integer, nec luctus maecenas laoreet turpis curabitur convallis. Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna. Elementum pellentesque aliquam leo volutpat massa volutpat.

column2

Pede morbi egestas justo pulvinar, convallis parturient ipsum rutrum sit, est nulla congue. Quia orci lobortis deserunt mauris ac sit, minus nibh malesuada nam consequat volutpat felis. Amet fusce, urna odio sagittis justo integer, nec luctus maecenas laoreet turpis curabitur convallis. Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna. Elementum pellentesque aliquam leo volutpat massa volutpat.

column3

Pede morbi egestas justo pulvinar, convallis parturient ipsum rutrum sit, est nulla congue. Quia orci lobortis deserunt mauris ac sit, minus nibh malesuada nam consequat volutpat felis. Amet fusce, urna odio sagittis justo integer, nec luctus maecenas laoreet turpis curabitur convallis. Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna. Elementum pellentesque aliquam leo volutpat massa volutpat.


Image Headers

Full width fixed headers in all their glory. 3 sizes to choose from.

small heading

normal

large


Checklist

The text on these doesn’t align under the bullet, and the checkboxes are clickable

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

 

if we put them in a flex container, each item gets a column

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

You could structure columns like that, if they were divisible by the number of items, but if you want aligned columns of multiple list items,  you want to use the standard column feature inside a flex container, like this:

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content


Icons

You can change the size of the icon by adding fa-lg, fa-2x, fa-3x, etc to the code


Alert box

There are 4 types of alerts: standard, success, warning, and danger. They come in two sizes.
Tip: The boxes double as flex containers.

Standard alert
Success alert
Warning alert
Danger alert


Page anchor

A page anchor lets you link to a place within the current page. You just create a link pointing to #[name]. put an anchor right before the content you want it to link to.

The context menu links are set up to link to the anchor below this text from anywhere on the page.


Info Image

You can fill this with content formatted any way you’d like including shortcodes. and choose to have it on the left(default), right, top, or bottom. Height is minimum height in pixels(default:400px) and only required for vertical boxes.

 

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

 

 

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

or stick them in flex containers to do multiple side by side. This is two flex containers stacked, each with two info-images boxes. The second row has a right orientation for a clean masonry effect.

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.


Toggles

Each toggle is independent now. They don’t need to be wrapped in a group.

Toggle 1

Toggle content 1

Toggle 2

Toggle content 2

You can easily combine them with other elements for unique features. For instance, two column toggles, toggles combined with checkboxes, or icons in the toggle title. Here’s a two column toggle with info image boxes inside. Remember, elements will be formatted as columns inside the flextainer tag. To keep several elements in the same column, they need to be wrapped in the column tag.


info image toggle

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

info image toggle

Content stuff

Tellus in vestibulum commodo morbi, a consectetuer tortor in lorem, maecenas ut quam, rutrum massa posuere, at est. Semper luctus est est pede pharetra. Felis pellentesque massa qui, mus est cras in sed, tellus diam accumsan porttitor, morbi gravida convallis aenean consectetuer, vestibulum nulla malesuada quis commodo in. Quis in penatibus et duis iaculis morbi, adipiscing pretium porttitor integer in a leo, mi urna.

 


Google Map

The width is a percentage of the container the map is in(in this case, the content container, but it could be a column or toggle or whatever). The height is a percentage of the browser height.

Tip: adding a zoom property to the shortcode allows you to zoom in and out on the map. default is 17.


Counter

Counters are just the number now, so they can be paired with anything.

So to make the icon counter you’d do a flex container with multiple columns. inside each column, you’d have an icon, a counter, and a description.

Right now might be a good time to mention that the alignment and text settings in the editor apply to the shortcode output for most things.

things counted

things counted

things counted


Icon box

Pick your icon and your link. The content goes between the shortcode tags. This is another case where you can control the alignment with the editor.

And, of course, if it’s in a flex container, the standard treatment applies.


Combinations

These fundamental building blocks should be capable of building more complex elements. Just keep in mind that you can embed shortcode inside other shortcodes, but you cannot embed a shortcode inside itself.

Toggle 1

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

Toggle 2

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

Toggle 1

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

Toggle 2

Title1 checklist item content

Title2 checklist item content

Title3 checklist item content

 

Aheading

Bheading

alabel1

alabel2

alabel3

avalue1

avalue2

avalue3

blabel1

blabel2

blabel3

bvalue1

bvalue2

bvalue3


Youtube

Use the video ID, not the url.
if you click share, you’ll get a url like this:
https://youtu.be/[Video ID]
in the address bar it will be formatted like this:
e.g. https://www.youtube.com/watch?v=[Video ID]&playlist…
You can adjust the height and width of the player.


Context menu

The context menu is a bit easier now. Just wrap your links in the tag. Each link must be on a new line.