The best way to Taste an Symbol in Your Divi Fullwidth Header Module

by | Jul 24, 2022 | Etcetera | 0 comments

Divi’s Fullwidth Header Module accommodates a variety of image style alternatives, letting Divi consumers create surprising footage and layouts for their headers. The header image can be styled in many ways to create crowd pleasing layouts and designs. It’ll get a lot more crowd pleasing when it’s coupled with the quite a lot of text and button designs. In this post, we’ll see how one can style an image in your Divi Fullwidth Header Module and proportion 3 examples to help you design your Fullwidth Header Module.

Let’s get started!

Preview

Desktop Fullwidth Header Image Example One

Desktop Fullwidth Header Image Example One

Phone Fullwidth Header Image Example One

Phone Fullwidth Header Image Example One

Desktop Fullwidth Header Image Example Two

Desktop Fullwidth Header Image Example Two

Phone Fullwidth Header Image Example Two

Phone Fullwidth Header Image Example Two

Desktop Fullwidth Header Image Example 3

Desktop Fullwidth Header Image Example Three

Phone Fullwidth Header Image Example 3

Phone Fullwidth Header Image Example Three

Add an Image to Your Fullwidth Header

Proper right here’s the full-width header that we’ll use in this example. First, let’s see how one can assemble it. We’re the usage of footage and design queues from the unfastened Flower Farm Format Pack that’s available inside of Divi.

Add an Image to Your Fullwidth Header

So that you can upload the Divi Fullwidth Header module in your internet web page, you’ll desire a new section container with a one-column row. After you have that, add the Fullwidth Header Module in your row’s column.

Add an Image to Your Fullwidth Header

Fullwidth Header Text

Next, add your Determine, Subtitle, Button One text, Button Two text, and Content material subject material.

  • Determine: Welcome to Divi Flower Farm
  • Subtitle: About Us
  • Button One: Additional Knowledge
  • Button Two: Retailer
  • Content material subject material: your text

Fullwidth Header Text

Header Image

Scroll all of the manner right down to Photos, make a selection Header Image, and add your image.

Header Image

Background

Next, scroll all of the manner right down to Background, make a selection the Gradient tab, and add 4 Gradient Stops:

  • Gradient Prevent 1: 0%, #000000
  • Prevent 2: 25%, rgba(0,0,0,0.8)
  • Gradient 3: 75%, rgba(0,0,0,0.8)
  • Gradient 4: 100%, #000000

Background

Next, allow Place Gradient Above Background Image. Go away the other settings at their defaults.

  • Place Gradient Above Background Image: Positive

Background

Make a selection the Background Image tab and add your image. Next, we’ll style the Fullwidth Header Module.

Background

Determine Text

Make a selection the Design tab and scroll all of the manner right down to Determine Text. Make a selection H1 and make a selection Italiana for the Font. Set the Alignment to Left and make a selection white for the Color.

  • Heading Degree: H1
  • Font: Italiana
  • Alignment: Left
  • Color: #ffffff

Title Text

Set the desktop Measurement to 80px, the tablet Measurement to 40px, and the phone Measurement to 32px.

  • Measurement: 80px Desktop, 40px Tablet, 32px Phone

Title Text

Body Text

Next, scroll all of the manner right down to Body Text. Set the Alignment to Left, make a selection Roboto for the Font, and change the Color to white.

  • Alignment: Left
  • Font: Roboto
  • Color: #ffffff
See also  How you can Convert a WordPress Widget right into a Block (Step via Step)

Body Text

Change the desktop Measurement to 18px, the tablet Measurement to 16px, and the phone Measurement to 14px.

  • Text Measurement: 18px Desktop, 16px Tablet, 14px Phone

Body Text

Subtitle Text

Next, scroll all of the manner right down to Subtitle Text. Make a selection Roboto for the Font and set the Weight to Heavy. Make a selection TT for the Style, set the Alignment to Left, and change the Color to #b5a68f.

  • Font: Roboto
  • Weight: Heavy
  • Style: TT
  • Alignment: Left
  • Color: #b5a68f

Subtitle Text

