Align button to bottom in Elementor CTA Widget

David Denedo

David Denedo

Updated on .

Table of Content

align your call to action button to the bottom

Introduction

The Elementor Call to Action (CTA) widget is a favourite among Elementor Pro users. It is packed with a lot of features which Imran explores in his youtube video.

One aspect that a lot of users struggle with is aligning the CTA button to the bottom. In this tutorial, we’ll look at how we can achieve it. You can check out the sample on my test website.

Applicable Scenarios

Scenario 1 – A CTA widget per column using Sections & Columns

For those still using the old sections and columns layout, we use a popular layout method: creating a section with multiple columns and then adding a CTA widget to each column.

One section with 3 columns and a CTA widget in each

Scenario 2 – Three CTA Widgets in a single column with custom widths using Sections and Columns

A better approach while using the sections and columns might be to apply custom widths to the individual CTA widgets and align them all in a single column to reduce the DOM size.

Scenario 3: Three CTA Widgets in one container set to row

The third scenario I highly recommend is activating the new flex container experiment under Elementor > Settings > Experiments. Add three CTA widgets to a single parent container set to flex-direction: row.

Custom CSS

Add this custom CSS to the parent section/container:

selector .elementor-widget-wrap{
  align-content: stretch;
}

selector .elementor-widget-call-to-action .elementor-widget-container{
    display: flex;
    height: 100%;
}

selector .elementor-cta{
    flex-direction: column;
    flex-grow: 1;
}
selector .elementor-cta__content{
    flex-grow: 1;
    flex-direction: column;
}
selector .elementor-cta__button-wrapper{
    margin-top: auto;
}

Leave the first comment