Echelon SiteOrigin Widgets and Features


IMPORTANT: v2 is a breaking update, please test before upgrading from v1. If you do update and something important breaks, deactivate Echelon and use the v1 download from the link below. Prime is available for v2 only.

v1 Download

Echelon SiteOrigin Widgets and Features enhance the functionality of the SiteOrigin Page Builder panels and adds a unique set of premium quality widgets. Echelon SiteOrigin widgets are designed in a neutral plain style with styling available in the customizer. Along with the widgets and features Echelon enables drag and drop for Advanced Custom Fields, Custom Post Types, WooCommerce and Custom Loops.

Echelon Home

Echelon Layouts

Echelon Layouts add a flexible additional system to the SiteOrigin Page Builder framework. They provide an area in the WordPress administration to store and organize layouts along with a dedicated widget for displaying the content anywhere on your website. If you update the content in the reusable layout it will update in all areas you have it displayed. They are also used to create custom content loops, post boxes, product boxes and layouts for custom post types.


Adds a selection of entrance animations to widgets. Widgets can be animated individually or set the animation on a row to animate all row widgets in sequence automatically.

Animated Gradients

Create color changing backgrounds for widgets rows and cells. Animated Gradients add an eye catching background with 4 transition states, variable speed, left-right, top-down and diagonal directions.


Alot of the interactive features of Echelon require attributes to be set on widgets, the Attribute feature makes this simple by providing a section to enter the key value pairs for widgets, e.g attr-key=”my-value”.

Background RGBA

Adds an additional background color option to the settings for widgets, rows and cells to allow for the easy selection of transparent background colors (rgba). The Helper CSS Darken option can also be set to inherit for transparent color overlays.

Cell Flex

Its now easy to create sideways horizontal layouts that flow naturally in their grid cell. The Cell Flex feature adds options to grid cells that allow widgets to flow based on flex box and are easier to work with compared to traditional columns.

Custom Palette

Replace the default color palette for the standard and RGBA color pickers with 8 custom colors. Set the colors in Appearance > Customise > Echelon > Custom Palette.

Helper CSS

Add CSS helper classes to widgets, rows and cells. Helpful classes include desktop and mobile visibility, box shadows, box rounding and clipping.

Highlight (Prime)

Adds a larger emphasis border to the bottom of widgets.

Hover Transition (Prime)

Apply transitions to widgets when they are hovered or focused.

Linked Widgets

When enabled the widget will be wrapped in a link tag to your given URL, Post ID, SiteOrigin Syntax or the permalink for the current global post. Simple and quick way to link entire widgets without worrying about buttons or text links.


Keep important widgets visible by sticking them to their parent row. Stuck widgets can be offset from the viewport top.

Feature Examples


  • Before & After: Compare the visual difference between two images with a configurable slider.
  • Button: A variety of buttons that take your plugin styles with an optional label.
  • Card: Text, link and image based cards with optional transitions.
  • Comment: Proudly display the positive feedback you have received from your customers.
  • Count Query Result: Display the number of posts found from a SiteOrigin posts query.
  • Counter: Animated the count between two numbers with optional grouping.
  • Description List: Header and text based alternative to standard bullet and number lists.
  • Divider: Horizontal, vertical and icon dividers in two widths.
  • Feature: Highlight important business information with icon and text boxes.
  • Filter: Use tabs to filter items in a grid or masonry layout.
  • Heading: Various heading styles for pages and sections.
  • Icon List: Create text lists with flexible icon based bullets.
  • Label (Prime): Small labels to stick on things and draw attention.
  • Lightbox Gallery: Grid based lightbox galleries, using the Image Component widget.
  • Modal: Content and video modal popups, toggled via buttons or other widgets.
  • Navigator (Prime): Quickly move between page sections with a sidebar navigator.
  • Off Canvas: Mobile style off canvas menus and content areas.
  • Overlay: Overlay two sets of content with optional transitions.
  • Pricing: Card based pricing boxes for subscribers and plans.
  • Radial: Static and animated process radial odometers.
  • Reuse Layout: Display the content of an Echelon Layout anywhere on your website.
  • Slabtext: Automatically format texts in blocks with a trendy slab effect.
  • Slider: Versatile and flexible slider to load other widgets into.
  • Slideshow (Prime): Animated lightbox image slideshows with transitions and overlays.
  • Smooth Scroll: Automatically scrolls all on page links smoothly.
  • Tabs: Text and icon tabs whose content is built with Page Builder.
  • Text: Display text with size, alignment and Google font options.
  • Text Rotator: Rotate words to better convey your message and highlights.
  • Twitter Feed: Display your latest tweets as a list or vertical slider.
  • Video: Inline and autoplay videos, with or without covers.

