How to add a Before - After Slider in WordPress | Before After Image Slider Plugin Tutorial
HTML-код
- Опубликовано: 25 авг 2024
- Looking for a WordPress Before and After Slider & Gallery Plugin? Want to show a comparison of two images? In this video, we have shown a complete step-by-step tutorial on how to add a Before - After Slider in WordPress In this tutorial, we will be using the plugin "Ultimate Before After Image Slider & Gallery - BEAF"
👉 Download Link: wordpress.org/...
👉 Demo Link: live.themefic....
👉 Pro Version link: themefic.com/p...
With BEAF, you can easily create a beautiful Before After Image comparison Slider or Gallery. BEAF lets you add unlimited numbers of Before After Slider & Gallery in WordPress. You heard it right, unlimited for FREE. BEAF also comes up with premium high-quality features that will help you showcase your portfolio in a better way than others.
With this Before and After WordPress plugin, You can showcase your before and after work by comparing two before and after images.
===============================================
👉 Features:
Here are the most important features of BEAF. If you need any further information, please feel free to contact us. Below are the best offerings of BEAF:
- Multiple layouts: Display images in Horizontal or Vertical layout.
- Option Panel: BEAF has a built-in easy-to-use options panel. You can add or remove any options from this panel.
- Before - After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Before After Gallery in WordPress with BEAF
- Label Change: Change the Label of Before-After to something you want.
- Label Color Change: You can easily change the color and background of the Label.
- Disable Overlay: You can disable the overlay from the Options Panel.
- Unlimited Slider: You can create an unlimited number of slider
- Mouse Hover: You can move the slider on Mouse hover.
- Titles, Description & Read More Button: You can add Title, Description & Read More buttons on all the above Preview Styles. For Preview Purpose, only two examples are shown below. Note that, from the backend, you can show/hide any/all of the 3 fields (title, description & read more). You can also edit styles (color, font size, alignment) of all 3 fields as shown below.
- Shortcode Generator: After you publish, a shortcode will generate so that you can publish the slider anywhere on your website.
- Support popular page builders: BEAF is fully compatible with popular page builders like Elementor, WP Bakery, DIVI, Beaver, etc. See the list below.
- Alt tag: Add alt tag on both Before-After Images.
================
👉 Pro Features
There is also a pro version of this plugin. You will get more features and advantages on the pro version. Here are a few features of the Pro Version:
- All Free Features
- Additional layout: The Pro version includes 6 Additional Awesome looking Preview Styles.
- Filterable Before - After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Filterable Before After Gallery in WordPress with BEAF Pro. You can add as many 2-3-4 columns galleries as you want. The galleries can be a combination of all the above-mentioned Preview Styles & Single Image Styles. The color and padding of the filters can be edited from the options panel.
- Single Image Slider: You can make a slider using a single image.
- Single Image Slider Effects: The Single image has filter effects like Grayscale, Blur, Saturate, Sepia, etc. The filter can be added on Before or Afterimage.
- Titles, Description & Read More Button on Single Image BEAF, Gallery and Filterable Gallery
- Custom Width - Height - Alignment: Setup Custom Width - Height - Alignment for each slider.
- Auto Slider: The slider will slide automatically.
- Change Read More text: By default, the button is “Read More”. You can change it to whatever text you want.
- Disable slider handle: You can easily disable the slider handle.
- Image Watermarks: Adding Watermark on both Before and After images.
- 3 Image Slider: Create Before-After Slider with 3 Images.
Dear Users,
Thank you for checking our video. Previously, a lot of you requested that our Plugin's installation video is very fast. So, in this video, we tried to make it bit slower. If you feel it's slow, you can just increase "Playback Speed" from the playback bar. And, if you are looking for a quick installation video, check our previous video ruclips.net/video/MLkJ1jL-TZM/видео.html
Plus, If any of you facing any problem with the plugin or having difficulty in understanding the plugin or facing issues while setup, please let us know here themefic.com/contact/ (before commenting here) We try to respond all messages within 24-48 hours.
thank you sir this video is very us full for me and very thank you foe everything 👌👌🔥🔥
Thanks in a million. Awesome.
Thank you for the tutorial!
Is it possible to have the title above instead of below the slider?
Muchas Gracias! por el aporte!
what if i want to include this into an already created page (new to word press)
Can we see slider in the Gutenberg editor, not just the shortcode? This is in plugin description: "Live Preview: See the preview of the slider/gallery while editing" but even on your video it is not working and preview is not live, only after refreshing the page.
do you know one that supports video?
BEAF cannot showing to popup maker.
Can I make this wider...like 570 px wide? Or do I have to buy the pro?
If you upload an image with a width of 570px, then no need to set width. but if you need custom width option, then yes, its a part of the pro version.
What about the tutorial showing how does the 1 image before after work?
Hi, That video is still in progress. Hopefully, sometime next week, we will release it (inshallah). For now, you can see a demo here: live.themefic.com/beaf/pro/before-after-with-single-image/
There is a separate video for that.
How do you use it with Elementor?
Once u publish the slider, u can go to elementor editor and search "BEAF" within Elementor addon section. U should find our addon
It's open source or premium
Our free version is always free: wordpress.org/plugins/beaf-before-and-after-gallery/