Warp comes with a sophisticated layout system to create any kind of sidebar or widget layout. You can easily manage the sidebar's positions and widths in the theme administration. Widgets can have different styles and be placed in any position offered by this theme. Each position has its own layout. You can align widgets side-by-side, stack them or choose your own grid layout. Show or hide widgets on mobile devices, while the grid adapts perfectly to your layout.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="myclass">...</div>qinsidea q element
Badge 1 Success 4 Warning 3 Danger 4
Lorem ipsum dolor.
Someone famous
| Table | Heading |
|---|---|
| Table | Data |
| Table | Data |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Use the [pricing_grid] shortcode to create a set of pricing tables. You can create a minimum of 2 pricing tables and a maximum of 6 pricing tables.
[pricing_grid columns="2"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid][pricing_grid columns="3"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]You can set a pricing table to have focus by using the tm-table-focus option in the table-config attribute. You can further shift the focus pricing table upwards to create symmetry by using the tm-shift-top option. Notice also how the focused table has more items to make it larger and thus fitting with the shift.
[pricing_grid columns="3"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]Not included[/li]
[/pricing_table][pricing_table table-config="tm-table-focus tm-shift-top" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]<a href="#" title="your tooltip goes here" data-uk-tooltip="{pos: 'top'}"><abbr>detail with tooltip</abbr></a>[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]Not included[/li]
[/pricing_table]
[/pricing_grid][pricing_grid columns="4"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £39 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]
Use the [pricing_table_animate] shortcode to animate the pricing tables. You can set the animation as fade, scale-up, scale-down, slide-top, slide-bottom, slide-left, slide-right, shake or scale. Set the delay option in milliseconds to alter the order in which they appear.
[pricing_grid columns="4"]
[pricing_table_animate table-config="" price="from £9 a month" table-caption="Basic" action-url="#" action-caption="Get quote" animation="slide-right" delay="300"]
[li icon="icon-grav-checkmark-circle"]24/5 Support[/li]
[li icon="icon-grav-checkmark-circle"]3 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]1 User Licence[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]1 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="" price="from £19 a month" table-caption="Premium" action-url="#" action-caption="Get quote" animation="slide-right" delay="100"]
[li icon="icon-grav-checkmark-circle"]24/6 Support[/li]
[li icon="icon-grav-checkmark-circle"]5 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]3 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]3 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="tm-table-focus tm-shift-top" price="from £29 a month" table-caption="Standard" action-url="#" action-caption="Get quote" animation="fade" delay="50"]
[li icon="icon-grav-checkmark-circle"]24/6 Support[/li]
[li icon="icon-grav-checkmark-circle"]5 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]3 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]Best option[/li]
[li icon="icon-grav-checkmark-circle"]3 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="" price="from £199 a month" table-caption="Developer" action-url="#" action-caption="Get quote" animation="slide-left" delay="400"]
[li icon="icon-grav-checkmark-circle"]24/7 Support[/li]
[li icon="icon-grav-checkmark-circle"]7 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]5 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]5 Domain[/li]
[/pricing_table_animate]
[/pricing_grid][pricing_grid columns="5"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="tm-table-focus tm-shift-top" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 4" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £39 a month" table-caption="Plan 5" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]
[grid_column size="3"]
[lightbox src="/web/images/demo/gallery/1.jpg" title="title" group="gallery1" style=""]
[overlay_icon][image style="uk-overlay-scale" src="/web/images/demo/gallery/1.jpg" alt="image" width="605" height="605"/][/overlay_icon]
[/lightbox]
[lightbox src="/web/images/demo/gallery/2.jpg" title="title" group="gallery1" style=""]
[overlay_icon][image style="uk-overlay-scale" src="/web/images/demo/gallery/2.jpg" alt="image" width="605" height="605"/][/overlay_icon]
[/lightbox]
[lightbox src="/web/images/demo/gallery/3.jpg" title="title" group="gallery1" style=""]
[overlay_icon][image style="uk-overlay-scale" src="/web/images/demo/gallery/3.jpg" alt="image" width="605" height="605"/][/overlay_icon]
[/lightbox]
[/grid_column]
Author
May 2, 2030 at 1:55 pm
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.