Widget Examples

Advanced Custom Fields

Echelon supports text, number, date and image based ACF fields and makes displaying their data simple. To use the templating functionality of Echelon the free version of ACF needs to be active. ACF field data can be accessed any place you are in the loop such as the Custom Loop widget, single post types or fields attached directly to the page or post you are viewing.

Field data can be accessed via two methods, the loop or a Post Object field relation. Relation fields allow for easier data storage as you can have a Clients post type and access their data from a Projects post type. If the field relation is to an Echelon Layout you can tell the ACF Field widget to render the layout directly.

Template Tags

The WordPress provided template tags are available via the Template Tag widget. As with ACF fields you can access template tags anywhere you are in the loop as they work off the global post.

WooCommerce Tag (Prime)

The WooCommerce tag available to Prime subscribers outputs product specific data and allows for the easy creation of product loops while working the same way as the ACF and Tempalte Tag widgets.

Custom Post Types

Building layouts for Custom Post Types is a very simple process. Add an Echelon Layout and set it to Single for the post type under the Echelon Layout options. Fill the Layout with Template Tags and ACF Field widgets. When the post type is viewed the given layout will be used.


For a cherry on top we have enabled Echelon Layouts for 404 pages aswell. As they are not in the loop you will need to use Custom Loop widgets to handle dynamic data if such data needed.


Echelon has an ever expanding library of pre-built blocks you can import to get started building straightaway. We add new content to the Library every week.


Echelon Prime is our paid version and upgrades many of the widgets and features and adds Prime specific functionality. Echelon is an unlimited product so we have two plans available one for single users and one for teams.


Read all 2 reviews

Contributors & Developers

“Echelon SiteOrigin Widgets and Features” is open source software. The following people have contributed to this plugin.


“Echelon SiteOrigin Widgets and Features” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Echelon SiteOrigin Widgets and Features” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • Fixed: Typo in animation modifier names.
  • Fixed: Typo in plugin long and short descriptions.
  • Fixed: Typo in Image Component label.
  • Added: CSS is now automatically generated when the customizer is saved.
  • Added: CSS is now automatically generated when the plugin is activated.
  • Fixed: Button color being overriden by themes anchor styling.
  • Added: Attributes are now also available for rows and cells.
  • Fixed: Reduced server file requests by 1.
  • Added: LESS control for Margins.
  • Added: LESS control for Gutters (padding, grid).
  • Added: LESS control for Height.
  • Fixed: LESS Typograhy rounding decimals.
  • Changed: Visibilty Helper CSS now has own style group (Visibility).
  • Added: LESS control for max Lightbox width and height.
  • Fixed: Lightbox nav color being overriden by themes anchor styling.
  • Fixed: Cached CSS files not being cleared on LESS compile.
  • Added: Widget group in the Add New Widget modal.
  • Changed: Widget icon to be more Echelon.
  • Added: Various widget descriptions.
  • Added: Responsive options to Cell Flex features (style regen required)
  • Fixed: Deadspot in tablet visibility.


  • Added: Visibility settings to Helper CSS.