1. Home
  2. Docs
  3. Content Elements
  4. Card

Card EA Element

Card element helps organize large amounts of data in an ordered, minimalist and stylish way. It is ideal for WordPress Professionals to design a simple, clean yet spectacular website. Here in this tutorial, you’re going to learn how to use the Card element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Card Element

 

»Content

 

Image & Badge

⇒Image: Add an image to the card from your media library or upload it from your system.

⇒Image Size: Customize the fixed size of the card image from our pre-defined size type.

⇒Image Position: Set the image position either left, top or right.

⇒Badge Text: Type the text for the Badge.

⇒Toggle Speed: Set the toggle speed based on millisecond (ms)

 

Title & Description

⇒Title: Input the title of the card here.

⇒Description: Type your description for the card.

⇒Title HTML Tag: Define the HTML tag for the card title. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Alignment: Set the content alignment either left, right, center or justify.

 

Button

⇒Text: Input the button text for the card button here.

⇒Link: This is where you can add your Desire link or URL so that your Button can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Icon: If you want to add an icon within the button, then select the icon you want from the list. After adding an icon, customize the Icon Position and Spacing.

 


»Style

 

Image

⇒Width: Set the width of the image for different dimensions.

⇒Height: Set the height of the image for different dimensions.

⇒Offset: Set a custom offset to your card image for left and top in different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the image for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Opacity: Control the image opacity manually for both normal and hover view.

⇒CSS Filters: Customize the CSS filters like blur, brightness, contrast, saturation, and hue for the image in both normal and hover mode.

Badge

⇒Position: Set the badge position, either way, you want it to be.

⇒Offset: Set a custom offset to your badge for left and top in different dimensions. Or you can always get back to the default setting.

⇒Padding: Set the padding value for the top, right, bottom and left around the badge text for different dimensions. You can link the values together or customize them individually.

⇒Text Color: Customize the badge text color.

⇒Background Color: Customize the background color of the badge.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the badge for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the badge border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the badge for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the badge text.

 

Title & Description

⇒Content Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Title

→Bottom Spacing: Control the bottom spacing of the card title manually for different dimensions.

→Text Color: Add a custom color to the title text of the card.

→Typography: Set the typography options for the titles.

 

⇒Description

→Bottom Spacing: Control the bottom spacing of the card description manually for different dimensions.

→Text Color: Add a custom color to the description text of the card.

→Typography: Set the typography options for the description text.

 

Button

⇒Padding: Set the padding value for the top, right, bottom and left around the card button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the button text.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the button border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Text Color: Customize the button text color for Normal & Hover view.

⇒Background Color: Customize the button text background color for Normal & Hover view.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Card Element.


Was this article helpful to you? Yes No

How can we help?