02 – Logo Header

Prev Next

Description

Add a brand logo, and set its alignment and size on desktop and mobile.

Default block view

Desktop

Mobile

Formatting options

Padding

This refers to the space between the block's content and its border. This can be edited in the Details Tab.

Option

Details

Default

Padding

Top

10

Right

20

Bottom

10

Left

20

Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

Option

Details

Default

Background Color

Block Background Color

#ffffff

Desktop Image Width

Used to change the width of a logo image in desktop view.

Option

Details

Default

Image width

Desktop Image width

150

Desktop Image Position

Change the image alignment in the desktop view using the drop-down.

Option

Details

Dropdown

Default

Image Position



Desktop



Center

Center



Left

Right

Mobile Image Width

Used to change the width of the logo image for mobile view.

Option

Details

Default

Image width

Mobile Image width

80

Mobile Image

If required, a separate image for mobile view can be applied. First, load the image to the content store. Then, paste the image URL into the Details Tab field. However, if one is not added, the system will use the desktop version and the mobile sizes set.

Option

Details

Default

Image

Mobile Image path

Blank

Mobile Image Position

Change the image alignment in the mobile view using the drop-down.

Option

Details

Dropdown

Default

Image Position



Mobile



Center

Center



Left

Right

Desktop Image Link

Used to set the image link for the desktop.

Option

Details

Default

Links

Desktop Image link

Blank

Mobile Image Link

Used to set the image link for mobile. Perhaps for a mobile-friendly website version. Equally, it can be the same as the desktop version.

Option

Details

Default

Links

Mobile Image link

Blank

ALT Text

The ALT attribute provides alternative information for an image if a user cannot view it (for example, because of a slow connection or their default setting is set to not display images). It is also useful for those with a visual impairment, whereby narration software will read out the image name or description. As this is a logo image, a brand name is desirable.

Option

Details

Default

Alt text

Mobile Image Alt Text

Blank

Mobile Header Logo Width

Used to set the desktop logo width for mobile if a separate mobile version has not been applied. This setting is in the Advanced Tab.

Option

Details

Default

Logo Width

Mobile Header Logo Width

80

Compatibility

There are no known render issues with this block