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!
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.
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.
Michelle X
Hi Michelle, thanks this is very helpful! I have only one question: my slider still shows pointers (no arrows) which you mentioned might happen. I understand that I can adjust this in the CSS. My question is, where can I find this CSS when I am in the Divi Builder?
If you have imported the layout then the CSS will be in a code module on the page
Hi Michelle, I love this idea and want to implement it on my website, thanks for sharing a great recipe once again. I have one question I hope you can help me with. I display a header on my website and display a header right below to create a nice parallax effect just as is the case on https://www.divithemeexamples.com/divithemelayouts/1-divi-layout-full-page-parallax/. Therefore, I need both headers that are below each other in the Divi Builder to show the same random image. Can you tell me if this is possible as well? Is it as simple as naming the section (where the two… Read more »
No this isn’t possible with this set up, you would need to actually define an order with Javascript to achieve that
Hi Michelle, I love your recipes! I would like to have my logo image on top of the gallery images. How can I achieve this?
Thanks,
Robert
You can add it using the before pseudo element https://www.w3schools.com/css/css_pseudo_elements.asp or place it in a new module and give it a negative margin
Hi Michelle! I’m using the Divi Jumping Header Fix plugin on zenap.se and all is good. However, the jump return (and some top-padding) when trying this tutorial on zenap.se/zenap-2/. The padding issue is gone when I deactivate the Divi Jumping Header Fix plugin, but I still get a small jump.
Any suggestions on how to solve this?
/Pelle
Sorry Pelle you would need to contact the plugin developer to check the conflict.
No problem Michelle, I’ll consider contacting the developer. Thank you for your contribution to the Divi community!
Hello,
I’ve noticed on a GtMetrix Waterfall report that this is loading ALL of the images in the gallery even though we are showing just 1 on the website. Right now I’m loading over 10 random images with this feature, and its hurting page speed. Is there a way around this?
I believe that’s just how the gallery module works, if you were using it as a gallery it would do the same thing. Perhaps some JS could fix that but I wouldn’t know how personally
Thanks I’ll look into it!
Hello Michelle,
Is it possible to add an hamuberger menu in this random header image ?
You can add a menu and adjust the location with absolute positioning or negative margin but this is a gallery module and doesn’t contain a menu
Is it possible to have static text (with just random images) ? So, text stays the same, but images are random?
Yes Lisa, there are a few way to do it but probably the easiest is to place a text module below the gallery and use negative margin to bring it up over the image
The Demo isn’t working. I’ve tried in both Edge and FF and the image stays the same.
Its working fine but browser caching can have a effect on the image changing