Customize a Slider with Free AI Generated Images

In this tutorial we’ll learn how to quickly and easily customize the FutureSight template for Slider Revolution:

…with a new color scheme and free AI generated images:

If you prefer video, here’s the video version of this tutorial:

Step 1: Choose Color Scheme

The first step is to choose your color scheme. A good idea is to stick with two colors for simplicity. In this example we’ll be using purple and green.

Step 2: Generate Images

Next, go to Leonardo.ai and sign in. Then in the top right corner click the Create New Image button:

Once in the Image Generation area, expand the Preset selector at the top left and choose Graphic Design:

Then set Preset Style to Graphic Design Vector:

Describe the type of image you want in the prompt field, including your color scheme. Here we’re keeping it simple and entering “purple and green character in scene”:

You’ll need 5 images for the FutureSight template, so generate a few rounds of images until you get 5 you like, then download those images.

Step 3: Create Module from Template

In Slider Revolution, create a new module <sup>[?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.</sup> from the FutureSight template:

Once created, open your new module in the Module Editor <sup>[?] The "Module Editor" is the tool used to create & modify modules.

Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options.</sup>.

Learn more:

• Create a Module From a Template

Step 4: Replace First Slide’s Images

On the first slide <sup>[?] A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.

Slides are added to modules and edited via the module editor.

Within the module editor, each slide has its own animation timeline, background and collection of layers.

A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel.</sup>, select an image:

In the Layer Options sidebar, under the Content sub-section, scroll down to the Background panel. There, click the Media button to open the WordPress Media Library:

Upload your generated images, then select one to replace the selected layer:

Then select the blurred image layer directly behind it:

And replace that with the same image:

Repeat this process for the other three images:

Learn more:

• Editing Images in Template Modules

Step 5: Customize First Slide’s Button Shadow Gradient

Select the Button Shadow layer:

In the Layer Options sidebar, under the Style sub-section, scroll down to the Background panel. There, click the BG Color swatch to open its color selection editor:

Replace the colors used in the gradient with colors that match your new images:

In this example I’ve used these colors and gradient stop positions:

1. #58b79e 0%
2. #79fc91 42%
3. #e87aff 64%
4. #9056ce 100%

Save this gradient as a custom preset so we can easily use it on the other slides:

Learn more:

• The Tools of the Color Selection Dialogue
• Color Presets

Step 6: Customize First Slide’s Particle Wave Gradient

Select the Particle Wave layer, (the bottom most layer on the timeline):

In the Layer Options sidebar, go to the Particle Wave sub-section, then switch to the Particles category:

Then scroll down to the Color Settings panel and open the Main color editor:

Replace the gradient colors with new colors matching your images, and also adjust the stop positions if you choose:

Here I’ve used these colors and stops:

1. #ffffff 30%
2. #79fc91 49%
3. #79fc91 62%
4. #e87aff 76%

Save & preview to check everything looks how you want:

When you’re happy, switch to the second slide.

Learn more:

• Customizing Particle Waves

Step 7: Customize Second Slide’s Images and Gradients

Replace the single image of this slide, and replace the blurred image behind it with the same image:

Select the Button Shadow layer, then apply the gradient preset we saved earlier:

Select the Particle Wave layer and update its colors. You can apply the same colors used in the second slide’s particle wave effect, but leave the layer’s gradient angle at its original 360 degrees:

Save & preview to check you’re happy with the custom wave colors:

Then switch to the third slide.

Step 8: Customize Third Slide’s Images and Gradients

Once again, select the Button Shadow layer and apply the saved gradient preset:

Then select the Particle Wave layer and customize the colors:

I’ve used these colors & stops:

1. #ffffff 20%
2. #b0f4ab 44%
3. #79fc91 62%
4. #e87aff 76%

Save & preview to confirm you like the particle wave colors:

Customization Complete!

And we’re done!

That’s all it takes to customize the FutureSight template with your own color scheme and images, using Slider Revolution.