Digital Signage Slider - Documentation

📺

🎬

🛒

📝

🌐

📺 WordPress Plugin v1.0.0

Digital Signage Slider

A TV-commercial style slider for WooCommerce products AND WordPress posts. Cinematic animations, 6 themes, 8 layouts, 50 Google Fonts, full RTL support, Gutenberg block & Elementor widget. Works with or without WooCommerce.

🎬 6 Theme Presets 📐 8 Layouts ✨ 10 Text Animations 🔄 10 Transitions 🔤 50 Google Fonts ↔️ Full RTL 🧩 Gutenberg + Elementor ⚡ 30 Demo Presets 🆓 100% Free

📑 Table of Contents

🚀 Getting Started

• System Requirements
• Installation Guide
• Quick Setup Workflow
• Your First Slider

🎨 Themes & Layouts

• 6 Theme Presets
• 8 Layout Styles
• Content Sources
• 30 Demo Imports

⚙️ Settings & Controls

• Content Source Tab
• Text & CTA Tab
• Colors & Overlay Tab
• Navigation Tab

🔤 Typography & RTL

• Google Fonts (50 Fonts)
• Separate Font Controls
• RTL Layout Mirroring
• Arabic / Urdu Fonts

🧩 Integrations

• Shortcode Usage
• Gutenberg Block
• Elementor Widget
• Sidebar Widget

❓ Help & Support

• Troubleshooting
• FAQ
• Changelog
• Credits

System Requirements

Minimum requirements to run the plugin

📦

WordPress

5.8+

🐘

PHP

7.4+

💾

Memory

128MB+

🗄️

MySQL

5.6+

🌐

Browser

Modern

💡

WooCommerce is optional! This plugin works as a standalone WordPress post/page slider. Install WooCommerce only if you want product sliders with pricing, ratings, and AJAX add-to-cart.

Key Features

Everything you need for stunning digital signage

🎬

6 Cinematic Themes

Cinematic, Neon Nights, Minimal Luxury, TV Broadcast, Retro Digital, and Glassmorphic. Each with unique visual personality and animations.

📐

8 Layout Styles

Full Width Hero, Boxed, Split Screen, Multi-Carousel, 3D Card Carousel, Horizontal Ticker, Masonry Grid, and Vertical Slide.

✨

20 Animations

10 text animations (Typewriter, Scramble, Glitch, Cinematic Title, etc.) and 10 slide transitions (Zoom, Fade, Slide, Curtain, etc.).

🛒

WooCommerce Ready

Product price, rating, sale badges, AJAX add-to-cart, Quick View modal. All WooCommerce features work seamlessly when active.

📝

WordPress Posts

Display posts, pages, and custom post types with author/date/category meta line. Filter by category, tag, sticky, or custom selection.

🔤

50 Google Fonts

Curated collection including 10 Arabic/RTL fonts. Separate font controls for Title, Description, and CTA button with weight and spacing.

↔️

Full RTL Support

Complete layout mirroring for Arabic, Hebrew, Urdu, and Persian. Auto-detects from WordPress locale or manual override per slider.

🧩

Gutenberg & Elementor

Native Gutenberg block with live preview and Elementor drag-and-drop widget. Plus shortcode and sidebar widget.

⚡

30 Demo Presets

One-click import from 30 professionally designed presets across all 6 themes. Start with a preset and customize to match your brand.

🎆

Special Effects

Ken Burns zoom, Parallax, Particles, Glitch, CRT Scanlines, and Neon Glow. Toggle each effect independently per slider.

Installation Guide

Get started in minutes

📦 Method 1: WordPress Admin

1
Go to Plugins → Add New
2
Search for "Digital Signage Slider" or click Upload Plugin
3
Choose digital-signage-slider.zip
4
Click Install Now → Activate Plugin
5
Go to DSS Sliders in the admin menu

📁 Method 2: FTP Upload

1
Extract digital-signage-slider.zip
2
Connect to your server via FTP/SFTP
3
Navigate to /wp-content/plugins/
4
Upload the digital-signage-slider folder
5
Activate in Plugins menu

✅

After Activation: You'll find DSS Sliders in the WordPress admin menu. Use ⚡ Import Demos to quickly import 30 ready-made presets, or Add New to build from scratch.

Quick Setup Workflow

Create your first slider in 5 simple steps

📦

1. Install

Upload & activate plugin

⚡

2. Import Demo

Or create from scratch

🎨

3. Customize

Theme, layout, colors

📋

4. Copy Shortcode

