Universal custom elements for WordPress users.

Kickstart your development process with fully functional and ready-made elements. Available as native web components, shortcodes and page builder wrappers.

Usage

Veraciously versatile.

Since spx is built on the web component standard, its elements can be used anywhere custom HTML is allowed.

<spx-masonry columns="4" gap="8px"> <img src="img-1.jpg" alt="masonry image" /> <img src="img-2.jpg" alt="masonry image" /> <img src="img-3.jpg" alt="masonry image" /> <img src="img-4.jpg" alt="masonry image" /> <img src="img-5.jpg" alt="masonry image" /> <img src="img-6.jpg" alt="masonry image" /> <img src="img-7.jpg" alt="masonry image" /> <img src="img-8.jpg" alt="masonry image" /> <img src="img-9.jpg" alt="masonry image" /> <img src="img-10.jpg" alt="masonry image" /> </spx-masonry>
masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image
<spx-slider navigation slides-per-view="2.5" space-between="10" max-height="clamp(200px, 40vh, 500px)" bp-600="slides-per-view: 2.5" images="<?php spx\Get::gallery("myGallery", "acf") ;?>"> </spx-masonry>
masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image masonry image
Components

A flexible toolbox
for every occasion.

New element features are being added regularly while current functionality is constantly reviewed and enhanced.

Add

Accordion

Content toggle to show and hide text or images on click.

Heart Half

Animate

Animate all inner elements using controls like x, y and opacity.

Toggle

Class Toggle

Triggers one or multiple classes on the inner element.

Code Slash

Code

Highlights a given piece of text like in a code editor.

Create

Edit Button

Allows you to edit custom fields and options from the frontend.

Layers

Group

A utility component to apply the same settings to multiple elements.

Thumbs Up

Icon

Renders an icon from the Ionicon library. Font Awesome support coming soon.

Terminal

Iframe

An enhanced Iframe element with enhanced capabilities.

Contrast

Image Comparison

Compare two images using a slider. (before/after)

Camera

Lightbox

Opens a group of images in an overlay above the page.

Image

Masonry

Lay out images or elements in masonry style (Pinterest-like) grid.

Tablet Portrait

Mockup

Display a device mockup (iPhone, MacBook etc.) around an image.

Reorder Three

Navigation

Render an accessible navigation from a WordPress menu.

Color Wand

Notation

Notate parts of a text, similar to making scribbes in a notebook.

Move

Offset

Responsively offsets itself to the height of another element in the document.

Bug

Scrollspy

Add CSS classes to navigation items depending on scroll position.

Share Social

Share

Sharing buttons for the most popular social media networks.

Images

Slider

Image slider to navigate through a gallery of images.

Shapes

Slideshow

An infinite slideshow of thats animated from right to left.

Information Circle

Snackbar

A notification bar which removes itself from the DOM after 5 seconds.

Text

Typewriter

Animates text like it is being written on a typewriter.

Components

Easily understood.

A straightforward syntax makes composing elements with spx a breeze for simple and advanced use cases.

<spx-accordion header-text="Click to show more" content-text="I am hidden text"> </spx-accordion>
<spx-accordion> <h1 slot="header">Header slot ✌️</h1> <img slot="content" src="https://source.unsplash.com/random/800x300" alt="image" /> </spx-accordion>

Header slot ✌️

image
<spx-accordion link-type="close" link="acc" header-text="Accordion 1" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 2" content-text="I am hidden text"> </spx-accordion> <spx-accordion link-type="close" link="acc" header-text="Accordion 3" content-text="I am hidden text"> </spx-accordion>
Flexibility

Truly future-proof.

By adopting an open web standard, spx is able to adjust its elements to the previous, current and future tools available in the WordPress world.

logo Web Components
logo Shortcodes
logo Oxygen Wrapper
soon
logo Gutenberg blocks
soon
logo Elementor wrapper
soon
logo Brizy wrapper
Flexibility

Extendable if needed.

Need to build your own customised solution? All component data is available as JSON files inside the plugin folder.

{ "name": "spx-accordion", "description": "The classic method to show and hide elements on your website.\nCan be used with custom markup for the header and/or content section.", "properties": [ { "id": "accordion-contentColor", "name": "contentColor", "attribute": "content-color", "type": "string", "description": "", "default": "'var(--spx-color-gray-900)'", "defaultValue": "'var(--spx-color-gray-900)'", "tags": [] }, { "id": "accordion-contentText", "name": "contentText", "attribute": "content-text", "type": "string", "description": "Content text.", "default": "'Default Content Text'", "defaultValue": "'Default Content Text'", "tags": [] }, { "id": "accordion-contentTextTag", "name": "contentTextTag", "attribute": "content-text-tag", "type": "string", "description": "Content text tag.", "default": "'span'", "defaultValue": "'span'", "tags": [] } ] } ...

Pagebuilder modules

Use it as a base to automatically generate native elements for your favourite page builder. The same approach is used internally to create all component shortcodes.

Custom field solutions

Systematically map spx component settings to custom fields using the JSON data.

Performance

Goodbye large bundles.

Instead of serving a single file, spx is dynamically loading the components which are currently active on the page.

performance