Rey Elements

You are here:
Estimated reading time: 3 min

These are Elementor widgets built to be used in Rey theme. Video tutorials are coming soon!

Post Grid

This element displays blog posts grid-like. Options are straightforward with basic show/hide toggles and minimal styling.

You can also manually pick what blog posts to be shown.

Post grid element

This is a basic element that displays navigation breadcrumbs.

Basic breadcrumbs.

Button – Skew

This element displays a custom styled button in the form of a skewed rectangle, either fully filled or outlined.

Options are straightforward based on default Elementor button element.

Skewed button. Amsterdam Demo.

This is a multifunctional slider element. Can hold multiple slides and can be filled with an image (or media like YouTube video), captions and single button.

A special feature of this element is that multiple sliders can be synced to maintain the same speed and autoplay duration.

Basic walkthrough screencast: https://d.pr/v/D9LZF8 . Proper tutorial coming soon!

Example of 2 carousels synced. Milano Demo.

Contact Form

This element displays contact forms created with Contact Form 7 plugin . This plugin is literally the most popular plugin for contact forms and there are tons of resources for it. A good start is https://contactform7.com/getting-started-with-contact-form-7/ .

Here’s an article in which you can find the custom HTML code of the forms added in Rey theme.

Also, if you want an in depth tutorial, please watch this video tutorial here .

Contact form element.

Global Section

This element will add a global section, already created in Rey theme > Global sections. Generic sections are recommended to be added, unless the purpose is different.

Read more about Global sections .

Instagram

This element will display an Instagram feed. To use this element, you need to install Instagram by WPZoom plugin.

You’ll need to connect your Instagram account, so after installing this plugin , head over to WordPress settings > Instagram Widget and here connect with Instagram eg: https://d.pr/i/dbjbRI .

The element has 2 skins and there are basic customisation settings for the images, such as image size and distance between the items.

Instagram element in London demo .

This is a multi-functional element that by design displays menu navigations with the possibility of customising its looks.

Please know that before using this element, menus need to be created in Appearance > Menus .

You can also display product categories in the form of a menu navigation. Simply change the Skin option to Product categories.

Quick screencast: https://d.pr/v/yQ31pz (proper video tutorial coming soon!)

Newsletter Form

This element will display a newsletter form. To use this element you need to install and activate the powerful MailChimp for WP plugin.

To get started with this plugin, head over to this plugin’s knowledge base or watch this video tutorial .

Newsletter form in Tokyo Demo.

Products Grid

This is a powerful element meant to display WooCommerce products in various styles. Please head over to Products Element article where you can find much more detailed informations.

Scroll Decorations

This element will display an animated button that is designed to “assist” – most likely a full-screen section or widget, to hint the visitor to scroll the page.

The click is customisable to either animate scroll to the next section or go to the top of the page.

Quick screencast: https://d.pr/v/Pc2CQj .

Section – Skew

Skewed section in Amsterdam Demo .

Slider Navigation

This element is designed to assist carousel/slider type elements, to display arrows navigation or bullets, outside the carousel. This technique makes the layout more flexible.

Currently this element can only be used with Products Grid element, Carousel Skin . Read more how to use this element with Products Grid element.

Text Scroller

This element will display a text slider with arrows navigation. Best suitable for quick short messages. Options are straightforward for a slider type element, where you can choose to autoplay or select either fade or slide effect.

Text Scroller in Melbourne Demo product pages .

Toggle Boxes

This element displays a list of boxes meant to trigger the visibility of content that’s hidden by default.

This element has 2 skins, a basic one and one called Stacks, which is more robust having more manageable content.

In Rey theme, there are currently 2 practical usages:

You can also change the triggable action, from click to hover.

WooCommerce Attributes

This element will display a list of WooCommerce Attributes in the form of either color swatches, buttons or image swatches.

This element requires WooCommerce Variation Swatches free plugin to be installed and active, as well as already existing variations & attributes.

Read more how to add product variations .

This element can be hooked to WooCommerce’s default filters or to WC Ajax Filter plugin.

Variation swatches in London demo’s Shop mega menu .

Fancy Menu

This element will display a menu navigation. Its options are pretty basic, but what makes this element stand out is the animation of sliding between sub-menus.

This element was mostly built for using with Fullscreen Menu – Rey Module , however i decided to included into the Rey Core plugin to allow other usages. Read more about Fullscreen Menu module here .

Note: Even though i’m including such elements, please know that their styles and scripts are not loaded if the element is not used. I’ve built the Rey-Core’s foundation to make sure things are not loaded if not used.

Was this article helpful?
Dislike 0
Views: 61

Join the conversation