R31: How to create a Random Header Image using the Divi Gallery Module

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 ), then add the Gallery Module.

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

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.

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

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

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

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.

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

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

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

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.

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

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.

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.

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.

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.

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.

Michelle X