Now we can customize the button two styles. Then right-click on the button two section and paste the button one styles. To save some repetitive design steps, let’s copy the button one module styles to the button two module, then customize what we need to change.įirst, right-click on the button one section and copy the button one styles. Customize Button Two Stylesīutton two has some different colors and spacing but is pretty similar to button one. There are some text wrap issues with our button that we will fix with some custom CSS later. Use the responsive settings to set different margin and padding values on mobile devices.
Next, open the subtitle settings and customize the font.įinally, change the text size for desktop and mobile (once again, use the responsive settings to add a smaller text size on mobile) and adjust the line height. Use Divi’s responsive settings to add a smaller text size for mobile devices. Move to the body text section and customize the font. Modify the title text color, size, and spacing. First, open the title settings and customize the text as follows: With our header content and background in place, let’s move over to the design tab to customize the text styles. Next, select the Background Mask tab and add a background mask to the background. Delete the original background color, then add a background gradient. Next, add the Header Image of the veterinarians with the animals. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Body: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.Open the fullwidth header module settings and add the following content to the module: Then, delete the original header section.Ĭustomize the Fullwidth Header Module Add Content Add a new fullwidth section to the page, below the existing header.Īdd a fullwidth header module to the section. We are going to be recreating the hero section using the fullwidth header module. Select Use This Layout to add the layout to your page. Search for and select the Veterinarian Landing Page layout. We will use a premade layout from the Divi library for this example, so select Browse Layouts. For this design, we will use the Veterinarian Landing Page from the Veterinarian Layout Pack.Īdd a new page to your website and give it a title, then select the option to Use Divi Builder. Let’s start by using a premade layout from the Divi library.
#Fitness hero header how to
Now, you are ready to start! How to Build a Hero Section with Divi’s Fullwidth Header Module Create a New Page with a Premade Layout Here is a preview of what we will design.īefore we begin, and make sure you have the latest version of Divi on your website. In this tutorial, we will show you how to build an engaging and eye-catching hero section using Divi’s fullwidth header module. You can edit all of these settings within the one fullwidth header module’s settings instead of having to toggle between multiple image, text, and button modules. Of course, you can also utilize the background options to add and combine images, gradients, colors, patterns, and masks. With Divi’s Fullwidth Header module, you can add a title, a subtitle, two buttons, body text, a logo image and a header image. It’s a super-sized piece of content that you can use to tell your story, share information about your work, or highlight a product or service. Building a hero section is an excellent way to call attention to important content on your page.
0 kommentar(er)
