3 Eye-Catching Gradients You Can Apply to Your Fullwidth Header Module with Divi’s Gradient Builder

by | Dec 20, 2022 | Etcetera | 0 comments

Divi’s Fullwidth Header Module makes it simple to construct dynamic header sections in your website online with no need so as to add more than one modules for every element. With the Fullwidth Header Module, you’ll upload and customise the glance of your textual content, photographs, background, spacing, and extra — all from one module. When utilized in mixture with Divi’s integrated background gradient settings, you’ll create crowd pleasing designs to advertise your small business or carrier.

On this instructional, we can display you how one can create 3 distinctive fullwidth header layouts with gradient backgrounds.

Let’s get began!

Sneak Peek

Here’s a preview of what we can design.

Gradient 1

Divi Fullwidth Header Gradient Background Layout 1 Final Design

Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

Gradient 2

Divi Fullwidth Header Gradient Background Layout 2 Final Design

Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

Gradient 3

Divi Fullwidth Header Gradient Background Layout 3 Final Design

Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

What You Want to Get Began

Earlier than we commence, install and activate the Divi Theme and you’ll want to have the most recent model of Divi in your website online.

Now, you’re ready to begin!

Let’s Get Began!

Gradient 1

Create a New Web page with a Premade Structure

Let’s get started by means of the use of a premade structure from the Divi library. For this design, we can use the Meals Recipes House Web page from the Food Recipes Layout Pack.

Upload a brand new web page for your website online and provides it a identify, then make a selection the strategy to Use Divi Builder.

Divi Fullwidth Header Gradient Background Layout 1 Use Builder

We will be able to use a premade structure from the Divi library for this situation, so make a selection Browse Layouts.

Divi Fullwidth Header Gradient Background Layout 1 Browse Layouts

Seek for and make a selection the Meals Recipes House Web page structure.

Divi Fullwidth Header Gradient Background Layout 1 Search Layout

Make a selection Use This Structure so as to add the structure for your web page.

Divi Fullwidth Header Gradient Background Layout 1 Use Layout

Now we’re in a position to construct our design.

Recreate the Hero Phase The use of the Fullwidth Header Module

First, we’re going to get started by means of recreating the hero phase on the most sensible of this structure the use of a Fullwidth Header Module. Upload a brand new fullwidth phase to the web page, correct under the present hero phase.

Divi Fullwidth Header Gradient Background Layout 1 Add Fullwidth Section

Subsequent, upload a Fullwidth Header Module to the fullwidth phase.

Divi Fullwidth Header Gradient Background Layout 1 Fullwidth Header Module

Now that our header module is in position, let’s replace the header content material within the Textual content phase of the Content material tab.

  • Identify: New Recipes Each Day
  • Button #1: Browse Recipes
  • Button #2: Obtain the Cookbook

Divi Fullwidth Header Gradient Background Layout 1 Content

  • Textual content: Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Sed nec diam ultricies, scelerisque arcu quis, mattis purus. Morbi tellus nibh, sollicitudin a gravida quis, commodo eget eros.

Divi Fullwidth Header Gradient Background Layout 1 Body

Below Background, take away the default background colour and upload the background symbol.

Divi Fullwidth Header Gradient Background Layout 1 Background Image

Transfer to the design tab and open the identify textual content settings. Customise the settings as follows:

  • Identify Font: Cormorant Garamond
  • Identify Weight: Daring

Divi Fullwidth Header Gradient Background Layout 1 Title Font

Subsequent, set the identify textual content measurement and line top.

  • Identify Textual content Dimension: 64px
  • Identify Line Top on Desktop: 1.5em

Divi Fullwidth Header Gradient Background Layout 1 Title Size

To optimize the design for cell units, we want to lower the dimensions of the identify line top on cell. Make a selection the responsive settings, then set the cell line top.

  • Identify Line Top on Cellular: 1em

Divi Fullwidth Header Gradient Background Layout 1 Mobile Line Height

Now let’s customise the frame font choices. Listed here are the settings:

  • Frame Font: Cormorant Garamond
  • Frame Font Weight: Medium

Divi Fullwidth Header Gradient Background Layout 1 Body Font

  • Frame Textual content Dimension: 24px
  • Frame Line Top: 1.8em

Divi Fullwidth Header Gradient Background Layout 1 Line Height

Customise Button Types

