UI Posts

UI Posts
UI Post
  1. Choose resource: There are two types of content resources ( “post” and “portfolio”. You need to select one of them and make sure you have already created posts or portfolio articles. 
  2. Select category: if you choose to display post resource, please select your post category. Otherwise, select your portfolio category.
  3. Include subcategory: enable this option to display subcategories of the main category selected above. 
  4. Ordering: Select the ordering of how the article will be ordered. There are 5 options available. Select your desired one from the drop-down list of ordering options.
  5. Limit: You can limit the number of articles display. You can set how many articles will be displayed. Enter the desired value in the field according to your design requirement.
  6. Ajax load paging: Switch to yes to enable Ajax loading. This option only works with one UI post per page.
  7. Large desktop column: set the number of post columns displayed on large screen desktops.
  8. Desktop column: set the number of post columns displayed on normal screen desktops.
  9. Laptop column: set the number of post columns displayed on laptop devices.
  10. Tablet column: set the number of post columns displayed on tablets.
  11. Mobile column: set the number of post columns displayed on mobile phones. 
  12. Column gap: Modify the space between post columns.
  13. Color mode: There are 2 color modes (dark and light). Choose a favorite mode. 
  14. Enable masonry: switch to yes to enable masonry grid. 
Card Settings

Card Settings

  1. Card style: Select the card style from the predefined options or create a custom style.
    - For a custom style: you can set the background color and color of the card.
    - Background color: Add the card background color as per your design requirement. You can use the color picker tool to add the desired color you want.
    - Card color: Set the color or the card.
  2. Card size: You can choose between 2 size options (small or large).
Filter Settings

Filter settings

  1. Use filter: Use this option to enable a filter
  2. Filter position: Decide a position where the filter should be placed. There are 3 positions available (Top, Right, Left). If the filter is on the left or right, please set the filter width.
  3. Filter type: You can filter posts into 2 types (tags and categories). Choose one or both of them. 
  4. Use filter sort: Enabling this option will let you sort values from a cell range or array.
  5. Display header: Enable this option to display filter headers.
  6. Filter container: Add the uk-container class to the widget to give it a max-width ad wrap the main content
  7. Text alignment: You can set the text alignment in three different positions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.
  8. Filter animate: Select an animation that a filter will be applied to.
  9. Margin bottom: Set an optimum distance from the bottom element.
  10. Visibility: Set the filter's visibility to specific devices.
Slider settings

Slider settings

  1. Display articles as a slider: Use this option to display articles as a slide carousel.
  2. Navigation: direct the flow of images and content in a specific direction. 
  3. Navigation position: Select a position for navigation.
  4. Dot navigation: Enable this option if you're interested in showing dot navigation.
  5. Center slider: center the list of items.
Title settings
Image settings

Image Settings

  1. Hide thumbnail: The thumbnail normally displays a banner image of the article. Enable the option if you don't want it.
  2. Layout: Select a layout for post images. 
  3. Content display on hover (applied to thumbnail layout): When you hover an image thumbnail, article content will appear. If you don't want it, leave it disabled.
  4. Hover transition: when the option "content display on hover" is enabled, you can choose a hover transition from the available list. 
  5. Image position (applied to default layout): There are 2 positions for images available. Set the image position from the drop-down list of sizes.
  6. Cover image: Enable this option if you're interested in having an image cover. 
  7. Thumbnail height: Set the height of image thumbnails.
  8. Border: There is a border around the image, you can select a border style from the available options. 
  9. Image size: There are different sizes available. Set the size of your button from the drop-down list of sizes.

Title Settings

  1. Title tag: Choose a heading element for post titles.
  2. Title font: Click on "edit button" to adjust the title font
  3. Style: Choose a heading style from the list. Heading styles differ in font-size, but come with a predefined color, and font.
  4. Custom color: If you don't like the default color, you can set a custom color for titles 
  5. Title margin: Set vertical margin for titles. 
Content Settings

Content Settings

  1. Show intro text: If you want to show intro text in your posts, enable this option otherwise the intro text-related options will not show up. Leave it disabled if you don't want intro text.
  2. Content font: Click "edit button" to configure typography of the content font.
  3. Custom color: Choose a custom color if you're not keen on the default color. 
  4. Show author: If you want to show the details of the author set this option to "yes". Set that option to ‘No’ if you don't want it.
  5. Show category: Using this option you can control whether to show or hide the category of the article. Enable for showing otherwise leave it disabled.
  6. Show date: If you want to show the date, set this option to "yes". Set that option to "No" if you don't want it.
  7. Show tag: Enable this option if you want to show tags of posts. Set that option to "No" if you don't want it.
  8. Drop cap: this option is to help to display the first letter of the paragraph as a large initial. 
Button settings

Button settings

  1. Show readmore: Use this option to set this option to ‘Yes’ if you want to display the read more link. Set it to ‘No’ if you don’t want the read more button.
  2. Text: you're supposed to write the text m
  3. Button shape: As the name suggests, this option will allow you to change the shape of the button, currently, there are 4 button shapes.
  4. Full-width button: A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.
  5. Button size: Set the size of your button from the drop-down list of sizes. 
  6. Button margin: Set the vertical margin for the button.

UI Pricing

UI Pricing
UI Pricing
  1. Title: Every pricing plan needs a title. Use this field to enter the title. Choose the title that goes along with the plan.
  2. Meta: Write the meta for the title.
  3. Description: Enter the description of the plan.
  4. Price: Use this field to insert the pricing plan price. The addon will automatically arrange the showcasing of this price.
  5. Price symbol: Define the symbol for price currency (ex: $ (Dollar), € (Euro), £ (pound) ...)
  6. Highlight: Indicate important notes to highlight the pricing column that is written on the corner ribbon. (ex: popular, basic, featured, premium ...)
  7. Highlight style: Choose a style for the ribbon from the drop-down list.
  8. Items: Click on the button "Add Item" to create new items for the pricing plan.
  9. Button URL: Button link is the absolute URL of the page that will be linked. Remember the link must contain http:// or https:// in the URL.
  10. Buttom text: Button text is the text that will be displayed on top of the button. It’s quick text on what that button is going to do. Leave it blank if don’t want any button.
Card Settings
Card Settings
  1. Card style: Select the card style from the predefined options or create a custom style
    - For a custom style: you can set the background color and color of the card.
  2. Card size: You can choose between 2 size options (small or large)
  3. Card font: Click on the edit button to configure the card font. 
    - Family: Choose the font for card text.
    - Size: Control the font size of the card text.
    - Weight: The font-weight normally refers to the thickness of any font, the higher the value is the thicker they become.
    - Transform: this option will make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
    - Style: use this option to change all the text to normal or italic style.
    - Decoration: there are 3 different decoration options. You can choose one of the given options to decorate the text.
    - Line-height: Adjust the height between text lines.
    - Letter spacing: Adjust the space between letters.
Title Settings
Title settings
  1. Title tag: Choose a heading element.
  2. Title font: Click to edit the typography of the title font.
  3. Title color: Set the color of the title.
  4. Style: Select a heading style.
  5. Title margin: Set the vertical margin of the title.
Meta settings

Meta settings

  1. Meta font: Set the meta font by clicking on the edit button.
  2. Title color: Choose a color for the meta title. 
  3. Style: Choose one of the meta styles that may differ in font-size, but come with predefined color and font.
  4. Meta margin: Set the vertical margin for the title.
  5. Alignment: Align the meta text above, below or inline with the title.
Description settings

Description Settings

  1. Content font: Click the edit button to configure the typography of the content font.
  2. Description color: Set the color of the description text.
  3. Description margin: Set the vertical margin for description.
Pricing settings

Pricing Settings

  1. Price font: Click on the edit button to configure the typography of the price font.
  2. Price color: Set the color of the price number.
  3. Style: Choose a price style.
  4. Price margin: Set the vertical margin of the price.
Social Settings

Symbol Settings

  1. Symbol font: Click on the edit button to configure the typography of the currency symbol.
  2. Symbol color: Set the color of the symbol color.
  3. Style: Choose a symbol style from the drop-down list. 
  4. Currency margin-top: Set the top margin of the currency symbol.
Button settings

Button settings

  1. Content font: Click on the edit button to configure the typography of the button font.
  2. Button style: Select a style from the drop-down list for the button. There are 8 different button styles. 
  3. Button shape: As the name suggests, this option will allow you to change the shape of the button, currently, there are 4 button shapes.
  4. Full-width button: A full-width button will take the total width of the web page. So, if you want a full-width button set this option to “Yes”.
  5. Button size: Set the size of your button from the drop-down list of sizes. 
  6. Button margin: Set the vertical margin for the button.

UI Marker

UI Marker

UI Marker

  1. Select image: Select an image from your media library. This is the image of the item
  2. Marker items: click on "Add Item" to add a new marker item
    Click on the item to configure relevant options
    - Left / Top: Move the circle point to adjust the marker position to the left, right, top or bottom
    - Use animation: enable to apply an animation 
    - Marker type: there are  types of marker types (image or point). Set the desired type from the drop-down list. 
    - Title: Enter a title for the marker
    - Content: Write the content that briefly describes the marker item
    - Select image: select an image from your media library to display in the popover.
    - Image size: Select an image size from the given list.
    - Position: Select a position for this item (Top, right, bottom, left)
    - Link: Insert an absolute URL that the button will be linked
    - Button title: If you want to create a button, just enter a button title
  3. Mode: Display the popover on click or hover.
  4. Position: Set the alignment of the popover to its marker. If the popover doesn't fit its container, it will flip automatically.
  5. Width: set the width of the popover.
  6. Animation: Select an animation effect that will be applied on click/hover.
  7. Style: Choose a style for the marker card
  8. Padding: Set the padding between the card and its content.
Title Settings

Title Settings

  1. Title font: Click the edit button to adjust the typography of the title font.
  2. Style: Select a style for the title.
  3. Link title: If yes, the title will be redirected to the link added. 
  4. Decoration: Decorate the title with a divider, bullet, or line that is vertically centered to the heading.
  5. Predefined color: choose a predefined color for the title.
  6. Transform: use this option to make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
  7. HTML element: Choose one of six heading elements to fit your semantic structure.
  8. Title margin: Set the vertical margin of the title
Meta Settings

Meta settings

  1. Image appear: This field will allow you to adjust the desired position of the image. (Top, Inside, or bottom).
  2. Media margin: Set the vertical margin for the image. You can select one of the available options.
Content settings
Content settings
  1. Content font: Click the edit button to adjust the typography of the content font.
  2. Style: Select a predefined text style, including color, size, font family. 
  3. Custom color: Choose a custom color for the content text.
  4. Transform: use this option to make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
  5. Margin top: Set the vertical margin of the content section.
Button settings

Button Settings

  1. Text: Enter the button text.
  2. Link new tab: Set the new tab redirection of the link.
  3. Style: There are different types of button styles available. Set the button style from the drop-down list.
  4. Button size: Choose the size of your button from the drop-down list of sizes.
  5. Margin top: Set the top margin of the button.

UI Text

UI Text
UI Text
  1. Title: This option will allow you to add a title to the text section. If you do not want to give it a title, just leave it blank. 
  2. Title tag: Choose a suitable heading element for the title above.
  3. Title font: Click the edit button to adjust the typography of the title font.
  4. Title color: Set the color of the title.
  5. Style: Choose a heading style for the title.
  6. Title margin: Set the vertical margin of the title.
  7. Subtitle: Add a subtitle for the heading. It will be displayed under the main heading. 
  8. Content: Write your content in the content box.
  9. Content font: Click the edit button to set the font typography of the content text. 

UI Person

UI Person

UI Person

  1. Select image: Select an image from your media library. This is the image of the person.
  2. Image size: Choose the image size from the drop-down list.
  3. Name: Enter the person's name.
  4. Designation: Write the designation title of the person.
  5. Email: Enter the email address of the person.
  6. Content: You can give the person a brief or detailed description.
  7. Social items:
    - Clicking on the “+ Add Item” will let you add a new icon and will open up the relevant settings. 
    - You can select a social icon and enter a URL to the Link field if you want it to redirect to the official social channel of the person.

 

Card Settings

Card Settings

  1. Card style: Select the card style from the predefined options or create a custom style
    - For a custom style: you can set the background color and color of the card.
  2. Card size: You can choose between 2 size options (small or large)
Image Settings

Image settings

  1. Image appear: This field will allow you to adjust the desired position of the image. (Top, Inside, or bottom).
  2. Media margin: Set the vertical margin for the image. You can select one of the available options.
Name settings
Name settings
  1. Name tag: Choose a heading element.
  2. Name font: Choose the font for the name title.
  3. Title color: Set the color of the name title.
  4. Style: Select a style for the heading title.
  5. Icon / Image position: Set the position of the icon / image. 
  6. Title margin: Set the vertical margin of the title.
  7.  
Designation settings

Designation Settings

  1. Designation tag: Choose a designation element
  2. Designation font: Click the edit button to adjust the typography of the designation font from font family, font weight, font size, transform, style, decoration, line height, to letter spacing.
  3. Designation color: Set the color of the designation title
  4. Designation margin: set the vertical margin of designation title
Email settings

Email Settings

  1. Email tag: Choose a suitable tag element for the email address.
  2. Email font: Click the edit button to adjust the typography of the email font, including font family, font size, weight, transform, style, decoration, line-height, letter spacing.
  3. Email color: Set the color of the email address
  4. Email margin: Set the vertical margin of the email.
Social Settings

Social Settings

  1. Overlay position: Set the position of social overlay.
  2. Alignment: You can set the alignment of social icons in 3 different positions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.
  3. Vertical social icon:  If yes, the social overlay will be displayed in a vertical manner.

UI Image

UI Image
  1. Select image: select an image from your media library
  2. Image size: Set the size of your image from the drop-down list of sizes. Or you can choose "custom" option to create a custom size.
  3. Border: Set the border style of the image
  4. Box Shadow: Select the size of box-shadow applied to the image. 
  5. Hover box-shadow: Select the size of box-shadow when you mouse over the image
  6. Blend mode settings: If yes, you can change the look of the image thanks to blending the background color with the image. Let's adjust the background color and choose a blend mode, then see the result. 
  7. Transition: Select the transition style when we hover the image. 2 styles are available: Scale-up and Scale-down
  8. Link type: Choose a link type
  9. Image URL: Enter the full URL that the image will be linked

UI Accordion

UI Accordion

UI Accordion

Items:

  • Give the item a title, link and link title
  • Click on "Add New" to add a new item
  • Allow multiple items to open: if yes, all items are able to be open at the same time, if no, just one item is readable when you click on it.
  • Allow all items to be closed: if yes, all items can be reduced at the same time. If no, just one item can be reduced at a time.
Card Settings

Card Settings

  • Style: Select a predefined card style for accordion (None, default, muted, primary, secondary, hover, custom)
  • With a custom style, you'll be able to create your own style for color, background color, background color hover, border type, size
Title Settings

Title Settings

  • Click on the edit button to change the font typography
  • Select predefined color for the title text: none, muted, emphasis, primary, secondary, success, warning, danger.
Content settings

Content Settings

In the content settings, you'll be able to change the following options:

  • Content font: edit the font of the content
  • Custom color: keep the text color as default or choose a custom color.
  • Transform: to transform the text into uppercase, capitalized, or lowercase characters.
  • Drop cap: to display the first capital letter of the paragraph as large as a decorative element.
  • Column: Set the number of columns.
  • Column breakpoint: if the number of columns is more than 1, you can set the device width from which the text columns should apply.
  • Margin top: set the top margin of the accordion.

 

UI Button

About UI Button

UI Button is a widget based on the UIKit framework that allows you to easily create nice-looking buttons, which come in different styles.

UI Button

UI Button

Button item:

  • Give the button a title, link and link title
  • Icon type: choose icon type from Fontawesome or UI Kit
  • Icon position: Choose Left or Right
  • Button style: Default, Primary, Secondary, Danger, Text, Link, Link Muted, Link Text, Custom
  • Button Shape: Rounded, Square, Circle, Pill
Misc Settings

Misc Settings

  • Font Weight: choose one of the following classes to modify the font-weight of the button (Default, Light, Normal, Bold, Lighter, Bolder)
  • Button Size: set the size for the buttons (Default, Small, Large)
  • Full-width button: enable or disable the button's full-width size
  • Column gap: adjust the gap between different columns of multiple buttons (The result is only reflected when there are more than 1 button created)
  • Row gap: adjust the gap between different rows of multiple buttons (The result is only reflected when there are more than one row of buttons displayed)
General Settings

General Settings

  • Margin top: Set the top margin of the buttons: Small, Default, Medium, Large, X-Large, None, or Keep existing.
  • Margin bottom: Set the bottom margin of the buttons: Small, Default, Medium, Large, X-Large, None, or Keep existing.
  • Container: 
  • Max-Width
  • Text Alignment: Set the alignment of the button text, which may depend on breakpoint or fallback.
  • Text alignment breakpoint: 
  • Text alignment fallback
  • Animation: Choose a suitable animation to display the button.
  • Repeat animation: 
  • Visibility: make the button visible on a specific device.