Information Box Element

Information Box Element


1. Select "Information Box" for adding the content to the image.

Select 'Information Box' for adding the content to the image.

2. Upload the image by clicking on "+".


3. You can type the the size of the image to be displayed. Common options include full, thumbnail, medium, large, or custom sizes For Example: 100x100.


4. Determines the overall appearance or effect of the box containing the content.

Determines the overall appearance or effect of the box containing the content.

5. Controls the rounding of the box's corners.

Controls the rounding of the box's corners.

6. Inherit: The color scheme is inherited from the parent element or theme settings. Light: Applies a lighter color scheme to the element, often suitable for dark backgrounds. Dark: Applies a darker color scheme to the element, often suitable for light backgrounds.


7. Specifies whether you want to use a solid color, an image, or no background.

Specifies whether you want to use a solid color, an image, or no background.

8. Lets you select a solid color for the background. You can pick a color from the color picker or enter a specific HEX/RGB value.


9. Allows you to upload or select an image to use as the background.

Allows you to upload or select an image to use as the background.

10. Defines the alignment of the background image within the element.

Defines the alignment of the background image within the element.

11. Specifies whether the background image should be repeated within the element.

Specifies whether the background image should be repeated within the element.

12. Defines how the background image is scaled within the element.

Defines how the background image is scaled within the element.

13. Determines the alignment of the text content within the element.

Determines the alignment of the text content within the element.

14. Specifies the position of the image relative to the text content.

Specifies the position of the image relative to the text content.

15. Enables or disables SVG animations.

Enables or disables SVG animations.

16. Displays the content inline, making it flow with surrounding content.

Displays the content inline, making it flow with surrounding content.
Allows you to add a clickable link to the element.

18. Choose different  animations from the available options.


19. Let's move to "Title and Subtitle" section.

Let's move to 'Title and Subtitle' section.

20. This is the input box where you can enter the text for your title.

This is the input box where you can enter the text for your title.

21. Allows you to choose the font style for the title text.

Allows you to choose the font style for the title text.

22. Specifies the heading tag for the title.

Specifies the heading tag for the title.

23. Lets you select a preset size for the title text.

Lets you select a preset size for the title text.

24. Determines the. thickness of the font

Determines the. thickness of the font

25. Allows you to define a specific font size for the title in pixels. You can adjust this value for different devices (e.g., desktop, tablet, mobile).

Allows you to define a specific font size for the title in pixels. You can adjust this value for different devices (e.g., desktop, tablet, mobile).

26. Sets the vertical spacing between lines of text in the title. You can adjust this value for different devices (e.g., desktop, tablet, mobile).

Sets the vertical spacing between lines of text in the title. You can adjust this value for different devices (e.g., desktop, tablet, mobile).

27. Let's move to "Content" section.

Let's move to 'Content' section.

28. Click "Exquisite collection of rings is crafted to celebrate your moments."

Click 'Exquisite collection of rings is crafted to celebrate your moments.'

29. Click "Content"

Click 'Content'

30. Enter the content you want to display on the banner.

Enter the content you want to display on the banner.

31. Let's move to  "Button" section.


32. Sets the label displayed on the button.

Sets the label displayed on the button.

33. Determines when and where the button is displayed.

Determines when and where the button is displayed.

34. Allows you to choose a preset color scheme for the button.

Allows you to choose a preset color scheme for the button.

35. Sets the size of the button.

Sets the size of the button.

36. Defines the visual appearance of the button.

Defines the visual appearance of the button.

37. You can choose different shapes for the Button.

You can choose different shapes for the Button.

38. Allows you to choose whether to use an icon or an image for the button or element.

Allows you to choose whether to use an icon or an image for the button or element.

39. Lets you select the library from which you can pick icons.

Lets you select the library from which you can pick icons.

40. Allows you to select a specific icon from the chosen library.

Allows you to select a specific icon from the chosen library.

41. Determines where the icon will appear relative to the text on the button.

Determines where the icon will appear relative to the text on the button.

42. Let's move to "Design Options" section.

Let's move to 'Design Options' section.

43. To learn more about "Design Options", search for the video "Design Options Of Elements".

To learn more about 'Design Options', search for the video 'Design Options Of Elements'.

44. Once all configurations are complete, click on "Save Changes" to apply them.

Once all configurations are complete, click on 'Save Changes' to apply them.

45. This is how "Information Box" will look like on the website.

This is how 'Information Box' will look like on the website.