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.
There are other module positions which come in handy, namely:
off-canvas - Appears on the left to show the mobile menu. It can also be used to place other modules
modal-a, modal-b and modal-c - shows a module in a popup dialog box. See this page for more information
mega-menu - You can use this position to add a third-party menu
Icons can be added in menus, lists, buttons, modules, and basically, in any content. These icons are made available by Font Awesome and Pixeden. These icons use icon fonts which ensures they look sharp even on retina displays.
[icon style="icon-gear"/]
Adding icons to Menu items
To add an icon to a menu item, go to Extensions > Template Manager > click on the template to edit > on the second tab "Options", select 'Menus' > choose a menu from the dropdown > in the icon column, select the icon you'd want to add for the respective menu item
Adding icons to Modules
To add an icon to a menu item, go to Extensions > Template Manager > click on the template to edit > on the second tab "Options", select 'Modules' > search or filter for the modules on the top fields > in the icon column, select the icon you'd want to add for the respective module
Adding icons to lists
To add an icon to a list, use the list shortcode and apply the 'list-icons' style > then specify the icon name in the list items. You can see more examples here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Headline
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.
To add a line beneath a heading, use the uk-module-title style. Example:
Your title goes here
markup
[heading size="h3" style="uk-module-title"]Your title goes here[/heading]
Column Blocks
Column grid is a robust layout that is both responsive and nestable. It can accomodate upto 10 columns by using pre-defined widths. The columns are fully responsive in all devices. The following table shows an overview of the shortcode sizes you can use to create columns:
Class
Description
[column size="1-1"]
Fills 100% of the available width.
[column size="1-2"]
Divides the grid into halves.
[column size="1-3"] to [column size="2-3"]
Divides the grid into thirds.
[column size="1-4"] to [column size="3-4"]
Divides the grid into fourths.
[column size="1-5"] to [column size="4-5"]
Divides the grid into fifths.
[column size="1-6"] to [column size="5-6"]
Divides the grid into sixths.
[column size="1-10"] to [column size="9-10"]
Divides the grid into tenths.
Examples
One half
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One half
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One third
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
One fourth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Two tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
five tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.
Three tenth
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
markup
[grid]
[column size="1-3"]
your content here
[/column]
[column size="1-3"]
your content here
[/column]
[column size="1-3"]
your content here
[/column]
[/grid]
note
To add a nested grid (grid within a grid,) use the [child_grid] shortcode
markup
[grid]
[child_grid]
...
[/child_grid]
[/grid]
Blocks
Blocks are distinct ways of enumarating points in paragraphs with numbers, dates or icons. For block-numbers, you can use any numbering or alphabetical format.
Block numbers
1
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
2
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
3
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
4
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
5
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
6
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
To view a list of available icons that you can use in block icons, click here.
Blockquotes
Blockquotes are a nice way to show some commentary or slogan accompanied by the author or name of the commenter. To create a standard blockquote, use the [blockquote] shortcode. Inline quotations can also be defined by using the <q> element.
Blockquote example
Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality. Let things flow naturally
John Doe
markup
[blockquote author="author_name"]
your quote goes here
[/blockquote]
The [testimonial] shortcode adds an avatar and icon attribute to the native blockquote. avatar attribute shows an image of the author by specifying a url to the image. icon attribute is used to add a transparent icon that is positioned bottom left.
Testimonial example
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
John Doe
Head of Sales, envato
markup
[testimonial author="author name" title="author's title" avatar="url-path-to-avatar" icon="icon"]
your quote goes here
[/testimonial]
important
You can omit any of the parameters of testimonial (author, title) but not the 'avatar' parameter. If you'd like to use the testimonial without the avatar, use the blockquote shortcode instead
Inline code
To define a short inline computer code use the <code> element. For a larger code snippet use the <pre> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
You can add different size classes to your button to create button size variation using the size classes uk-button-mini, uk-button=small or uk-button-large
Dropdowns are a creative way to provide more options on a click or hover element. With Uikit dropdown component, you can attach the dropdown to couple of elements to enrich your UI composition.
Button with dropdowns
To create a button dropdown, wrap the [dropdown] shortcode around a button that you'd like to add a dropdown menu, then add the dropdowm markup right after the button. Additionally, you can add an arrow icon using the [icon] shortcode to depict a dropdown menu.
To create a large alert with added padding, use the uk-alert-large style in the alert shortcode.
We are because of you
All of all our customers are happy with our current and upcoming projects. The other 5% are learning the secret of appreciating good stuff. It is possible for you to do whatever you choose, if you first get to know who you are
markup
[alert close-button style="success uk-alert-large"]
[heading size="h3" style="uk-module-title"]We are because of you[/heading]
<p>All of all our customers are happy with our current and upcoming projects. The other 5% are learning the secret of appreciating good stuff. It is possible for you to do whatever you choose, if you first get to know who you are</p>
[/alert]
Panels
Use the panel shortcode to create panels
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Panel Title
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel]
[heading size="h3"]Panel Title[/heading]
Your content here
[/panel]
important
In each of these examples, we've nested the panel code within the column grids.
Style modifiers
You can add style modifiers uk-panel-box-primary and uk-panel-box-secondary to change the visual appearance of the panel. You can also add the uk-panel-title to the heading to adapt the heading styling to the panel.
Primary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Secondary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel style="uk-panel-box-primary"]
[heading size="h3" style="uk-panel-title"]Panel Title[/heading]
Your content here
[/panel]
Panel title with Icons
You can also add icons to the panels by using the [icon] shortcode right next to the header.
Primary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Secondary Panel
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
markup
[panel style="uk-panel-box-primary"]
[heading size="h3" style="uk-panel-title"][icon style="icon-envelope-o"/] Panel Title[/heading]
Your content here
[/panel]
Using panels to define person's biodata
A pretty neat way of using panels is creating biodata for a person e.g for company staff. You can use the [person] shortcode to create a panel that gives you the option to add the person's name, the title and the person's avatar.
Charles Finney
Founder
Change will not come if we wait for some other person or some other time
Linda Russ
Head of Marketing
Change will not come if we wait for some other person or some other time
George Freeby
Head of ICT
Change will not come if we wait for some other person or some other time
George Freeby
Head of ICT
Change will not come if we wait for some other person or some other time
markup
[person name="George Freeby" title="Head of ICT" avatar="images/demo/avatar/client-1.png"]
<p>Change will not come if we wait for some other person or some other time</p>
<br/>
<div class="uk-text-right">
[icon_button icon="icon-pinterest" url="#" target="_self"][/icon_button]
[icon_button icon="icon-linkedin" url="#" target="_self"][/icon_button]
[icon_button icon="icon-facebook" url="#" target="_self"][/icon_button]
</div>
[/person]
Badges
You can use badges to highlight a segment of text within your content by using the [badge] shortcode
new
legend
note
markup
[badge]new[/badge]
Color variations
You can change the color scheme of the badge by adding the following styles: note, success, warning, or danger. You can also use the uk-badge-notification to have a rounded badge, normally used with numbering.
To hide or show text in a retractable panel, use the [toggle] shortcode. A good example of how the toggles can be used is in createing a Frequently Asked Question section by using multiple toggles. To have the toggle open on page load, set the state option to open; To have the toggle closed by default, set the state option to closed
open toggle
How can I find happiness?
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="open" title="Your toggle title here"]Your toggle content here[/toggle]
closed toggle
How can I find happiness?
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
markup
[toggle state="closed" title="Your toggle title here"]Your toggle content here[/toggle]
Toggle with code
You can also use the toggles to show/hide code snippets by adding the code state to the toggle
show code
<ul> <li class="uk-nav-header uk-navbar-nav-subtitle">Menu Heading<div>Subtitle possible</div></li> <li><a href="#">[icon style="icon-envelope-o"/] Menu Icon</a></li> <li><a href="#">[icon style="icon-heart-o"/] Another Menu item</a></li> <li class="uk-nav-divider"></li> </ul>
markup
[toggle state="closed code" title="Your toggle title here"]Your toggle code here[/toggle]
Tooltips
Tooltips are snippets that provide more information on hover. They can be added to any element by adding the data-uk-tooltip attribute and specifying the title in the same element.
Use the [progress] shortcode to create a progress bar in your content. The progress bar width is defined by the width option. The following options can be used in the style parameter:
To create a set of tabs, use the [tab] shortcode. Uikit tabs fit nicely in responsive layouts by converting the tabs into a dropdown menu. The tabs also scale to fit its contents by adjusting the tab height automatically.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the second tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the third tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
Vertical tabs use a combination of [tab_grid], [column] and [tab] shortcodes. The [tab_grid] shortcode is used to define the tab container; the [column] shortcode is used to define the widths of the tabs and content; the [tab] shortcode creates the tab elements.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the second tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This is the third tab
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.
This section doesn't use shortcodes but rather, it uses basic html. In that case you'll need to toggle the editor view (if you are using editors like TinyMCE) to html mode to be able to create your table.
To create clean formatted tables using uikit style, add the uk-table class to a table. The table rows will be separated by lines.
You can view more examples and classes that you can use from here
Modal Box
Use the [modal_box] shortcode to show a popup box with overlay. The [modal_box] shortcode can also be linked with these module positions: modal-a, modal-b and modal-c. By using one of these positions as your target, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.
target
Description
modal-a
show modal box for modules in modal-a position
modal-b
show modal box for modules in modal-b position
modal-c
show modal box for modules in modal-c position
For each module linked to modal-a, modal-b or modal-c, you can use Module Class Suffix to style it just like a normal module. The target parameter can also be the id of a content section.
Size modifier
To adjust the size (width) of the modal box, add modal-small or modal-large to the Module Class Suffix of the module.
[modal_box link target="modal-a"]modal-a[/modal_box]
[modal_box link target="modal-b"]modal-b[/modal_box]
[modal_box link target="modal-c"]modal-c[/modal_box]
The [modal_box] shortcode can also be used for inline content by using the following sytnax:
markup
<!-- create a link that will trigger the pop-up modal box -->
[modal_box link target="mycontent"]my link[/modal_box]
<!-- create the content of the modal box -->
[modal_box content target="mycontent" style="uk-panel-box-primary"]
...
[/modal_box]
Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too. Be kind whenever possible. It is always possible.
Audio
To create an audio player, use the [audio] shortcode
You can also stream youtube or vimeo videos using the player, by using the following shortcodes, where the id is the video id on the respective channel
Author
May 2, 2090 at 1:55 pm
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.