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:
1.
Upload Image - You can upload your banner image here.
2.
Link - Enable or disable the banner link. When the option is enabled, you can select from the following settings:
1.
Custom Link - Enable or disable a custom link.
2.
Existing page - Link to an existing page.
3.
Link Title -Add a text to the links title attribute.
4.
New Tab - Open in New Tab.
5.
NofollowOption - Enable or disable Nofollow.
3.
Effect - You can customize from different predefined hover effects for the banner.
4.
Always Hovered - Enable this option if you want to use these effects without hovering over the image.
5.
Hover Effect -Add various effects for hovering on the banner.
Extra Class - Add an extra CSS class name that will be applied to the banner.
Content
1.
Title - Allows you to change the title of the banner.
2.
HTML Tag - You can choose from H1-H6 HTML tags for Title.
3.
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.
4.
Button - Enable or disable. When the option is enabled you can change Text and Link properties.
5.
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
1.
Background Color - You can select the background color for the banner.
2.
Image Opacity - You can select the image opacity for the banner image.
3.
Hover Opacity - You can select the hover opacity for the banner image.
4.
CSS Filters - You can select the CSS filters like blur, contrast, brightness for the banner.
5.
Border Type - You can add the border for the banner.
6.
Border Radius - You can adjust the border radius for the banner.
7.
Blend Mode - You can describe how images should appear when elements overlap the background.
Title
1.
Color - You can choose the color for the title.
2.
Typography - Adjust the font size, transform to uppercase, font family.
3.
Shadow - You can add text shadow to the Title.
4.
Margin - You can set the margin to the Title.
Description
1.
Color - You can choose the color for the description.
2.
Typography - Adjust the font size, transform to uppercase, font family.
3.
Shadow - You can add text shadow to the description.
4.
Margin - You can set the margin to the description.
Button
1.
Color - Change the button text color.
2.
Hover Color - Change the button text color when it is hovered upon.
3.
Typography - Change button text styling properties.
4.
Background Color - Change button background color.
5.
Hover Background Color - Change button background color when it is hovered upon.
6.
Border Type - Apply various types of borders and change its width and visual properties with this setting.
7.
Border Radius - Adjust the border radius of the button to make it appear as square or have rounded corners.
8.
Shadow - Apply a box shadow to the button.
9.
Margin - Change the margin of the button.
10.
Padding - Change the padding of the button.
Container
1.
Border Type - You can add the border type to the REA Banner container.
2.
Border radius - You can adjust the border radius for the banner container.
3.
Box shadow - You can add box shadow to the banner container.