Subsequent, open the button one settings. Permit customized kinds, then set the textual content measurement.

  • Use Customized Types for Button One: Sure
  • Button One Textual content Dimension: 14px

Divi Fullwidth Header Gradient Background Layout 1 Button Styles

Upload a background colour to the button.

  • Button One Background: #FF7864

Divi Fullwidth Header Gradient Background Layout 1 Button Background

Customise the button border settings:

  • Button One Border Width: 8px
  • Button One Border Colour: #FF7864
  • Button One Border Radius: 0px

Divi Fullwidth Header Gradient Background Layout 1 Button Border

Subsequent, customise the font and disable the button icon.

  • Button One Font: Montserrat
  • Button One Font Weight: Medium
  • Button One Font Taste: TT (Capitalized)
  • Display Button One Icon: No

Divi Fullwidth Header Gradient Background Layout 1 Button Font

Subsequent, we can customise button two. The design is most commonly the similar as button one however with other colours. To skip some repetitive steps, let’s reproduction the button one kinds to button two, then customise the design from there.

First, right-click at the button one settings and duplicate the button one kinds.

Divi Fullwidth Header Gradient Background Layout 1 Button Styles

Subsequent, right-click at the button two settings and paste the button one kinds.

Divi Fullwidth Header Gradient Background Layout 1 Paste Styles

Trade the textual content colour and background colour for button two.

  • Button Two Textual content Colour: #726D64
  • Button Two Background: #CBDBD2

Divi Fullwidth Header Gradient Background Layout 1 Button 2 Background

Trade the button two border colour as neatly.

  • Button Two Border Colour: #CBDBD2

Divi Fullwidth Header Gradient Background Layout 1 Button 2 Border Color

Now that our buttons are entire, open the spacing settings and set the highest and backside padding.

  • Padding-Best: 10%
  • Padding-Backside: 10%
See also  How to Use the All Products WooCommerce Block

Divi Fullwidth Header Gradient Background Layout 1 Padding

In the end, open the Customized CSS settings beneath the complicated tab. Make a selection the responsive settings as a result of we can simplest upload the customized CSS for the desktop design. Upload customized CSS to the Frame CSS phase.

padding-right: 40%;

Divi Fullwidth Header Gradient Background Layout 1 Body CSS

Upload the Gradient to the Fullwidth Header Module

Now our fullwidth header design is entire and we will be able to upload the gradient. Navigate again to the content material tab and open the background settings. Make a selection the gradient tab and upload the gradient as follows:

  • 0%: rgba(116,170,159,0.42)
  • 1%: rgba(79,127,108,0.35)

Divi Fullwidth Header Gradient Background Layout 1 Background Gradient

Subsequent, customise the gradient settings:

  • Gradient Kind: Elliptical
  • Gradient Place: Backside Proper
  • Repeat Gradient: Sure
  • Position Gradient Above Background Symbol: Sure

Divi Fullwidth Header Gradient Background Layout 1 Gradient Settings

In the end, delete the outdated header phase from the unique structure.

Divi Fullwidth Header Gradient Background Layout 1 Delete Section

Ultimate Design

Here’s the general design for our first gradient header. As you’ll see, the repeated gradient with the sophisticated clear colours creates a captivating background for this header phase with out overpowering the background symbol.

Divi Fullwidth Header Gradient Background Layout 1 Full Design

Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

Gradient 2

Create a New Web page with a Premade Structure

For our subsequent design, we can use the Nutritionist Touchdown Web page from the Nutritionist Layout Pack.

Upload a brand new web page for your website online and provides it a identify, then make a selection the strategy to Use Divi Builder.

Divi Fullwidth Header Gradient Background Layout 2 Use Builder

Since we’re the use of a premade structure from the Divi Library, make a selection Browse Layouts.

Divi Fullwidth Header Gradient Background Layout 2 Browse Layouts

Seek for and make a selection the Nutritionist Touchdown Web page structure.

Divi Fullwidth Header Gradient Background Layout 2 Find Layout

Make a selection Use This Structure so as to add the structure for your web page.

Divi Fullwidth Header Gradient Background Layout 2 Use Layout

Now we’re in a position to construct our design.

Recreate the Hero Phase The use of the Fullwidth Header Module

