How to Style an Image in Your Divi Fullwidth Header Module

by | Jul 24, 2022 | Etcetera | 0 comments

Divi’s Fullwidth Header Module comprises a variety of symbol taste choices, letting Divi customers create gorgeous pictures and layouts for his or her headers. The header symbol will also be styled in some ways to create attention-grabbing layouts and designs. It will get much more attention-grabbing when it’s coupled with the more than a few textual content and button designs. On this put up, we’ll see how you can taste a picture for your Divi Fullwidth Header Module and proportion 3 examples that will help you design your Fullwidth Header Module.

Let’s get began!

Preview

Desktop Fullwidth Header Symbol Instance One

Desktop Fullwidth Header Image Example One

Telephone Fullwidth Header Symbol Instance One

Phone Fullwidth Header Image Example One

Desktop Fullwidth Header Symbol Instance Two

Desktop Fullwidth Header Image Example Two

Telephone Fullwidth Header Symbol Instance Two

Phone Fullwidth Header Image Example Two

Desktop Fullwidth Header Symbol Instance 3

Desktop Fullwidth Header Image Example Three

Telephone Fullwidth Header Symbol Instance 3

Phone Fullwidth Header Image Example Three

Upload an Symbol to Your Fullwidth Header

Right here’s the full-width header that we’ll use on this instance. First, let’s see how you can construct it. We’re the use of pictures and design queues from the free Flower Farm Layout Pack that’s to be had inside of Divi.

Add an Image to Your Fullwidth Header

So as to add the Divi Fullwidth Header module on your web page, you’ll want a new segment container with a one-column row. After getting that, upload the Fullwidth Header Module on your row’s column.

Add an Image to Your Fullwidth Header

Fullwidth Header Textual content

Subsequent, upload your Identify, Subtitle, Button One textual content, Button Two textual content, and Content material.

  • Identify: Welcome to Divi Flower Farm
  • Subtitle: About Us
  • Button One: Extra Data
  • Button Two: Store
  • Content material: your textual content

Fullwidth Header Text

Header Symbol

Scroll all the way down to Photographs, make a choice Header Symbol, and upload your symbol.

Header Image

Background

Subsequent, scroll all the way down to Background, make a selection the Gradient tab, and upload 4 Gradient Stops:

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

Background

Subsequent, allow Position Gradient Above Background Symbol. Go away the opposite settings at their defaults.

  • Position Gradient Above Background Symbol: Sure

Background

Make a choice the Background Symbol tab and upload your symbol. Subsequent, we’ll taste the Fullwidth Header Module.

Background

Identify Textual content

Make a choice the Design tab and scroll all the way down to Identify Textual content. Make a choice H1 and make a choice Italiana for the Font. Set the Alignment to Left and make a choice white for the Colour.

  • Heading Stage: H1
  • Font: Italiana
  • Alignment: Left
  • Colour: #ffffff

Title Text

Set the desktop Dimension to 80px, the pill Dimension to 40px, and the telephone Dimension to 32px.

  • Dimension: 80px Desktop, 40px Pill, 32px Telephone

Title Text

Frame Textual content

Subsequent, scroll all the way down to Frame Textual content. Set the Alignment to Left, make a choice Roboto for the Font, and alter the Colour to white.

  • Alignment: Left
  • Font: Roboto
  • Colour: #ffffff
See also  How to Organize Divi Cloud Items Using the Favorites Option

Body Text

Trade the desktop Dimension to 18px, the pill Dimension to 16px, and the telephone Dimension to 14px.

  • Textual content Dimension: 18px Desktop, 16px Pill, 14px Telephone

Body Text

Subtitle Textual content

Subsequent, scroll all the way down to Subtitle Textual content. Select Roboto for the Font and set the Weight to Heavy. Select TT for the Taste, set the Alignment to Left, and alter the Colour to #b5a68f.

  • Font: Roboto
  • Weight: Heavy
  • Taste: TT
  • Alignment: Left
  • Colour: #b5a68f

Subtitle Text

Subsequent, alternate the Spacing to 0.2em, and the Line Top to one.7em. Go away the Font Dimension at its default, 18px.

  • Spacing: 0.2em
  • Line Top: 1.7em