Or use block/widget

🚀

5. Publish

Paste & go live

🎬 6 Theme Presets

Each theme defines the visual personality of your slider

🎬 Cinematic

Hollywood movie trailer aesthetic
Bold uppercase titles with letter spacing
Dramatic gradient overlays
Ken Burns zoom on images
Best for: Hero banners, product launches

💜 Neon Nights

Cyberpunk neon glow aesthetic
Glowing text and accent colors
Dark backgrounds with electric colors
Glitch and scanline effects available
Best for: Tech, gaming, nightlife

✨ Minimal Luxury

Clean, refined aesthetic
Thin fonts, wide letter spacing
Subtle animations and transitions
White/light backgrounds
Best for: Fashion, luxury, portfolio

📺 TV Broadcast

Breaking news / sports ticker style
Bold red accent bars and borders
Counter and progress bar prominent
Typewriter text animations
Best for: News, sports, flash sales

👾 Retro Digital

CRT monitor / VHS tape aesthetic
Scanline and glitch effects
Monospace/pixel-inspired typography
Amber/green terminal colors
Best for: Retro, gaming, nostalgic

🧊 Glassmorphic

Frosted glass / blur aesthetic
Semi-transparent content panels
Soft shadows and rounded corners
Mesh gradient overlays available
Best for: Modern apps, SaaS, creative

8 Layout Styles

Choose the perfect layout for your content

📐 Standard Layouts (4)

🖥️ Full Width Hero

Full-screen background with centered content overlay. The classic digital signage look.

📦 Boxed

Content in a centered container with visible background edges. Professional and contained.

↔️ Split Screen

Content on left, product/post image on right. Great for detailed product showcases.

🎠 Multi-Slide Carousel

Multiple slides visible at once with configurable slides-to-show. Swipeable on mobile.

🆕 New Layouts (4)

🃏 3D Card Carousel

Perspective-transform 3D cards with active/prev/next states. Dramatic depth and rotation.

← scrolling →

📰 Horizontal Ticker

Infinite scrolling marquee like a news ticker. Configurable speed and direction. Pauses on hover.

🧱 Masonry Grid

Pinterest-style varying heights with staggered entry animation. Hover lift effect on cards.

↑ swipe ↓

⬍ Vertical Slide

Up/down slide transitions with rotated navigation dots. Modern mobile-first design.

Content Sources

14 content sources across WooCommerce and WordPress

🛒 WooCommerce Products

•
Latest Products — newest products by date
•
Featured — hand-picked featured products
•
On Sale — products currently on sale
•
Best Selling — top sellers by quantity
•
Top Rated — highest average ratings
•
By Category — filter by product categories
•
Custom Selection — pick specific products

📝 WordPress Content

•
Latest Posts — newest blog posts
•
By Category — filter by post categories
•
By Tag — filter by post tags
•
Sticky Posts — WordPress sticky posts
•
Custom Selection — pick specific posts
•
Pages — select specific pages
•
Custom Post Types — any registered CPT

💡

Smart Labels: The admin settings labels change dynamically based on your source. When you select a post source, "Show Product Title" becomes "Show Post Title", "Show Price" becomes "Show Meta", and CTA options adapt accordingly.

30 Demo Presets

Split Showcase

Slider Settings

9 organized tabs for complete control

📋 Content Source Tab

Source Type: Choose from 14 WooCommerce + WordPress sources
Number of Items: 1–50 products or posts
Order By: Date, Title, Price, Popularity, Rating, Random, Menu Order
Filter: Categories, Tags, Specific IDs, Custom Post Types

🎨 Design & Layout Tab

Theme: 6 presets — Cinematic, Neon, Minimal, Broadcast, Retro, Glass
Layout: 8 styles — Full Width, Boxed, Split, Carousel, 3D Card, Ticker, Masonry, Vertical
Height: Desktop + mobile height (px)
Slides to Show: 1–6 (for carousel and masonry)
Ticker: Scroll speed (10–100 px/s) and direction (left/right)

🎞️ Animations Tab

Text Animations: Typewriter, Fade Up, Slide In, Glitch, Scramble, Bounce, Scale, Rotate, Blur Reveal, Cinematic Title
Slide Transitions: Cinematic Zoom, Fade, Slide Horizontal, Slide Vertical, Scale, Flip, Curtain, Morph, Glitch Transition, TV Static
Transition Speed: 200ms – 2000ms
Autoplay: On/Off, 1s – 15s interval, Pause on Hover, Infinite Loop

📝 Text & CTA Tab

Show/Hide: Title, Price/Meta, Description/Excerpt, Badge, Rating
Badge Text: Custom text or auto ({sale_percent} for products, "STICKY" for posts)
Font Sizes: Title (16–120px) and Price/Meta (12–80px)
CTA Button: Show/Hide, Custom Text, Action (Go to Page / Add to Cart / Quick View)
CTA Animation: Pulse Glow, Shimmer, Magnetic Hover, None

🎨 Colors & Overlay Tab

Overlay Type: Gradient, Solid, Mesh Gradient, None
Overlay Colors: Two-color picker + opacity (0–100%)
Text & Accent Colors: Title, accent highlights, CTA background/text, badge color

🔀 Navigation Tab

Arrows: Show/Hide with Modern or Minimal style
Dots: Show/Hide dot pagination
Progress Bar: Show/Hide autoplay progress
Slide Counter: Show/Hide "01 / 05" counter

🔤 Typography & RTL

50 Google Fonts with full right-to-left layout support

🔤 Sans-Serif Fonts

Inter, Roboto, Poppins, Montserrat
DM Sans, Space Grotesk, Outfit, Sora
Plus Jakarta Sans, Manrope, Lexend
Work Sans, Barlow, Quicksand, Rubik

✒️ Serif & Display Fonts

Playfair Display, Merriweather, Lora
Cormorant Garamond, DM Serif Display
Bebas Neue, Anton, Abril Fatface
Fira Code, JetBrains Mono (monospace)

🕌 Arabic / RTL Fonts

Cairo, Tajawal, Almarai
IBM Plex Sans Arabic, Noto Sans Arabic
Noto Kufi Arabic, Amiri (Serif)
Scheherazade New, Noto Nastaliq Urdu

🎛️ Typography Controls

Separate fonts for Title / Description / CTA
Font Weight: 100 (Thin) to 900 (Black)
Line Height: 0.5 to 3.0
Letter Spacing: -5px to +20px

↔️ RTL Mode Options

🌍 Auto-detect from WordPress locale
✅ Always RTL (force on)
❌ Always LTR (force off)
Per-slider configuration

🪞 RTL Mirroring

Arrows, dots, progress bar flipped
Split layout reversed (text right)
Ticker scroll direction reversed
3D Carousel rotation mirrored
Badge, counter repositioned

Shortcode & Integrations

4 ways to add sliders to your site

📋 Shortcode

[digital_signage_slider id="123"]

Replace 123 with your slider post ID. Copy the shortcode from the slider list or edit screen. Works in posts, pages, widgets, and theme templates.

🧩 Gutenberg Block

Search for "Digital Signage Slider" in the block inserter
Select your slider from the dropdown
Live preview renders directly in the editor
Quick links to create new sliders or import demos

🎨 Elementor Widget

Find the widget under the "DSS" category in the Elementor panel
Drag and drop onto your page
Select slider from the dropdown
Renders a placeholder in edit mode, full slider on frontend

📌 Sidebar Widget

Go to Appearance → Widgets
Add the "Digital Signage Slider" widget to any sidebar
Enter the slider ID and save

🔧 PHP Template

<?php echo do_shortcode( '[digital_signage_slider id="123"]' ); ?>

Use in theme template files like header.php, page.php, or any custom template.

✨ Special Effects

Toggle each effect independently per slider

🔍

Ken Burns

Slow zoom on images

🏔️

Parallax

Depth effect on scroll

✨

Particles

Floating particle overlay

⚡

Glitch

Digital glitch distortion

📺

Scanlines

CRT monitor lines

💡

Neon Glow

Glowing text effect

Troubleshooting Guide

Common issues and quick solutions

❌ Slider not showing on page

Shortcode or block renders empty

Solution: Verify the slider ID exists and is published. Check the shortcode syntax: [digital_signage_slider id="123"]. Ensure the slider has at least one item matching the source query.

❌ WooCommerce sources greyed out

Product sources are disabled in settings

Solution: WooCommerce is not active. Install and activate WooCommerce to unlock product sources. The plugin works without it using WordPress post sources.

⚠️ Animations not playing

Text or slide transitions look static

Solution: Check for JavaScript errors in browser console. Ensure no caching plugin is serving stale JS. Verify the slider CSS and JS files are loading (check Network tab).

⚠️ Google Fonts not loading

Custom font not visible on frontend

Solution: Save the slider after selecting fonts. Clear any page cache. Verify your site can reach fonts.googleapis.com. Check the browser Network tab for blocked requests.

ℹ️ RTL layout not mirroring

Arrows and text still in LTR direction

Solution: Go to the RTL tab and set mode to "Always RTL" instead of Auto. If using Auto, verify your WordPress locale is set to an RTL language in Settings → General.

ℹ️ Ticker not scrolling

Horizontal ticker layout is static

Solution: You need more than one item for the ticker to scroll. Increase the item count in Content Source. Adjust ticker speed in the Design tab (10–100 px/s).

⚠️ AJAX add-to-cart not working

Button doesn't add product to cart

Solution: Ensure WooCommerce is active and AJAX add-to-cart is enabled in WooCommerce settings. Check for JavaScript errors. Only simple products support AJAX add-to-cart.

ℹ️ Posts show no featured image

Placeholder image appears instead

Solution: Set a featured image on your posts. The plugin displays a placeholder SVG when no image is available. Ensure your theme supports post thumbnails.

Frequently Asked Questions

Q: Do I need WooCommerce?

No! WooCommerce is completely optional. Without it, you can use all WordPress post, page, and custom post type sources. WooCommerce product sources are only shown when WooCommerce is active.

Q: Can I use multiple sliders on one page?

Yes, you can add as many sliders as you want. Each slider operates independently with its own settings, theme, and content source.

Q: Does it support custom post types?

Yes! Select "Custom Post Type" in the content source, then choose from any registered public CPT on your site (portfolios, events, testimonials, etc.).

Q: Are Google Fonts loaded on every page?

No. Fonts are only loaded on pages where a slider with a custom Google Font is actually displayed. Default theme fonts don't trigger any external requests.

Q: Does it work with page builders?

Yes. There's a native Elementor widget and Gutenberg block. For other page builders (Beaver Builder, Divi, WPBakery), use the shortcode [digital_signage_slider id="123"].

Q: Does it support RTL languages like Arabic and Urdu?

Yes, with full layout mirroring — arrows flip, progress bar reverses, text aligns right, ticker scrolls in reverse, and the split layout mirrors. Plus 10 Arabic/RTL Google Fonts are included.

Q: Is the plugin translation ready?

Yes! All strings use the digital-signage-slider text domain and are ready for translation with WPML, Polylang, Loco Translate, or any .po/.mo translation workflow.

Q: How do I use the demo presets?

Go to DSS Sliders → ⚡ Import Demos. Browse 30 presets across 6 themes. Click "Import" on any preset — it creates a ready-to-use slider you can customize.

Q: What happens when I uninstall?

The plugin includes a clean uninstall.php that removes all slider posts and meta data from the database. Your content (products, posts) is never touched.

Q: Is it HPOS compatible?

Yes. The plugin declares compatibility with WooCommerce High-Performance Order Storage (HPOS / Custom Order Tables) when WooCommerce is active.

Changelog

Version history

v1.0.0 — Initial Release

🎬 6 theme presets: Cinematic, Neon Nights, Minimal Luxury, TV Broadcast, Retro Digital, Glassmorphic
📐 8 layouts: Full Width, Boxed, Split, Carousel, 3D Card, Ticker, Masonry, Vertical
✨ 10 text animations + 10 slide transitions
🛒 WooCommerce product slider with AJAX add-to-cart + Quick View
📝 WordPress posts, pages, and custom post type support
🔤 50 Google Fonts with separate title/description/CTA controls
↔️ Full RTL support with auto-detect from WordPress locale
🧩 Gutenberg block with live preview
🎨 Elementor widget (drag-and-drop)
⚡ 30 one-click demo imports
🎆 Special effects: Ken Burns, Parallax, Particles, Glitch, Scanlines, Neon Glow
📱 Fully responsive with mobile height and column controls
🔒 WordPress.org compliant: GPL v2, uninstall.php, proper sanitization & escaping

Third-Party Services

External services used by this plugin

🔤 Google Fonts API

Service: Google Fonts (fonts.google.com)
What it does: Loads custom font files when a Google Font is selected in the Typography settings
When it loads: Only on pages where a slider with a custom font is displayed
Data sent: The user's browser requests font files from fonts.googleapis.com
Terms of Service: developers.google.com/fonts/terms
Privacy Policy: policies.google.com/privacy

⚠️

No fonts are loaded unless you select a custom font. If you leave fonts as "Default (Theme Font)", no external requests are made.

Ready to Create Stunning Sliders?

Start with a one-click demo import or build from scratch — your first slider is just minutes away.

🚀 Get Started Now 📖 View Demo Presets