Styling Page Blocks on the ABM Page

Modified on Thu, 30 May at 5:29 AM

Define the style for the elements within the Page Block using the Style options.

In this document, we will share into the various styles that can be applied to elements within the Page Block. Whether you're looking to enhance the visual appeal, optimize the layout, or create a cohesive design for your ABM Page, we've got you covered.

Learn how to make your ABM Page truly stand out with creative customization with these Style options:

Style Options

The Stying options contain the following: Visibility, Typography, Border, Background, Spacing, and Dimension.

Visibility

The Visibility option allows you to control the display of a specific element on both desktop and mobile versions of a web page. With this feature, you can choose to Show or Hide the element independently for each platform, ensuring optimal user experiences across different devices.

Note: On selection of Show/Hide options the Preview does reflect the same.

Typography

Typography settings contain various design attributes that influence the appearance of text on a web page.

These settings provide control over the following aspects:

Font Size: Determines the size of the text, making it larger or smaller to enhance readability and visual hierarchy.
Font size can be set using various units in CSS, each with its own unique characteristics.
Font Weight: Specifies the thickness or boldness of the text, giving it a different visual emphasis. Select from the drop-down options.
Font Family: Defines the typeface used for the text, allowing you to choose from default font families like Arial, Tohama, Verdana, and Helvetica to match the overall design aesthetics.
Manage Fonts: To add Google or Upload Custom fonts click on the Wheel icon.

Note: If you don't wish apply the system defined fonts, you can manage fonts at the Page Block level, as well as the Element level. To learn more on how to add Google Fonts or Upload Custom Fonts to your Page Blocks in your ABM Page, click here.
Color: Sets the color of the text, enabling you to create visually appealing and cohesive color schemes.
Line Height: Adjusts the vertical space between lines of text, impacting readability and overall spacing.
Text Align: Controls the alignment of the text within its container, offering options like left, right, center, or justified.
Text Decoration: Adds visual enhancements to the text, such as underline, overline, and line-through.
Text Style: Refers to additional styles applied to the text, such as italics or oblique.
Text Transform: Changes the capitalization of the text, converting it to uppercase, lowercase, or capitalized.

Border

The border options provide control over the appearance of borders around elements on the ABM page. Border options help you add visual distinction to elements.

Border Type: Select the desired border style from a dropdown menu. Choose from options such as solid, dashed, dotted, groove, and outset. Each style imparts a distinct visual effect to the border.
Border Color: When you select the Border Type, the Border Color option shows up. Choose a Border color from the palette.
Border Width: Here, you can specify the thickness of the border on 4 sides (Top, Right, Bottom, Left) using numerical values. Set it in pixels (px) or % by clicking on the PX or % symbols depending on your design requirements.
Border Radius: This setting enables you to round the corners of an element's border. By entering numerical values, you can adjust the curvature, creating softer or sharper edges.

Background

The background setting offers different options to define the background appearance of elements on your ABM page. These options include:

None: No background will be applied to the element, leaving it transparent.
Color: With the Color option, you can choose a specific color to be used as the background of the element. This can be a solid color, such as #ffffff (white) or #007bff (blue), enhancing the visual contrast and readability of the content.
Gradient: The Gradient option allows you to create a smooth transition between two colors, forming a gradient effect as the background. Gradients can be linear or radial, and they add depth and visual interest to the element.

Gradient Direction: Select the direction in which you wish to see the gradient transitions.

Gradient Color 1 and Gradient Color 2: Choose your desired Gradient Color 1 and Gradient Color 2. In a gradient background, Gradient Color 1 refers to the starting color of the gradient, and Gradient Color 2 refers to the ending color of the gradient.
Picture: Upload an image to be used as the element's background. This allows for adding branding elements, patterns, or visual elements that complement the content.

Add Image Size: This setting allows you to control how the image is displayed in relation to the element's dimensions.

Image Alignment: The alignment setting determines the positioning of the image within the element's background.

Image Repeat: The repeat option controls whether the image should repeat itself to fill the entire background, especially if the image is smaller than the element's dimensions. Choose Repeat or No Repeat.

Spacing

Padding controls the space between an element's content and the border. Set Padding by adding numerical value in PX, EM, or % by clicking on the respective symbols depending on your requirements
Margin controls the space between elements and their surrounding elements. Set Margins by adding numerical value in PX or % by clicking on the respective symbols depending on your requirements.

Dimension

Dimension settings include Width and Height fields, with options for Max and Min values to control element sizes and ensure responsiveness.

Presets option for CTA (Only on V3)

This option is seen when you select a CTA Button. Choose a Button style for your CTA.
Choose from three styles: Primary (bold and prominent), Secondary (less prominent), and Light (subtle and unobtrusive). Select the one that best suits your design.

Title Styling for Promotion

By default, the Promotion Blocks include three Tile elements with Title, Subtitle, Image, and CTAs.

When styling Tile elements, they are initially set to All Tiles, applying consistent styles to all of them. To add unique styling to each tile, select the Tile in the Editor and click on the This Tile option.

Reset all Styles

To discard the changes made on an element, click the Reset all Styles button.

Next Topic: Page Blocks Advanced Settings