How to Add Frames Around Slides in Slider Revolution 1

How to Add Frames Around Slides in Slider Revolution

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

The use of picture frames (or borders) on slides is not uncommon in the design world. they can be used for creating visual balance and integrity to draw the wearer’s eye to important parts of an image, or even simply as a decorative element. Whether you are using frames for a practical purpose or simply to create the impression of a particular style, you should know how to add them to your slides. So, today we will show you how to add a frame manually To the Slider Revolution.

There are several ways to do this, so let’s dive right in and check them out.

Creating Frames with Line Settings

If you’re planning to create a solid monochrome frame, perhaps the easiest way to do so is to add a border to your slider’s row.

When you add a slider to your page, you usually need to place it within a line. As long as your slider is the only shortcode or piece of content in that line, you can easily create a frame for it from the line’s settings. This can look really impressive. Check out the matte slider in our Yvette theme.

If you are using Yvette or any of our premium WordPress themes, you can: easily add a frame around your slider via row settings. There, On the Design Options tab, you will see all available limit settings. The CSS box lets you set a separate width for each border, while the options on the side let you change the color and style of your border.

Creating a frame with row settings

How to Add Frame as .png File in Slider Revolution

If you want to create a more detailed frame, something that isn’t just a solid color block, then you need to add it as a separate layer in Slider Revolution. However, this is not as simple as it seems. In fact, there are a few pitfalls you want to avoid.

For example, if you download a frame with a single transparent .png file and then add it as a new layer to your slider, you risk two things happening. First, the slider will recognize the frame layer as a completely new image that covers all the other layers in your slider. This means that any buttons, links or other elements below the slider layer will not be clickable and will not work. Secondly, since your slider will display on any screen size, you run the risk of missing your frame or appearing crooked because it has different ratios than the device on which it’s displayed.

Fortunately, there is a solution for this. Instead of importing your frame as a single .png file with a transparent center, all you have to do is split it into 4 separate files.: one for the top border of the frame, one for the bottom border, one for the left and one for the right. Just Be sure to use proportions (the largest dimensions your slider will display) for your main scene when dividing your frame into four parts..

You can then import the four sides of the frame as separate layers and place them around your slide. If your slider has more than one slide, you can set these four layers as static layers so you don’t have to add them for each slide separately..

The most important thing you need to pay attention to is to set the correct alignment for both sides of the frame.. Make sure that the alignment of the top border of your frame is “top”, the right border is “right”, and so on. Make sure it is set to .

Adding a frame as a .png file

This way you ensure that both sides of the frame are always placed correctly and adhered to the correct side of the screen.

Setting the correct alignment for both sides of the frame

How to Add a Frame to Your Picture in Photoshop

There is one more way to add a frame to your slides in Slider Revolution, and that is to make it part of your actual image. You’ll need some basic photoshop skills to do this, but it’s really simple.

First, open the picture you want to add a frame to.

Adding Frames to Your Picture in Photoshop

Then open the transparent .png file containing your frame image. Go to Select > All (or press CTRL + A on your keyboard) and copy the frame.

frame picture

Now return to your original image and paste the frame into it. It will be added as a new layer.

paste the frame

If you need to adjust the size of the frame to fit the edges of your picture, Go to Edit > Transform > Scale and you can drag and drop it to the size you want.. When you’re done, just save your new image and import it into Slider Revolution.

As a result

Frames can be a great visual tool wherever they are used.. But knowing how to add them to an important part of your site, such as your slider, is especially important. With these three separate ways to add frames to Slider Revolution in your toolbox, you can create beautiful borders for your slides and make sure they always display perfectly on all devices and screen sizes.

Support our work ❤️

If you enjoyed this article, consider leaving a tip to help us keep publishing great content.

Secure payment on PayPal
Moyens I/O Staff is a team of expert writers passionate about technology, innovation, and digital trends. With strong expertise in AI, mobile apps, gaming, and digital culture, we produce accurate, verified, and valuable content. Our mission: to provide reliable and clear information to help you navigate the ever-evolving digital world. Discover what our readers say on Trustpilot.