Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Here is an easy way to spruce up your Divi Image Gallery Slider modules. In this tutorial we give you 4 options to choose from.

 

Divi Image Gallery Slider Skins

 

With these snippets you can give your next Divi project a little something different. You can check out the live demo here.

 

Lets Get Started

1. Create a section and give it a unique CSS Class. In this case we are going to use example 1 so lets call this gallery1

001

 

2. Now lets add a gallery module and set the layout to SLIDER and SHOW PAGINATION

002

 

3. Lets also give this module a unique CSS Class. You will need to use: gallery-module

003

 

4. Now save and update page.

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)


/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/


/*----------------[ gallery 1 ]--------------------*/

/* gallery slider module */
	.gallery1 .gallery-module {border: 5px solid #25aae1;}
/* slider previous and next buttons */
	.gallery1 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #25aae1;
    		margin-left: -23px!important;}
	.gallery1 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #25aae1;
    		margin-right: -23px!important;}
	@media (max-width: 767px){
		.gallery1 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: 16px;}
		.gallery1 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: 16px;}}
/* slider controller color modification */
	.gallery1 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #25aae1;}


	

 

And the end result should be this one.

Divi Image Gallery Slider Skin

 

Here is the code for the other 3 examples. Be sure to update the Section CSS Class depending on which skin you want. These are the 4 CSS Classes I used on each skin.

  • gallery1
  • gallery2
  • gallery3
  • gallery4

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 2 ]-------------------*/

/* gallery slider module */
	.gallery2 .gallery-module {
    		border: 10px solid #46e173;
    		border-radius: 70px!important;}
/* slider previous and next buttons */
	.gallery2 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #46e173;
    		margin-left: -23px!important;
		border-radius: 0 20px 20px 0!important;}
	.gallery2 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #46e173;
    		margin-right: -23px!important;
    		border-radius: 20px 0 0 20px!important;}
	@media (max-width: 767px){
		.gallery2 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: 16px;}
		.gallery2 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: 16px;}}
/* slider controller color modification */
	.gallery2 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #46e173;}

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 3 ]-------------------*/

/* gallery slider module */
	.gallery3 .gallery-module {
    		border: 3px solid #ff00ff;
    		border-radius: 70px 0!important;}
/* slider previous and next buttons */
	.gallery3 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #ff00ff;
    		margin-left: -23px!important;
		border-radius: 0 0 20px 0 !important;}
	.gallery3 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #ff00ff;
    		margin-right: -23px!important;
    		border-radius: 0 0 0 20px!important;}
	@media (max-width: 767px){
		.gallery3 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: 16px;}
		.gallery3 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: 16px;}}
/* slider controller color modification */
	.gallery3 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #ff00ff;}

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 4 ]-------------------*/

/* gallery slider module */
	.gallery4 .gallery-module {
    		border: 1px solid #000;}

/* slider previous and next buttons */
	.gallery4 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: RGBA(0, 0, 0, 0.5);
    		margin-left: -23px!important;}
	.gallery4 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: RGBA(0, 0, 0, 0.5);
    		margin-right: -23px!important;}
	@media (max-width: 767px){
		.gallery4 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: 16px;}
		.gallery4 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: 16px;}}

/* slider controller color modification */
	.gallery4 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #000;}

