Styling Elements on a Variation Page

The Styling 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 different font families like Arial, Tohama, Verdana, and Helvetica to match the overall design aesthetics.
  
  

• 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.

Related Topics:
Publishing a Web Experience