Styling ABM Page Block: Header

The ABM Page Header is a top-of-the-page section that incorporates your Company logo, Prospect Logo, Contact Card, and CTA.

The Header is a Pre-defined block and by default, it is included on the page.

However, if you have removed the Header, you can easily re-add it. Go to Add Page Blocks then select Header. 

Or you could mouse hover on the page block in the Editor page and click on the Add Block button. 

Here, you have the option to choose either a pre-defined or a customized Header block.

To Customize the Header Block, there are two ways to access the Configuration option:

• Click on the Header block in the Editor. The Configuration panel opens on the left with the Content tab.
  Or
  
  
• You can also go to the page options on the Left and click on the Header Block.
  

To begin Customization, follow the steps below: 

• The Header Page Block has the following elements on the Content tab: Logo, Show Prospect Logo, Show Contact Card, Sticky Header, and CTA.
  
  

• By default, the Company Logo is displayed as the Logo in the Header. To modify the Logo, click Choose Image to upload the logo. Note: By default, the ABM page-level Logo takes precedence, followed by the Hub level, and the Company level defined Logo.
  
  
• To add Prospect Logo, enable the Show Prospect Logo toggle then choose the desired account from the Preview as drop-down. The Account Logo as seen in the ABM Account is the Prospect Logo that is displayed.
  

  Note: If the Account does not have a Logo attached it will be blank. Go to ABM > Account and add the Logo to the selected Account.
   

• The Glyph option appears when Show Prospect Logo is toggled on. Choose a Glyph from the options to appear between the Company Logo and the Prospect Logo. Edit the color by clicking on the Glyph within the header and choosing a color from Style > Topography. 

  

  
  

• Enable the Show Prospect Logo First toggle to display the Prospect Logo before the Company Logo.
  
   
• Enabling the Show Contact Card toggle displays Contact Card Heading, and Contact Card Position. The Account Representative's Contact Card is displayed in the Header Block.
  
  • To configure the Contact Card Heading, enter your desired heading text in the Contact Card Heading field. This heading will display when the ABM Page loads, both in preview mode and live on the page.
    This is how the Contact Card Heading will be displayed both in Preview Mode and on the Live Page.

    Note: The text below the Contact Card Heading is the Welcome Notes configured at the ABM > Account Reps > Welcome Notes.

     
  • To configure the Contact Card Position, choose either the Top or Bottom button. Selecting Top will display the Contact Card in the Header section, while Bottom places it at the end of the ABM Page.
    This is how the Contact Card Position will appear in both Preview Mode and on the Live Page, allowing you to see and confirm its placement at either the top or bottom of the ABM page during design and runtime.
    
    Top:
    Bottom: 
• To add a CTA to the Header section, fill in the Button Text and add the URL for the CTA to appear. 

  
  

• By default, the 'Open In New Tab' toggle is enabled which allows the CTA URL to open in a new tab.
  
• To enable the Sticky Header, activate the Sticky Header Toggle.
  

• Click on the Style and Advanced sections to add styles. For details click here.
  
  
• Click Save As Global Block to save the Header Page Block as Global Page Block. Learn more about Global Page Blocks here.

  
  

Next Topic: Styling ABM Page Block: Banner