Magento Commerce, 2.3.x

HTML Code

Use the HTMLHyperText Markup Language: A standard for tagging and structuring text, images, videos, and other media on a web page. Code content type to add snippets of HTML, CSSCascading Style Sheets: A style sheet language that controls the appearance of HTML documents; a way to control the appearance of text, graphics, lists, links, and all other elements on a web page., and JavaScriptA scripting language used with HTML to produce dynamic effects and interactions on web pages. code to the stage. For example, you might want to add custom HTML, declare a CSS class that can be applied to an element on the page, or add a snippet of code for a logo, button, or bannerPromotional graphics displayed either horizontally on the top of a web page or vertically on the left or right margins. Website advertisements are often displayed as banners. that you received from a third-party provider.

In the following example, you will learn how to embed Google Font code, and declare custom heading classes that override the current style sheet.

  • HTML Code Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the HTML Code container to another valid place on the page.

    Settings

    Opens the Edit HTML Code page, where you can change the properties of the container.

    Hide

    Hides the HTML Code container.

    Show

    Shows the hidden HTML Code container.

    Duplicate

    Makes a duplicate copy of the HIML Code container.

    Remove

    Deletes the HTML Code container and its content from the stage.

  • HTML Code Settings

    Setting

    Description

    (Text Box)

    A text box that is used to enter HTML, CSS, and JavaScript code. Code snippets which belong in the <head> section of the page can be entered here.

    Advanced

    Alignment

    Determines the horizontal alignment of the HTML Code container. Options:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns the divider along the left border of its parent container, with allowance for any padding that is specified.

    Center

    Aligns the divider in the center of its parent container, with allowance for any padding that is specified.

    Right

    Aligns the divider along the right border of its parent container, with allowance for any padding that is specified.

    Border

    Determines the border style that is applied to all sides of the divider container. Options:

    Default

    Applies the default border style from the style sheet that is associated with the current theme.

    None

    Provides no visible indication of container borders.

    Dotted

    The container border appears as a dotted line.

    Dashed

    The container border appears as a dashed line.

    Solid

    The container border appears as a solid line.

    Double

    The container border appears as a double line.

    Groove

    The container border appears as a grooved line.

    Ridge

    The container border appears as a ridged line.

    Inset

    The container border appears as an inset line.

    Outset

    The container border appears as an outset line.

    Border Color

    Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.

    Border Width

    Determines the width in pixels of the container border.

    Border Radius

    Specifies the size of the radius that is used to round each corner of the container border.

    CSS Classes

    Specifies the names of CSS classes from the current style sheet which apply to the container. Separate multiple class names with a space.

    Margins and Padding

    Determines the size, in pixels, of the outer margins and inner padding of the row. Enter each corresponding value in the row container diagram. Options:

    Margins

    The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the container. Options: Top, Right, Bottom, Left.

    Padding

    The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the container. Options: Top, Right, Bottom, Left.