EN
Searching...

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. Autofit Text Layout
  5. 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 Edit Headline (1) button.

  • Choose the Layout (2) tab.
  • Select the Layout (3) for your section and Save (4) the changes.

Pro Tip

To create a Full-Width section, choose any layout ranging from 11 to 16.

Autofit Text Layout

The Autofit Text section is a powerful tool for creating dynamic and responsive text content on your Pixpa website.

This allows you to set a maximum font size, and the text will automatically resize according to the available screen size, space, and length of text ensuring optimal readability and aesthetic appeal.

Add Autofit Section to the page

  • Click on the blue + icon to add a New Section to your page.
  • Select the Headline (1) section and choose from one of the layouts (2) marked in the screenshot.
  • The section will be added to the page.

Edit Autofit Section

  • Click on the Edit Autofit Text Block button on the top right corner of the section.
  • Under the Content tab, you can specify the text content for the section using 1st, 2nd, and 3rd text fields.
  • Font size of the text will automatically be adjusted according to the screen-size and length of the text. Finally, Save (4) the changes.

Style Autofit Section

Customize the styling of the section from the Style tab. You will find the following options here:

  1. Line Height: Specify the vertical space between lines of text.
  2. Max Font Size: Set the maximum font size that the text can reach.
  3. Text Alignment: Align the text horizontally within the section.
  4. Font Family: Choose the font family such as Heading 1, Heading 2, Paragraph, etc.

Note

The text size will not follow the design section’s specified size but will adjust based on available space and text length.

The Style Options

  • Click on the Edit 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: 

  1. Image Style options
  2. Image Border options
  3. Alignment & Color
  4. Size & Space
  5. Text options
  6. Buttons & Links

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.

Image Border Options

  1. Enable / Disable border around the images by switching the toggle.
  2. Choose to have a common border on all sides of images or you can specify the borders separately for each side.
  3. Specify the width of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
  4. Select the Border Color from color picker.
  5. Select a preferred Border Style from the dropdown.
  6. Determine the border width for mobile devices, aligning it with the width chosen for desktop.

Alignment & Color 

  1. Align the content in the Headline section horizontally. You can set it to be Left, Right or Center aligned.
  2. Align the content in the Headline section vertically. You can set it to be Top, Bottom, or Center aligned.
  3. Select if you want to keep the Base Color (background color of the textbox) to Default or Custom.
  4. 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 

  1. Specify the Image Width for the Headline block image.
  2. Specify the Content Width for the Headline block text.
  3. Specify the Space or Overlap between Text Card and Image (in %).
  4. Specify the Space below the Title (in %).
  5. Specify the Space below the Subtitle (in %).

Text 

  1. Click on the Change Text Style button to visit the Design section and manage your font sizes and styles. 
  2. Set the Title font style for the Headline block section.
  3. Set the Subtitle font style for the Headline block section.
  4. 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 (1), Image Button (2), and Icon Button (3).

  1. Specify the Space Between different Buttons / Links.
  2. Specify the Space Above Button / Links inside the Text Card.
  3. Set the Width of Button inside Text Card.

Button Size 

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

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

See how the Corner Radius works: 

Tagged:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

Contact Us