Follow us

How to create a Random Header Image using the Divi Gallery Module - Tutorial for Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

The other day someone in the Divi Facebook community asked if there was functionality built into Divi to pick a single random image from a gallery and show it as a header.

The answer is yes! Whilst there isn’t a specific module for this, with a little lateral thinking and some minor CSS, the native Gallery Module achieves this effect very nicely and in Recipe #31 I am going to show you how. Plus, as the image title and caption are not shown when using the gallery in slider mode, we will also overlay a CTA module.

View the demo and refresh the page a few times to see the different images.

So let’s get cooking!

Ingredients

 

The latest version of the Divi Theme from Elegant Themes.

Cooking time

 

This should take you around 10 minutes.

Preparation

 

First we are going to set up our header section. On your page add a new standard section with a single column at the very top (this is a header after all wink ), then add the Gallery Module.

How to create a random header image using the divi gallery module

 

Next, open up the section settings and in the design tab, set all the padding to 0. Save & Exit.

How to create a random header image using the divi gallery module

 

Then open up the row settings and in the design tab set Make this row fullwidth to yes, Use custom gutter width to yes and slide the gutter width down to 1.

How to create a random header image using the divi gallery module

 

Finally, scroll down and set all the margin and padding to 0. Save & Exit.

How to create a random header image using the divi gallery module

 

OK, that’s out prep done.

Method

 

Now let’s set up our gallery.

Open up the Module Settings and in the Advanced tab give your gallery a CSS class of ds-random-header

How to create a random header image using the divi gallery module

 

Now we need to add our chosen header images to our gallery. Click on the Content tab and then Update Gallery

How to create a random header image using the divi gallery module

 

In your media library, upload your header images and add them to your gallery and then be sure to tick the Random Order checkbox on the right.

You will want to make sure your images are all the same dimensions. I have used 1920 x 600 px which I think displays nicely as a header.

How to create a random header image using the divi gallery module

 

Next we need to check a few settings. In the Content tab make sure Show Pagination is set to No.

How to create a random header image using the divi gallery module

 

In the Design Tab, make sure Layout is set to Slider.

How to create a random header image using the divi gallery module

 

And in the Advanced tab, scroll right to the bottom and make sure Automatic Animation is set to Off.

How to create a random header image using the divi gallery module

 

Then Save & Exit.

Next we are going to create our CTA to sit on top of our header. If you just want the image with nothing on top then you can skip this part.

In the same section as your gallery, add a new row and then in that row add a CTA module.

How to create a random header image using the divi gallery module

 

Open up the row settings and in the Advanced tab, give the row a CSS class of ds-random-header-cta then Save & Exit.

How to create a random header image using the divi gallery module

 

Next open up the module settings for your CTA and in the Content tab add your Title, Button Text and any other text you want to display in the Content area.

How to create a random header image using the divi gallery module

 

Scroll down and add in the URL for your button. It’s up to you whether you set a background colour, if your images vary a bit in terms of colour you will probably want a semi-transparent background so your text is easily readable.

How to create a random header image using the divi gallery module

 

Adjust the styling for your title, body font and button if you want to and then in the Sizing section, set a max width of 500px and Custom Padding of 20px in all fields. This just makes sure our CTA doesn’t cover too much of our header image. Save & Exit.

How to create a random header image using the divi gallery module

 

Now its time for our CSS which is very simple.

Here’s what we are doing:

Firstly, we hide the arrows and dot navigation for the gallery slider. Some of this should be hidden when we turn off pagination in the gallery module settings but it doesn’t always work so we can hide it here too just to be sure.

After that we set pointer-events to none, this stops our image opening in a lightbox.

.ds-random-header .et-pb-arrow-prev,
.ds-random-header .et-pb-arrow-next,
.ds-random-header .et-pb-controllers {
    display: none;
}

.ds-random-header .et_pb_gallery_items {
    pointer-events: none;
}

 

This next section is for our CTA so if you haven’t used one you can leave this declaration out.

Here we position the row absolutely so we can set the top, bottom, left and right positions to 0 so that our CTA row sits on top of our Gallery row. Then we set the display to flex so we can align our CTA content vertically. I have the position set to center but if you want the CTA content at the top or bottom of your header you can change that value to flex-start or flex-end.

.ds-random-header-cta {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 

Finally a media query. By default the gallery module will display your image at 100% width and scale the height accordingly so your entire image is shown. Personally I think this makes the image too small, and if you are using a CTA on top then on mobiles the image will not be tall enough to show your CTA content.

The width: auto property allows your images to display at a decent height and crop the sides, and right: 50% will centralise your image. It’s up to you whether you use this or not, try it with and without and see what you prefer.

@media only screen and (max-width: 1279px) {
    .ds-random-header .et_pb_gallery_item {
        width: auto;
        right: 50%
    }
}

 

Here is all of the CSS with full comments. Copy and paste this into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box and be sure to save.

Full CSS
/*----------------------------------------------*/
/*-------Random Header Image by Divi Soup-------*/
/*----------------------------------------------*/


/*Hide the arrows and dot navigation*/

.ds-random-header .et-pb-arrow-prev,
.ds-random-header .et-pb-arrow-next,
.ds-random-header .et-pb-controllers {
    display: none;
}


/*Disable the image lightbox*/

.ds-random-header .et_pb_gallery_items {
    pointer-events: none;
}


/*Position the CTA on top of the gallery module and centralise the content*/
/*Remove this if you are not using a CTA*/

.ds-random-header-cta {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/*Change the aspect ratio and centralise the images on smaller screens*/
/*Try your header with and without this media query and see which you prefer*/

@media only screen and (max-width: 1279px) {
    .ds-random-header .et_pb_gallery_item {
        width: auto;
        right: 50%
    }
}

/*----------------------------------------------*/
/*-----End Random Header Image by Divi Soup-----*/
/*----------------------------------------------*/

 

Feeling lazy? Click the button below to download the layout.

1. Unzip the downloaded file
2. Import the .json file into the page (not the library)
3. Copy the CSS between the style tags (not the tags themselves) in the fullwidth code module into your child theme stylesheet then delete that whole section.

And that’s it, view your page and refresh it a few times to see a different image each time.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!