Subtitle Text

Button One

Scroll all the way down to Button One and make a selection Use Customized Types for Button One. Set the Font Dimension to 14px, the Textual content Colour to #aa6a3c, and the Background Colour to #f5f3ef.

  • Use Customized Types for Button One: Sure
  • Font Dimension: 14px
  • Textual content Colour: #aa6a3c
  • Background Colour: #f5f3ef

Button One

Set the Border Colour to #aa6a3c, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Daring, and the Taste to TT.

  • Border Colour: #aa6a3c
  • Letter Spacing: 0.15em
  • Font: Roboto
  • Weight: Daring
  • Taste: TT

Button One

Scroll all the way down to Button One Padding. Trade the Most sensible and Backside Padding to 20px and the Left and Proper Padding tot 30px.

  • Padding: Most sensible, Backside 20px, Left, Proper 30px

Button One

Button Two

Subsequent, scroll all the way down to Button Two. Make a choice Use Customized Types for Button Two. Set the Font Dimension to 14px, the Textual content Colour to white, and the Background Colour to rgba(255,255,255,0).

  • Use Customized Types for Button Two: Sure
  • Font Dimension: 14px
  • Textual content Colour: #ffffff
  • Background Colour: rgba(255,255,255,0)

Button Two

Set the Border Colour to white, the Letter Spacing to 0.15em, the Font to Roboto, the Weight to Daring, and the Taste to TT.

  • Border Colour: #ffffff
  • Letter Spacing: 0.15em
  • Font: Roboto
  • Weight: Daring
  • Taste: TT

Button Two

Scroll all the way down to Button Two Padding and set the Most sensible and Backside Padding to 20px, and the Left and Proper Padding to 30px. That’s it for the Fullwidth Header Module styling. Now, we’ll see 3 ways to taste the picture.

  • Padding: Most sensible, Backside 20px, Left, Proper 30px

Button Two

Fullwidth Header Symbol Taste Examples

Right here’s a have a look at 3 examples the use of our structure as a kick off point. I’ll make some changes to the structure for each and every of the examples.

Fullwidth Header Symbol Instance One

For our first Fullwidth Header Symbol instance, we’ll create a rounded best with a border. Cross to the Design tab and scroll all the way down to Symbol. Un-sync the Values and alter the Most sensible Border to 400px.

  • Most sensible Proper and Left Border: 400px
  • Backside Proper and Left Border: 0px
See also  Divi Plugin Highlight: Divi Elastic Gallery

Fullwidth Header Image Example One

Trade the Border Width to 2px and the Border Colour to white.

  • Width: 2px
  • Colour: #ffffff

Fullwidth Header Image Example One

Subsequent, we’ll alter the Alignment of the textual content and symbol to regulate their placement at the display. For this case, we’ll go away the picture and textual content of their present positions, however we’ll alternate the vertical alignment for the textual content and buttons. Deciding on Fullscreen opens an possibility for Vertical Textual content Alignment within the Textual content choices.

First, pass to the Design tab. Beneath Structure, set the Textual content Alignment to proper and allow Make Fullscreen.

  • Make Fullscreen: Sure

Fullwidth Header Image Example One

Finally, scroll all the way down to Textual content. You’ll now see an possibility classified Textual content Vertical Alignment. Set it to Backside. Shut the module and save your settings.

  • Textual content Vertical Alignment: Backside

Fullwidth Header Image Example One

Fullwidth Header Symbol Instance Two

For this case, we’ll use a distinct button textual content and symbol. First, alternate the Button One textual content to Data.

  • Button One Textual content: Data

Fullwidth Header Image Example One

Subsequent, scroll all the way down to Background and make a choice a distinct symbol. This symbol will take round 1/3 of the display’s width. I’m the use of the similar symbol because the background.

  • Header Symbol: Massive Symbol

Fullwidth Header Image Example One

Subsequent, pass to the Complex tab and scroll all the way down to the Header Symbol box. Upload CSS to set the width to 150% and the Top to auto. Shut the module and save your settings.

Header Symbol CSS:

max-width: 150%;
peak: auto;

Fullwidth Header Image Example One

