Tutorial

Elementor Custom Card Image and Button

Video

Description

Another answer to a question in the Global Elementor Community Facebook group.

The author was asking how to get a card layout with an image on the left, copy with a coloured background on the right and a rounded button at the bottom.

This tutorial shows a way to do this which is responsive to different devices.

View the first part of the video to see what we are wanting to achieve.

Add a Section to the page

Add a section to the page
Give it a top and bottom padding
Add a class to Advanced->Classes - "equal-height-inner-section"

Add an inner section

Add an inner section to the above section. By default, it will have two columns.

Left Column:

Set the background image. Set it to "center center", "cover"
Add a spacer widget and set the height t the minimum you want on mobile.

Right Column:

Add a Text Editor
Set padding on the text editor
Add a button Widget
Add classes to Advanced->Classes - "round-image-button btn-justify-center image-drop-button"
Change button Normal and Hover Styles

Custom CSS

Go to Site Settings -> Custom CSS

Copy the CSS below

Paste it below the last existing rule

Duplicate Columns for Cards

Right-click on the main Sections Column
Left Click "Duplicate"

Code (click to copy)

CSS for Site Settings (css)

/********************
 Custom Buttons
 *******************/
 
 :root{
     --round-button-size: 100px;
     --drop-button-bottom-offset: -30px;
 }

.round-image-button .elementor-button-link{
    width: var(--round-button-size);
    height: var(--round-button-size);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.btn-justify-center .elementor-button-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-drop-button{
    position: absolute;
    bottom: var(--drop-button-bottom-offset);
    z-index: 99;
    left: 0;
}


.equal-height-inner-section > .elementor-container .elementor-column .elementor-widget-wrap .elementor-inner-section, .equal-height-inner-section > .elementor-container .elementor-column .elementor-widget-wrap .elementor-inner-section > .elementor-container{
    height: 100%;
}