Devify Sections

A multi-purpose kit of 12 custom Elementor section widgets with full content and style controls. Drop in complete, polished page sections — heroes, stats, pricing, testimonials, FAQs, team grids and more — and style each one visually, no custom CSS required.

Built on a clean shared architecture: one abstract base class provides every widget's control and render helpers, so the kit stays consistent, predictable, and easy to extend.

The 12 widgets

Why it's built this way

The value of a widget kit isn't any single widget — it's the shared foundation that keeps a dozen of them consistent and maintainable.

• One abstract base class (DVS_Base) supplies all the control helpers (add_text, add_url, add_image, add_icon) and style helpers (add_color, add_typography, add_padding, add_align) plus render helpers (render_btn, render_image, render_header). Each widget is just register_controls() + render().
• Content and Style tabs on every widget — editors change colours, typography, padding, and alignment visually, bound to the right element via Elementor selectors.
• Repeaters with live title_field previews for all variable-length content.
• Accessibility built in — the FAQ accordion ships real aria-expanded state and keyboard support.
• Secure output everywhere — esc_html, esc_url, esc_attr, wp_kses_post.
• Graceful — shows an admin notice if Elementor isn't active instead of a fatal error.
• Modern PHP 8 — typed signatures, return types, namespacing, translation-ready.

Architecture

devify-sections.php             Bootstrap: Elementor guard, category, registration, enqueues
widgets/
  class-dvs-base.php            Abstract base — content + style + render helpers
  class-dvs-hero.php            Each widget: register_controls() + render()
  class-dvs-stats.php
  class-dvs-faq.php
  class-dvs-steps.php
  class-dvs-cta-band.php
  class-dvs-testimonials.php
  class-dvs-pricing.php
  class-dvs-trust-bar.php
  class-dvs-feature-cards.php
  class-dvs-icon-list.php
  class-dvs-callout-banner.php
  class-dvs-team-grid.php
assets/
  sections.css                  Token-driven, responsive, namespaced under .dvs-
  sections.js                   Progressive-enhancement accordion

Adding a thirteenth widget is one new file plus one line in the registration array.

Install

1. Install and activate Elementor.
2. Copy devify-sections into wp-content/plugins/ and activate it.
3. Edit any page with Elementor; find the Devify Sections category in the widget panel.

Requires WordPress 6.0+, PHP 8.0+, and Elementor.

Extending

Each widget follows the same shape, so a new one is short:

class DVS_MyWidget extends DVS_Base {
    public function get_name(): string  { return 'dvs-my-widget'; }
    public function get_title(): string { return esc_html__( 'My Widget', 'devify-sections' ); }
    public function get_icon(): string  { return 'eicon-info-box'; }

    protected function register_controls(): void {
        $this->start_controls_section( 'content', array( 'label' => __( 'Content', 'devify-sections' ) ) );
        $this->add_text( 'heading', 'Heading', 'Default heading' );
        $this->end_controls_section();

        $this->begin_style( 'style', 'Style' );
        $this->add_color( 'heading_color', 'Heading Color', '.my-title' );
        $this->end_style();
    }

    protected function render(): void {
        $s = $this->get_settings_for_display();
        echo '<h2 class="my-title">' . esc_html( $s['heading'] ) . '</h2>';
    }
}

License

GPL-2.0-or-later. Built by Saad Sohail · saad@devify.digital