A stunning banner image (Hero image) that is perfect for the beginning of any page. This banner is fully responsive, so it looks great on mobile devices.

It also comes with a bunch of layout and styling options to fit your needs. Let’s get started!

Adding a Hero Block to your page

  • Select the Plus sign for adding a new block and search for “LSX Banner”.
  • Select the LSX Banner (Hero Image) block option.
  • On the right hand side of your edit screen you have your block toolbar.
  • Once the block is selected, you can begin adding your banner image and configuring as desired in this toolbar.

Configuring the block

Let’s go through the options available:

Banner Image – Here you add the image you wish to use as your banner. We recommend a size of 1600px by 600px for the optimum display.

Background Colour – Section background colour

Text Colour – Change the colour of the title and subtitle text on your banner image.

Text Background Colour – We have set this as to add an appealing coloured box around your banner title and subtitle.

Text Background Opacity – If you’ve set a colour in the previous step, you can add opacity to the colour here.

Button Options – Here you can change the look and feel of the button on your LSX Banner if you wish to display one.

  • Flat Button – Choose whether your button will be flat or shadowed.
  • Button Size -Choose the size of the button from the four size options available.
  • Button Shape  – Set the button to be round, circular or square.
  • Ghost Button – Choose to have the button transparent and bordered or not.
  • Button Color – Set the button colour.
  • Button Shadow Color – Set the box-shadow for the button.
  • Button Hover Color – Add the colour of the button during hover state.
  • Button Text Color – Set the colour of the button text.

Once you have completed your configuration, you can choose to add additional content to your banner, such as a title and button.

  • Bring your attention back to the block editor. Here you can see the new LSX Banner Block with your chosen background image.

Logo Image – Here you can add a small logo image which will appear at the top of the banner, above the banner title.

Banner Title – Next you set your banner title and subtitle.

Button text – Add the text that you would like to appear on the button.

Button Link – You can then add the button link in the URL field below. If you wish to search for a page or post on your site to link to, simply begin typing the name of the page and select it from the autocomplete dropdown provided.

Once this is complete, select “Publish” and preview your banner.

Note – Are you making use of the Yoast SEO Plugin with breadcrumbs enabled? The LSX Banners block automatically registers what page you are on and adds a breadcrumb bar to the top of your banner!


Need help with a different LSX Block?

Need help with a different LSX Block? Find the walkthrough you are looking for from our block documentation homepage.