Website Building » Weebly » How Do I Add a Search Box in Weebly?

How Do I Add a Search Box in Weebly?

Last updated on December 27, 2022 @ 5:32 pm

As a Weebly user, you may want to add a search box to your site so that visitors can easily search for specific content on your site. Luckily, Weebly makes it easy to add a search box to your site.

In this article, we’ll show you how to add a search box to your Weebly site.

First, log in to your Weebly account and go to the “Edit” tab for the page you want to add the search box to. Next, click on the “Add” button and select “More.”

In the “More” menu, select “HTML Code.”

A pop-up window will appear. In the “Content” field, enter the following code:

<input type="text" placeholder="Search.." />

Next, click on the “Style” tab and give your search box a name. For example, you could name it “search-box.”

PRO TIP: Weebly is a popular website builder, but it doesn’t include a search box by default. You can add one by installing a search widget from the Weebly App Center. However, this will only work if you have a paid Weebly plan. If you try to add a search box to a free Weebly site, you’ll see an error message.

Now that you’ve added the HTML code for the search box, it’s time to style it using CSS. To do this, go back to the “Edit” tab and click on “Theme.”

In the Theme editor, click on the “CSS” tab and enter the following code:

.search-box {  }

Next, replace the placeholder text with your own CSS code. For example:

.search-box {
   width: 300px;
   height: 40px;
   border: 2px solid #ccc;
   border-radius: 4px;
   padding: 0 10px;
   box-sizing: border-box;
 }

Finally, save your changes and preview your site to see the new search box in action.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.