Columns
After inserting a block in Live Preview, you can configure the settings
Last updated
After inserting a block in Live Preview, you can configure the settings
Last updated
It allows you to change the width of columns
It allows you to change the gap between columns
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:
Linear: Change the angle of the gradient
Radial: Change the positioning (right center, left top, left center, etc)
Color and Color Location: Set the color and the location of that color in a gradient. A gradient allows having up to 5 colors.
Browse Image: Image Selection
Image URL: A web address that specifies the location of an image
Image Position: This setting allows you to position your image within the frame of your screen such as left top, left center, right top, right center, etc.
Image Repeat: Sets how background images are repeated (Repeat, Repeat horizontal, repeat vertical, etc.)
Image Size: How an image should be resized to fit its container
Contain: The image keeps its aspect ratio but is resized to fit within the given dimension
Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
Auto: The image keeps its aspect ratio and fills the given dimension automatically
It specifies the default alignment for items inside the flexible container
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
It allows you to define the radius of an element's corners
Inner Spacing (Padding): Padding is inside of the border (or edge) of your element. If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements
It allows you to adjust the position of elements in the block
The z-index property specifies the stack order of an element
An element with greater stack order is always in front of an element with a lower stack order
The ID of a block, which is used in Custom CSS, Custom Javascript
The class of a block, which is used in Custom CSS, Custom Javascript
You can configure the Hover Styles by turning off the status of Default Hover Styles
a. Background color
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:
Linear: Change the angle of the gradient
Radial: Change the positioning (right center, left top, left center, etc)
First color & first color location
Second color & second color location
b. Background image
Image URL: A web address that specifies the location of an image
Image Position: The position of the background image such as left top, left center, right top, right center, etc.
Image Repeat: Sets how background images are repeated (Repeat, Repeat horizontal, repeat vertical, etc.)
Image Size: How an image should be resized to fit its container
Contain: The image keeps its aspect ratio but is resized to fit within the given dimension
Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
Auto: The image keeps its aspect ratio and fills the given dimension automatically
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
It allows you to define the radius of an element's corners
Inner Spacing (Padding): Padding is inside of the border (or edge) of your element. If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements
It allows you to adjust the position of the hover
The z-index property specifies the stack order of an element
An element with greater stack order is always in front of an element with a lower stack order
Column styling is the configuration of each column, its settings are the same as Section styling
Apply only to Mobile mode
Responsive design
Includes 1 toggle ‘Do not stack on Mobile’ - turning on or off stacking on mobile view when the design is intended to display on Desktop type
Align column on a column to make components shown fit Mobile
You can set the condition to display the block
Condition: It includes None, Show All Columns when, Show Column when, Hidden All Columns when, Hidden Column when
Field: It contains Business Object attributes
Index: The number of the row in the Business Objects Data table
Operator: It includes contains, does not contain, starts with, doesn't start with, ends with, doesn't end with, etc.
Value: you can input the value or select an attribute or an event from the Groups set in Content Sources
The Business Object attributes in Field are selected Business Object in Template Setting
If Business Object in Template Setting does not be selected, a popup of available Sources will appear
You can adjust the column number and type by selecting the option (as photo) or clicking
