Banner Element

The Riode Banner Element offers you well-designed presets and abundant styling settings so that you can build any kind of banners you like. More important thing is that the Riode Banner Element can complement Elementor Builder’s drawback – it produces some useless nodes.

Please go to Banner Element Page to see how it shows for a visual overview.

How To Use The Riode Banner Element
The Riode Banner Element with Add-Ons.

Step 1. Create Elementor Section you want to place in your site.

Step 2. Open Riode Settings tab in Elementor Section panel. And then, in “Use Section For” control, choose banner option. From then on, that Elementor Section would be banner wrap.

Step 3. The next step is to make Elementor Column as Banner Layer. Let’s how to make it. First, Open Riode Settings tab in Elemenntor Column. And then, in “Use Column For” control, choose banner layer option. From then on, that Elementro Column would be banner layer.

Step 4. And then, configure banner layer with image, heading or any other elements. And you also determine banner layer’s position.

Step5. Lastly, you can add animation effect to banner, banner layer or it’s child items respectively. notes: The advantage of using add-ons for building banners is that you can add more than one banner layers to banner. And you can configure banner layers individually.

The Riode Banner Element with Riode Banner Widget

Step 1. Create, or choose the Column you want to add Element into. Click on Add New Element.

Step 2. Select Riode Banner from the Element List.

Step 3. Configure the Riode Banner Element to some place you want in your site. And then, default preset will be shown with default layout ( left-sided ) and default type ( primay color background and no image ). The Riode Baner Element has 8 different presets for you to choose. And they can be customized to you liking. There are many settings to list for this element, but if you start with your preferred preset, and then slowly go down the options list, customizing its appearance to match your demands. After that processes, you will be able to get the banner section you are looking for.

Element Content Options

Preset – Controls your banner’s preset. There are 8 presets.

Banner Items – Adds your banner item to your banner layer. There is no limit for adding items.

Element Style Options

Banner Box – Controls background, image, image’s position, image’s attachment, image’s repeat, image size, max-height, min-height and image position of your specified banner.

Content absolute banner – Controls banner layer’s display option. If you need absolute banner, just set it. If not, just unset it.

Adjust banner size with image – Determines banner height with it’s image height. If you want to adjust banner height with image’s height, just release it.

Banner Overlay – Adds overlay effects to your banner.

Enable Parallax – Makes banner as parallax mode. notes: If you use this option, just think of it – your image should be big enough to show perfect parallax effect.

Banner Layer Box – Controls banner layer’s padding, background, box shadow, text align , position, width, height and animation options.

Demos