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.

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.

Weebly Landing Page with Call To Action Button
Weebly Landing Page with Call To Action Button
Weebly Lading Page without Call To Action Button
Weebly Lading Page without Call To Action Button

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:

Related:  What is a Content Website?
Delete Call to Action Button in Weebly Landing Page
Delete Call to Action Button in Weebly Landing Page

You can see the preview under the code to check the button is removed. Save your theme and publish your site.

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:
Creating New Header Type in Weebly
Creating New Header Type in Weebly
  • 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.

Related:  Free Nivo Slider Widget for Weebly
Change Page Layout in Weebly
Change Page Layout in Weebly

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

Weebly Page Layout Selection
Weebly Page Layout Selection

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:

Modifying Source Code of Landing Page on Weebly
Modifying Source Code of Landing Page on Weebly

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.

Two Buttons in Weebly Landing Page
Two Buttons in Weebly Landing Page
  • 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.
Related:  What is Submit URL Option in Bing Webmaster Tools?

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

Recommended Articles:

24 thoughts on “Add Two Buttons or Remove Button in Weebly Landing Page”

  1. Worked perfectly for me, added a second button with different text linking to a different page.
    All I had to do was add the {action:button global=”false”} code line, nothing else……..I guess it depends on the theme, mine was DUSK.
    Thanks a lot to the WebNots crew, pls keep up posting stuff on Weebly, even though I know you guys are leaning more towards Worpress now.

    Reply
  2. Just like the others who asked the same… I would like to know how to actually add a second button. The method listed above makes a duplicate button that links to the same place. It is only useful if the button is linked to a different page.

    Reply
  3. I tried the method to add a second button but all it does is remove the existing button. Once I have followed your guidlines it does not allow me to drag and drop additional buttons on the landing page

    Reply
  4. Trying to add 2 different buttons.
    Changed:
    {action:button global=”false”}
    to:
    {button:content global=”false”}

    and the default button disappeared.

    But now I cannot drag and drop a button element to the call to action button area in the header. It just kind of bounces off or lands below the header. Help!

    Reply
  5. Editorial Staff-
    Have you answered the following question-

    I’ve added two but they seem to be linked and when I edit the text in one, the text in the other also changes. Do you know how to stop this?

    Reply
  6. HI,

    I had two quick questions about the call to action button. 1.) I tried adding two but they seem to be linked and when I edit the text in one, the text in the other also changes. Do you know how to stop this? 2.) I added by two call to action buttons on the menu bar but they are aligned in the center and I would like them to be right aligned. Do you know how I can accomplish this? Thank you so much! Your website is incredibly helpful!

    Reply
    • John Smith,
      Did anyone ever answered how you, I’ve added two buttons but the text in the other also changes. Did you ever fix the issue.

      Reply
  7. This works great on the desktop view. I still see the button in the mobile view. Not sure why that is. Advice?

    Thanks!

    Reply
  8. Call me crazy, but could you please tell me how to ADD extra buttons on the landing page? :-)
    I would like to use the landing page to make a language selection and redirect to the different sites this way…
    (I know there are other ways to do this, but I would like to use the landing page in this case)

    Thx!

    Reply
      • Hello the two buttons created BUT are linned to each other,are the same dutton 2 times.i want to have different text and link to diffent pages. can you help me because I spent a lot of hours trying.
        thanks

        Reply
    • did you get any anwser? I am also thing to find out. and I spent a lot of time with no result , I just have 2 same buttons :S :(

      Reply
  9. I did exactly what you said but the exact wording in the code wasn’t the same as yours. There was something similar and I tried deleting that but it was still there so I put it back. Please help.

    Reply
    • Some themes may not have the tag, you just delete the line
      {action:button global=”false”}
      This should remove the call to action button.

      Reply

Leave a Comment