Hook guide act

This block is meant to catch the interest of both customers that are ready to make a decision and those that still wants to know more before they do.

Guidelines

The block has three areas, one for a picture that is relevant to the topic, one for the ‘hook’ part, and one for the ‘guide’ part. The act part is the (potential) conversion link/button that is at the bottom of the hook content. Through the different areas we want to catch the interest of a wider audience, both those who are ready to act, and those that still feel the need to inform themselves more.

Hook-guide-act block

Usage

Through the ‘guide’ part we want to show undecided customers more information that is relevant to inform them in their decision. At the bottom of this part there will usually be a link to a story page where there is more detailed information regarding the topic. While under the ‘hook’ part we wish to engage the ones that are ready to go on and convert. Under the text in the ‘hook’ area is a button, that might link to a conversion page or another relevant conversion such as “Contact me” or similar depending on the topic.

Behaviour

The text in the areas fades out at the bottom of the block so that the buttons will fit without issues. So if you enter “too much” information, some of it will not be visible to the visitors. Make sure to double-check. You can select if you want the picture area to be to the left or rightmost side of the block under the ‘appearances’ tab in all properties mode in Epi when setting up the block.

Do's and don'ts

Do

  • Keep the information text short, we want to drive the user towards the links where they can either find more information or convert.

Don't

  • Don’t have too much text (see above).
  • Don’t have two of these blocks in a row, and if you HAVE to, make sure to have the picture in opposite ends to create some dynamics.

Desktop

 

Tablet

Mobile

Examples of use