This plugin allows you to add the following shortcodes to a page or post:

  • Columns (12 col grid)
  • Buttons
  • Buttons with Ionicons icons or FontAwesome icons
  • Toggles
  • Tabs
  • Icons block
  • Services block
  • Dividers
  • Clear

Note: If you set Divider Style РDouble, you also need  set Divider Height Р4px

Customizer settings

Plugin Customizer contains the following settings:

  • Change Button background, Button color, Button icon color Button border-radius
  • Change Toggle background
  • Change Icons block color
  • Change Divider color, height and style

Shortcodes examples

Buttons shortcode

[q_button url="https://wordpress.org/" icon="" target="_blank" ]Button[/q_button]
[q_button url="https://wordpress.org/" icon="ion-trash-a" target="_blank" ]Icon button[/q_button]
[q_button url="https://wordpress.org/" icon="fa fa-check-square" target="_blank" ]Icon button[/q_button]

Toggles shortcode

[q_toggle title="Toggle title text1"]Sample toggle text[/q_toggle]

Tabs shortcode

[q_tabs][q_tab id="1" name="Tab 1"]Sample tab1 text[/q_tab][q_tab id="2" name="Tab 2"]Sample tab2 text[/q_tab][q_tab id="3" name="Tab 3"]Sample tab3 text[/q_tab][/q_tabs]

Icons block shortcode

[q4][q_icon class="ion-flag"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend mauris turpis. Nam a dolor quis odio mattis feugiat sit amet a arcu. Suspendisse potenti. Curabitur ipsum arcu, laoreet ut condimentum in, malesuada quis lectus. Ut et congue elit. Vivamus lacus mi, egestas id mauris at, finibus euismod ipsum. Maecenas facilisis mauris eu massa volutpat commodo.
[/q_icon][/q4]
[q4][q_icon class="ion-heart"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend mauris turpis. Nam a dolor quis odio mattis feugiat sit amet a arcu. Suspendisse potenti. Curabitur ipsum arcu, laoreet ut condimentum in, malesuada quis lectus. Ut et congue elit. Vivamus lacus mi, egestas id mauris at, finibus euismod ipsum. Maecenas facilisis mauris eu massa volutpat commodo.
[/q_icon][/q4]
[q4][q_icon class="ion-star"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend mauris turpis. Nam a dolor quis odio mattis feugiat sit amet a arcu. Suspendisse potenti. Curabitur ipsum arcu, laoreet ut condimentum in, malesuada quis lectus. Ut et congue elit. Vivamus lacus mi, egestas id mauris at, finibus euismod ipsum. Maecenas facilisis mauris eu massa volutpat commodo.
[/q_icon][/q4]

Services block shortcode

Divider shortcode

[q_divider]

Clear block shortcode

[q_clear]

2 Columns shortcode

[q6]Column 50%[/q6]
[q6]Column 50%[/q6]

3 Columns shortcode

[q4]Column 33.33%[/q4]
[q4]Column 33.33%[/q4]
[q4]Column 33.33%[/q4]

4 Columns shortcode

[q3]Column 25%[/q3]
[q3]Column 25%[/q3]
[q3]Column 25%[/q3]
[q3]Column 25%[/q3]