Image Box

Content Controls

Content

The controls in this section allow you to manage the main elements of the Image Box, such as the image, title, text, and button. You can customize the image’s appearance and settings, add a title and description, and set up a button with its own text and link.

• Image – Upload or select an image to be displayed in the Image Box.
• Image Options – Customize your image further through settings like size, alternative text, and lazy loading. Note: These options are available when an image is set.
  • Size – Choose a predefined size for the image.
  • Alt – Provide alternative text for the image for better SEO and accessibility.
  • Lazy Load – Enable this to have the image load as the user scrolls, improving page load times.
• Title – Add a title that displays above the image.
• Text – Provide additional text that appears below the title.
• Button – Add a clickable button and customize it.
  • Text – Define the button’s label.
  • Link – Set the URL the button will direct to.
• Title Tag – Select the HTML tag for the title for semantic structure.

Design Controls

Container

These controls affect the container wrapping the Image Box content. Customize the visual aspects like width, height, background, borders, and padding to suit your overall design theme.

• Content Position – Adjust the alignment of the entire content within the container.
• Width – Define the container’s width.
• Height – Set a specific height for the container.
• Background – Choose a background color for the container.
• Borders – Customize the container’s borders with options for radius, style, and shadow.
  • Radius – Set the roundness of the container’s corners.
  • Styling – Define the border’s style, width, and color.
  • Shadow – Add a shadow effect to the container.
• Padding – Adjust the space inside the container, around the content.
• Content Padding Only – Apply padding solely to the content inside the container, not the container itself.

Image

These controls let you alter the presentation of the image itself, independent of its container. Adjust the width, borders, positioning, and alignment to enhance its visual impact.

• Width – Specify a width for the image.
• Borders – Refine the image’s borders through radius, styling, and shadow effects.
  • Radius – Round the corners of your image.
  • Styling – Modify the border’s style, width, and color.
  • Shadow – Apply a shadow effect to the image.
• Position – Select the image’s position relative to other content.
• Top At – Choose at which point the image aligns at the top. Note: This is only available when the image position is set to left or right.
• Vertical Alignment – Align the image vertically. Note: This is only available when the image position is set to left or right.

Typography

These settings control the typography of the text content in the Image Box. Customize the font, size, weight, and other typographic properties of the title and text to match your branding and design.

• Title – Adjust typographic settings for the title text.
• Text – Customize typographic settings for the descriptive text.

Button

This section provides a suite of controls to customize your website’s buttons, from basic styling and text formatting to advanced effects and interactive behaviors.

• Style – Choose from preset button styles that change the button’s appearance.
• Text – Adjust the text displayed on the button.
  • Typography – Modify font, size, weight, and other text properties.
  • Padding – Control the space inside the button surrounding the text.
    • Padding – Fine-tune the specific padding values on all sides of the button’s text.
  • Fancy Underline – Add a decorative underline to the button text.
  • Underline Color – Select the color for the text underline.
  • Arrow – Add and customize an arrow icon associated with the button text.
    • Arrow – Choose the style of the arrow icon.
    • Custom Arrow – Upload or select a custom arrow design.
    • Space Before – Adjust the spacing between the arrow and the preceding text.
    • Hover Transform – Set an animation for the arrow on mouse hover, like rotation or shifting.
    • Arrow Size – Change the size of the arrow icon.
• Custom – Access additional customization options for buttons with a unique appearance.
  • Size – Configure the overall size and padding of the button.
    • Size – Select a preset button size (like small, medium, large).
    • Override Width – Specify a fixed width for the button, regardless of content size.
    • Full Width At – Choose at what screen size the button should expand to the full width of its container.
  • Background – Select a color or gradient to be used as the button’s background.
  • Outline – Add an outline around the button and customize its properties.
  • Color – If the outline is enabled, pick a custom color for it.
  • Width – Determine the thickness of the button’s outline.
  • No Fill On Hover – Make the button’s interior transparent when hovered over, showing only the outline.
  • Typography – Further refine the button text’s font properties.
  • Corners – Choose between squared, rounded, or fully circular button corners.
  • Corner Radius – If custom corners are selected, define the exact curvature radius.
  • Icon – Add an icon to the button and adjust its settings.
    • Icon – Pick an icon from a library or upload your own.
    • Position – Place the icon on the left or right of the text, or make it the button’s sole content.
    • Size – Resize the icon as needed.
    • Color – Change the icon’s color.
    • Space Before – Add spacing between the icon and the text, or the icon and the button’s edge.
    • Space After – Add spacing after the icon, if it’s not the last element.
    • Hover Transform – Choose an effect for the icon when the button is hovered over, like spinning or changing color.
  • Effects – Apply advanced visual effects to the button.
    • Transition Duration – Control how long hover transitions take to complete.
    • Scale On Hover – Make the button slightly enlarge when hovered over.
    • Shadow – Add a drop shadow to the button and customize its appearance.

Spacing

Manipulate the spacing around and between different elements to improve readability and layout aesthetics.

• After Image – Add space directly below an image element.
• Below Title – Insert space below a title or heading element.
• Above Button – Add space above a button element