Next, exchange the Spacing to 0.2em, and the Line Height to at least one.7em. Go away the Font Measurement at its default, 18px.

  • Spacing: 0.2em
  • Line Height: 1.7em

Subtitle Text

Button One

Scroll all of the manner right down to Button One and make a selection Use Custom designed Varieties for Button One. Set the Font Measurement to 14px, the Text Color to #aa6a3c, and the Background Color to #f5f3ef.

  • Use Custom designed Varieties for Button One: Positive
  • Font Measurement: 14px
  • Text Color: #aa6a3c
  • Background Color: #f5f3ef

Button One

Set the Border Color to #aa6a3c, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Bold, and the Style to TT.

  • Border Color: #aa6a3c
  • Letter Spacing: 0.15em
  • Font: Roboto
  • Weight: Bold
  • Style: TT

Button One

Scroll all of the manner right down to Button One Padding. Change the Top and Bottom Padding to 20px and the Left and Right kind Padding tot 30px.

  • Padding: Top, Bottom 20px, Left, Right kind 30px

Button One

Button Two

Next, scroll all of the manner right down to Button Two. Make a selection Use Custom designed Varieties for Button Two. Set the Font Measurement to 14px, the Text Color to white, and the Background Color to rgba(255,255,255,0).

  • Use Custom designed Varieties for Button Two: Positive
  • Font Measurement: 14px
  • Text Color: #ffffff
  • Background Color: rgba(255,255,255,0)

Button Two

Set the Border Color to white, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Bold, and the Style to TT.

  • Border Color: #ffffff
  • Letter Spacing: 0.15em
  • Font: Roboto
  • Weight: Bold
  • Style: TT

Button Two

Scroll all of the manner right down to Button Two Padding and set the Top and Bottom Padding to 20px, and the Left and Right kind Padding to 30px. That’s it for the Fullwidth Header Module styling. Now, we’ll see three ways to style the image.

  • Padding: Top, Bottom 20px, Left, Right kind 30px

Button Two

Fullwidth Header Image Style Examples

Proper right here’s a take a look at 3 examples the usage of our construction as a starting point. I’ll make some adjustments to the construction for each and every of the examples.

Fullwidth Header Image Example One

For our first Fullwidth Header Image example, we’ll create a rounded best possible with a border. Move to the Design tab and scroll all of the manner right down to Image. Un-sync the Values and change the Top Border to 400px.

  • Top Right kind and Left Border: 400px
  • Bottom Right kind and Left Border: 0px
See also  10+ Very best Internet sites to Create Animated GIFs for Unfastened

Fullwidth Header Image Example One

Change the Border Width to 2px and the Border Color to white.

  • Width: 2px
  • Color: #ffffff

Fullwidth Header Image Example One

Next, we’ll keep an eye on the Alignment of the text and image to keep an eye on their placement on the show. For this example, we’ll pass away the image and text in their provide positions, alternatively we’ll exchange the vertical alignment for the text and buttons. Selecting Fullscreen opens an selection for Vertical Text Alignment throughout the Text alternatives.

First, cross to the Design tab. Underneath Structure, set the Text Alignment to correct and allow Make Fullscreen.

  • Make Fullscreen: Positive

Fullwidth Header Image Example One

In the end, scroll all of the manner right down to Text. You’ll now see an selection labeled Text Vertical Alignment. Set it to Bottom. Close the module and save your settings.

  • Text Vertical Alignment: Bottom

Fullwidth Header Image Example One

Fullwidth Header Image Example Two

For this example, we’ll use a novel button text and image. First, exchange the Button One text to Knowledge.

  • Button One Text: Knowledge

Fullwidth Header Image Example One

Next, scroll all of the manner right down to Background and make a selection a novel image. This image will take spherical 1/3 of the show’s width. I’m the usage of the an identical image for the reason that background.

  • Header Image: Large Image

Fullwidth Header Image Example One

Next, cross to the Complicated tab and scroll all of the manner right down to the Header Image field. Add CSS to set the width to 150% and the Height to auto. Close the module and save your settings.

Header Image CSS:

max-width: 150%;
most sensible: auto;

