Before After Slider Plugin Description

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Responsive Before & After Image Slider – Transform Your Visual Comparisons</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}

/* Hero Section */
.hero {
background: linear-gradient(90deg, #2D1810 0%, #3D2914 30%, #D4A017 70%, #F4C430 100%);
color: white;
padding: 100px 20px 80px;
text-align: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 50px 50px;
animation: float 20s linear infinite;
}

@keyframes float {
0% { transform: translate(0, 0); }
100% { transform: translate(-50px, -50px); }
}

.hero-content {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}

.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero p {
font-size: clamp(1.1rem, 2vw, 1.4rem);
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.95;
}

.hero-image {
max-width: 900px;
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
transition: transform 0.3s ease;
margin: 0 auto;
display: block;
}

.hero-image:hover {
transform: translateY(-10px);
}

/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Section Styles */
.section {
padding: 80px 0;
}

.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 20px;
text-align: center;
background: linear-gradient(135deg, #3D2914, #D4A017);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: #666;
max-width: 600px;
margin: 0 auto 60px;
}

/* Feature Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}

.feature-card {
background: #f8f9fa;
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.feature-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3D2914, #D4A017);
transform: scaleX(0);
transition: transform 0.3s ease;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.feature-card:hover::before {
transform: scaleX(1);
}

.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3D2914, #D4A017);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 24px;
color: white;
}

.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}

.feature-card p {
color: #666;
line-height: 1.8;
}

/* Two Column Layout */
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin: 60px 0;
}

.two-column[style*=”flex-direction: row-reverse”] {
display: flex;
flex-direction: row-reverse;
}

@media (max-width: 768px) {
.two-column {
grid-template-columns: 1fr;
gap: 40px;
}

.two-column[style*=”flex-direction: row-reverse”] {
flex-direction: column;
}
}

.content-column h3 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}

.content-column ul {
list-style: none;
}

.content-column li {
padding: 10px 0;
padding-left: 30px;
position: relative;
color: #555;
}

.content-column li::before {
content: ‘✓’;
position: absolute;
left: 0;
color: #D4A017;
font-weight: bold;
font-size: 1.2rem;
}

.image-column img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Use Cases */
.use-cases {
background: #f8f9fa;
}

.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.use-case-item {
background: white;
padding: 20px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}

.use-case-item:hover {
border-color: #D4A017;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(212, 160, 23, 0.2);
}

/* Code Block */
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 30px;
border-radius: 12px;
overflow-x: auto;
margin: 30px 0;
position: relative;
}

.code-block::before {
content: ‘SHORTCODE’;
position: absolute;
top: 10px;
right: 20px;
font-size: 0.8rem;
color: #666;
font-weight: bold;
}

.code-block code {
font-family: ‘Courier New’, Courier, monospace;
font-size: 1rem;
line-height: 1.6;
}

