Hydra includes a number of shortcodes which can be inserted into post and pages to enhance your content.?These shortcodes are easily accessed via?a post editor. Further information on shortcodes and their usage can be found in the provided documentation.

Progress Bar

The Progress Bar shortcode can be used to show the current status of a task. Below is an example this shortcode in use.

[eckosc_progressbar label=”Example Label” percentage=”80″ color=”#ef5734″]
[eckosc_progressbar label=”Example Label” percentage=”34″ color=”#ffcc2f”]
[eckosc_progressbar label=”Example Label” percentage=”55″ color=”#168eea”]
[eckosc_progressbar label=”Example Label” percentage=”90″ color=”#2baf2b”]

This shortcode includes a?customization options for the accent color, label and status percentage. Any number of Percentage Bars can be added in series or by itself.

Accordion

The Progress Bar shortcode can be used to display secondary content which can be shown or hidden via user input. Below is an example this shortcode in use.

[eckosc_accordion title=”Example Title” state=”closed”]This is an example of the Accoridon shortcode. This content can include text, formatting and images just like the standard content area. This Accordion has been set to be ‘Closed’ by default and requires user input to be visible.[/eckosc_accordion]

[eckosc_accordion title=”Example Title” state=”closed”]This is an example of the Accoridon shortcode. This content can include text, formatting and images just like the standard content area. This Accordion has been set to be ‘Closed’ by default and requires user input to be visible.[/eckosc_accordion]

[eckosc_accordion title=”Example Title (Open Default)” state=”open”]This is an example of the Accoridon shortcode. This content can include text, formatting and images just like the standard content area. This Accordion has been set to be ‘Open’ by default and requires user input to be visible.[/eckosc_accordion]

This shortcode includes a?customization options for the title?and its default state (open or closed). Any number of Accordions?can be added in series or by itself.

Button

The Button?shortcode can be used to display call to action type buttons. Below is an example this shortcode in use.

[eckosc_button title=”Standard” icon=”” size=”standard” position=”inline” color=”#ef5734″ rounded=”true” url=”http://google.com” blank=”true”]
[eckosc_button title=”Large” icon=”” size=”large” position=”inline” color=”#ffcc2f” rounded=”false” url=”http://google.com” blank=”true”]
[eckosc_button title=”Extra Large” icon=”” size=”extra” position=”inline” color=”#168eea” rounded=”true” url=”http://google.com” blank=”true”]

These buttons can be set to three different sizes of Standard, Large, and Extra Large. They can also contain a FontAwesome icon as demonstrated?below.

[eckosc_button title=”Label” icon=”fa-times” size=”standard” position=”inline” color=”#ef5734″ rounded=”true” url=”http://google.com” blank=”true”]
[eckosc_button title=”Label” icon=”fa-check” size=”large” position=”inline” color=”#ffcc2f” rounded=”false” url=”http://google.com” blank=”true”]
[eckosc_button title=”Label” icon=”fa-chevron-right” size=”extra” position=”inline” color=”#168eea” rounded=”true” url=”http://google.com” blank=”true”]

As well as inline, these buttons can be set to block or centered. A centered button is idle for CTA (Call-to-Action) uses. A button link can also be set to open within a new tab, opposed to the active tab. Below is an example of a centered button.

[eckosc_button title=”Center Button” icon=”” size=”large” position=”center” color=”#2baf2b” rounded=”true” url=”http://google.com” blank=”true”]

This shortcode includes a?customization options for the label, icons, accent color, size, and button style (rounded corners etc.). Any number of Buttons?can be added in series or by itself.

Status Message

The Status Message?shortcode can be used to display notifications. Below is an example this shortcode in use.

[eckosc_status_message title=”Status Title” icon=”fa-twitter” type=”info” message=”This is an example of the Status Message shortcode. This content can contain text and standard?formatting.”]

[eckosc_status_message title=”Status Title” icon=”fa-times” type=”error” message=”This is an example of the Status Message shortcode. This content can contain text and standard?formatting.”]

This shortcode includes a?customization options for the title, associated icon, and notification style (Error, Success, Info etc). Any number of Status Messages?can be added in series or by itself.

Annotation

The Annotation?shortcode can be used to annotate?text to images, text, tables, and other content types. Below is an example this shortcode in use.

[eckosc_annotation title=”Annotation Title” text=”Annotation Text”][/eckosc_annotation]

This shortcode includes a?customization options for the title, and annotation message. Any number of Status Messages?can be added in series or by itself.

Block & Pull Quote

The Block Quote and Pull Quote?shortcodes can be for easy access to quote formatting. Below is an example of these?shortcodes in use with some dummy contents.

[eckosc_quote quote=”I don?t believe you have to be better than everybody else. I believe you have to be better than you ever thought you could be.” source=”Ken Venturi” url=”” pull=”false”]

Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus tellus quis lorem.

Columns

The Columns?shortcode can be used to split the single contents column into multiple columns. Below is an example this shortcode in use.

Two Columns

[eckosc_column_container count=”two”]
[eckosc_column_item]1/2[/eckosc_column_item]
[eckosc_column_item]2/2[/eckosc_column_item]
[/eckosc_column_container]

Four?Columns

[eckosc_column_container count=”four”]
[eckosc_column_item]1/4[/eckosc_column_item]
[eckosc_column_item]2/4[/eckosc_column_item]
[eckosc_column_item]3/4[/eckosc_column_item]
[eckosc_column_item]4/4[/eckosc_column_item]
[/eckosc_column_container]

Six?Columns

[eckosc_column_container count=”six”]
[eckosc_column_item]1/6[/eckosc_column_item]
[eckosc_column_item]2/6[/eckosc_column_item]
[eckosc_column_item]3/6[/eckosc_column_item]
[eckosc_column_item]4/6[/eckosc_column_item]
[eckosc_column_item]5/6[/eckosc_column_item]
[eckosc_column_item]6/6[/eckosc_column_item]
[/eckosc_column_container]

Tabs

The Tabs shortcode can be used to display related secondary content into tabbed containers. Below is an example this shortcode in use.

[eckosc_tab_container]
[eckosc_tab_item title=”First Tab”]This is the first tabbed contents and an example of the Tabs?shortcode. This content can include text, formatting and images just like the standard content area.[/eckosc_tab_item]
[eckosc_tab_item title=”Second Tab”]This is the second?tabbed contents and an example of the Tabs?shortcode. This content can include text, formatting and images just like the standard content area.[/eckosc_tab_item][eckosc_tab_item title=”Third Tab”]This is the third?tabbed contents and an example of the Tabs?shortcode. This content can include text, formatting and images just like the standard content area.[/eckosc_tab_item]
[/eckosc_tab_container]

This shortcode includes a?customization options for the title?and its contents. Any number of Tabs?can be added to a single container, and multiple containers can be used throughout the post or page.

Content Embeds

In addition to the included shortcodes, Hydra fully supports the WordPress third-party service embeds, such as Twitter, Youtube, Vimeo, Facebook etc. More information on these embeds and their usage can be found within the WordPress documentation.