A comprehensive guide for design & develop

Header Block

Header Block

Header Block

Header Block commonly includes the site name, tagline and logo. As the name suggests, it’s located at or near the top of your page. (The Visual Editor, has the option to place a header or multiple header blocks as convenient)

Header Block - Padma Unlimited
Header Block – Padma Unlimited

Options:

Use a background image.
Hide the tagline( not recommended, for best SEO results).

Important: To develop a more complex header, you can use a code block or several blocks instead.

Customizing the Website Header

Adding an image inside the block replaces the title and tagline as the content of the block.

Header Image without the Title and Tagline

  1. Open Grid Mode. Make sure the layout you want to change is selected in the layout selector.
  2. Right-click the header block, and click Open Block Options.
  3. In the options panel, click Choose Image for the Banner/Logo option.
  4. Choose one of the following:
    1. Under the Upload Files tab, upload an image from a local drive.
    2. Under the Media Library tab, click an image you have already uploaded.
  5. Click the Use Image button.
  6. To display the image at full size:
    1. In the options panel, toggle off the Automatically Resize Header Image option.
    2. On the grid, adjust the size of the header block to show as much of the image at your convenience.
  7. Preview the changes, and click Save.

A Wider header block image ►

If an image is wider than your header block, toggle on the automatic resizing option and it will set the image width to the block’s width. A resized image is centered vertically within the block, then adjust the height of the block to show the entire image.
To remove the tagline without adding an image, toggle on the Hide Tagline option.

Header Image with the Title and Tagline

If you want an image in addition to text in the header block, the image must be added as a background image.

  1. Open Design Mode. Make sure the layout you want to change is selected in the layout selector.
  2. Under the Blocks section of the element tree, click Header.
  3. If you want to change the header just for the layout you’re editing, click the Customize for Current Layout button.
  4. Expand the Background group.
  5. Click Customize next to Image, and click Choose.
  6. Do one of the following:
    • Under the From Computer tab, upload an image from a local drive.
    • Under the Media Library tab, click an image you have already uploaded.
  7. Click the Use Image button.
  8. To have only one instance of the image appear, set the Image Repeat option to No Tiling.
  9. Click Save.

To move the title and tagline to a different position over the header image, click each of these elements in the options panel and add left padding.

Header Image with Background
( No Title. No Tagline)

To display two images in your header block, follow both sets of steps above. Set a foreground image in the first set of steps (using Grid Mode) and a background image in the second set of steps (using Design Mode).

Community

Social networks for users of Padma|Unlimited