Page Elements such as alerts, tab, and accordion adds beauty to your website. They are useful in organizing or emphasizing information for our users to read. Klein doesn’t include shortcodes in the theme. The main reason is simple – a It’s bad practice (read here why). Instead, Klein is using ZillaShortcode plugin by ThemeZilla. This way, you can just switch theme and your shortcode generated contents won’t be affected.
Alerts
[zilla_alert style=”white”] At vero eos et accusamus et iusto odio dignissimos ducimus. [/zilla_alert][zilla_alert style=”grey”] At vero eos et accusamus et iusto odio dignissimos ducimus. [/zilla_alert][zilla_alert style=”yellow”] At vero eos et accusamus et iusto odio dignissimos ducimus. [/zilla_alert][zilla_alert style=”green”] At vero eos et accusamus et iusto odio dignissimos ducimus. [/zilla_alert][zilla_alert style=”red”] At vero eos et accusamus et iusto odio dignissimos ducimus. [/zilla_alert]
[zilla_one_half]
Tabs
[zilla_tabs] [zilla_tab title=”Title 1 “] Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates. [/zilla_tab] [zilla_tab title=”Title 2″] At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati. [/zilla_tab] [zilla_tab title=”Title 3”] Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod. [/zilla_tab] [/zilla_tabs]
[/zilla_one_half]
[zilla_one_half_last]
Toggle
[zilla_toggle title=”Toggle Title 1 ” state=”open”] Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod. [/zilla_toggle][zilla_toggle title=”Toggle Title 2 ” state=”closed”] Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates. [/zilla_toggle]
[/zilla_one_half_last]
Buttons
‘Buttons’ are available in 3 sizes (small,medium,large). Available colors are gray, black, green, light-blue, blue, red, orange, and purple.
DEMO
[zilla_button url=”#” style=”light-blue” size=”large” type=”round” target=”_blank”] Button Text [/zilla_button][zilla_button url=”#” style=”green” size=”large” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”red” size=”large” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”black” size=”large” type=”round” target=”_self”] Button Text [/zilla_button]
[zilla_button url=”#” style=”light-blue” size=”medium” type=”round” target=”_blank”] Button Text [/zilla_button][zilla_button url=”#” style=”green” size=”medium” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”red” size=”medium” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”black” size=”medium” type=”round” target=”_self”] Button Text [/zilla_button]
[zilla_button url=”#” style=”light-blue” size=”small” type=”round” target=”_blank”] Button Text [/zilla_button][zilla_button url=”#” style=”green” size=”small” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”red” size=”small” type=”round” target=”_self”] Button Text [/zilla_button][zilla_button url=”” style=”black” size=”small” type=”round” target=”_self”] Button Text [/zilla_button]