1. Plugin Description
Uix Shortcodes brings an amazing set of beautiful and useful elements to your site that lets you do nifty things with very little effort. It makes it easy and quick to add the shortcode you need to achieve the page layout or function you desire. It provides easy to use over 26+ shortcodes.
The content elements are the heart of any page builder. These are the elements shortcodes that come with theme. You may customize the shortcode by changing/adding the parameters. "Content Shortcode", "Column Shortcode", "Web Elements Shortcode", "Container Shortcode", and so on. They could be used together.
Included Modules
The currently available default elements:
- container
- parallax
- image slider
- timeline
- columns
- buttons
- progress bar
- google maps
- special heading
- pricing table
- icons
- features boxes
- testimonials carousel
- team
- list of clients
- responsive video
- audio
- accordion
- dividing line
- tabs
- code with highlighter
- share buttons
- contact form(use commenting form template)
- portfolio(support lightbox)
- recent posts with custom template
- author card
2. Dependencies
WordPress requires at least the PHP 5.3+
Requires at least: WP 4.2.
3. Introduction & Usage
3.1. Usage
1. After activating your theme, you can see a prompt pointed out as absolutely critical. Go to "Dashboard » Appearance » Install Plugins". Or, upload the plugin to wordpress, Activate it. (Access the path (/wp-content/plugins/) And upload files there.)
2. Go to your WordPress admin panel, edit or create a new post (or page). You’ll see our tiny little button in the toolbar, preceded by a separator:
WP Editor Screenshots:
3.2. Custom CSS
You can overview the original styles to overwrite it. It will be on creating new styles to your website, without modifying original .css files. Go to "Dashboard » Uix Shortcodes" in the WordPress Administration Screens, then link to a specific tab like "Custom CSS".
There is a second way, make a new Cascading Style Sheet (CSS) document which name to uix-shortcodes-style.css to your templates directory. You can connect to your site via an FTP client, make the changes and then upload the file back to the server. Once you have created an existing CSS file (uix-shortcodes-style.css), Uix Shortcodes will use it as a default style sheet to your WordPress Theme. Of course, Uix Shortcodes's function of "Custom CSS" is still valid.
3.3. Container Builder
This shortcode required when you create content as container or mark the specific content. "Container" shortcode allows you use 100% width or boxed layout. You can customize background, height, border, color diversification, parallax background, wrapper margin, content padding for sections.
"Content Shortcode", "Column Shortcode", "Web Elements Shortcode" and "Container Shortcode" could be used together to divide the page into sections.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Choose Layout | Selector (Returns a String) |
 |
