Prior to and After sliders are an excellent method to let visitors compare 2 images. As the name recommends, they can be images prior to and after something is altered, such as weight reduction, an image that’s retouched, a space that’s embellished, a vehicle that’s painted, and so on. Naturally, they work for a lot more than previously and after images. They can be utilized to compare graphics, items, getaway locations, and lots more.
In this post, we’ll have a look at Divi Sensei Prior To and After Slider, a previously and after slider module for the Divi Home builder, see what it can do, and assist you choose if you require this third-party plugin in your Divi tool kit.
Divi Sensei Prior To and After Slider Module
Upload and set up the Divi Sensei
Prior to and After plugin as regular. 3 are no settings to go through. You’ll see a brand-new module included to the Divi Contractor called Sensei Prior to and After Slider as soon as you trigger the plugin and submit.< img loading= "lazy" src="https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-1.png"alt ="Divi Sensei Prior To and After Slider Module "width=" 960 "height= "468"class= "with-border aligncenter size-full wp-image-139075" srcset="https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-1.png 960w,
https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-13.png 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-14.png 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-15.png 610w “sizes =”(max-width: 960px) 100vw, 960px”> The module shows an in the past image on the left side and an after image on the right
. It shows a slider bar in the center that users can move and get from one side to the other. Hovering over the images exposes prior to and after labels and includes an overlay. You have style control over each of these components. Let’s have a look at the functions and choices for the slider. For these examples, I’m utilizing images from Unsplash.com. Material Tab The Material tab lets you include a previously image, after image, and labels. In this example, I have actually included 2 various variations of the very same image to produce the previously and after image. This works to reveal the outcomes of an image that’s been retouched. The alternatives likewise consist of the basic link, background, and admin label settings.
It likewise supplies fields where you can alter the text of the previously and after labels. I’m hovering over the images to expose the labels. They just show on hover by default, however you can alter this.
The Style tab consists of
settings for the slider, labels, and overlay. It likewise consists of the basic settings for sizing, spacing, border, box shadow, filters, change, and animation. Slider The Slider settings let you pick the slider instructions in between vertical and horizontal, set the start balanced out to figure out where on the images the slider begins, and alter the colors of the slider, deal with, deal with background, and manage icon. I have actually changed each of these settings in the example above. Labels< img loading= "lazy"src= "https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/Labels.png"alt="Labels" width= "960"height=" 551 "class= "with-border aligncenter size-full wp-image-139079"srcset="https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/Labels.png 960w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/Labels-300x172.png 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/Labels-768x441.png 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/Labels-610x350.png 610w" sizes=" (max-width: 960px)100vw, 960px" > For the labels, you can have them to constantly show or just show on hover, and change the typefaces and backgrounds. The background colors consist of strong colors and opacity modifications. You can change the backgrounds separately, however it does not let you change the text colors separately. You can likewise select the typefaces,
alter their sizes
, styling, positioning, line height, include a shadow, and so on. The line-height sets the size of the background. In the example above, I have actually defined the background and font style colors, altered the size of
the typefaces, and the size of the line-height. I have actually likewise set them to constantly show so they show up without the user needing to hover over the images to see them. Overlay The overlay is made it possible for by default. You can disable it, change the color, and change the opacity. The default color is black with 50 % opacity. I have actually picked blue in this example and left the opacity at 50 %. Enabling the image to reveal through while you’re hovering appears to work best. Whether you utilize a light or dark color and the quantity of opacity you set will be figured out by the colors in the image and how you wish to utilize the overlay. For this example, I have actually utilized a white and black color pattern. The overlay and label text is white and slider aspects are black. I have actually reduced the opacity of the label’s backgrounds to darken them. I have actually left them at their default sizes. Divi Sensei Prior To and After Slider Examples Let’s take a look at a couple of examples of methods the slider can be utilized and how they look within Divi designs. I’m utilizing images from Unsplash and those that are readily available in the totally free Divi designs that are constructed into Divi.
I’ll recognize the Divi designs I’m utilizing as I go. Graphics Contrast For this one, I utilized style components from the Divi Computer game design pack. I have actually disabled the overlay, altered the slider aspects to green, and made the labels to constantly show. The background for the labels is strong blue. I have actually increased the font style size, altered the color, utilized the Rubik font style household, made the font-weight medium, and made them all-caps. If you have actually owned or played these video gaming systems and you understand why this fabricated graphics contrast can’t exist, congratulations. This is how it looks within the design. It’s exceptional for doing contrasts like this mockup of 2 various video game makers’ graphics. Provider Prior To and After Portfolio This example simulates the concept of a space prior to and after remodelling is done. When the 2 images are various sizes, it will utilize the size for the bigger image and the smaller sized image will reveal a space. It will put their widths or heights similarly and fill out the rest as void. In this example, the image on the right is much shorter than the image on the. While having images the very same size works much better, it still works well with images that are close to the exact same size. I have actually included colors and font styles from the House Enhancement design pack. Here’s how it looks within a part of the design. Here’s how it looks with the overlay. I have actually moved the slider to one side to reveal more of the in the past image. For recommendation, here’s the image with the manage transferred to reveal more of
the after image. Item Contrast For this example, I’m changing the 3 tea images in the Tea Store design with 3 DS B&A sliders. I’m
utilizing colors from the design for the buttons and slider controls. The middle slider is set to vertical simply to be various. The overlay utilizes a color from the design with reduced opacity. Here’s how they look within the design. This is outstanding for comparing the visual information of several items, several places, numerous colors, for items that have numerous choices to reveal with and without the alternatives, and so on. Comparing Areas In this example, I’m utilizing the slider to compare 2 areas. They do not need to be comparable, simply something to compare for one factor or another. I have actually included colors from the design for the slider and labels, along with the font styles for the labels. I have actually likewise included a box shadow to assist it stick out from the
remainder of the images.< img loading ="lazy"src ="https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-8.png"alt ="Comparing Areas"width=" 960"height= "1350"class="with-border aligncenter size-full wp-image-139070" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-8.png 960w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-35.png 213w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-36.png 728w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-37.png 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/divi-plugin-emphasize-divi-sensei-prior-to-after-slider-38.png 610w "sizes="(max-width: 960px )100vw, 960px"> Here’s how it looks within the Siteseeing design pack utilizing colors from the design. This is a fine example of how the 2 images do not need to be an in the past and after of the very same thing or perhaps comparable things. This is a great way to reveal wedding event places, destination, and so on, to assist purchasers pick in between them(or make the choice harder, however I do not suggest that as an objective).
You can buy Divi Sensei Prior to and After Slider in the Divi Market. The expense is$5 for endless site use and 1 year of assistance and updates. This cost consists of a 30-day money-back warranty. Ending Ideas The Divi Sensei Prior To and After Slider is an easy module. The
slider does not have width controls and the labels do not consist of borders, box shadows, gradients, and so on, however the settings it does have actually made it simple to fit the styling of every design I included it to. For the cost, and for what it can do, the level of settings makes good sense and I had the ability to get the styles I desired with ease. All of the controls were user-friendly and I never ever considered requiring directions.
You can even utilize various alt tags for the images to assist enhance SEO. Divi Sensei Prior To and After Slider is worth a thinking about if you’re interested in an in the past and after slider to utilize with your Divi sites. We wish to speak with you. Have you attempted Divi Sensei Prior to and After Slider? Let us understand what you believe
about it in the remarks listed below. Included Image through Elvetica/ shutterstock.com