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.
Breadcrumbs
This is a basic element that displays navigation 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.
Carousel – Uno
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!
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 .
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 .
This element will display an Instagram feed. To use this element, please visit this article to add Instagram Feeds.
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.
Menu Navigation
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 .
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
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.
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:
- Valencia demo – Stacks skin combined with its parent section – slideshow background. Example: https://d.pr/v/l1UUuF
Read how to add section slideshow background and how to combine it with this element. - Amsterdam demo – Default skin combined with Section as Tabs. Example: https://d.pr/v/rXXPnU .
Read how to create tabs and combine it with this element.
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.
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.