/* CTA Section */
.cta {
background: linear-gradient(135deg, #3D2914 0%, #D4A017 100%);
color: white;
text-align: center;
padding: 80px 20px;
border-radius: 24px;
margin: 80px 0;
}

.cta h2 {
font-size: 3rem;
margin-bottom: 20px;
}

.cta p {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.95;
}

.cta-button {
display: inline-block;
background: white;
color: #3D2914;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Compatibility Grid */
.compat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}

.compat-item {
background: white;
padding: 20px;
border-radius: 12px;
border: 2px solid #f0f0f0;
text-align: center;
}

.compat-item strong {
display: block;
color: #D4A017;
margin-bottom: 5px;
}

/* Responsive */
@media (max-width: 768px) {
.hero {
padding: 60px 20px;
}

.section {
padding: 60px 0;
}

.features-grid {
grid-template-columns: 1fr;
}
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-on-scroll {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
</style>
</head>
<body>
<!– Hero Section –>
<section class=”hero”>
<div class=”hero-content”>
<h1 class=”animate-on-scroll”>Responsive Before & After Image Slider</h1>
<p class=”animate-on-scroll” style=”animation-delay: 0.1s;”>
Transform your visual comparisons with a lightweight, responsive, and accessible image comparison slider for WordPress.
Works seamlessly as an Elementor widget or anywhere with a shortcode.
</p>
<img src=”https://www.falnyomtato.com/wp-content/uploads/2025/09/01_before-after-main-2.png”
alt=”Responsive Before After Image Slider – Main preview”
class=”hero-image animate-on-scroll”
style=”animation-delay: 0.2s;”>
</div>
</section>

<!– Elementor Integration Story –>
<section class=”section” style=”background: #f8f9fa;”>
<div class=”container”>
<h2 class=”section-title”>Seamless Elementor Integration</h2>
<p class=”section-subtitle”>From widget selection to stunning results in just minutes</p>

<!– Step 1 –>
<div class=”two-column” style=”margin-top: 60px;”>
<div class=”content-column”>
<div style=”display: flex; align-items: center; margin-bottom: 20px;”>
<div style=”width: 40px; height: 40px; background: linear-gradient(135deg, #3D2914, #D4A017); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 15px;”>1</div>
<h3 style=”margin: 0; font-size: 1.8rem;”>Find & Add the Widget</h3>
</div>
<p style=”color: #666; margin-bottom: 25px; font-size: 1.1rem;”>
Locate the Before/After Slider widget in your Elementor panel. It’s right there with all your favorite widgets, ready to transform your comparisons.
</p>
<ul style=”margin-bottom: 0;”>
<li>Search-friendly widget name</li>
<li>Organized in the Media category</li>
<li>Distinctive icon for easy recognition</li>
<li>Works with Elementor Free & Pro</li>
</ul>
</div>
<div class=”image-column”>
<img src=”https://www.falnyomtato.com/wp-content/uploads/2025/09/elementor_1.png”
alt=”Elementor widget panel showing Before After Slider”
style=”width: 100%; height: auto; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);”>
</div>
</div>

<!– Step 2 –>
<div class=”two-column” style=”margin-top: 80px; flex-direction: row-reverse;”>
<div class=”content-column”>
<div style=”display: flex; align-items: center; margin-bottom: 20px;”>
<div style=”width: 40px; height: 40px; background: linear-gradient(135deg, #3D2914, #D4A017); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 15px;”>2</div>
<h3 style=”margin: 0; font-size: 1.8rem;”>Customize & Perfect</h3>
</div>
<p style=”color: #666; margin-bottom: 25px; font-size: 1.1rem;”>
Upload your before and after images, then fine-tune every detail with our intuitive controls. See changes instantly in the live preview.
</p>
<ul style=”margin-bottom: 0;”>
<li>Image upload with media library integration</li>
<li>Horizontal/vertical orientation toggle</li>
<li>Adjustable initial position slider</li>
<li>Style controls for handle appearance</li>
<li>Custom overlay text options</li>
<li>Responsive settings per device</li>
</ul>
</div>
<div class=”image-column”>
<img src=”https://www.falnyomtato.com/wp-content/uploads/2025/09/elementor_2.png”
alt=”Elementor settings panel for Before After Slider customization”
style=”width: 100%; height: auto; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);”>
</div>
</div>

<!– Call to action within section –>
<div style=”text-align: center; margin-top: 60px; padding: 40px; background: white; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);”>
<h3 style=”font-size: 1.6rem; margin-bottom: 15px; color: #333;”>Ready in Under 60 Seconds</h3>
<p style=”color: #666; font-size: 1.1rem; max-width: 600px; margin: 0 auto;”>
That’s all it takes. No coding, no complex settings, no headaches. Just drag, drop, customize, and publish your stunning before/after comparisons.
</p>
</div>
</div>
</section>

<!– Key Features –>
<section class=”section”>
<div class=”container”>
<h2 class=”section-title”>Powerful Features, Simple Interface</h2>
<p class=”section-subtitle”>Everything you need to create stunning before/after comparisons</p>

<div class=”features-grid”>
<div class=”feature-card”>
<div class=”feature-icon”>🎯</div>
<h3>Elementor Ready</h3>
<p>Native Elementor widget with full style controls and live preview</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>📱</div>
<h3>Mobile Optimized</h3>
<p>Touch-enabled and responsive design that works perfectly on all devices</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>⚡</div>
<h3>Lightning Fast</h3>
<p>Vanilla JavaScript implementation with no jQuery dependencies</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>🎨</div>
<h3>Fully Customizable</h3>
<p>Control handle styles, appearance, and overlay instructions</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>♿</div>
<h3>Accessible</h3>
<p>Built with accessibility in mind – keyboard navigation and screen reader support</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>🔄</div>
<h3>Two Orientations</h3>
<p>Horizontal and vertical slider modes for maximum flexibility</p>
</div>
</div>
</div>
</section>

<!– Mobile First Design –>
<section class=”section”>
<div class=”container”>
<div class=”two-column”>
<div class=”content-column”>
<h3>Made With Smartphones in Mind</h3>
<p style=”color: #666; margin-bottom: 30px;”>
We’ve optimized every aspect of the slider for mobile devices, ensuring your comparisons look perfect on any screen size.
</p>
<ul>
<li>Responsive and touch-optimized interactions</li>
<li>Works seamlessly in portrait and landscape</li>
<li>Optimized for low bandwidth connections</li>
<li>Smooth performance on older devices</li>
<li>Retina-ready display support</li>
</ul>
</div>
<div class=”image-column”>
<img src=”https://www.falnyomtato.com/wp-content/uploads/2025/09/02_smartphone-in-mind.png”
alt=”Mobile optimized before after slider”
style=”max-width: 500px; margin: 0 auto; display: block;”>
</div>
</div>
</div>
</section>

<!– Use Cases –>
<section class=”section use-cases”>
<div class=”container”>
<h2 class=”section-title”>Endless Use Cases</h2>
<p class=”section-subtitle”>One plugin, unlimited possibilities for your projects</p>

<div class=”use-cases-grid”>
<div class=”use-case-item”>
<h4>🏠 Renovation</h4>
<p>Home improvements and architectural changes</p>
</div>
<div class=”use-case-item”>
<h4>💄 Beauty</h4>
<p>Makeup transformations and cosmetic procedures</p>
</div>
<div class=”use-case-item”>
<h4>📸 Photography</h4>
<p>Photo retouching and color grading</p>
</div>
<div class=”use-case-item”>
<h4>🛍️ Products</h4>
<p>Product upgrades and comparisons</p>
</div>
<div class=”use-case-item”>
<h4>🎨 Design</h4>
<p>UI/UX updates and redesigns</p>
</div>
<div class=”use-case-item”>
<h4>🌿 Landscape</h4>
<p>Garden transformations and seasonal changes</p>
</div>
<div class=”use-case-item”>
<h4>👔 Fashion</h4>
<p>Style makeovers and outfit comparisons</p>
</div>
<div class=”use-case-item”>
<h4>🏪 Interior</h4>
<p>Room makeovers and staging</p>
</div>
</div>

<!– Easy to Use –>
<section class=”section”>
<div class=”container”>
<h2 class=”section-title”>Simple Setup, Powerful Results</h2>

<div class=”two-column”>
<div class=”content-column”>
<h3>Elementor Widget</h3>
<p style=”color: #666; margin-bottom: 20px;”>
Add the widget, select your images, choose orientation and styling – that’s it!
</p>

<h3 style=”margin-top: 40px;”>Shortcode Support</h3>
<p style=”color: #666; margin-bottom: 20px;”>
Use anywhere in your content with our simple shortcode syntax:
</p>

Slide to reveal

</code>
</div>

<p style=”color: #888; font-size: 0.9rem; font-style: italic;”>
💡 Tip: Always put the shortcode on a single line, and use straight quotes („)
</p>
</div>
<div class=”image-column”>
<img src=”https://www.falnyomtato.com/wp-content/uploads/2025/09/03_easy_to_use.png”
alt=”Easy to use Elementor widget interface”
style=”border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);”>
</div>
</div>
</div>
</section>

<!– Customization Options –>
<section class=”section”>
<div class=”container”>
<h2 class=”section-title”>Complete Style Control</h2>
<p class=”section-subtitle”>Customize every aspect to match your brand</p>

<div class=”features-grid” style=”margin-top: 60px;”>
<div class=”feature-card”>
<div class=”feature-icon”>🎨</div>
<h3>Handle Styles</h3>
<p>Customize handle color, size, and arrow style to match your design</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>📏</div>
<h3>Precision Control</h3>
<p>Fine-tune initial position and transition smoothness</p>
</div>

<div class=”feature-card”>
<div class=”feature-icon”>🏷️</div>
<h3>Custom Labels</h3>
<p>Add before/after labels with full typography control</p>
</div>
</div>
</div>
</section>

<!– What’s Included –>
<section class=”section” style=”background: #f8f9fa;”>
<div class=”container”>
<div class=”two-column”>
<div class=”content-column”>
<h3>What’s Included</h3>
<ul style=”margin-top: 30px;”>
<li>Installable WordPress plugin (ZIP)</li>
<li>Elementor widget + WordPress shortcode</li>
<li>Comprehensive documentation</li>
<li>Step-by-step setup guide</li>
<li>Free updates for life</li>
<li>6 months of premium support</li>
</ul>
</div>
<div class=”content-column”>
<h3>Compatibility</h3>
<div class=”compat-grid” style=”margin-top: 30px;”>
<div class=”compat-item”>
<strong>WordPress</strong>
<span>5.5+</span>
</div>
<div class=”compat-item”>
<strong>Elementor</strong>
<span>3.0+</span>
</div>
<div class=”compat-item”>
<strong>PHP</strong>
<span>7.4+</span>
</div>
<div class=”compat-item”>
<strong>Browsers</strong>
<span>All Modern</span>
</div>
</div>
<p style=”color: #888; font-size: 0.9rem; margin-top: 20px; text-align: center;”>
⚠️ Not supported on Internet Explorer
</p>
</div>
</div>
</div>
</section>

<!– CTA Section –>
<section class=”section”>
<div class=”container”>
<div class=”cta”>
<h2>See It In Action</h2>
<p>Experience the power and versatility of our Before & After Slider on real websites</p>
<a href=”https://www.falnyomtato.com/before-after-preview/” class=”cta-button”>View Demo Sites</a>
</div>
</div>
</section>

<!– Changelog –>
<section class=”section”>
<div class=”container”>
<h3 style=”font-size: 1.8rem; margin-bottom: 20px;”>Changelog</h3>
<div style=”background: #f8f9fa; padding: 30px; border-radius: 12px;”>
<p><strong>Version 1.0.0</strong> — Initial release</p>
<ul style=”margin-top: 10px; margin-left: 20px; color: #666;”>
<li>Elementor widget integration</li>
<li>WordPress shortcode support</li>
<li>Horizontal and vertical orientations</li>
<li>Mobile touch support</li>
<li>Accessibility features</li>
</ul>
</div>
</div>
</section>

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = ‘running’;
}
});
}, observerOptions);

// Observe all animated elements
document.addEventListener(‘DOMContentLoaded’, () => {
const animatedElements = document.querySelectorAll(‘.animate-on-scroll, .feature-card, .use-case-item’);
animatedElements.forEach(el => observer.observe(el));
});
</script>
</body>
</html>

Büszkén a faladon

Before After Slider Plugin Description

Navigáció

elérhetőség

Partnereink