{"id":8952,"date":"2020-07-01T15:00:10","date_gmt":"2020-07-01T13:00:10","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8952"},"modified":"2022-02-23T10:22:28","modified_gmt":"2022-02-23T09:22:28","slug":"slider-revolution-slides-frame","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-slides-frame\/","title":{"rendered":"How to Add a Frame Around Slides in Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The usage of picture frames (or borders) on slides is not uncommon in the design world. They can be used to create visual balance and unity, to draw the user’s eye to key parts of an image, or even simply as a decorative element<\/strong>. Whether you are using frames for a practical reason or just to create a certain stylistic impression, you should know how to add them to your slides. So, today, we\u2019re going to show you how to manually add a frame <\/strong>to Slider Revolution<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are a few ways this can be done, so let\u2019s dive right in and check them out.[\/vc_column_text][vc_empty_space height=”68px”][vc_column_text]<\/p>\n

Creating a Frame via Row Settings<\/h2>\n

[\/vc_column_text][vc_column_text]If you plan on creating a solid, monochromatic frame, perhaps the easiest way to do so is by adding a border to your slider\u2019s row. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you add a slider to your page, you usually have to place it inside a row. As long as your slider is the only shortcode or piece of content in that row, you can easily create a frame for it through the row\u2019s settings. This can look really impressive. Just check out the passepartout slider<\/a> on our Yvette theme<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you are using Yvette, or any of our premium WordPress themes<\/a>, you can easily add a frame around your slider through the row settings<\/strong>. There, in the Design Options tab<\/strong>, you will see all the available border settings. The CSS box lets you set a width for each border separately, while the options to the side allow you to modify the color and style of your border.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Creating <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add a Frame as a .png File in Slider Revolution<\/h2>\n

[\/vc_column_text][vc_column_text]If you would like to create a more elaborate frame, something that isn\u2019t just a solid block of color, then you will have to add it as a separate layer in Slider Revolution. However, this isn\u2019t quite as simple as it may seem. In fact, there are a few pitfalls you want to avoid. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, if you download a frame that\u2019s a single transparent .png file and then just add it as a new layer into your slider, you risk two things happening. Firstly, the slider will recognize the frame layer as an entire new image that\u2019s covering all the other layers in your slider. This means that any buttons, links, or other elements that are below the slider layer, won\u2019t be clickable and won\u2019t work. Secondly, since your slider will be viewed across all sorts of screen sizes, you risk your frame not being visible, or appearing skewed, due to it having different proportions from the device it\u2019s being viewed on. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Luckily, there\u2019s a solution for this. Instead of importing your frame as a single .png file with a transparent center, all you have to do is cut it up into 4 separate files<\/strong>: one for the frame\u2019s top border, one for the bottom border, one for the left and one for the right. Just make sure that you use the proportions for your main stage (the largest dimensions your slider will be displayed at) when splitting your frame into four parts<\/strong>. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Then, you can import the four sides of the frame as separate layers and place them around your slide. If you have more than one slide in your slider, you can set these four layers to be static layers<\/a>, so you don\u2019t have to add them for each slide separately<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The most important thing you need to take care of is setting the correct alignment for each side of the frame<\/strong>. Make sure the top border of your frame has its alignment set to \u201ctop\u201d, the right border to \u201cright\u201d, etc. [\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This way, you\u2019ll make sure that each side of the frame is always placed correctly and stuck to the correct side of the screen.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Setting <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add a Frame to Your Image in Photoshop<\/h2>\n

[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There\u2019s one more way you can add a frame to your slides in Slider Revolution, and that\u2019s by making it a part of your actual image. To do this, you\u2019ll need some basic photoshop skills, but it\u2019s actually really simple.[\/vc_column_text][vc_column_text]First, open the image you\u2019d like to add a frame to.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then open the transparent .png file that contains your frame image. Go to Select > All (or press CTRL + A on your keyboard), and copy the frame<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Frame <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now go back to your original image and paste the frame inside it<\/strong>. It will be added as a new layer.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Paste <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you need to adjust the frame\u2019s size to make it fit the edges of your image, just go to Edit > Transform > Scale and you\u2019ll be able to drag and drop it to the required size<\/strong>. Once you\u2019re done, just save your new image and import it into Slider Revolution<\/a><\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]Frames can be a great visual tool, wherever they\u2019re used<\/strong>. But it\u2019s especially important to know how to add them to such a prominent part of your site as your slider. With these three separate methods of adding frames to Slider Revolution in your toolbox, you can create beautiful borders for your slides and be certain that they\u2019ll always display perfectly across all devices and screen sizes. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

There are a few ways you can add a beautiful frame around your Slider Revolution slides. Today, we’ll show you three of the best and easiest methods.<\/p>\n","protected":false},"author":6,"featured_media":8959,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8952"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8959"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}