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.
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.
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.
Is there a way to delete the un necessary spacers that come after apply the code
pleasae advice
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
You can see the demo on Weebly site and as we checked on couple of themes it works fine.
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!
Hi Stephanie.
I am frustratingly having the same problem.
Did you manage to find a solution?
Thanks so much.
Charlotte
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?
The article is updated with the trick to add two or more buttons on the landing page header area.
Thank you so much for info on how to remove button from landing page on the desktop view, but my mobile view was not “responsive”. Any ideas would be greatly appreciated!
Thank you so much.
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!
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.
This works great on the desktop view. I still see the button in the mobile view. Not sure why that is. Advice?
Thanks!
On a responsive theme, it should work both on desktop as well as mobile since single CSS is used.
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!
Just insert the same button code {action:button global=”false”} again in landing.html to add one more button.
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
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 :(
Thanks for this info, though the button is useful it is not always the case. Finally removed it from my site.
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.
Some themes may not have the tag, you just delete the line
{action:button global=”false”}
This should remove the call to action button.
Thank You very much. Finally got rid of it.
wow, I Googled loads of pages to try and take this button off my website and yours was THE BEST!! Thank you!
Thank you, thank you, thank you… did I mention…. THANK YOU!!!!