How to Add Call To Action Button in Weebly?

Weebly platform includes a marketplace where developers can sell apps to Weebly users. The app can be a free one or a premium one where you need to pay a one time or a recurring fee. One of the free app in the current app center is “Call-out Box” which helps users to add call to action button on their Weebly site. In this article we will discuss in detail how to add call to action button in Weebly site using the app from app center as well as using custom code.

What is a Call to Action Button?

Call to action or a call out box is an element placed on a web page to prompt or attract a user to carry out a desired activity. It is really useful to get user’s attention from the regular content of the page. Call to action element could be a button or a colored text box or combination of different elements together.

Examples of Call to Action

The purpose of call to action button depends on the site owner and some of the generally used examples are:

• Drive traffic to particular page for more page views.
• Offer a discount on a product and attract users to that product page.
• Used to inform an offer on a popular free or paid download.
• Request users to try out a demo.
• Offer a signup a button to quickly register for site membership.
• Offer a call back option for services like restaurants.

How to Add Call to Action Button in Weebly?

There are two simple ways to add a call to action element in a Weebly site:

• Using free call-out box from app center
• Using your custom call-out box

Call-out Box From Weebly App Center

The simple way to add call to action button in Weebly is to connect the “Call-out box” app from the App Center. Once the app is connected you can drag & drop wherever you want on a page. Basically it is a colored text box where you can add any default elements. Below is an example of a call to action box with title, text and a button.

Though it looks very easy to add the call-out box the drawback is that the elements will look similar to other elements on the page. For example, you can’t customize the font family or button color to a different one other than the default one used on the site. Though you can except customization features like WordPress Gutenberg editor, probably we can expect another developer may come out with different style of call-out box later on app center.

Using Custom Call to Action Widget

Regardless of the default elements, it is always possible to add your own custom widgets to Weebly. Here we explain a simple call-out box widget with title and content The box and the button has default colors and show different colors on hover. Each and every single element of the call-out box can be customized and you can add the below CSS code in your “main.less” (older themes will have “main_style.css”) for the centralized use on your site or add it under the header section for use on a single page.

<style>
/* Call out box */
.call-out-box {
background: #097AC6;
color: white !important;
padding: 16px;
margin: 11px 6px 11px 6px;
border-radius: 3px;
position: relative;
float: left;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
/* Call out box on hover */
.call-out-box:hover {
background: #E68AB8;
color: white !important;
padding: 16px;
margin: 11px 6px 11px 6px;
border-radius: 3px;
position: relative;
float: left;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
/* Call to action button */
.cta-btn {
float:right;
color: #333333;
background-color:#fafafa;
border-color: #4cae4c;
padding: 6px 12px;
font-size: 20px;
font-weight: 600;
line-height: 25px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}
/* Call to action button on hover */
.cta-btn:hover {
background: green;
color: #ffffff;
}
</style>

Add the below HTML code inside embed code element wherever you want on a page. It can be a full length box or placed adjacent to another element to create two or three column sections.

<div class="call-out-box">
<h2>This is a title of call out box</h2>
<p>Here is your content - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<button class="cta-btn">Action Button</button>
</div>