Add Two Buttons or Remove Button in Weebly Landing Page

All Weebly themes have a button on landing page used for call to action purpose. It works highly effective when used properly and results in more conversion rate. But what if you do not want this button? Here is the step by tutorial to remove call to action button from Weebly landing page. Weebly uses two types of themes – responsive and non-responsive, and the process differs based on the theme you use.

Call to Action Buttons in Weebly

In this article, we will explain adding two call to action buttons in both non-responsive and responsive themes in Weebly. You can also add call to action as a widget, customize the default buttons and add 3D press buttons in Weebly.

Remove Call to Action Button on Responsive Themes

When you have a landing page on a responsive themes just do not add any button text or link and the button will be automatically hidden on the published site. This is also applicable for the title and short description on the landing page.

Remove Call to Action Button on Non-responsive Theme

On non-responsive themes, even you do not have a button text or link, the button will be displayed on the published site. Here, you need to remove the button by editing the source HTML of the “landing.html” header type.

• In Weebly site editor click on “Edit HTML/CSS” button available under “Theme” tab.
• You will be taken to Weebly code editor, click “landing.html” under “Header Type”.
• Search the word button in the code. Use “Ctrl+F” in Windows or “Command+F” in Mac for searching.
• Delete the following <div> section completely.

<div class="button-wrap">{action:button global="false"}</div>

This line will be normally available with “button-wrap” class as shown below:

You can see the preview under the code to check the button is removed. Save your theme and publish your site. Note that the code may vary based on your theme, in general there should be a line “{action:button global=”false”}” for adding call to action button in all themes which you can remove. View the below video on how to remove call to action button from the landing page of your Weebly site:

 

Creating Multiple Landing Page Layouts

The above method will completely remove the button from your landing page layout and you will not have an option to add the button any more. In case if you want to create multiple landing pages on your site and want to add button on some pages and not on other pages, then here is the solution.

• As explained above, open the source code of your “landing.html” page and copy the entire code.
• Now create a new page layout by clicking on “New Header Type” option as shown below:

• You will see a new page layout is created with default source code.
• Delete the entire code and replace it with the code you copied from your original “landing.html” page.
• Change the new header type name to “no-button-landing-page.html” (or any name you want). Basically we are duplicating landing page with different names.
• Now you remove the call to action tag “{action:button global=”false”}” from “no-button-landing-page.html”.
• Save your theme.

You can see a new page layout“no-button-landing-page.html” is added under “Pages” tab or on the editor under the “Settings” button on any pages with header image.

You can switch between the layouts or create multiple landing pages with or without call to action button.

How to Add Two Call to Action Buttons?

Many users asked us how to add two or more call to action buttons on a Weebly landing page. Just adding one more line “{action:button global=”false”}” on “landing.html” will and an additional button on the editor. But the problem is the two buttons can’t have different text, on a published site the second button will act like a duplicate of the first one. Here is how you can add two call to action buttons.

Similar to removing the button, go to “landing.html” layout and replace the code “{action:button global=”false”}” with the below code:

<div class="button-wrap">{button:content global="false"}</div>

The modified code will look something like below:

Save your theme to go to the Weebly editor and the default call to action might have been removed. Drag a button element and drop on to the call to action button area (below the short description). You can add one more button element beside the first button element. Now you have two buttons with default Weebly button style and add your text / link like normal.

• You can align first button right and the other second button left to align properly on the layout. Also “Spacer” element can be used to create the required space between button. Ensure to check the buttons on mobile and add CSS media queries for better alignment if required.
• Use top margin to create enough space between the buttons and the short description.
• The “button-wrap” class uses default Weebly button style, if you want you can use custom class name and define the CSS styles under “main_style.css” file.
• You can also add any other elements like block quote or social icons on the header area instead of call to action button.

View demo of Weebly landing page with two call to action buttons.