AI Feature Box helps to create an intuitive, user-friendly, and efficient website. It enables you to add significant information, notification, and guidance to your website so visitors can quickly go through them. Additionally, it enables you to modify the box in accordance with your preferences, such as adding a redirect link to the box to take visitors to the right page.
How to set up the Feature Box:
Step 1: Search and find Feature Box in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.
Step 2: This is how the element will look after inserting the AI Feature addon.
How to set up content for the AI Feature Box?
Under the content tab, you can configure the AI Feature Box.
In the General Section, you can add a redirect link to the box by enabling the Box Redirect toggle and adding the link in the Link box
Layout: There are four different options available to modify the layout of the Feature Box. Try different layouts to learn more about what’s available. Additionally, you can simply drag and drop the Feature Box Elements to arrange them in a particular sequence, such as what should come first and second, or you can deactivate a particular Icon in the section by dragging from the Visible to dropping in Disable section.
Title: Here, you can set your own title according to your needs. Enter the text in the title box, choose an H1, H2, or other tags in the Heading Tag section, and then use the dropdown menu to change the title’s case to all uppercase, lowercase, and capital letters.
Icon: From this section, you can choose Icon from Icon Library or SVG Image. Besides you can set the View in the dropdown.
Image: Upload the image from Media Library or insert the image through the URL. In addition, you can select the image size in the dropdown or select custom in the drop-down to set your preferred width and height of the image.
Custom Text/Number: Here the Text field can be used to specify a custom greeting message to your visitors or depending on your needs. Enter the value in the custom text box.
Button: From the Button section, select the Type of Button you want in the drop-down list. Put the text you want to appear in the button’s text box. Attach a link to the button so that it can direct viewers to the desired website/page. In the Alignment section, you can additionally align the button to the left, right, centre, or justified. Besides, you can control the Icon size, position, and spacing in this section. Additionally, you can put an icon inside the button by choosing an SVG image or an icon from the Library.
Content: Want to know how to get interesting content? To create amazing content, simply turn on the OpenAI Content toggle. Click on the button Generate with AI the new widget will appear. Enter the Prompt Text for the content and click Generate button. Now the content will be generated based on the prompt. On the other hand, enter your stuff in the content box.
How to add Styles to the Feature Box?
Here we can add styles to each element added in the feature Box. Therefore, let’s look at these steps.
Feature Box: You have the freedom to set the Background type, Color, Position, Attachment, Repeat, Display Size, Box Shadow, Border Radius, Alignment, Border Type, Margin and Padding here for both normal and hover modes.
Title: Set the Title color to display how you prefer both in normal view and when the mouse hovers over it. Also, you can modify the Margin and Typography of the Text in this section.
Icon: In this section, you can customize the Icon Color, Size, Padding, Rotate, and Margin in Normal and Hovering modes. Additionally, you can set any animation effect for the Icon
Image: In this section, you can customize the Background Color, Image Style, Resize, Image Spacing, Padding, Border Type Normal and Hovering modes. You can choose any animation effect you want from the Hover Animation drop-down box.
Number: Set the color for the number in normal and hovering mode. Adjust the transparency or visibility of the number within the feature box using the field Opacity. Besides you can add typography and spacing for the number. Simply turn on the Floating Number toggle if you’re using one.
Button: In this section, you can customize the Text Color, Background Color, Size, Padding, Border Radius, Border Type, Typography, and Box Shadow of the Text in Normal and Hovering modes. You can choose any animation effect you want from the Hover Animation drop-down box.
Content: Set your content’s margin and typography here.
Feature Box serves as visually appealing and concise sections that capture user attention and guide them towards desired actions or understanding