Fullwidth Header Image Example One

Now with the image and button text in place, we’ll make our adjustments. We can keep an eye on the Alignment of the text and image to keep an eye on their placement on the show. First, cross to the Design tab. Underneath Structure, pass away the Text Alignment to Left and allow Make Fullscreen.

  • Make Fullscreen: Positive

Fullwidth Header Image Example One

Next, scroll to Determine Text and set the Alignment to Center.

  • Determine Text Alignment: Center

Fullwidth Header Image Example two

Next, scroll all of the manner right down to Body Text. Change the Text Alignment to Center.

  • Alignment: Center

Fullwidth Header Image Example two

Next, scroll to Subtitle Text and set the Alignment to Center.

  • Subtitle Text Alignment: Center

Fullwidth Header Image Example two

Scroll all of the manner right down to Button One Margin and change the Left Margin to 29% for desktops, 18% for medicine, and 19% for phones.

  • Button One Left Margin: 29% desktop, 18% tablet, 19% phone

Fullwidth Header Image Example two

Scroll all of the manner right down to Button Two Margin and change the Left Margin to 30% for medicine, and 31% for phones.

  • Button Two Left Margin: 30% tablet, 31% phone
See also  The Final Information to Hoteling Your Administrative center House

Fullwidth Header Image Example two

Scroll all of the manner right down to Sizing and set the Width to 104% for phones. This amenities the content material subject material appropriately for slim screens.

  • Width: 104% phone

Fullwidth Header Image Example two

Fullwidth Header Image Example 3

First, cross to the Design tab. Underneath Structure, set the Text Alignment to Right kind. In my case, the text is left-aligned, alternatively yours might be focused should you haven’t specified the alignment.

  • Text & Emblem Alignment: Center

Fullwidth Header Image Example Three

Scroll all of the manner right down to Image. Change the Border Width to 4px and the Border Color to #b5a68f.

  • Border Width: 4px
  • Border Color: #b5a68f

Fullwidth Header Image Example Three

Next, scroll to Determine Text and change the Alignment to Targeted.

  • Determine Text Alignment: Targeted

Fullwidth Header Image Example Three

Scroll to Body Text and change the Alignment to Targeted.

  • Body Text Alignment: Targeted

Fullwidth Header Image Example Three

Next, scroll to Subtitle Text and change the Alignment to Targeted.

  • Subtitle Text Alignment: Targeted

Fullwidth Header Image Example Three

Next, cross to the Content material subject material tab and change the Button One text to Knowledge just for phones.

  • Button One Content material subject material for Phones: Knowledge

Fullwidth Header Image Example Three

Go back to the Design tab and add a 5% Right kind Margin to Button Two’s phone tab.

  • Right kind Margin: 5% phone

Fullwidth Header Image Example Three

In the end, scroll all of the manner right down to Sizing and set Content material subject material Width to 52% for desktops, and 100% for medicine and phones. Close the module and save your settings.

  • Content material subject material Width: 52% desktop, 100% tablet and call

Fullwidth Header Image Example Three

Results

Desktop Fullwidth Header Image Example One

Desktop Fullwidth Header Image Example One

Phone Fullwidth Header Image Example One

Phone Fullwidth Header Image Example One

Desktop Fullwidth Header Image Example Two

Desktop Fullwidth Header Image Example Two

Phone Fullwidth Header Image Example Two

Phone Fullwidth Header Image Example Two

Desktop Fullwidth Header Image Example 3

Desktop Fullwidth Header Image Example Three

Phone Fullwidth Header Image Example 3

Phone Fullwidth Header Image Example Three

Completing Concepts

That’s our take a look at how one can style your Divi Fullwidth Header Module. The image is simple to style, and it can be situated elsewhere during the module. The module’s quite a lot of construction alternatives come up with a variety of design chances. You must certainly check out your designs on all show sizes to make sure the most productive particular person revel in.

We want to concentrate from you. Have you ever ever styled your footage in Divi’s Fullwidth Header Module? Let us know about your revel in throughout the comments.

The post The best way to Taste an Symbol in Your Divi Fullwidth Header Module seemed first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *