Styles

The Styles option allows you to adjust and customize the appearance of elements on your website, including text, images, buttons, forms, and various types of widgets. Through Styles, you can change properties such as colors, fonts, borders, spacing, and other effects to ensure they align with the overall design of your landing page.

Here is a detailed guide on how to use the Styles option:

• Background: The Background Color option allows you to set the background color for the selected element on the page.

• Overflow: When the content inside a section or box exceeds its size, you can adjust how the section or box handles the overflow content by using Overflow.

  • Default: In some browsers or certain situations, visible is considered the default value. This means that if you do not specify an overflow content, the browser will treat it as visible.

  • Hidden: Content that exceeds the size of the element will be cut off and not displayed outside the element's boundaries.

  • Visible: Content that exceeds the size of the element will be fully displayed, even if it overflows outside the boundaries of that element. This is the default value in many cases.

• Box Shadow: The Box Shadow option allows you to create shadow effects for elements, making them stand out and appear more three-dimensional. You can customize the type of shadow, its position, color, opacity, and size.

  

  • Type:

    • Box: This is the standard shadow type, creating a shadow around the entire element.

    • Realistic: This shadow type creates a more realistic shadow effect, with varying opacity and thickness.

  • Position:

    • Outside: The shadow is positioned outside the element, creating the illusion that the element is lifted off the background.

    • Inside: The shadow is positioned inside the element, giving the impression that the element is recessed or sunk in.

  • Color: You can choose the color of the shadow using a color picker. The color of the shadow can significantly affect the perception of depth.

    • X: Determines the degree of the shadow's offset to the left or right of the element.

    • Y: Determines the degree of the shadow's offset above or below the element.

    • Blur: Adjusts the blur of the shadow. A larger value will make the shadow softer and more diffused.

    • Spread: Adjusts the size of the shadow. A positive value will make the shadow spread wider, while a negative value will make the shadow narrower.