REA Banner widget enables you to create eye-catching interactive banners with multiple interactive styles and tons of customization options without any coding.
Content #
Image #
Option to set the Banner image and customize it:
- Upload Image – You can upload your banner image here.
- Link – Enable or disable the banner link. When the option is enabled, you can select from the following settings:
- Custom Link – Enable or disable a custom link.
- Existing page – Link to an existing page.
- Link Title -Add a text to the links title attribute.
- New Tab – Open in New Tab.
- Nofollow Option – Enable or disable Nofollow.
- Effect – You can customize from different predefined hover effects for the banner.
- Always Hovered – Enable this option if you want to use these effects without hovering over the image.
- Hover Effect – Add various effects for hovering on the banner.
- Height – Set a custom height for the banner.
- Enable Mouse Tilt – Enable / Disable mouse tilt effect.
- Extra Class – Add an extra CSS class name that will be applied to the banner.
Content #
- Title – Allows you to change the title of the banner.
- HTML Tag – You can choose from H1-H6 HTML tags for Title.
- Description – You can add the content of your Banner in the Richtext editor. You can edit the text visually or with code, and add images from the media library.
- Button – Enable or disable. When the option is enabled you can change Text and Link properties.
- Alignment – Align the title and content to the left, center, or right.
Responsive #
Responsive Controls – If the description text is not suiting well on specific screen sizes, this option will hide the description text.
Style #
General #
- Background Color – You can select the background color for the banner.
- Image Opacity – You can select the image opacity for the banner image.
- Hover Opacity – You can select the hover opacity for the banner image.
- CSS Filters – You can select the CSS filters like blur, contrast, brightness for the banner.
- Border Type – You can add the border for the banner.
- Border Radius – You can adjust the border radius for the banner.
- Blend Mode – You can describe how images should appear when elements overlap the background.
Title #
- Color – You can choose the color for the title.
- Typography – Adjust the font size, transform to uppercase, font family.
- Shadow – You can add text shadow to the Title.
- Margin – You can set the margin to the Title.
Description #
- Color – You can choose the color for the description.
- Typography – Adjust the font size, transform to uppercase, font family.
- Shadow – You can add text shadow to the description.
- Margin – You can set the margin to the description.
Button #
- Color – Change the button text color.
- Hover Color – Change the button text color when it is hovered upon.
- Typography – Change button text styling properties.
- Background Color – Change button background color.
- Hover Background Color – Change button background color when it is hovered upon.
- Border Type – Apply various types of borders and change its width and visual properties with this setting.
- Border Radius – Adjust the border radius of the button to make it appear as square or have rounded corners.
- Shadow – Apply a box shadow to the button.
- Margin – Change the margin of the button.
- Padding – Change the padding of the button.
Container #
- Border Type – You can add the border type to the REA Banner container.
- Border radius – You can adjust the border radius for the banner container.
- Box shadow – You can add box shadow to the banner container.