Skip to content
Piedmont Plastics - Plastic Sheet, Rod, Tube, Film

Hero Bold

The hero is the eye catching portion of a web page. Hero Bold accomplishes demonstrating bold typography and emphasizes stunning imagery. Selecting the Hero Bold page builder block will steal the show when users land on the page where it's used.

hero bold desktop

To emulate the block above let's consider the the Hero Bold blueprint.

hero bold blueprint

What does each field do?

  • Show displays the Eyebrow Text field which adds a nice handwritten font effect over the main heading.

  • Heading and Description make up the rest of the text area.

  • Image is what makes this block pop. An image can be selected from the Page Builder directory by selecting the browse button or a new image can be uploaded by clicking Upload file. Be sure to click Set Alt as this is meets SEO best practices.

  • Image Position sets the placement of the image on the page to either the right side or left side of the page.

  • Show Graphical Element Allows for the selection or upload of a graphical accent element to the Graphical Element field. (note the blue topographical lines resting above the yacht image).

  • Element Position is displayed only if Show Graphical Element is selected. underlay sets the graphical element behind the image and overlay sets the graphical element over the image.

  • Show Image Shadow will give the image in this block somewhat of an elevated effect on the bottom.

  • Show Image Backdrop turns displays the element that sits in the foreground of the image when it's toggled to on. If toggled to on Image Backdrop Color is displayed and it displays an element like the blue one in our example image of the block. Alternate color options are available for selection.

  • Hero Background Color sets the background color for the entire block. In our example cool is selected which gives our hero that nice cool blue color.

A neat feature to take advantage of when building out the content is using the Live Preview option by clicking the Live Preview button on the top right corner of the screen which opens a window where you can view your edits changing on the page in real time.

Once the content is added and everything seems to be in a good place for publishing click Save and Publish. The world is now ready to see your version of Hero Bold!