< Back

Title

  • Title Text Color: Set the text color
  • Title Background Color: Set the background for the title
  • Title Position Type: Relative and Absolute.
  • Title Position: Set the position for the absolute position type
  • Title Padding: Set the title padding
  • Title Margin: Set the title margin
  • Border-radius: Set the border-radius for the title container
  • Title alignment: Set the title alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Title Hover Animation:  Set the animation on hovering
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Content

  • Content Text Color: Set the Content color
  • Content Background Color: Set the background for the Content
  • Content Position Type: Relative and Absolute.
  • Content Position: Set the position for the absolute position type
  • Content Padding: Set the Content padding
  • Content Margin: Set the Content margin
  • Border-radius: Set the border-radius for the Content container
  • Content alignment: Set the Content alignment Left, Center and Right
  • Content text alignment: Set the text alignment
  • Content Before: Add content before the generated field – Supports space
  • Content After: Add content after the generated field- Supports space
  • Entrance Animation: Set the entrance animation on page load
  • Content Hover Animation:  Set the animation on hovering
  • Content-Type
    • Editor content –  Displays the content in the default editor.
    • ACF custom field – Enter the ACF field name
    • Custom Filed – Can be used to display any kind of custom field if the custom field key is known.
  • Enable Excerpt Mode:  Trims the content
  • Word Count: Set the Trim word count.
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Post/Page Metadata

  • Metadata Text Color: Set the Metadata color
  • Metadata Background Color: Set the background for the Metadata
  • Metadata Position Type: Relative and Absolute.
  • Metadata Position: Set the position for the absolute position type
  • Metadata Padding: Set the Metadata padding
  • Metadata Margin: Set the Metadata margin
  • Border-radius: Set the border-radius for the Metadata container
  • Metadata alignment: Set the Metadata alignment Left, Center and Right
  • Show Date: Enable or disable Date
  • Show Tags: Enable or disable Tags
  • Show Category or Taxonomy: Enable or disable Category
  • Show Author: Enable or disable Author
  • Show Comment: Enable or disable comment count
  • Select Taxonomy: If custom taxonomy is used this can be used to replace the category
  • Entrance Animation: Set the entrance animation on page load
  • Metadata Hover Animation:  Set the animation on hovering
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Button

  • Button Text Color: Set the Button text color
  • Button Background Color: Set the background for the Button
  • Button Position Type: Relative and Absolute.
  • Button Position: Set the position for the absolute position type
  • Button Padding: Set the Button padding
  • Button Margin: Set the Button margin
  • Border-radius: Set the border-radius for the Button container
  • Button alignment: Set the Button alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Button Hover Animation:  Set the animation on hovering
  • Button Field Type
    • Link to Post-  Direct link to the post
    • ACF custom field – Enter the ACF field name – Use image array return option
    • Custom Filed – Can be used to display any kind of custom field if the custom field key is known.
    • WooCommerce  Add to Cart –  WooCommerce adds to cart button.  Enable Excerpt Mode:  Trims the content
  • Button Text: Set the text for the button
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Image

  • Image Width: Set the width of the image
  • Image Position Type: Relative and Absolute.
  • Image Position: Set the position for the absolute position type
  • Image Padding: Set the Image padding
  • Image Margin: Set the Image margin
  • Border-radius: Set the border-radius for the Image container
  • Image alignment: Set the Image alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Image Hover Animation:  Set the animation on hovering
  • Image Field Type
    • Featured Image
    • ACF image – Use image array return and field key
    • Custom field – Must return an image URL
    • WooCommerce Product image (optional) – the Featured image does the task
  • Image Size: Set image size.  For Custom  https://developer.wordpress.org/reference/functions/add_image_size/
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

HTML

  • Entrance Animation: Set the entrance animation on page load
  • HTML Hover Animation:  Set the animation on hovering
  • Custom HTML: A pure HTML field inserter. Use style=”” for styling it
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Shortcode

Some times you want to add social media share or some custom code. Many Plugins do provide the shortcodes or you may create a shortcode as per your requirement and just paste in the shortcode to insert it inside the carousel item.

  • Shortcode Text Color: Set the Shortcode text color
  • Shortcode Background Color: Set the background for the Shortcode
  • Shortcode Position Type: Relative and Absolute.
  • Shortcode Position: Set the position for the absolute position type
  • Shortcode Padding: Set the Shortcode padding
  • Shortcode Margin: Set the Shortcode margin
  • Border-radius: Set the border-radius for the Shortcode container
  • Shortcode alignment: Set the Shortcode alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Shortcode Hover Animation:  Set the animation on hovering
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Woocommerce Price

  • Price Text Color: Set the Price text color
  • Price Background Color: Set the background for the Price
  • Content before pricing: Set text content before pricing
  • Contern after pricing: Set text content after pricing
  • Contern after pricing – Variable Product: Set text content after pricing
  • Contern after pricing – Variable Product: Set text content after pricing
  • Price Position Type: Relative and Absolute.
  • Price Position: Set the position for the absolute position type
  • Price Padding: Set the Price padding
  • Price Margin: Set the Price margin
  • Border-radius: Set the border-radius for the Price container
  • Price alignment: Set the Price alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Price Hover Animation:  Set the animation on hovering
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Woocommerce Rating

if the theme does not support woocommerce then the rating will be displayed as ‘4 out 5 stars’ . Add the CSS shown at the end of this article for converting it to stars.

  • Rating Background Color: Set the background for the Price
  • Rating Position Type: Relative and Absolute.
  • Rating Position: Set the position for the absolute position type
  • Rating Padding: Set the Rating padding
  • Rating Margin: Set the Rating margin
  • Border-radius: Set the border-radius for the Rating container
  • Rating alignment: Set the Rating alignment Left, Center and Right
  • Entrance Animation: Set the entrance animation on page load
  • Rating Hover Animation:  Set the animation on hovering
  • Class: Set the class. This can be used to assign a unique class to the container and modify it with CSS
  • ID: Set the ID. This can be used to assign a unique class to the container and modify it with CSS

Review CSS

#reviews .comment .star-rating {
    float: none;
    font-size: 1em;
    margin: 0;
    position: absolute;
    top: 2px;
    right: 20px;
}
.star-rating {
    overflow: hidden;
    height: 1em;
    line-height: 1em;
    width: 5.1em;
    font-family: "fontawesome";
}

.star-rating:before {
    content: "\f006\f006\f006\f006\f006";
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    letter-spacing: 0.1em;
    letter-spacing: 0\9;
    color: #fbfeff;
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.star-rating span:before {
    content: "\f005\f005\f005\f005\f005";
    top: 0;
    position: absolute;
    left: 0;
    letter-spacing: 0.1em;
    letter-spacing: 0\9;
    color: #f36557;
}

.star-rating {
    line-height: 1em;
    font-size: 1em;
    font-family: "fontawesome";
}