help center

On this page

Create a Call to Action section

Last Update: January 10, 2024

The Call to Action is a basic building block of many websites. This is generally an important announcement or offer. It may also be used in collecting a subscription. The button may be linked to another page or, if you are a Pro user, use dynamic tags to open a popup. 

Call to Action Container Create a Call to Action section 1

Getting started

Begin by creating a new page on your website or editing an existing one.

Add a container

Step One 1 Create a Call to Action section 3
  1. Add a new container by clicking on the + icon on your screen
  2. For the container width, the boxed width is used in the example but a Full Width may be used if desired
  3. From the Style tab, you may give your container a background color or other style features. If you have stored global colors, these can be quickly applied to save you time
  4. In the Advanced tab, give your container some padding (example: 21PX)

Add the content

Step Two Create a Call to Action section 5
  1. From the Panel, drag and drop a Heading widget to your container and edit the content
  2. Next, drag a Button widget under the heading widget and link it if desired before proceeding.

Use the flex properties for alignment

Step Three Create a Call to Action section 7
  1. Select the container
  2. Click the Items accordion to expand it
  3. Change the Direction to Row. This will allow the widgets to be horizontally positioned
  4. Use the Align Items property to Center the widgets vertically
  5. You may now use the Justify Content property to set the space between the Widgets

Responsive settings

Step Four 1 Create a Call to Action section 9

Click to open the Responsive mode from the bottom of the Panel. Select the available viewports and make the needed changes. For tablets you may find only minor changes are needed.

For the mobile viewport, you may wish to change the container direction to row. You may then use the Align Items property to change the widgets to best fit your design

Additional content

Now that you have the foundations already, you may also need additional content in your container. This may be achieved by adding a child-container.

Additional Content Create a Call to Action section 11
  1. Drag a Container widget from the Panel to your parent container
  2. Drag the Heading widget to the inside the child container
  3. Edit the Layout Tab properties of the child-container
  4. Change the Width dropdown to Full Width
  5. Use the slider to adjust the width of your container it will still respect the Justify Content properties of the parent container
  6. Use the Items properties to align the content to best fit your design if needed
  7. The Gap function may also be used to provide space between your widgets

Next steps

Check out some other layouts you can create with containers:

Creating an Intro Section using Flexbox Containers

Creating a Hero Section using Flexbox Containers

Creating A Services Section using Flexbox Containers

Creating a Hero Image Gallery using Flexbox Containers

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article