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>

<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>

Components

A flexible toolbox
for every occasion.

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

Accordion

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

Animate

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

Class Toggle

Triggers one or multiple classes on the inner element.

Code

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

Edit Button

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

Group

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

Icon

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

Iframe

An enhanced Iframe element with enhanced capabilities.

Image Comparison

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

Lightbox

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

Masonry

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

Mockup

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

Navigation

Render an accessible navigation from a WordPress menu.

Notation

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

Offset

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

Scrollspy

Add CSS classes to navigation items depending on scroll position.

Share

Sharing buttons for the most popular social media networks.

Slider

Image slider to navigate through a gallery of images.

Slideshow

An infinite slideshow of thats animated from right to left.

Snackbar

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

Typewriter

Animates text like it is being written on a typewriter.

Check docs for examples

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 ✌️

<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.

Web Components

Shortcodes

Oxygen Wrapper

soon

Gutenberg blocks

soon

Elementor wrapper

soon

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.

99 €

Continue to checkout

Universal custom elements for WordPress users.

Veraciously versatile.