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.

---

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.

---

Image Headers

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

---

Checklist

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

 

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

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:

---

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.

---

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.

 

 

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.

---

Toggles

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

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.

---

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.

---

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.

 

---

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.