This option will be useful if you use 100% width page template. Otherwise, the container will be center. |
| - | - | - | |
| Height (px) | Number | 0 | It will determine the height of the container in pixels. The browser automatically calculates the container height if the value is 0. |
| Vertically Center Content | Boolean | true | When enabled, the content of container is placed in the middle. |
| Background Image | String | - | Background image URL. The CSS properties for the background appear after upload.
|
| Background Color | Selector (Returns a String) |
- | Set a color for the container background. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Parallax | Number | 0 | Add a parallax scrolling effect of the container on your pages. You need value > 0. |
| Class | String | - | Additional class for container. |
| Wrapper Margin (px) | Number | margin-top:25pxmargin-bottom: 25pxmargin-left: 0margin-right: 0 |
Use the input fields below to customize the margin of container wrapper. |
| Content Padding (px) | Number | padding-top:0pxpadding-bottom: 0pxpadding-left: 25padding-right: 25 |
Use the input fields below to customize the padding of content from container. |
| Border | Boolean | false | When enabled, it will add a custom border for container. |
|
To set up the following properties, the "Border" checkbox should be checked. |
|||
Border Width (px)depends on Border option |
Number | 1 | It will determine the width of the container border in pixels. |
Border Colordepends on Border option |
Selector (Returns a String) |
- | Set a color for the container border. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
Border Styledepends on Border option |
Selector (Returns a String) |
solid | The option allows you to specify the style of a container border. The following values are allowed: solid, double, dashed, dotted. |
Example(header)
[uix_container parallax='0.2' class='' height='350px' margin_top='25' margin_bottom='25' margin_left='0' margin_right='0' padding_top='70' padding_bottom='0' padding_left='45' padding_right='45' bgimage='http://your.website.com/test-img.jpg' bgimage_repeat='no-repeat' bgimage_position='left' bgimage_attachment='scroll' bgimage_size='cover' bgcolor='' layout='fullwidth' ]
<h2><span style="color: #ffffff;">Section Title</span></h2>
<span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Teneo, inquit, finem illi videri nihil dolere. Esse enim, nisi eris, non potes.</span>
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Try It[/uix_button]
[/uix_container]
[uix_container parallax='0' class='' height='auto' margin_top='25' margin_bottom='25' margin_left='0' margin_right='0' padding_top='40' padding_bottom='40' padding_left='125' padding_right='125' borderwidth='3px' borderstyle='solid' bordercolor='rgb(226, 226, 226)' bgcolor='rgb(234, 234, 234)' layout='fullwidth' ]
<h4 style="text-align: center;">Center Text & Auto Height</h4>
<p style="text-align: center;">[uix_dividing_line style='gradient' color='dark' width='100%' opacity='17']</p>
<h6 style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Teneo, inquit, finem illi videri nihil dolere. Esse enim, nisi eris, non potes. Cum audissem Antiochum, Brute, ut solebam, cum M. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Duo Reges: constructio interrete. Nam si propter voluptatem, quae est ista laus, quae possit e macello peti? Respondeat totidem verbis. Sic enim censent, oportunitatis esse beate vivere.</h6>
[/uix_container]
Example(page)
[uix_container parallax='0' class='' width='1200px' height='auto' margin_top='25' margin_bottom='25' margin_left='0' margin_right='0' padding_top='0' padding_bottom='0' padding_left='25' padding_right='25' bgcolor='' layout='center' ]
[uix_features col='3']
[uix_features_item col='3' icon='binoculars' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Creative WordPress Theme[/uix_features_item_title]
[uix_features_item_desc][p]Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='anchor' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Interactive Creative[/uix_features_item_title]
[uix_features_item_desc][p]Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='adjust' iconcolor='' titlecolor='' desccolor='' last='1']
[uix_features_item_title]Premium Templates[/uix_features_item_title]
[uix_features_item_desc][p]DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.[/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features]
[uix_features col='3']
[uix_features_item col='3' icon='cubes' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Multiple layouts[/uix_features_item_title]
[uix_features_item_desc][p]Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='coffee' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Search Engine Optimization[/uix_features_item_title]
[uix_features_item_desc][p]Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='cloud-download' iconcolor='' titlecolor='' desccolor='' last='1']
[uix_features_item_title]Freebies[/uix_features_item_title]
[uix_features_item_desc][p]Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi.[br]Vitiosum est enim in dividendo partem in genere numerare. Paulum, cum regem Persem captum adduceret, eodem flumine invectio[/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features]
[uix_heading color='' style='grand' align='center' size='45px' uppercase='true' spacing='2px' fillbg='']Our Team[/uix_heading][uix_heading_line line='true' width='182px' height='5px']
<p style="text-align: center;"><span style="color: #808080;">Summum a vobis bonum voluptas dicitur.</span></p>
[uix_team col='4' avatarfillet='0%' gray='true']
[uix_team_item col='4' name='Jone Smmith' avatar='http://your.website.com/photo.png' position='CEO' social_1='twitter|#' social_2='facebook|#' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Donny Kiu' avatar='http://your.website.com/photo.png' position='Photographer' social_1='twitter|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Doky' avatar='http://your.website.com/photo.png' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Haec Linla' avatar='http://your.website.com/photo.png' position='UI Designer' social_1='facebook|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/p][/uix_team_item_desc]
[/uix_team_item]
[/uix_team]
[/uix_container]
[uix_container parallax='0.4' class='' height='315px' margin_top='25' margin_bottom='25' margin_left='0' margin_right='0' padding_top='135' padding_bottom='0' padding_left='25' padding_right='25' bgimage='http://your.website.com/bg1.jpg' bgimage_repeat='no-repeat' bgimage_position='left' bgimage_attachment='scroll' bgimage_size='cover' bgcolor='' layout='fullwidth' ]
<p style="text-align: center;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si verbum sequimur, primum longius verbum praepositum quam bonum.</span></p>
<p style="text-align: center;"><span style="color: #ffffff;">Summum a vobis bonum voluptas dicitur.</span></p>
[/uix_container]
[uix_container parallax='0' class='' width='1200px' height='auto' margin_top='25' margin_bottom='0' margin_left='0' margin_right='0' padding_top='0' padding_bottom='0' padding_left='25' padding_right='25' bgcolor='' layout='center' ]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='3']
[uix_progress_bar barcolor='#a2bf2f' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='75' units='%' linewidth='3' precsize='12px' title='Multiple layouts' top='25' bottom='0' left='25' right='25'][p]Duis mollis, est non commodo luctus[/p][/uix_progress_bar]
[/uix_column]
[uix_column grid='3']
[uix_progress_bar barcolor='#fa8072' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='99' units='%' linewidth='3' precsize='12px' title='Full PJAX' top='25' bottom='0' left='25' right='25'][p]Donec sed odio dui.[/p][/uix_progress_bar]
[/uix_column]
[uix_column grid='3']
[uix_progress_bar barcolor='#ffd700' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='88' units='%' linewidth='3' precsize='12px' title='Search Engine Optimization' top='25' bottom='0' left='25' right='25'][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit[/p][/uix_progress_bar]
[/uix_column]
[uix_column grid='3' last='1']
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='35' units='%' linewidth='3' precsize='12px' title='Creative WordPress Theme' top='25' bottom='0' left='25' right='25'][p]Duis mollis, est non commodo luctus[/p][/uix_progress_bar]
[/uix_column]
[/uix_column_wrapper]
[uix_heading color='' style='grand' align='center' size='45px' uppercase='true' spacing='2px' fillbg='']Pricing[/uix_heading][uix_heading_line line='true' width='182px' height='5px']
<p style="text-align: center;"><span style="color: #808080;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si verbum sequimur.</span></p>
[uix_pricing]
[uix_pricing_item target='_blank' class='' url='#' period='per month' bcolor='green' imcolor='#d59a3e' col='3']
[uix_pricing_item_level]free[/uix_pricing_item_level]
[uix_pricing_item_price]$49[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere?[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]TRY FOR FREE[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]UX prototyping engaging[/li][li]For years is now over[/li][li]That search is now over[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='_blank' class='uix-sc-price-important' url='#' period='per month' bcolor='green' imcolor='#d59a3e' col='3']
[uix_pricing_item_level]premium[/uix_pricing_item_level]
[uix_pricing_item_price]$69[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Maximas animo voluptates percipiat omnibusque partibus maiores quam corpore, quid occurrat non videtis.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]UX prototyping engaging[/li][li]For years is now over[/li][li]That search is now over[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='_blank' class='' url='#' period='per month' bcolor='green' imcolor='#d59a3e' col='3' last='1']
[uix_pricing_item_level]professional[/uix_pricing_item_level]
[uix_pricing_item_price]$109[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Neminem videbis ita laudatum, ut artifex callidus.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]<s>Invalid Feature Description</s>[/li][li]<s>Invalid Feature Description 2</s>[/li][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]UX prototyping engaging[/li][li]For years is now over[/li][li]That search is now over[/li][li]Design is the method[/li][li]Look SEO[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[/uix_pricing]
[/uix_container]
[uix_container parallax='0' class='' height='5px' margin_top='0' margin_bottom='0' margin_left='0' margin_right='0' padding_top='0' padding_bottom='0' padding_left='25' padding_right='25' bgimage='http://your.website.com/bg2.jpg' bgimage_repeat='no-repeat' bgimage_position='left' bgimage_attachment='scroll' bgimage_size='cover' bgcolor='' layout='fullwidth' ][/uix_container]
Preview(header)
Preview(page)
3.4. Content Builder
Recent Posts With Custom Template
This shortcode allows you to fine-tune the posts you wish to display on a page. You can use the following placeholders in the post list item templates, which will be replaced by the actual values when the content is displayed.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Number of posts to show | Number | 5 | Set the number of posts to display per page there. |
| Order By | String | DESC | Designates the ascending or descending order of the posts. The following values are allowed:DESC, ASC, rand. |
| Select Category | String | all | Get all posts related to particular category name. |
| Loop Template | HTML|String | [p]<li><a href="[uix_recent_posts_link]">[uix_recent_posts_title]</a></li>[/p] | You can use the following placeholders in the post list item templates, which will be replaced by the actual values when the content is displayed:[uix_recent_posts_link] --> Permalink[uix_recent_posts_title] --> Title[uix_recent_posts_date_m] --> Month[uix_recent_posts_date_M] --> Month display in English[uix_recent_posts_date_d] --> Day[uix_recent_posts_date_y] --> Year[uix_recent_posts_excerpt] --> Excerpt[uix_recent_posts_thumbnail] --> Featured image |
| Output text before the <a> of the link | HTML|String | <ul> | You can create custom tags for html and assign specific class name. For example: <ul class="custom-list"> |
| Output text after the </a> of the link | HTML|String | </ul> | The HTML tag should have a corresponding ending tag. |
Example
[uix_recent_posts order='DESC' cat='all' show='5' before='<ul>' after='</ul>'][p]<li><a href="[uix_recent_posts_link]">[uix_recent_posts_title]</a></li>[/p][/uix_recent_posts]
Preview
Pricing Table
This shortcode allows you to add a new 3 or 4 column pricing section from your editor toolbar.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Title | String | - | A title for the pricing table. |
| Price | Number | - | You want for the price. |
| Price Color | Selector (Returns a String) |
 |
You want for the text color of price. |
| Currency | String | $ | Your desired currency sign. |
| Period | String | per month | The period (time span) for the price. |
| Description | String | - | Description of this pricing table |
| Button Label | String | - | That is the text you would like displayed on the button. |
| Button Link | String | - | A destination link for the button. |
| Button Color | Selector (Returns a String) |
 |
You want for the text color of price. |
| Open in new tab | Boolean | false | When enabled, the button link to open in a new tab. |
| Features | HTML|String | - | Your pricing table content. Type one word or sentence per line when press "ENTER". The textarea is supported by HTML tags. |
| Active | Boolean | false | When enabled, this pricing table to be marked as active (highlighted by default). If you defined custom styles with custom names, you can customize using the "class" parameter of shortcode. Default: uix-sc-price-important Example: [uix_pricing_item class='uix-sc-price-important'] |
| Hide | Boolean | false | When enabled, this pricing table will hide. |
Example (3 col)
[uix_pricing]
[uix_pricing_item target='' class='' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='3']
[uix_pricing_item_level]free[/uix_pricing_item_level]
[uix_pricing_item_price]$49[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]TRY FOR FREE[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='' class='uix-sc-price-important' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='3']
[uix_pricing_item_level]premium[/uix_pricing_item_level]
[uix_pricing_item_price]$69[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='' class='' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='3' last='1']
[uix_pricing_item_level]professional[/uix_pricing_item_level]
[uix_pricing_item_price]$109[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][li]Another Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[/uix_pricing]
Example (4 col)
[uix_pricing]
[uix_pricing_item target='' class='' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='4']
[uix_pricing_item_level]free[/uix_pricing_item_level]
[uix_pricing_item_price]$49[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]TRY FOR FREE[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='' class='uix-sc-price-important' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='4']
[uix_pricing_item_level]premium[/uix_pricing_item_level]
[uix_pricing_item_price]$69[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='' class='' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='4']
[uix_pricing_item_level]professional[/uix_pricing_item_level]
[uix_pricing_item_price]$109[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][li]Another Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[uix_pricing_item target='' class='' url='' period='per month' bcolor='green' imcolor='#d59a3e' col='4' last='1']
[uix_pricing_item_level]expand[/uix_pricing_item_level]
[uix_pricing_item_price]$139[/uix_pricing_item_price]
[uix_pricing_item_desc][p]Some description text here.[/p][/uix_pricing_item_desc]
[uix_pricing_item_button]BUY[/uix_pricing_item_button]
[uix_pricing_item_detail][ul][li]Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][li]Invalid Feature Description[/li][li]Another Feature Description[/li][li]Another Feature Description[/li][/ul][/uix_pricing_item_detail]
[/uix_pricing_item]
[/uix_pricing]
Preview
Accordion
Accordions are extremely useful for organizing and displaying large amounts of content without cluttering the page, and make it easy for the user to find what they’re looking for.
You can click "click here to add an item" button to add a new item.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Transition Effect | Selector (Returns a Number) |
1 | Controls the animation type. The following values are allowed:slide, none. |
| Open The First One Automatically | Boolean | true | When enabled, it will open the first element. |
| List Item | Group | - | Per group contains Accordion Title and Accordion Content within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item. 
|
Example
[uix_toggle tabs='0' effect='1']
[uix_toggle_item open='true']
[uix_toggle_item_title]Accordion Title 1[/uix_toggle_item_title]
[uix_toggle_item_content open='true'][p]Accordion content 1 here.[/p][/uix_toggle_item_content]
[/uix_toggle_item]
[uix_toggle_item]
[uix_toggle_item_title]Accordion Title 2[/uix_toggle_item_title]
[uix_toggle_item_content][p]Accordion content 2 here.[/p][/uix_toggle_item_content]
[/uix_toggle_item]
[uix_toggle_item]
[uix_toggle_item_title]Accordion Title 3[/uix_toggle_item_title]
[uix_toggle_item_content][p]Accordion content 3 here.[/p][/uix_toggle_item_content]
[/uix_toggle_item]
[/uix_toggle]
Preview
Tabs
Tabs allow you to organize your content and display only what is necessary at a particular moment.
You can click "click here to add an item" button to add a new item.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Transition Effect | Selector (Returns a Number) |
3 | Controls the animation type. The following values are allowed: slide, fade, none. |
| List Item | Group | - | Per group contains Tab Title and Tab Content within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item.
|
Example
[uix_toggle style='vertical' tabs='1' effect='2']
[uix_toggle_item tabs='1']
[uix_toggle_item_title]Tab Title 1[/uix_toggle_item_title]
[uix_toggle_item_title]Tab Title 2[/uix_toggle_item_title]
[uix_toggle_item_title]Tab Title 3[/uix_toggle_item_title]
[/uix_toggle_item]
[uix_toggle_group]
[uix_toggle_item_content][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata.[/p][/uix_toggle_item_content]
[uix_toggle_item_content][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Duo Reges: constructio interrete. Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.[/p][/uix_toggle_item_content]
[uix_toggle_item_content][p]Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.[/p][/uix_toggle_item_content]
[/uix_toggle_group]
[/uix_toggle]
[uix_toggle style='horizontal' tabs='1' effect='1']
[uix_toggle_item tabs='1']
[uix_toggle_item_title]Tab Title 1[/uix_toggle_item_title]
[uix_toggle_item_title]Tab Title 2[/uix_toggle_item_title]
[uix_toggle_item_title]Tab Title 3[/uix_toggle_item_title]
[/uix_toggle_item]
[uix_toggle_group]
[uix_toggle_item_content][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata.[/p][/uix_toggle_item_content]
[uix_toggle_item_content][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Duo Reges: constructio interrete. Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.[/p][/uix_toggle_item_content]
[uix_toggle_item_content][p]Obsecro, inquit, Torquate, haec dicit Epicurus? Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.[/p][/uix_toggle_item_content]
[/uix_toggle_group]
[/uix_toggle]
Preview
Portfolio
This shortcode allows you to easily present portfolio section. The shortcode will display projects in different ways, depending on how you use the optional attributes to customize the portfolio layout.
You can click "click here to add an item" button to unlimited add items. Upload a thumbnail as cover. You can also upload a full preview image that it is an optional choice. To set up the project destination URL by clicking "set up destination URL with this project" link on the content of the popup window.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Column | Number | 3 | Way of a grid list for presenting homogenous data and typically images. Allows 2, 3 and 4 columns across the page. |
| Filterable by Category | Boolean | false | When enabled, you can add a filterable portfolio to your site to showcase your content. If a particular category is selected, the list of projects is instantly regenerated with a new list of projects from the selected category. Note: you need fill the "Category Name" input for per project. 
|
| Open link in new tab | Boolean | false | When enabled, the project destination link to open in a new tab.
This option is valid when you use "Destination URL". 
|
| Radius of Fillet Image | Number | 0 | To set the fillet radius in pixels for project picture. |
| Class Prefix | String | uix-sc-portfolio- | Prefix string attached to the classes of all elements generated by the portfolio, the default value is "uix-sc-portfolio-".
/*-- Example generated elements class name --*/
.uix-sc-portfolio-tiles { ... }
.uix-sc-portfolio-tiles .uix-sc-portfolio-item { ... }
.uix-sc-portfolio-tiles .uix-sc-portfolio-item > .uix-sc-portfolio-image { ... }
.uix-sc-portfolio-tiles .uix-sc-portfolio-item > .uix-sc-portfolio-image img { ... }
...
|
| List Item | Group | - | Per group contains Thumbnail, Full Preview, Project Title, Category Name, Description of Project and Destination URL within each sub-group. Upload a thumbnail as cover. You can also upload a full preview image that it is an optional choice. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item. To set up the project destination URL by clicking "set up destination URL with this project" link on the content of the popup window.  |
Example (3, 4 and 2 col)
[uix_portfolio filterable='1' classprefix='uix-sc-portfolio-' col='3' imagefillet='0%']
[uix_portfolio_item type='Web Design' title='Project Title 1' image='http://your.website.com/list-demo-3.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. [/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='Painting' title='Project Title 2' image='http://your.website.com/list-demo-2.jpg' fullimage='http://your.website.com/list-demo-2.jpg' target='0' url='']
[uix_portfolio_item_desc][p]The description of this project.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='Web Design' title='Project Title 3' image='http://your.website.com/list-demo-1.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]Tanti autem aderant vesicae et torminum morbi, ut nihil ad eorum magnitudinem posset accedere. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris? Atque ab isto capite fluere necesse est omnem rationem bonorum et malorum. Quia dolori non voluptas contraria est, sed doloris privatio. Invidiosum nomen est, infame, suspectum.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='' title='Project Title 4' image='http://your.website.com/list-demo-2.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]The description of this project.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='3D' title='Project Title 5' image='http://your.website.com/list-demo-3.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]anti autem aderant vesicae et torminum morbi, ut nihil ad eorum magnitudinem posset accedere. Tu autem negas fortem esse quemquam posse,[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[/uix_portfolio]
[uix_portfolio filterable='0' classprefix='uix-sc-portfolio-' col='4' imagefillet='0%']
[uix_portfolio_item type='Web Design' title='Project Title 1' image='http://your.website.com/list-demo-3.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. [/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='Painting' title='Project Title 2' image='http://your.website.com/list-demo-2.jpg' fullimage='http://your.website.com/list-demo-2.jpg' target='0' url='']
[uix_portfolio_item_desc][p]The description of this project.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='Web Design' title='Project Title 3' image='http://your.website.com/list-demo-1.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]Tanti autem aderant vesicae et torminum morbi, ut nihil ad eorum magnitudinem posset accedere. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris? Atque ab isto capite fluere necesse est omnem rationem bonorum et malorum. Quia dolori non voluptas contraria est, sed doloris privatio. Invidiosum nomen est, infame, suspectum.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='' title='Project Title 4' image='http://your.website.com/list-demo-2.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]The description of this project.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='3D' title='Project Title 5' image='http://your.website.com/list-demo-3.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]anti autem aderant vesicae et torminum morbi, ut nihil ad eorum magnitudinem posset accedere. Tu autem negas fortem esse quemquam posse,[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[/uix_portfolio]
[uix_portfolio filterable='1' classprefix='uix-sc-portfolio-' col='2' imagefillet='0%']
[uix_portfolio_item type='Web Design' title='Project Title 1' image='http://your.website.com/list-demo-3.jpg' fullimage='' target='0' url='']
[uix_portfolio_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. [/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[uix_portfolio_item type='Painting' title='Project Title 2' image='http://your.website.com/list-demo-2.jpg' fullimage='http://your.website.com/list-demo-2.jpg' target='0' url='']
[uix_portfolio_item_desc][p]The description of this project.[/p][/uix_portfolio_item_desc]
[/uix_portfolio_item]
[/uix_portfolio]
Preview
Features Boxes
This shortcode will add a new features or services section from your editor toolbar.
You'll see the best results with 2 and 3 columns when you want them evenly spaced. If you need to make a 2 column section. You can unlimited add items on the content of the popup window. Relatively speaking, make a 3 column section.
You can click "click here to add an item" button to add a new item.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| List Item | Group | - | Per group contains Feature Title, Description and Feature Icon within each sub-group, and you can create your own custom color palette. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item. Multiple items per column.
|
Example (2 col)
[uix_features col='2']
[uix_features_col_left]
[uix_features_item col='2' icon='binoculars' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Creative WordPress Theme[/uix_features_item_title]
[uix_features_item_desc][p]Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='2' icon='adjust' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Premium Templates[/uix_features_item_title]
[uix_features_item_desc][p]DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='2' icon='flask' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Search Engine Optimization[/uix_features_item_title]
[uix_features_item_desc][p]Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor. [/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features_col_left]
[uix_features_col_right]
[uix_features_item col='2' icon='anchor' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Interactive Creative[/uix_features_item_title]
[uix_features_item_desc][p]Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='2' icon='cube' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Multiple layouts[/uix_features_item_title]
[uix_features_item_desc][p]Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='2' icon='paper-plane-o' iconcolor='' titlecolor='' desccolor='']
[uix_features_item_title]Freebies[/uix_features_item_title]
[uix_features_item_desc][p]Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi. [/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features_col_right]
[/uix_features]
Example (3 col)
[uix_features col='3']
[uix_features_item col='3' icon='binoculars' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Creative WordPress Theme[/uix_features_item_title]
[uix_features_item_desc][p]Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='anchor' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Interactive Creative[/uix_features_item_title]
[uix_features_item_desc][p]Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='adjust' iconcolor='' titlecolor='' desccolor='' last='1']
[uix_features_item_title]Premium Templates[/uix_features_item_title]
[uix_features_item_desc][p]DThe first approach uses Bootstraps own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5.[/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features]
[uix_features col='3']
[uix_features_item col='3' icon='cubes' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Multiple layouts[/uix_features_item_title]
[uix_features_item_desc][p]Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='coffee' iconcolor='' titlecolor='' desccolor='' ]
[uix_features_item_title]Search Engine Optimization[/uix_features_item_title]
[uix_features_item_desc][p]Aenean congue molestie sapien, nec convallis lectus interdum ut. Vestibulum facilisis, sem eu lobortis pulvinar, dui dui ornare erat, nec porta nunc quam a metus. Fusce eget consequat purus. Sed magna odio, rhoncus eget diam fermentum, mattis porttitor dolor.[/p][/uix_features_item_desc]
[/uix_features_item]
[uix_features_item col='3' icon='cloud-download' iconcolor='' titlecolor='' desccolor='' last='1']
[uix_features_item_title]Freebies[/uix_features_item_title]
[uix_features_item_desc][p]Nam et vestibulum odio. Aliquam auctor ac velit sit amet pretium. Maecenas pulvinar egestas rutrum. Nam et elit faucibus nunc euismod fringilla eu iaculis mi.[br]Vitiosum est enim in dividendo partem in genere numerare. Paulum, cum regem Persem captum adduceret, eodem flumine invectio[/p][/uix_features_item_desc]
[/uix_features_item]
[/uix_features]
Preview
Testimonials Carousel
This shortcode gives you ability to show your client testimonial in your web page.
You can click "click here to add an item" button to add a new item.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| List Item | Group | - | Per group contains Avatar, Name, Position and Details for the customer giving within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item.
|
Example
[uix_testimonials]
[uix_testimonials_item name='Name' avatar='http://your.website.com/demo-1.jpg' position='Position']
[uix_testimonials_item_desc][p]Enter some details for the customer giving this testimonial., E.g., Thank you from the bottom of our hearts.[/p][/uix_testimonials_item_desc]
[/uix_testimonials_item]
[uix_testimonials_item name='Name' avatar='http://your.website.com/demo-2.jpg' position='Position']
[uix_testimonials_item_desc][p]Enter some details for the customer giving this testimonial., E.g., Thank you from the bottom of our hearts.[/p][/uix_testimonials_item_desc]
[/uix_testimonials_item]
[/uix_testimonials]
Preview
Team
This shortcode allows you to easily present your team members. You'll see the best results with fullwidth, 2, 3 and 4 columns when you want them evenly spaced.
You can click "click here to add an item" button to unlimited add items. Upload an avatar and write a short bio so members can get a better feel for who you are and what you're about. To set up the member social media links by clicking "set up links with social network" link on the content of the popup window.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Column | Number | 4 | Way of a grid list for presenting homogenous data and typically images. Allows 2, 3 and 4 columns across the page. |
| Gray Avatar | Boolean | false | When enabled, this group converts all avatar photos to grayscale in CSS3. |
| Radius of Fillet Avatar | Number | 0 | To set the fillet radius in pixels for avatar photo. |
| Height of Grid | Number | 0 | Set height of grid so that it will fit its avatar photo. Browsers use a default stylesheet to render webpages if the value is 0. |
| List Item | Group | - | Per group contains Avatar, Name, Position, Introduction and Social Network of your team member within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item. To set up the member social media links by clicking "set up links with social network" link on the content of the popup window.  |
Example (fullwidth)
[uix_team col='fullwidth' avatarfillet='0%' gray='true']
[uix_team_item col='fullwidth' name='Jone Smmith' avatar='http://your.website.com/demo-1.jpg' position='CEO' social_1='twitter|#' social_2='facebook|#' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. Ergo hoc quidem apparet, nos ad agendum esse natos.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='Donny Kiu' avatar='http://your.website.com/demo-2.jpg' position='Photographer' social_1='twitter|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. Ergo hoc quidem apparet, nos ad agendum esse natos. Utrum igitur tibi litteram videor an totas paginas commovere? Duo Reges: constructio interrete.[/p][p]Estne, quaeso, inquam, sitienti in bibendo voluptas? Nos commodius agimus. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Itaque in rebus minime obscuris non multus est apud eos disserendi labor. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Non autem hoc: igitur ne illud quidem.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='Doky' avatar='http://your.website.com/demo-3.jpg' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='Haec Linla' avatar='http://your.website.com/demo-4.jpg' position='UI Designer' social_1='facebook|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. [/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='Tery David' avatar='http://your.website.com/demo-5.jpg' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. [/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='Jimmy' avatar='http://your.website.com/demo-6.jpg' position='Photographer' social_1='twitter|#' social_2='git|#' social_3='linkedin|#']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. [br]Ergo hoc quidem apparet, nos ad agendum esse natos. Utrum igitur tibi litteram videor an totas paginas commovere? Duo Reges: constructio interrete.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='fullwidth' name='You are here' avatar='' position='Position' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[/uix_team]
Example (4, 3 and 2 col)
[uix_team col='4' avatarfillet='0%' gray='true']
[uix_team_item col='4' name='Jone Smmith' avatar='http://your.website.com/demo-1.jpg' position='CEO' social_1='twitter|#' social_2='facebook|#' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Donny Kiu' avatar='http://your.website.com/demo-2.jpg' position='Photographer' social_1='twitter|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Doky' avatar='http://your.website.com/demo-3.jpg' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Haec Linla' avatar='http://your.website.com/demo-4.jpg' position='UI Designer' social_1='facebook|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Tery David' avatar='http://your.website.com/demo-5.jpg' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. [/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='Jimmy' avatar='http://your.website.com/demo-6.jpg' position='Photographer' social_1='twitter|#' social_2='git|#' social_3='linkedin|#']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='4' name='You are here' avatar='' position='Position' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[/uix_team]
[uix_team col='3' avatarfillet='0%' gray='false']
[uix_team_item col='3' name='Jone Smmith' avatar='http://your.website.com/demo-1.jpg' position='CEO' social_1='twitter|#' social_2='facebook|#' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='3' name='Donny Kiu' avatar='http://your.website.com/demo-2.jpg' position='Photographer' social_1='twitter|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='3' name='Doky' avatar='http://your.website.com/demo-3.jpg' position='Andriod Developer' social_1='|' social_2='|' social_3='|']
[uix_team_item_desc][p]The Introduction of this member.[/p][/uix_team_item_desc]
[/uix_team_item]
[/uix_team]
[uix_team col='2' avatarfillet='0%' gray='false']
[uix_team_item col='2' name='Jone Smmith' avatar='http://your.website.com/demo-1.jpg' position='CEO' social_1='twitter|#' social_2='facebook|#' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles.[/p][/uix_team_item_desc]
[/uix_team_item]
[uix_team_item col='2' name='Donny Kiu' avatar='http://your.website.com/demo-2.jpg' position='Photographer' social_1='twitter|#' social_2='|' social_3='|']
[uix_team_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/p][/uix_team_item_desc]
[/uix_team_item]
[/uix_team]
Preview
List Of Clients
This shortcode allows you to add a new client section of 2, 3, 4, 5 or 6 column.
You can click "click here to add an item" button to unlimited add items.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| List Item | Group | - | Per group contains LOGO and Introduction of your client member within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item. Multiple items per column.
|
Example (3 col)
[uix_client]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-1.jpg' ]
[uix_client_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. Quamquam te quidem video minime esse deterritum. Ita multa dicunt, quae vix intellegam. Ergo hoc quidem apparet, nos ad agendum esse natos.[/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-2.jpg' ]
[uix_client_item_desc][p]Estne, quaeso, inquam, sitienti in bibendo voluptas? Nos commodius agimus. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. At quicum ioca seria, ut dicitur, quicum arcan.[/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-3.jpg' last='1']
[uix_client_item_desc][p]Ergo hoc quidem apparet, nos ad agendum esse natos. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Videamus igitur sententias eorum, tum ad verba redeamus. [/p][/uix_client_item_desc]
[/uix_client_item]
[/uix_client]
[uix_client]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-4.jpg' ]
[uix_client_item_desc][p] Videamus igitur sententias eorum, tum ad verba redeamus. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt.[/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-5.jpg' ]
[uix_client_item_desc][p]Dic in quovis conventu te omnia facere, ne doleas. Eadem fortitudinis ratio reperietur. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-6.jpg' last='1']
[uix_client_item_desc][p]Estne, quaeso, inquam, sitienti in bibendo voluptas? Nos commodius agimus. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?[/p][/uix_client_item_desc]
[/uix_client_item]
[/uix_client]
[uix_client]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-7.jpg' ]
[uix_client_item_desc][p]Ergo hoc quidem apparet, nos ad agendum esse natos. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='3' logo='http://your.website.com/demo-logo-8.jpg' ]
[uix_client_item_desc][p]Videamus igitur sententias eorum, tum ad verba redeamus. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt, paria noluerunt. Suo genere perveniant ad extremum.[/p][/uix_client_item_desc]
[/uix_client_item]
[/uix_client]
Example (4 col)
[uix_client]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-1.jpg' ]
[uix_client_item_desc][p]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin aliud quid voles, postea. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-2.jpg' ]
[uix_client_item_desc][p]Estne, quaeso, inquam, sitienti in bibendo voluptas? Nos commodius agimus.[/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-3.jpg']
[uix_client_item_desc][p]Ergo hoc quidem apparet, nos ad agendum esse natos. Ego quoque, inquit, didicerim libentius si quid attuleris. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-4.jpg' last='1']
[uix_client_item_desc][p] Videamus igitur sententias eorum, tum ad verba redeamus. [/p][/uix_client_item_desc]
[/uix_client_item]
[/uix_client]
[uix_client]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-5.jpg' ]
[uix_client_item_desc][p]Dic in quovis conventu te omnia facere, ne doleas. Eadem fortitudinis ratio reperietur. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-6.jpg']
[uix_client_item_desc][p]At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?[/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-7.jpg' ]
[uix_client_item_desc][p]Ergo hoc quidem apparet, nos ad agendum esse natos. [/p][/uix_client_item_desc]
[/uix_client_item]
[uix_client_item col='4' logo='http://your.website.com/demo-logo-8.jpg' last='1']
[uix_client_item_desc][p]Videamus igitur sententias eorum, tum ad verba redeamus. [/p][/uix_client_item_desc]
[/uix_client_item]
[/uix_client]
Preview
Responsive Video
This shortcode allows you to add a responsive video. Here you can enter your video links. You can link videos from YouTube or Vimeo, or alternatively, host your own videos. If you decide to self-host your video files, you need to upload the video files via the Media section, and then enter the path to your video files in the corresponding fields. We recommend uploading videos in all three formats (WEBM, MP4, and OGV) in order to ensure compatibility with all modern browsers. In the Video Image field you can upload a background image that will be visible while the video is loading.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Video URL | String | - | The video's URL from your web browser's address bar. e.g.,https://www.youtube.com/watch?v=abc |
| Display Width (px) | Number | 560 | Defines width of the media. |
| Display Height (px) | Number | 315 | Defines height of the media. |
| Responsive of Display | Boolean | true | When enabled, using responsive video embedding. |
Example
[uix_video width='560' height='315' responsive='true' url='https://www.youtube.com/watch?v=KprJ4B6kqZo']
Preview
Audio
This shortcode allows you to add a audio. You can paste the URL of SoundCloud or Audiomack, .mp3, .ogg format, and so on.
If you are using SoundCloud or Audiomack, the "Enable SoundCloud" checkbox should be checked on the content of the popup window.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Audio URL | String | - | The MP3 audio URL. e.g.,http://example.com/my-audiofile.mp3 |
| Enable SoundCloud | Boolean | false | Add Soundcloud audio format support to your WordPress site. |
| Player Width (%) | Number | 100 | It will determine the width of the player in pixels or relative percentage to the parent container. There are two types of length units: % and px. |
| Player Height (px) | Number | 150 | It will determine the height of the player in pixels or relative percentage to the parent container. This is an invalid option if the "Enable SoundCloud" checkbox is unchecked. |
| Autoplay | Boolean | false | When enabled, the audio will begin to play once it is ready. This is an invalid option if the "Enable SoundCloud" checkbox is checked. |
| Loop | Boolean | false | When enabled, the audio will loop and play again once it has finished. This is an invalid option if the "Enable SoundCloud" checkbox is checked. |
Example
[uix_audio width='100%' height='150' soundcloud='true' autoplay='null' loop='null' url='https://soundcloud.com/globalmusic/klpetaltothemaxx']
[uix_audio width='100%' height='null' soundcloud='false' autoplay='true' loop='false' url='https://audio-download.ngfiles.com/678000/678361_Fall-Ft-Steklo.mp3']
Preview
Author Card
This shortcode designed it to allow your authors to present themselves in an elegant way.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Primary Color | Selector (Returns a String) |
 |
You want for the primary color of this author card. |
| Author Picture | String | - | The avatar or Logo of this author. |
| Author Name | String | - | The name of this author. |
| Biographical Info | String | - | The introduction of this author. The textarea is supported by HTML tags. |
| Link Text | String | → | That is the text you would like displayed on the link region. |
| Link URL | String | # | URL of this link. |
| Social Network * | String & Selector (Returns a String) | - | There are many different types of social media. You can choose custom button types. |
Example
[uix_authorcard primarycolor='#a2bf2f' btnlabel='→' btnurl='#' name='Jone Smith' avatar='http://your.website.com/photo.png' social_1='twitter|https://twitter.com/' social_2='facebook|https://www.facebook.com/' social_3='|' ][p]The Introduction of this author.[br]Uix Shortcodes makes it easy and quick to add the shortcode you need to achieve the page layout or function you desire. It provides easy to use over 21+ shortcodes. [/p] [/uix_authorcard] [uix_authorcard primarycolor='#DD514C' btnlabel='→' btnurl='#' name='Name' avatar='http://your.website.com/photo.png' social_1='|' social_2='|' social_3='|' ][p]The Introduction of this author.[/p] [/uix_authorcard]
Preview
Image Slider
This shortcode allows you to build, organize and display slideshow into any existing WordPress theme.
You can click "click here to add an item" button to unlimited add items.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Effect | Selector (Returns a String) |
slide | Controls the animation type. The following values are allowed:slide, fade. |
| Automatically Transition | Boolean | true | Setup a slideshow for the slider to animate automatically. |
| Show Paging Navigation | Boolean | false | Create navigation for paging control of each slide. |
| Show Arrow Navigation | Boolean | true | Create previous/next arrow navigation. |
| Speed of Images Appereance (ms) | Number | 1000 | Set the speed of animations, in milliseconds. |
| Delay Between Images (ms) | Number | 7000 | Set the speed of the slideshow cycling, in milliseconds |
| List Item | Group | - | Per group contains Image, Destination URL, Slider title and Slider introduction of your slider within each sub-group. The textarea is supported by HTML tags.You can click "click here to add an item" button to add a new item.
|
Example
[uix_imageslider effect='slide' loop='true' paging='false' arrows='true' speed='1000' timing='2000'] [uix_imageslider_item url='https://google.com' title='Title1' desc='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' image='http://your.website.com/slider-index-1.jpg'][/uix_imageslider_item] [uix_imageslider_item title='Title' image='http://your.website.com/slider-index-2.jpg'][/uix_imageslider_item] [uix_imageslider_item image='http://your.website.com/slider-index-3.jpg'][/uix_imageslider_item] [/uix_imageslider]
Preview
Timeline
This shortcode allows you to build a simple, interactive, historical timeline that showcases your life history or your company’s story in a responsive horizontal chronological order based on the year and the date of your posts.
You can click "click here to add an item" button to unlimited add items.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Highlight Color | Selector (Returns a String) |
|
Set a highlight color for each item. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| List Item | Group | - | Per group contains Highlight, Date and Status of your timeline within each sub-group.You can click "click here to add an item" button to add a new item.
|
Example
[uix_timeline color='#a2bf2f'] [uix_timeline_item date='4/22/2016' status='Project Created' highlight='true'][/uix_timeline_item] [uix_timeline_item date='11/15/2016' status='Process: developing' highlight='true'][/uix_timeline_item] [uix_timeline_item date='1/6/2017' status='Project Approval' highlight='true'][/uix_timeline_item] [uix_timeline_item date='TBD' status='Project Completed' highlight='false'][/uix_timeline_item] [/uix_timeline]
Preview
3.5. Column Builder
Uix Shortcodes plugin comes with 7 sample columns. You can use the layout of columns shortcode to create a beautiful showcase. Click shortcodes and add your columns types. After that add your content or other shortcode in columns tag [uix_column] ... [/uix_column].
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Padding (px) | Number | padding-top:20pxpadding-bottom: 20pxpadding-left: 0padding-right: 0 |
Use the input fields below to customize the padding of your column shortcode. Measurement units is pixels (px). |
Example
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='3']
<h4>One Fourth (1)</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='3']
<h4>One Fourth (2)</h4>
Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.
[/uix_column]
[uix_column grid='3']
<h4>One Fourth (3)</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='3' last='1']
<h4>One Fourth (4)</h4>
Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='4']
<h4>One Third</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='4']
<h4>One Third</h4>
Aliquam congue dignissim tellus, vel eleifend urna rutrum nec. Morbi et mauris vitae quam venenatis imperdiet. Proin et rutrum magna. Nulla sed venenatis leo. Suspendisse potenti. Proin faucibus cursus luctus.
[/uix_column]
[uix_column grid='4' last='1']
<h4>One Third</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='6']
<h4>One Half</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='6' last='1']
<h4>One Half</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='3']
<h4>One Third</h4>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='9' last='1']
<h4>Two Third</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='9']
<h4>Two Third</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='3' last='1']
<h4>One Third</h4>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='4']
<h4>One Fourth</h4>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='8' last='1']
<h4>Three Fourth</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='8']
<h4>Three Fourth</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[uix_column grid='4' last='1']
<h4>One Fourth</h4>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/uix_column]
[/uix_column_wrapper]
Preview
3.6. Web Elements Builder
Buttons
This shortcode enables you to add flat buttons to all of your posts and/or pages.
To set up the more properties by clicking "click on the set more attributes" button on the content of the popup window.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Button Color | Selector (Returns a String) |
|
Set a color for the button. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Text Color | Selector (Returns a String) |
 |
Set a color for the text. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Link Text | String | Link to | That is the text you would like displayed on the button. |
| Destination URL | String | - | A destination link for the button. |
| Fillet Radius | Number | 50 | To set the fillet radius in pixels for button appearance. |
| Open link in new tab | Boolean | false | When enabled, the button link to open in a new tab. |
|
To set up the following properties by clicking "click on the set more attributes" button. |
|||
| Icon's Name | Selector (Returns a String) |
- | Returns the Font Awesome library for each icon's "fa-" suffix text. Like this: <i class="fa fa-*"></i> Note: that will be pure text button if icon does not choose. |
| Font-Size for Button | Number | 12 | The font size of button in pixels. |
| Letter Spacing | Number | 2 | The letter spacing of button in pixels. |
Example
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='3' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Small[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='2' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Medium[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Large[/uix_button]
[uix_button icon='briefcase' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Icon Button[/uix_button]
[uix_button icon='briefcase' fontsize='16px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Icon Button[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='0' paddingspacing='3' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Small[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='0' paddingspacing='2' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Medium[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='0' paddingspacing='1' target='0' bgcolor='green' txtcolor='#ffffff' url='#']Large[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='0' paddingspacing='1' target='0' bgcolor='green' txtcolor='rgb(255, 246, 26)' url='#'][uix_icons size='16' units='px' color='rgb(255, 246, 26)' name='anchor']Custom Icon[/uix_button]
[uix_button icon='' fontsize='16px' letterspacing='2px' fillet='0' paddingspacing='1' target='0' bgcolor='green' txtcolor='#333' url='#'][uix_icons size='16' units='px' color='#333' name='anchor']Custom Icon[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='3' target='0' bgcolor='red' txtcolor='#ffffff' url='#']RED[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='2' target='0' bgcolor='yellow' txtcolor='#ffffff' url='#']ORANGE[/uix_button]
[uix_button icon='' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='darkblue' txtcolor='#ffffff' url='#']DARKBLUE[/uix_button]
[uix_button icon='briefcase' fontsize='12px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='cadetblue' txtcolor='#ffffff' url='#']CADETBLUE BUTTON[/uix_button]
[uix_button icon='briefcase' fontsize='16px' letterspacing='2px' fillet='50px' paddingspacing='1' target='0' bgcolor='black' txtcolor='#ffffff' url='#']BLACK BUTTON[/uix_button]
Preview
Google Maps
You can use this shortcode to display a Google Map anywhere on the page. Customize the style of your map if you like. It provides a variety of out-of-the-box image styles to choose from. And you can upload a custom marker icon.
Get Latitude and Longitude: → Get Latitude Longitude
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Map Style | Selector (Returns a String) |
 |
Create your own Google Maps style. |
| Map Width (%) | Number | 100 | It will determine the width of the map in pixels or relative percentage. There are two types of length units: % and px. |
| Map Height (px) | Number | 285 | Defines height of the map in pixels. |
| Place Name | String | Link to | Input an address to show on the map. |
| Latitude | Number | 37.7770776 | Input a separate latitude value. |
| Longitude | Number | -122.4414289 | Input a separate longitude value. |
| Zoom | Number | 14 | Map scale at various zoom levels. |
| Marker | String | /wp-content/plugins/uix-shortcodes/assets/images/map/map-location.png |
Custom a pin (location marker) to be used on the map. |
Example
[uix_map style='normal' width='100%' height='285px' latitude='37.7770776' longitude='-122.4414289' zoom='14' name='SEO San Francisco, CA, Gough Street, San Francisco, CA' marker='http://your.website.com/map-location.png' ]
[uix_map style='dark-blue' width='100%' height='285px' latitude='37.7770776' longitude='-122.4414289' zoom='14' name='SEO San Francisco, CA, Gough Street, San Francisco, CA' marker='http://your.website.com/map-location.png' ]
Preview
Special Heading
This shortcode lets you add a special heading into your page.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Title | String | Text Here | The heading title. |
| Choose Title Style | Selector (Returns a String) |
 |
Using background clip for text with CSS fallback if select the first one. You can select a background image from the WordPress Media Library, could also upload a new image. |
| Size | Number | 52 | The heading size in pixels. |
| Heading Color | Selector (Returns a String) |
- | Set a color for the heading. You can add a custom color with color palette. Browsers use a default stylesheet to render webpages if the value is empty. Click on the "other color" link at the bottom of the color selector. |
| Alignment | Selector (Returns a String) |
center | Specifies the horizontal alignment of text in an element. The following values are allowed:left, center, right. |
| Letter Spacing | Number | 2 | The letter spacing of heading in pixels. |
| Uppercase of Text | Boolean | true | When enabled, controls text to upper case. |
| Underline | Boolean | false | When enabled, it will add a horizontal line for heading. |
|
To set up the following properties, the "Underline" checkbox should be checked. |
|||
Line Width (%)depends on Underline option |
Number | 100 | It will determine the width of the horizontal line in pixels to the heading. There are two types of length units: % and px. |
Line Height (px)depends on Underline option |
Number | 1 | It will determine the height of the horizontal line in pixels to the heading. |
| Description | Boolean | false | When enabled, you can set more properties for Description. |
|
To set up the following properties, the "Description" checkbox should be checked. |
|||
Displayed Textdepends on Description option |
String | - | Some relevant text for the heading. |
Font Sizedepends on Description option |
Number | 12 | The description font size in pixels. |
Description Colordepends on Description option |
Selector (Returns a String) |
- | Set a color for the description of heading. You can add a custom color with color palette. Browsers use a default stylesheet to render webpages if the value is empty. Click on the "other color" link at the bottom of the color selector. |
Opacitydepends on Description option |
Number | 65% | The description transparency. It inherits the color of the heading in order that showes the difference between them two. |
Example
[uix_heading color='' style='grand-fill-yellow' align='center' size='52px' uppercase='true' spacing='2px' fillbg='']No change test[/uix_heading][uix_heading_line line='false' width='100%' height='1px']
[uix_heading color='' style='grand' align='center' size='52px' uppercase='true' spacing='2px' fillbg='']No background[/uix_heading][uix_heading_line line='false' width='100%' height='1px']
[uix_heading color='' style='grand-fill-yellow' align='center' size='52px' uppercase='true' spacing='2px' fillbg='']Background + Desc[/uix_heading][uix_heading_sub color='' align='center' size='12px' uppercase='true' spacing='2px' opacity='65'][p]This is a description for heading. do you like it?[/p][/uix_heading_sub][uix_heading_line line='true' width='35%' height='4px']
[uix_heading color='' style='grand-fill-yellow' align='left' size='52px' uppercase='true' spacing='2px' fillbg='http://your.website.com/text-fill2.jpg']Left Background Text[/uix_heading][uix_heading_sub color='' align='left' size='12px' uppercase='true' spacing='2px' opacity='65'][p]This is a description for heading. Do you like it?[/p][/uix_heading_sub][uix_heading_line line='true' width='100%' height='1px']
[uix_heading color='' style='grand' align='left' size='52px' uppercase='true' spacing='2px' fillbg='']Left Text[/uix_heading][uix_heading_sub color='' align='left' size='12px' uppercase='true' spacing='2px' opacity='65'][p]This is a description for heading. Do you like it?[/p][/uix_heading_sub][uix_heading_line line='true' width='100%' height='3px']
[uix_heading color='#DD514C' style='grand' align='left' size='52px' uppercase='true' spacing='2px' fillbg='']Red text[/uix_heading][uix_heading_sub color='#d59a3e' align='left' size='12px' uppercase='true' spacing='2px' opacity='65'][p]This is a description for heading. Do you like it?[/p][/uix_heading_sub][uix_heading_line line='true' width='100%' height='1px']
[uix_heading color='' style='grand' align='left' size='52px' uppercase='false' spacing='2px' fillbg='']Normal case[/uix_heading][uix_heading_sub color='' align='left' size='12px' uppercase='false' spacing='2px' opacity='65'][p]This is a description for heading. do you like it?[/p][/uix_heading_sub][uix_heading_line line='true' width='100%' height='1px']
Preview
Icons
This shortcode implements the Font Awesome icon font in WordPress through shortcodes. Add icons in the form of single icons, sets, lists, buttons and more. Icons are added using the Font Awesome library as well as extra icons added to supplement this library. The examples below show the usage for each method and the resulting image style.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Color | Selector (Returns a String) |
 |
Set a color for the icon. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Icon's Name | Selector (Returns a String) |
- | Returns the Font Awesome library for each icon's "fa-" suffix text. Like this: <i class="fa fa-*"></i>
|
| Size | Number | 14 | The icon size in pixels. |
Example
[uix_icons size='14' units='px' color='#333333' name='area-chart']
[uix_icons size='34' units='px' color='#333333' name='area-chart']
[uix_icons size='54' units='px' color='#333333' name='area-chart']
[uix_icons size='74' units='px' color='#333333' name='area-chart']
[uix_icons size='14' units='px' color='#a2bf2f' name='briefcase']
[uix_icons size='34' units='px' color='#daa520' name='briefcase']
[uix_icons size='54' units='px' color='#4BB1CF' name='briefcase']
[uix_icons size='74' units='px' color='#dc143c' name='briefcase']
Preview
Progress Bar
This shortcode allows you add progress bars. Choose unlimited colors for each individual progress segment. Animate the segment and/or text. Customize any sizes. It is great for displaying varying types of data and content to your viewers. The progress bar include Circular and Square types for easy customization.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Choose Style | Selector (Returns a String) |
circular | You can choose vertical tabs or horizontal tabs. The following values are allowed: circular, square. |
| Bar Size (px) | Number | 120 | Size of the bar in px. |
| Percent (%) | Number | 75 | The percent number the progress bar should have. Should be a number from 0 – 100. |
| Percentage & Icon Size (px) | Number | 12 | Size of the percentage or icon in px. |
| Line Width (px) | Number | 3 | Width of the bar line in px. |
| Icon | Boolean & String | - | Using Icon instead of percentage. Default value is empty. |
| Bar Color | Selector (Returns a String) |
|
Set a color for the bar. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Track Color | Selector (Returns a String) |
 |
Set a color for the track for the bar. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Percentage & Icon Color | Selector (Returns a String) |
|
Set a color for the displayed percentage or icon. You can add a custom color with color palette. Click on the "other color" link at the bottom of the color selector. |
| Title | String | - | The progress bar's title/name. Could be left blank. |
| Description | String | - | The progress bar's description. Could be left blank. |
| Displayed Units | String | % | The progress bar's displayed units. Could be left blank. |
| Margin (px) | Number | margin-top:25pxmargin-bottom: 0pxmargin-left: 25margin-right: 25 |
Use the input fields below to customize the margin of progress bar. |
Example
[uix_progress_bar barcolor='#a2bf2f' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='75' units='%' linewidth='3' precsize='12px' title='' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#a2bf2f' trackcolor='#dcdcdc' preccolor='#bebebe' size='120px' shape='circular' percent='55' units='%' linewidth='3' precsize='12px' title='Web Design' top='25' bottom='0' left='25' right='25' ][p]This is a description.[/p][/uix_progress_bar]
[uix_progress_bar barcolor='#daa520' trackcolor='#f1f1f1' preccolor='#473f3f' size='200px' shape='circular' percent='66' units='%' linewidth='8' precsize='28px' title='Clock' icon='clock-o'][/uix_progress_bar]
[uix_progress_bar barcolor='#dc143c' trackcolor='#f1f1f1' preccolor='#473f3f' size='120px' shape='circular' percent='75' units='%' linewidth='8' precsize='18px' title='Shop' icon='cart-plus'][/uix_progress_bar]
[uix_progress_bar barcolor='#dc143c' trackcolor='#dcdcdc' preccolor='#bebebe' size='120px' shape='circular' percent='100' units='%' linewidth='3' precsize='12px' title='Painter' top='25' bottom='0' left='25' right='25' ][p]This is a description.[/p][/uix_progress_bar]
[uix_progress_bar barcolor='#a2bf2f' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='75' units='%' linewidth='3' precsize='12px' title='Painter' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#a2bf2f' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='35' units='%' linewidth='3' precsize='12px' title='Android Development' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#DD514C' trackcolor='rgb(222, 156, 142)' preccolor='#473f3f' size='100%' shape='square' percent='75' units='%' linewidth='15' precsize='12px' title='Painter' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#DD514C' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='35' units='%' linewidth='15' precsize='12px' title='Android Development' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_column_wrapper top='20' bottom='20' left='0' right='0']
[uix_column grid='6']
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='75' units='%' linewidth='3' precsize='12px' title='Photoshop' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='23' units='%' linewidth='3' precsize='12px' title='Front-End' top='25' bottom='0' left='25' right='0' ][p]This is a description.[/p][/uix_progress_bar]
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#dcdcdc' size='100%' shape='square' percent='100' units='%' linewidth='3' precsize='16px' title='Clock' top='25' bottom='0' left='25' right='25' icon='clock-o'][/uix_progress_bar]
[/uix_column]
[uix_column grid='6' last='1']
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='88' units='%' linewidth='3' precsize='12px' title='User Interface' top='25' bottom='0' left='25' right='25' ][/uix_progress_bar]
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#473f3f' size='100%' shape='square' percent='23' units='%' linewidth='3' precsize='12px' title='Web Design' top='25' bottom='0' left='25' right='0' ][p]This is a description.[/p][/uix_progress_bar]
[uix_progress_bar barcolor='#4BB1CF' trackcolor='#f1f1f1' preccolor='#dcdcdc' size='100%' shape='square' percent='98' units='%' linewidth='3' precsize='16px' title='Shop' top='25' bottom='0' left='25' right='25' icon='cart-plus'][/uix_progress_bar]
[/uix_column]
[/uix_column_wrapper]
Preview
Dividing Line
This shortcode lets you create a visual divider between elements and sections on your pages.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Choose Line Style | Selector (Returns a String) |
solid | Choose a type for your separator. |
| Color | Selector (Returns a String) |
|
Set a color for the separator. There are two colors of line: dark and light. |
| Width (%) | Number | 100 | Set a width for the separator. There are two types of length units: % and px. |
| Opacity | Number | 17% | The separator transparency. It inherits your choice of color. |
Example
solid line
[uix_dividing_line style='solid' color='dark' width='100%' opacity='17']
double line
[uix_dividing_line style='double' color='dark' width='100%' opacity='17']
dashed line
[uix_dividing_line style='dashed' color='dark' width='100%' opacity='17']
dotted line
[uix_dividing_line style='dotted' color='dark' width='100%' opacity='17']
shadow line
[uix_dividing_line style='shadow' color='dark' width='100%' opacity='17']
gradient line
[uix_dividing_line style='gradient' color='dark' width='100%' opacity='17']
Preview
Share Buttons
This shortcode enables you to add share buttons to all of your posts and/or pages. It takes that unique url and share it on the social page automagically.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Choose Type of Button | Multiple Selector (Returns a String) |
facebook,twitter,google_plus | There are many different types of social media. You can choose custom button types. |
| Fillet Radius | Number | 25 | To set the fillet radius in pixels for social share buttons. |
| Button Color | Selector (Returns a Number) |
1 | Set a color for social share buttons. |
| Button Size | Selector (Returns a Number) |
1 | Set a size for social share buttons. |
Example
[uix_share_buttons color='1' size='1' fillet='25px' show='facebook,twitter,google_plus,pinterest']
[uix_share_buttons color='1' size='2' fillet='25px' show='facebook,twitter,google_plus,pinterest']
[uix_share_buttons color='1' size='2' fillet='0' show='facebook,twitter,google_plus,pinterest']
[uix_share_buttons color='2' size='1' fillet='25px' show='facebook,twitter,google_plus,pinterest']
[uix_share_buttons color='2' size='2' fillet='25px' show='facebook,twitter,google_plus,pinterest']
[uix_share_buttons color='2' size='2' fillet='0px' show='facebook,twitter,google_plus,pinterest']
Preview
Contact Form(Use Commenting Form Template)
This shortcode allows page embed a contact form which take your WordPress comment template.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| - | - | - | - |
Example
[uix_contact_form]
Preview
3.7. Code Highlight Builder
This shortcode allows you to easily post syntax-highlighted code to your site without losing it's formatting.
Admin Screenshots
Options
| Name | Type | Default | Description |
|---|---|---|---|
| Language | String | javascript | Syntax highlighting has become pretty standard on most tutorial sites (as you can see below) and there are many options available, all depending on what languages you use and how you want your code snippets to be displayed. |
| Source code | String | - | Copying code into textarea. |
Example
[uix_code language='javascript']
jQuery( document ).ready(function( $ ){
$( document ).on('submit', '.register_form', function( event ){
event.preventDefault();
$.ajax({
data: "action=register_submit&" + $( this ).serialize(),
dataType: 'json',
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ) {
//
}
});
});
});
[/uix_code]
Preview (editor)
Preview (output)
4. FAQ
FAQ 1: How to completely customize the Uix Shortcodes stylesheets?
You can go to "Uix Shortcodes" in the WordPress Administration Screens, then link to a specific tab like "Custom CSS".
There is a second way, make a new Cascading Style Sheet (CSS) document which name to "uix-shortcodes-custom.css" and "uix-shortcodes-custom-rtl.css" to your templates directory ( /wp-content/themes/{your-theme}/ or /wp-content/themes/{your-theme}/assets/css/ ). You can connect to your site via an FTP client, make the changes and then upload the file back to the server. Once you have created an existing CSS file, Uix Shortcodes will use it as a default style sheet to your WordPress Theme. Of course, Uix Shortcodes's function of "Custom CSS" is still valid.
Note: Making a new javascrpt (.js) document which name to "uix-shortcodes-custom.js" to your templates directory ( /wp-content/themes/{your-theme}/ or /wp-content/themes/{your-theme}/assets/js/ ). Once you have created an existing JS file, Uix Shortcodes will use it as a default script to your WordPress Theme.
5. Credits
I would like to give special thanks to credits. The following is a guide to the list of credits for this plugin: