PaperHouse Addons for Elementor

A WordPress plugin that adds 6 custom widgets to the Elementor page builder: five slider/carousel widgets and a reusable button component.

Version: 1.5.0 Requirements: WordPress, Elementor >= 3.0.0, PHP >= 7.2 No build process — PHP and JS are edited directly.

---

Installation

1. Clone or copy this repository into wp-content/plugins/paperhouse-addons-elementor/
2. Activate the plugin from the WordPress admin Plugins screen
3. Open any page or post in the Elementor editor — the widgets appear under the PaperHouse Widgets category

For local development, symlinking the repo folder into wp-content/plugins/ works well.

---

Widgets

Hero Slider (paper_hero_slider)

Full-viewport hero section with sliding panels, video background support, and animated content transitions.

• Slide fields: subtitle, title, background (image or video), button text + link
• Swiper.js creative effect (100% left/right translate)
• Autoplay + loop
• Slide counter, progress bar, and next-button navigation
• Content fades in per-slide on transition end

Brand Slider (paper_brand_slider)

Dual-carousel slider pairing a thumbnail logo row with a full-size main image per brand.

• Slide fields: brand logo, brand name, main picture, button text + link
• Two synchronized Swiper instances (thumbs ↔ main via controller.control)
• Prev/next navigation with disabled states at boundaries
• Decorative SVG logo frame + shadow on active thumbnail

Expand Slider (paper_expand_slider)

A row of columns that expand on click/hover on desktop; falls back to a Swiper carousel on mobile.

• Column fields: title, background image, button text + link
• Desktop: CSS flex-based expansion (active column grows to ~5.3× width), title rotated -90°
• Mobile: Swiper carousel (1 slide per view)
• Prev/next navigation buttons

Card Slider (paper_card_slider)

A centered card carousel with scaling inactive slides and visible adjacent cards.

• Slide fields: title, description, image, button text + link
• Swiper.js creative effect; inactive slides scale to 0.85× on desktop
• 1 slide per view on mobile, 1.5 on desktop
• Slide content fades in only on the active slide
• Prev/next navigation arrows

Tab Accordion (paper_tab_accordion)

A sidebar tab navigation with full content panels on desktop; collapses to a Swiper carousel on mobile.

• Slide fields: title, main image, description, button text + link
• Desktop: CSS grid (250 px tab column + content area), opacity-based panel switching
• Mobile (< 769 px): Swiper carousel
• Tablet (< 991 px): Single-column layout with wrapping tab row

Box Button (paper_box_button)

A standalone reusable button widget with the same clip-path shape used across all sliders.

• Fields: button text, link, size (default / small)
• No JavaScript — CSS only
• Renders the standard .paper-slider-button component

---

Architecture

Entry Point

paperhouse-addons.php — Main plugin file. Contains the singleton class PaperHouse_Elementor_Extension that:

• Checks Elementor/PHP compatibility and shows admin notices on failure
• Registers all 6 widgets via elementor/widgets/widgets_registered
• Enqueues Slick Carousel (legacy) from CDN unconditionally
• Loads Swiper.js v11 per-widget via each widget's get_script_depends()

widget-categories.php — Registers the paperhouse-widgets Elementor widget category (icon: fas fa-house).

Widget Structure

Every widget is a PHP class in widgets/ extending \Elementor\Widget_Base, paired with a JS file in assets/js/:

Widget	PHP	JS
Hero Slider	widgets/hero-slider.php	assets/js/hero-slider.js
Brand Slider	widgets/brand-slider.php	assets/js/brand-slider.js
Expand Slider	widgets/expand-slider.php	assets/js/expand-slider.js
Card Slider	widgets/card-slider.php	assets/js/card-slider.js
Tab Accordion	widgets/tab-accordion.php	assets/js/tab-accordion.js
Box Button	widgets/box-button.php	—

Each PHP widget registers its own scripts and styles via get_script_depends() / get_style_depends(), so assets are only loaded on pages that use the widget.

Each JS file hooks into Elementor's frontend lifecycle:

jQuery(window).on('elementor/frontend/init', function () {
  elementorFrontend.hooks.addAction(
    'frontend/element_ready/paper_WIDGET_ID.default',
    function ($scope) { /* initialize Swiper or custom logic */ }
  );
});

Assets

assets/
├── css/
│   ├── common.css          Shared button, arrow, and mobile slide components
│   ├── hero-slider.css
│   ├── brand-slider.css
│   ├── expand-slider.css
│   ├── card-slider.css
│   └── tab-accordion.css
├── js/
│   ├── hero-slider.js
│   ├── brand-slider.js
│   ├── expand-slider.js
│   ├── card-slider.js
│   └── tab-accordion.js
└── images/
    ├── active-tab-bg.svg       Decorative background for active accordion tab
    ├── brand-logo-wrapper.svg  Frame overlay for brand logo thumbnails
    └── logo-shadow.webp        Drop shadow effect for brand logos

Shared Components (common.css)

.paper-slider-button — Clip-path polygon button used by all widgets and exposed as the standalone Box Button widget.

• Three-part HTML structure: left-shape, center (text + arrow), right-shape
• Two size variants: default (4.6rem height) and small (3.75rem)
• Hover color transitions (0.3 s)

.paper-slider-arrow — Circular glass-morphism navigation buttons (6.25 rem diameter, backdrop-filter blur).

*`.paper-mobile-slide__`** — Mobile slide layout helpers shared between accordion and expand slider.

External Dependencies

Loaded from CDN (no local copies):

Library	Version	Used by
Swiper.js	11.0.0	All slider widgets
Slick Carousel	1.8.1	Loaded globally (legacy)

---

Naming Conventions

Concern	Pattern	Example
Plugin namespace / text domain	paperhouse-addons
Elementor widget ID	paper_<widget>	paper_hero_slider
PHP class	PaperHouse_<Widget>_Widget	PaperHouse_Hero_Slider_Widget
CSS class prefix	paper-	paper-hero-slider__swiper
Widget category	paperhouse-widgets

---

Responsive Breakpoints

Breakpoint	Behavior
< 768 px	Expand Slider switches to Swiper carousel; card slider shows 1 slide
< 769 px	Tab Accordion switches to Swiper carousel
< 991 px	Tab Accordion desktop grid collapses to single column
>= 768 px	Card Slider shows 1.5 slides, desktop expand columns visible