Skip to main content

Teaser Card

Element Description

The Teaser Card Element was created specifically to extend possibilities of YOOtheme Pro Builder and compatible with both: Joomla and WordPress.

Teaser Card Element contains many fields such as title, meta, description, price, old price, label and attributes list which are ideal for creating content cards with pricing. It`s easy to install and enjoyable to use, fully responsive, with a wide range of options to customize the look to your liking.

Teaser Card Element for YOOtheme Pro Builder compatible with Joomla and WordPress.
What is Teaser Card Element?

Main Features

Teaser Card Element contain a lot of cool features.  For example, you can create a Panels Slider, Restaurant Menu with dot leaders, Product Cards with pricing, Subscription Plans by using only this one element. Some of main element features is provided below:

  • Teaser Card Element is Support Grid

    Grid

  • Teaser Card Element support Leaders

    Leaders

  • Teaser Card Element is Support Panel

    Panel

  • Teaser Card Element is Support Slider

    Slider

  • Teaser Card Element is Support Lightbox

    Lightbox

  • Teaser Card Element is Support Filter

    Filter

  • Teaser Card Element is Support Modal

    Modal

  • Teaser Card Element is Support Nested Grid

    Nested Grid

  • Teaser Card Element is Support Falang Translation Extension

    Falang

  • Teaser Card Element is Support Dynamic Content

    Dynamic

  • Teaser Card Element is Responsive and Adaptive

    Responsive

  • Teaser Card Element is Highly Customizable and Flexible

    Customizable

With YOOtheme Pro dynamic content feature, you can load content to this element fields from Joomla or WordPress articles, categories, blog posts and other sources. Its Awesome stuff!

* Dynamic content for subitems (attributes) will work correctly if you have installed Essential Addons for YOOtheme Pro from ZOOlanders.

Demo
View Plans
Teaser Card Main Features

Requirements

To work with our custom elements, one of the templates from YOOtheme must be installed on your website. Than you need to create child theme to save all custom elements while future YOOtheme Pro updates.

You can use any of our elements on both Joomla and WordPress CMS. In other words, the elements are system-independent. The only requirement, as we said above, is the presence of YOOtheme Pro Builder as the default site template.

YOOtheme Pro 2.0+
Joomla 3.9+
Wordpress 5.0+
Requirements

Element Fields

We try to make every of our custom element flexible and responsive to wide range of user needs. Teaser Card Element comes with specific content fields, that we wanna show to you on the image below.

The clickable links in the right side of the image, will scroll the page to detailed description with all possible settings of selected field. Required fields are marked by asterisk symbol.

Leader Element Fields
Teaser Card Element Fields

Element Settings

The wide range of settings variations, will give you ability to make element design looking professional and modern. Unleash your creativity and be unique.

If you have good ideas and improvements to this element, please request a feature in our Discord channel. User feedback is very important to us. We plan to make future updates based on our customers requests.

  • Vertical Align: Top, Bottom,Middle.

  • Fill Character: Dots, Dashes, Underscore.

  • Fill Leader with a characters: Yes/No.

  • Slider Animation

  • Slider Navigation

  • Slider Slidenav

  • Masonry Grid: Yes/No.

  • Parallax Effect: Number.

  • Column Gap: Small, Medium, Default, Large, None.

  • Row Gap: Small, Medium, Default, Large, None.

  • Dividers: Yes/No.

  • Center Columns: Yes/No.

  • Center Rows: Yes/No.

  • Phone Portrait Slider: 100%, 83%, 80%, 60%, 50%, auto.

  • Phone Portrait: 1-6 Column, Auto.

  • Phone Landscape: 1-6 Column, Auto.

  • Tablet Landscape: 1-6 Column, Auto.

  • Desktop: 1-6 Column, Auto.

  • Large Screen: 1-6 Column, Auto.

  • Style: Default, Primary, Secondary, Hover.

  • Link Panel: Yes/No. (disabled)

  • Add clipping offset: Yes/No.

  • Padding: Small, Default, Large.

  • Max Width: None, Small, Medium, Large, X-Large, 2X-Large.

  • Style: H1-H6, Lead, Small, Medium, Large, X-Large, 2X-Large, None.

  • Link Title: Yes/No.

  • Hover Style: Heading Link, Default Link.

  • Decoration: Bullet, Divider.

  • Font-Family: Default, Secondary, Tertiary.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • HTML Element: H1-H6, div.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Style: H3-H6, Lead, Small, Meta, None.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Decoration: Bullet, Divider.

  • Aligment: Below Title, Above Title, Below Content.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Limit Content: Yes/No.

  • Characters: Number.

  • Position: Default, Below Attributes.

  • Style: Lead, Bold, Muted, Small None.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Force left alignment: Yes/No.

  • Enable drop cap: Yes/No.

  • Remove Content HTML: Yes/No.

  • Display Short Content With Modal Enabled: Yes/No.

  • Columns: None, Halves, Thirds, Quarters, Fifths, Sixths.

  • Show dividers: Yes/No.

  • Margin Top: Small, Default, None.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Style: Lead, Bold, Muted, Small, None.

  • Colon After Title: Yes/No.

  • Block Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Text Margin Top: Number.

  • Alignment: Left, Center, Right.

  • Column Gap: Small, Medium, Default, Large, None.

  • Row Gap: Small, Medium, Default, Large, None.

  • Dividers: Yes/No.

  • Center Columns: Yes/No.

  • Center Rows: Yes/No.

  • Columns Settings: Phone Portrait, Phone Landscape, Tablet Landscape, Desktop, Large Screens.

  • Attributes Image Settings: All

  • Style: None, Muted, Text, Heading, Reset.

  • Position: Default, Above Title, Below Title, Above Content, Abowe Attributes, Below Attributes.

  • Style: H1-H6, Lead, Small, Meta, None.

  • Font Weight: Thin, Light, Default, Medium, Bold, Black.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Currency Vertical Align: Unset, Baseline, Top, Bottom, Sub, Super.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Padding: Number.

  • Align: Before Price, After Price.

  • Position: Above Price, Before Price.

  • Style: H3-H6, Lead, Small, Meta, None.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Decoration: Line Through.

  • Currency Vertical Align: Unset, Baseline, Top, Bottom, Sub, Super.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Size: Number.

  • Color: None, Muted, Default, Primary, Secondary, Success, Warning.

  • Position: Left, Right.

  • Size: Small, Default, Large.

  • Border Radius: Number.

  • Position: Absolute, Before Title, After Title, Above Title, Below Title.

  • Absolute Origin: Left, Right.

  • Label Rotate: 90Deg, -90Deg

  • Top: Number.

  • Left: Number.

  • Right: Number.

  • Bottom: Number.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Width/Height: Number.

  • Border: None, Rounded, Circle, Pill.

  • Box Shadow: Small, Medium, Large, X-Large.

  • Box Decoration: Default, Primary, Secondary, Shadow, Mask.

  • Link: Yes/No.

  • Hover Transition: None, Scale Up, Scale Down.

  • Hover Box Shadow: Small, Medium, Large, X-Large.

  • Icon Width: Number.

  • Icon Color: None, Default, Primary, Secondary, Success, Warning.

  • Alignment: Top, Bottom, Left, Right.

  • Grid Width: Auto, 20-80%.

  • Grid Column Gap: Small, Medium, Default, Large, None.

  • Grid Row Gap: Small, Medium, Default, Large, None.

  • Grid Breakpoint: Always, Phone, Tablet, Desktop.

  • Vertical Alignment Center: Yes/No.

  • Center Image: Yes/No.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Inline SVG: Yes/No.

  • Animate SVG Stroke: Yes/No.

  • SVG Color: None, Default, Primary, Secondary, Success, Warning.

  • Button: Show, Hide.

  • Full Width: Yes/No.

  • Text: Field for enter the link text.

  • Style: Default, Primary, Secondary, Danger, Text, Link, Link Muted.

  • Button Size: Small, Default, Large. 

  • Align: Left, Right, Center.

  • Margin Top: Small, Default, Medium, Large, X-Large, None.

  • Target: Open in a new window, Open in same window. 

Teaser Card Element Settings
Thank You!

If you have any questions, please check out our FAQ page.