Headline Section

You can add a Headline Section to your page directly so you can add a description for the page. When you want to display an image and the relevant text against it, you can use this section.

The image uploaded here does not support lightbox mode. It can be rescaled by dragging the image corners.

This section can be primarily used for an About Me/Us page. You can also link the image to any page you wish to.

In this article:

1. Add a Headline Section
2. Managing the content
3. Managing the layout
4. The Style options

Add a Headline Section:

• A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
• On your page, click on the blue + icon to add a New Section to your page.

• You will now see the section categories on the left side.
• Choose the Headline Block (1) option where you can choose from the different layouts (2).

• Choose any section layout and click on it to add it to your page.
• As the section is added, you can edit the text and upload any image.

Managing the Content

Once you have added the section: 

• Click on the Edit Headline (1) button.

• This will open the Headline Item Panel (2).

From here, you can:

• Upload a Primary Image (1) for the Headline block.
• Upload a Secondary Image (2) for the Headline block (only on selected layouts).

• Add a Title (3), Subtitle (4), and Description (5) of the Headline block. Before adding the description, check this article.

• Add any type of Link (6) to the headline section. You can add a Button/Image link/Social Icon/Text Link. Learn more.
• Save (7) your changes.

Managing the Layout

• Click on the Manage Headline (1) button.
• Choose the Layout (2) tab.
• Select the Layout (3) for your section and Save (4) the changes.

The Style Options

• Click on Manage Headline (1) button.
• Choose the Style (2) tab.
• Change the Style for the section elements and Save (3) your changes.

You will have multiple style options for the section: 

Images 

1. Choose the Image Crop for the image. You can set the image as Square, Circle, Landscape,  Portrait, and Dynamic.
2. Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the Corner Radius of the list item images.
   Using the corner radius field, you can create different shapes of image. In case you specify 500 px here, the image would display in a circle shape.
   In case you have chosen split corners, you can set different corner radius for each corner. Know more. 
3. Choose to Animate Images on Hover by clicking on Yes.
4. Choose from the different Animation Style for images on hover.

Alignment & Color 

5. Align the content in the Headline section horizontally. You can set it to be Left, Right or Center aligned.
6. Align the content in the Headline section vertically. You can set it to be Top, Bottom, or Center aligned.
7. Select if you want to keep the Base Color (background color of the textbox) to Default or Custom.
8. If you have chosen Custom for the base color, you get the option to select the background color. You can also specify the opacity of the Base color.

Size & Space 

9. Specify the Image Width for the Headline block image.
10. Specify the Content Width for the Headline block text.
11. Specify the Space or Overlap between Text Card and Image (in %).
12. Specify the Space below the Title (in %).
13. Specify the Space below the Subtitle (in %).

Text 

14. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
15. Set the Title font style for the Headline block section.
16. Set the Subtitle font style for the Headline block section.
17. Set the default Description font style for the Headline block section.

Buttons & Links 

You can add different types of buttons to Headline section. They are as follows:

• Normal Button (18), Image Button (19), and Icon Button (20).

21. Specify the Space Between different Buttons / Links.
22. Specify the Space Above Button / Links inside the Text Card.
23. Set the Width of Button inside Text Card.

Button Size 

24. Set the Size of Normal Button. You can chose from three options : Small, Medium, and Large.
25. Specify the Height of Image Button in pixels.
26. Set the Size of Icon Button in pixels.

27. Set the Icon Type for the Icon Button.
28. Choose the Color Style for Icon inside button. You can select the icon’s brand color or specify any color of your choice.
29. Set the Icon Color of Icon button. You will see this option only when you enable Selected Color (28) option.
30. If you have selected Custom in previous step (29), you can set your preferred color for Icon inside the button.
31. Select the Background Color for the Icon Button.

See how the Corner Radius works: 

Related Articles:

• Types of Sections
• Section Visibility
• Build your Website using Pixpa