We’re going to be recreating the present hero phase the use of the Fullwidth Header Module. Get started by means of including a fullwidth phase to the web page, under the present hero phase.

Divi Fullwidth Header Gradient Background Layout 2 Fullwidth

Subsequent, upload the Fullwidth Header Module to the phase.

Divi Fullwidth Header Gradient Background Layout 2 Add Module

Below the content material tab, upload the textual content for the module as follows:

  • Identify: Nutritionist
  • Subtitle: Specialised Meals Training
  • Button #1: Get Began For Loose
  • Button #2: Touch Me

You’ll be able to additionally take away the frame textual content at this step, even though we take away it in a while within the instructional.

Divi Fullwidth Header Gradient Background Layout 2 Content

Open the picture settings. Set the emblem symbol to the “Established 1990” symbol and set the header symbol to the graphic of the leaves.

Divi Fullwidth Header Gradient Background Layout 2 Header Images

Subsequent, transfer to the Design tab. Set the textual content and emblem alignment to middle.

  • Textual content & Emblem Alignment: Middle

Divi Fullwidth Header Gradient Background Layout 2 Alignment

Customise the Identify font as follows:

  • Identify Font: Merriweather
  • Identify Font Taste: TT (Capitalized)

Divi Fullwidth Header Gradient Background Layout 2 Title Font

To optimize the design for pill and cell, we can use the responsive settings so as to add other identify textual content sizes.

  • Identify Textual content Dimension – Desktop: 70px
  • Identify Textual content Dimension – Pill: 50px
  • Identify Textual content Dimension – Cellular: 30px

Divi Fullwidth Header Gradient Background Layout 2 Title Text Size

Subsequent, set the identify letter spacing and line top.

  • Identify Letter Spacing: 5px
  • Identify Line Top: 1.4em

Divi Fullwidth Header Gradient Background Layout 2 Spacing Line Height

Open the subtitle settings and customise the font.

  • Subtitle Font: Montserrat
  • Subtitle Font Weight: Medium
  • Subtitle Font Taste: TT (Capitalized)

Divi Fullwidth Header Gradient Background Layout 2 Subtitle Settings

We will be able to additionally set responsive textual content sizes for the subtitle. The sizes are as follows:

  • Subtitle Textual content Dimension – Desktop and Pill: 18px
  • Subtitle Textual content Dimension – Cellular: 12px

Moreover, set the subtitle letter spacing and line top.

  • Subtitle Letter Spacing; 5px
  • Subtitle Line Top: 1.5em

Divi Fullwidth Header Gradient Background Layout 2 Subtitle Sizing

Customise Button Types

Transfer directly to the Button One settings. Permit customized kinds and set the textual content measurement.

  • Use Customized Types for Button One: Sure
  • Button One Textual content Dimension: 13px

Divi Fullwidth Header Gradient Background Layout 2 Button One

Upload a background colour.

  • Colour 1 Background: #15C39A

Divi Fullwidth Header Gradient Background Layout 2 Button Background

Subsequent, set the border width and radius, and the letter spacing.

  • Button One Border Width: 0px
  • Button One Border Radius: 100px
  • Button One Letter Spacing: 2px

Divi Fullwidth Header Gradient Background Layout 2 Button Border

Alter the font settings as follows:

  • Button One Font: Montserrat
  • Button One Font Weight: Medium
  • Button One Font Taste: TT (Capitalized)
  • Display Button One Icon: No

Divi Fullwidth Header Gradient Background Layout 2 Button Font

In the end, upload padding to the button.

  • Button One Padding–Best: 16px
  • Button One Padding–Backside: 16px
  • Button One Padding–Left: 30px
  • Button One Padding–Proper: 30px

Divi Fullwidth Header Gradient Background Layout 2 Button Padding

The kinds for Button Two are in large part the similar as Button One, so we can reproduction the Button One Types to Button Two after which make a small trade to the colours.

First, right-click at the Button One settings and duplicate the kinds.

Divi Fullwidth Header Gradient Background Layout 2 Copy Styles

Then, right-click at the Button Two settings and paste the Button One kinds.

See also  Divi Photography Portfolio – Divi Child Theme Overview

Divi Fullwidth Header Gradient Background Layout 2 Paste Styles

Trade the Button Two background.

  • Button Two Background: #BAB66F

Divi Fullwidth Header Gradient Background Layout 2 Button 2 Background

