This tutorial will show you how to add a search field to a web page using the Divi Visual Builder for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version of this tutorial 


Hello, this is Jimi Blevins.

Today I’m going to show you how to: “Add A Search Field To Your Website Using The Divi Visual Builder.

To get started, all we need to do is “Add” (+) our “Search” module. Oddly enough, we type “Search” into the search field and that will bring up the module. :) ScreenshotHowToAddASearchModule

It automatically pops it into our page here and we’ve got our “General Search Settings.ScreenshotHowToAddASearchModule2 We can change the “Text Color.” (“Light” to “Dark.“) “Text Orientation.” (This is how the text shows up in the field.) If I want it “Aligned,” to the “Left,” “Right” or the “Center.ScreenshotHowToAddASearchModule3 Also, something to note, if I change the orientation to the right, it also moves the search button to the left. ScreenshotHowToAddASearchModule4 We have “Placeholder Text,” which is what comes up before people have actually entered something in. ScreenshotHowToAddASearchModule5

So let’s get into the “Design” settings. ScreenshotHowToAddASearchModule6

We can select a “Max Width,” so if I select 50%, it’ll only go halfway across the page. I can change the “Button and Border Color.” “Input Field Background Color.” “Placeholder Color,” this is so you can change the color of the text to show how visible it is. (Just your “Placeholder Text.”) We’ve got your “Input Font” and “Input Font Size.” “Input Text Color.” “Button Font Size.” Let’s change the “Button Text Color” so we can actually read it.

Screen Shot 2017-03-20 at 2.40.26 PM

We’ve also got “Button Letter Spacing.” “Button Line Height.

There are lots of different options we’ve got available to us, “Put In Margin Padding,” all that fun stuff.

That walks you through really quick on how to: “Add A Search Field To Your Website Using The Divi Visual Builder.

Once again, my name is Jimi Blevins. Thank you so much for watching.