Friday Freebie – The Turner Slider

by | Jun 15, 2018 | Layouts | 0 comments

A Free to Download and use Divi Layout Section, the first offering from the new Friday Freebie series of posts.

Aptly named after the fellow that unwittingly set me the challenge in a popular Divi Facebook Group, the Turner Slider is a slider with a static semi opaque overlay covering 40% of the slider where you can place a Blurb or Text module (or something else) to give you a simple slider where just the background slide.

Check out the demo to take a closer look then come back and download it for free.

Icon
Turner Slider Layout

Turner Slider Free Layout 1.10 MB 7 downloads

...

Installation

Download the .zip file, unpack to a folder on your computer. There’s only one file, the ‘turner-slider.json’ file.
Import the file to a Divi Layout and follow the instructions below.

Getting Started

When you add the layout file to a Divi page or post you’ll see a Standard Section with Two rows. Out of the box, the Section has a fixed height of 600px and zero top and bottom margins and padding.

The first row is set to Full width with a custom Gutter Width of 1. The row contains a standard Slider module. Just open up the settings and add your slides and background images.

I’ve used images that are slightly taller at 634px. The width of my images are 1903px wide so viewing on a desktop with a 1920px screen will stretch the images a little so that they will be tall enough to use the slider’s parallax effect. I’ve used the parallax effect on a couple of the demo slides so you can see that it works.

Try to make sure your images are all the same size to avoid any issues.

Once you’ve added your images to the slides, you don’t need to change any other settings in the module.

The Second Row

The second Row is also set to Full Width width with a custom Gutter width of 1. This will come into play when the viewport width is below 981px and will make the row show below the the slider Row.

The background color is set in this row too (on the row, not the column).  Open the Row settings to change the background color to the color you want to use.  It’s a good idea to copy the color at this point then you can close the Row settings. You don’t need to change anything else here but you may want to add some left and right padding to the column, about 60px is required to keep the content away from the left Arrow. Alternatively, you can add padding to your modules if you prefer.

 

Adding Modules

I’ve used a Call to Action Module in the second row, but you can use any module or modules you like here. We’re using Flex to center the modules vertically. You may need to add some padding to the left and right of your modules if you didn’t do it in the column.

The Code Module

Finally, the code module is where most of the magic happens. You will need to edit the CSS code in this module to set the colors for the Arrows and the Arrow background as well as the Dot navigation and the desired height of your slider.

I’ve been using custom CSS Properties (aka CSS Vars) for some time so thought I may as well use them here. They are supported in most browsers, Edge included although not IE11 the last time I checked (no surprise there!). With custom CSS Properties we can set our values once and re-use them throughout our stylesheet. This is a really simple example so if you haven’t used them before you’ll soon get the idea.

All of the settings you need to change can be found at the very top of the Code Module content box in the :root selector.
The :root selector allows you to target the highest level element in the DOM. This is where I have set the Custom CSS Properties.
They look like this.

 

:root {
  --tr-height: 600px;
  --tr-dark: rgba(19,115,177,1);
  --tr-mid: rgba(19,115,177,0.75);
  --tr-light: rgba(255,255,255,0.8);
}

 

If you’re not really interested in how they work, just go ahead and change the colors and height value as you want then save the module and your slider is done. The default height value –tr-height: is set as 600px, so just change that to the height you want your slider to be. You don’t have to use px, you can use vh, vw etc. The colors are set with the following properties, just add the colors you want to each property replacing the existing rgba colors with whatever you want.

–tr-dark: is used for the Arrows color, and the Dot Navigation Hover State.
–tr-mid: is used for the Dot Navigation’s Active State.
–tr-light: is used for the Arrow Backgrounds and the Dot Navigation default state.

Custom CSS Properties

For anyone that wants to know more about them, here’s a quick example of how we can use our Custom CSS Properties once they are set. I won’t go into great detail because I think it’s pretty self explanatory. If you’re just not getting it, get in touch and I’ll try my best to explain it in greater detail.

 

.et_pb_section {
  background-color: var(--tr-dark);
  color: var(--tr-light);
  height: var(--tr-height);
}

 

Just one of the great things about custom CSS properties is that they are easy to learn, even if you only have a basic understanding of CSS. Here’s just one more example using the exact same CSS as above but this time using a fallback value which will be used if the property/variable hasn’t been set.

 

.et_pb_section {
  background-color: var(--tr-dark, #000);
  color: var(--tr-light, #fff);
  height: var(--tr-height, 50vh);
}

 

You can find plenty of tutorials and documentation on custom CSS Properties online and I urge you to look into them. If you do any custom CSS coding they are a great time-saver. I use them in my Customizer Extender Plugin for globalising the theme colors in my Divi sites. Regular visitors to hædworm.com may have noticed the frequent color changes. Whenever I fancy a change (which is quite often), the Customizer Extender enables me to adjust the entire color scheme site-wide, in just a few simple clicks.

And Finally…

I hope you enjoy the first Friday Freebie giveaway! Look out for more of the same in the coming weeks/months and sign up to the newsletter to be the first to hear about them. As always, if you find anything on my site useful, annoying or offensive then please leave a comment.

Get in Touch

Get in touch if you need help or information about any of my plugins, tutorials, web design or hosting solutions.

I am always looking for more ideas for articles and plugins so if you have an idea you want to share, feel free to get in touch.

Please remember to white-list my email address
plugins@xn--hdworm-pua.com if you’re expecting a reply.

8 + 2 =