/* image hover effects on desktop only */
	@media only screen and (min-width : 981px) {
	.gallery4 .et_pb_gallery_item {
    		position: relative;
    		overflow: hidden;
    		background: #000;}

	.gallery4 .et_pb_gallery_item img {
    		-webkit-transition: -webkit-transform 0.3s;
    		transition: transform 0.3s;
    		-webkit-transform: scale(.99);
    		transform: scale(.99);}

	.gallery4 .et_pb_gallery_item img:hover {
    		-webkit-transform: scale(1.11) rotate(2deg);
    		transform: scale(1.11) rotate(2deg);}
}

 

You can adjust border thickness, colors and border radius on each of these to customize them even further.

 

Added by request. How to keep the arrow tabs open whether you hover or not.

These are the 4 CSS Classes I used on each skin.

  • gallery5
  • gallery6
  • gallery7
  • gallery8

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/


/*----------------[ gallery 5 ]-------------------*/

/* gallery slider module */
	.gallery5 .gallery-module {border: 5px solid #ff6600;}
/* slider previous and next buttons */
	.gallery5 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #ff6600;
    		margin-left: 18px!important;
		opacity:1!important;}
	.gallery5 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #ff6600;
    		margin-right: 18px!important;
		opacity:1!important;}
	.gallery5 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: -18px!important;}
	.gallery5 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: -18px!important;}

/* slider controller color modification */
	.gallery5 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #ff6600;}

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 6 ]-------------------*/

/* gallery slider module */
	.gallery6 .gallery-module {
    		border: 10px solid #46e173;
    		border-radius: 70px!important;}
/* slider previous and next buttons */
	.gallery6 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #46e173;
    		margin-left: 18px!important;
		border-radius: 0 20px 20px 0!important;
		opacity:1!important;}
	.gallery6 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #46e173;
    		margin-right: 18px!important;
    		border-radius: 20px 0 0 20px!important;
		opacity:1!important;}
	.gallery6 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: -18px!important;}
	.gallery6 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: -18px!important;}
/* slider controller color modification */
	.gallery6 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #46e173;}

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 7 ]-------------------*/

/* gallery slider module */
	.gallery7 .gallery-module {
    		border: 3px solid #ff00ff;
    		border-radius: 70px 0!important;}
/* slider previous and next buttons */
	.gallery7 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: #ff00ff;
    		margin-left: 18px!important;
		border-radius: 0 0 20px 0 !important;
		opacity:1!important;}
	.gallery7 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: #ff00ff;
    		margin-right: 18px!important;
    		border-radius: 0 0 0 20px!important;
		opacity:1!important;}
	.gallery7 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: -18px!important;}
	.gallery7 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: -18px!important;}}
/* slider controller color modification */
	.gallery7 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #ff00ff;}

 

/*------------------------------------------------*/
/*---------[IMAGE GALLERY SLIDER SKINS]-----------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/*----------------[ gallery 8 ]-------------------*/

/* gallery slider module */
	.gallery8 .gallery-module {
    		border: 1px solid #000;}

/* slider previous and next buttons */
	.gallery8 a.et-pb-arrow-prev {
    		color: #fff!important;
    		background: RGBA(0, 0, 0, 0.5);
    		margin-left: 18px!important;
		opacity:1!important;}
	.gallery8 a.et-pb-arrow-next {
    		color: #fff!important;
    		background: RGBA(0, 0, 0, 0.5);
    		margin-right: 18px!important;
		opacity:1!important;}
	.gallery8 .et_pb_slider:hover .et-pb-arrow-prev, .et_mobile_device .et-pb-arrow-prev {left: -18px!important;;}
	.gallery8 .et_pb_slider:hover .et-pb-arrow-next, .et_mobile_device .et-pb-arrow-next {right: -18px!important;;}}

/* slider controller color modification */
	.gallery8 .et_pb_bg_layout_light .et-pb-controllers a {
    		background-color: #000;}

/* image hover effects on desktop only */
	@media only screen and (min-width : 981px) {
	.gallery8 .et_pb_gallery_item {
    		position: relative;
    		overflow: hidden;
    		background: #000;}

	.gallery8 .et_pb_gallery_item img {
    		-webkit-transition: -webkit-transform 0.3s;
    		transition: transform 0.3s;
    		-webkit-transform: scale(.99);
    		transform: scale(.99);}

	.gallery8 .et_pb_gallery_item img:hover {
    		-webkit-transform: scale(1.11) rotate(2deg);
    		transform: scale(1.11) rotate(2deg);}
}


And that’s it! Have fun!


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest