UI Posts

September 14, 2021
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.

Alita – Tutorial

August 5, 2021

To setup Tutorial Page You have to install require plugins included: Elementor Website Builder and TemPlaza Elements.

Alita – Our Work

August 5, 2021

To setup Portfolio Page You have to install require plugins included: Elementor Website Builder and TemPlaza Elements.