Subsequent, navigate to the Spacing settings and set the padding as follows:

  • Padding-Best: 10%
  • Padding-Backside: 0px

Divi Fullwidth Header Gradient Background Layout 2 Spacing

open the Animation phase beneath the Design tab and set the module to vanish.

  • Animation Taste: Fade

Divi Fullwidth Header Gradient Background Layout 2 Animation

Upload the Gradient to the Fullwidth Header Module

Transfer to the content material tab and open the background settings. First, take away the present background colour.

Divi Fullwidth Header Gradient Background Layout 2 Remove Background Color

Subsequent, upload the background symbol.

Divi Fullwidth Header Gradient Background Layout 2 Background Image

Transfer to the gradient tab and upload the background gradient.

  • 35%: #FFC77F
  • 56%: #F2D57D
  • 90%: rgba(247,242,145,0.88)

Divi Fullwidth Header Gradient Background Layout 2 Gradient

Set the Gradient Kind and Gradient Place.

  • Gradient Kind: Round
  • Gradient Place: Best

Divi Fullwidth Header Gradient Background Layout 2 Gradient Type Position

Take away the frame textual content in the event you haven’t already.

Divi Fullwidth Header Gradient Background Layout 2 Remove Body

In the end, delete the unique hero phase above.

Divi Fullwidth Header Gradient Background Layout 2 Delete Layout

Customized CSS

Now all of our elementary settings are in position, however we want to move in with some customized CSS to finish the design and regulate one of the most header photographs. Transfer over to the Complicated tab and open the Customized CSS phase.

First, let’s customise the header symbol CSS. We will be able to use responsive choices to set other CSS for various tool sizes. Those settings will transfer the middle leaf symbol up and at the back of the header textual content and likewise adjusts the dimensions and margins. Upload the next customized CSS to the desktop settings.

become: translateY(-22em);
width: 25%;
z-index: -1;
place: relative;
margin-bottom: -8em;

Divi Fullwidth Header Gradient Background Layout 2 Header Image CSS

Subsequent, upload the next customized CSS to the pill settings of the header symbol phase.

become: translateY(-22em);
width: 40%;
z-index: -1;
place: relative;
margin-bottom: -8em;

Divi Fullwidth Header Gradient Background Layout 2 Custom CSS Tablet

In the end, upload the next customized CSS to the cell settings of the header symbol phase.

become: translateY(-24em);
width: 75%;
z-index: -1;
place: relative;
margin-bottom: -8em;

Divi Fullwidth Header Gradient Background Layout 2 Header Image Mobile CSS

We will be able to additionally upload customized CSS to the emblem phase. Those settings will likely be responsive as neatly.

First, upload the next customized CSS to the desktop settings of the emblem phase.

width: 40%;

Divi Fullwidth Header Gradient Background Layout 2 Logo CSS

Subsequent, upload the next customized CSS to the pill settings of the emblem phase.

width: 60%;

Divi Fullwidth Header Gradient Background Layout 2 Logo Tablet CSS

Then upload the next customized CSS to the cell settings of the emblem phase.

width: 60%;

Divi Fullwidth Header Gradient Background Layout 2 Logo Mobile CSS

In the end, upload the next customized CSS to the subtitle phase.

padding-bottom: 30px;

Divi Fullwidth Header Gradient Background Layout 2 Subtitle CSS

For the closing step on this design, we want to upload the rounded backside divider. Open the fullwidth phase settings and navigate to the design tab. Open the Dividers settings and upload a backside divider.

  • Dividers: Backside
  • Divider Taste: Curved
  • Divider Colour: #FFFFFF

Divi Fullwidth Header Gradient Background Layout 2 Divider Style

Ultimate Design

And this is the general design for this header phase.

Divi Fullwidth Header Gradient Background Layout 2 Full Design

Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

Gradient 3

Create a New Web page with a Premade Structure

For our ultimate gradient header design, we can use the SaaS Touchdown Web page structure from the SaaS Layout Pack.

Upload a brand new web page for your website online and provides it a identify, then make a selection the strategy to Use Divi Builder.

Divi Fullwidth Header Gradient Background Layout 3 Use Builder

We’re the use of a premade structure from the Divi library, so make a selection Browse Layouts.

Divi Fullwidth Header Gradient Background Layout 3 Browse Layouts