Now with the picture and button textual content in position, we’ll make our changes. We will alter the Alignment of the textual content and symbol to regulate their placement at the display. First, pass to the Design tab. Beneath Structure, go away the Textual content Alignment to Left and allow Make Fullscreen.

  • Make Fullscreen: Sure

Fullwidth Header Image Example One

Subsequent, scroll to Identify Textual content and set the Alignment to Middle.

  • Identify Textual content Alignment: Middle

Fullwidth Header Image Example two

Subsequent, scroll all the way down to Frame Textual content. Trade the Textual content Alignment to Middle.

  • Alignment: Middle

Fullwidth Header Image Example two

Subsequent, scroll to Subtitle Textual content and set the Alignment to Middle.

  • Subtitle Textual content Alignment: Middle

Fullwidth Header Image Example two

Scroll all the way down to Button One Margin and alter the Left Margin to 29% for desktops, 18% for drugs, and 19% for telephones.

  • Button One Left Margin: 29% desktop, 18% pill, 19% telephone

Fullwidth Header Image Example two

Scroll all the way down to Button Two Margin and alter the Left Margin to 30% for drugs, and 31% for telephones.

  • Button Two Left Margin: 30% pill, 31% telephone
See also  Easy methods to Simply Make a Volunteer Utility Shape in WordPress

Fullwidth Header Image Example two

Scroll all the way down to Sizing and set the Width to 104% for telephones. This facilities the content material appropriately for slim displays.

  • Width: 104% telephone

Fullwidth Header Image Example two

Fullwidth Header Symbol Instance 3

First, pass to the Design tab. Beneath Structure, set the Textual content Alignment to Proper. In my case, the textual content is left-aligned, however yours could be targeted when you haven’t specified the alignment.

  • Textual content & Emblem Alignment: Middle

Fullwidth Header Image Example Three

Scroll all the way down to Symbol. Trade the Border Width to 4px and the Border Colour to #b5a68f.

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

Fullwidth Header Image Example Three

Subsequent, scroll to Identify Textual content and alter the Alignment to Focused.

  • Identify Textual content Alignment: Focused

Fullwidth Header Image Example Three

Scroll to Frame Textual content and alter the Alignment to Focused.

  • Frame Textual content Alignment: Focused

Fullwidth Header Image Example Three

Subsequent, scroll to Subtitle Textual content and alter the Alignment to Focused.

  • Subtitle Textual content Alignment: Focused

Fullwidth Header Image Example Three

Subsequent, pass to the Content material tab and alter the Button One textual content to Data only for telephones.

  • Button One Content material for Telephones: Data

Fullwidth Header Image Example Three

Return to the Design tab and upload a 5% Proper Margin to Button Two’s telephone tab.

  • Proper Margin: 5% telephone

Fullwidth Header Image Example Three

Finally, scroll all the way down to Sizing and set Content material Width to 52% for desktops, and 100% for drugs and telephones. Shut the module and save your settings.

  • Content material Width: 52% desktop, 100% pill and get in touch with

Fullwidth Header Image Example Three

Effects

Desktop Fullwidth Header Symbol Instance One

Desktop Fullwidth Header Image Example One

Telephone Fullwidth Header Symbol Instance One

Phone Fullwidth Header Image Example One

Desktop Fullwidth Header Symbol Instance Two

Desktop Fullwidth Header Image Example Two

Telephone Fullwidth Header Symbol Instance Two

Phone Fullwidth Header Image Example Two

Desktop Fullwidth Header Symbol Instance 3

Desktop Fullwidth Header Image Example Three

Telephone Fullwidth Header Symbol Instance 3

Phone Fullwidth Header Image Example Three

Finishing Ideas

That’s our have a look at how you can taste your Divi Fullwidth Header Module. The picture is straightforward to taste, and it may be positioned in different places throughout the module. The module’s more than a few structure choices provide you with a variety of design probabilities. Make sure you check your designs on all display sizes to make sure the most efficient consumer revel in.

We wish to listen from you. Have you ever styled your pictures in Divi’s Fullwidth Header Module? Tell us about your revel in within the feedback.

The put up How to Style an Image in Your Divi Fullwidth Header Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

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