Seek for and make a selection the SaaS Touchdown Web page structure.

Divi Fullwidth Header Gradient Background Layout 3 Find Layout

Make a selection Use This Structure so as to add the structure for your web page.

Divi Fullwidth Header Gradient Background Layout 3 Use layout

Now we’re in a position to construct our design.

Recreate the Hero Phase The use of the Fullwidth Header Module

First, upload a fullwidth phase under the present header phase.

Divi Fullwidth Header Gradient Background Layout 3 Fullwidth Section

Make a selection and upload the Fullwidth Header Module to the phase.

Divi Fullwidth Header Gradient Background Layout 3 Add Module

Open the module settings and upload the next textual content:

  • Identify: Divi Industry Control Device
  • Button #1: All Options
  • Button #2: Signal Up As of late
  • Frame: Lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam,

Divi Fullwidth Header Gradient Background Layout 3 Content Settings

Below the photographs phase, upload the header symbol.

Divi Fullwidth Header Gradient Background Layout 3 Header Image

We will be able to come again to the content material tab so as to add our background later. For now, delete the unique header phase above.

Divi Fullwidth Header Gradient Background Layout 3 Delete Section

Open the fullwidth header settings and navigate to the design tab. First, middle the textual content and emblem alignment.

  • Textual content & Emblem Alignment: Middle

Divi Fullwidth Header Gradient Background Layout 3 Text Logo Alignment

Open the picture settings and upload a field shadow to the header symbol.

  • Symbol Field Shadow: Backside

Divi Fullwidth Header Gradient Background Layout 3 Box Shadow

Subsequent, open the identify textual content settings and customise the font.

  • Identify Font: Nunito Sans
  • Identify Font Weight: Daring
  • Identify Textual content Alignment: Middle

Divi Fullwidth Header Gradient Background Layout 3 Title Font

Trade the colour, measurement, and line top as neatly.

  • Identify Textual content Colour: #FFFFFF
  • Identify Textual content Dimension: 45px
  • Identify Line Top: 1.3em
See also  Understanding WooCommerce Roles and Capabilities

Divi Fullwidth Header Gradient Background Layout 3 Title Text Settings

We would like a smaller font measurement on cell units, so make a selection the responsive settings for the Identify Textual content Dimension choice and upload a special font measurement.

  • Identify Textual content Dimension – Cellular: 38px

Divi Fullwidth Header Gradient Background Layout 3 Mobile Text Size

Transfer directly to the Frame Textual content phase and customise the font as follows:

  • Frame Font: Nunito Sans
  • Frame Textual content Colour: #FFFFFF

Divi Fullwidth Header Gradient Background Layout 3 Body Font Color

Set the Frame Line Top.

  • Frame Line Top: 1.8em

Divi Fullwidth Header Gradient Background Layout 3 Line Height

Customise Button Types

Subsequent, let’s customise Button One. Permit customized kinds then trade the textual content measurement and colour.

  • Use Customized Types for Button One: Sure
  • Button One Textual content Dimension: 13px
  • Button One Textual content Colour: #FFFFFF

Divi Fullwidth Header Gradient Background Layout 3 Button Styles

This button could have a gradient background. Upload the gradient as follows:

  • 0%: #3d72e7
  • 100%: #53a0fe
  • Gradient Path: 243deg

Divi Fullwidth Header Gradient Background Layout 3 Button Gradient

Subsequent, trade the button border settings.

  • Button One Border Width: 0px
  • Button One Border Radius: 26px
  • Button One Letter Spacing: 1px

Divi Fullwidth Header Gradient Background Layout 3 Button Border

Trade the button font settings.

  • Button One Font: Nunito Sans
  • Button One Font Weight: Extremely Daring
  • Button One Font Taste: TT (Capitalized)
  • Display Button Icon: No

Divi Fullwidth Header Gradient Background Layout 3 Button Font

In the end, upload button padding.

  • Button One Padding-Best: 15px
  • Button One Padding-Backside: 15px
  • Button One Padding-Left: 30px
  • Button One Padding-Proper: 30px

Divi Fullwidth Header Gradient Background Layout 3 Button Padding

As soon as once more, the Button Two design is similar to the Button One design, simply with other colours. We’ll skip the repetitive design steps by means of copying the Button One kinds. To take action, merely right-click at the Button One environment and duplicate the Button One kinds.

Divi Fullwidth Header Gradient Background Layout 3 Copy Button

Then, right-click at the Button Two settings and paste the Button One kinds.

Divi Fullwidth Header Gradient Background Layout 3 Paste Button Styles

Now trade the Button Two Textual content Colour and background colour.

  • Button Two Textual content Colour: #4078ea
  • Background Colour: #FFFFFF

Divi Fullwidth Header Gradient Background Layout 3 Button Color Background

Transfer to the Spacing phase and upload some most sensible padding.

  • Padding-Best: 8%

Divi Fullwidth Header Gradient Background Layout 3 Padding Top

Subsequent, navigate to the Animation settings and set the animation taste as follows:

  • Animation Taste: Zoom
  • Animation Path: Up

Divi Fullwidth Header Gradient Background Layout 3 Animation

In the end, trade the animation depth and beginning opacity.

  • Animation Depth: 8%
  • Animation Beginning Opacity: 100%

Divi Fullwidth Header Gradient Background Layout 3 Animation Settings

Upload the Gradient to the Fullwidth Header Module

Now that the elemental design is entire, we will be able to upload our background gradient. Transfer over to the Content material tab and open the Background settings. Our background will include a mix of a gradient, a picture, and a masks. First, upload the background gradient.

  • 22%: #5b40d1
  • 50%: #4161d4
  • 73%: #53a0fd
  • 100%: #4bc4fc
  • Gradient Kind: Elliptical
  • Gradient Place: Middle

Divi Fullwidth Header Gradient Background Layout 3 Gradient Settings

Subsequent, upload the background symbol. We will be able to use the similar background symbol that was once used for the unique header design. You must see this on your media library with the identify geometric-bg-overlay-01.jpg. Use the overlay environment to mix the picture with the gradient background.

  • Background Symbol Mix: Overlay

Divi Fullwidth Header Gradient Background Layout 3 Background Image

Now upload the background masks.

  • Masks: Caret
  • Masks Colour: #FFFFFF
  • Masks Turn into: Horizontal
  • Masks Turn into: Rotate
  • Masks Turn into: Invert
  • Masks Facet Ratio: Panorama
  • Masks Dimension: Stretch to Fill

Divi Fullwidth Header Gradient Background Layout 3 Background Mask

Subsequent, use the responsive settings to customise the background masks for pill and cell units. Let’s get started with the pill design.

  • Masks Facet Ratio: Portrait
  • Masks Dimension: Customized Dimension
  • Masks Width: 100%
  • Masks Top: 60%
  • Masks Place: Backside Middle
  • Masks Vertical Offset: 140%

Divi Fullwidth Header Gradient Background Layout 3 Tablet Mask

In the end, regulate the cell design.

  • Masks Facet Ratio: Portrait
  • Masks Dimension: Customized Dimension
  • Masks Width: 100%
  • Masks Top: 60%
  • Masks Place: Backside Middle
  • Masks Vertical Offset: 110%

Divi Fullwidth Header Gradient Background Layout 3 Tablet Mobile

Ultimate Design

Here’s the general design for this phase.

Divi Fullwidth Header Gradient Background Layout 3 Final Design Full

Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

Ultimate End result

Now let’s check out all 3 of our gradient header modules.

Gradient 1

Divi Fullwidth Header Gradient Background Layout 1 Final Design

Divi Fullwidth Header Gradient Background Layout 1 Final Design Mobile

Gradient 2

Divi Fullwidth Header Gradient Background Layout 2 Final Design

Divi Fullwidth Header Gradient Background Layout 2 Final Design Mobile

Gradient 3

Divi Fullwidth Header Gradient Background Layout 3 Final Design

Divi Fullwidth Header Gradient Background Layout 3 Final Design Mobile

Ultimate Ideas

The Fullwidth Header Module is straightforward to customise and provides numerous flexibility in the case of the glance and structure of your header design. When blended with distinctive design components like gradients, you’ll create a actually stand-out design to deliver your website online guests’ consideration to the services and products that you just be offering. For five extra ingenious Fullwidth Header tutorials, take a look at this article. Do you use the Fullwidth Header Module in your Divi website online? Tell us within the feedback!

The submit 3 Eye-Catching Gradients You Can Apply to Your Fullwidth Header Module with Divi’s Gradient Builder 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 *