I feel like a lot of HubSpot users don’t even know there is a marketplace where you can purchase templates. Also, the marketplace is quite inadequate (they are currently updating/re-building the whole marketplace), there’s e.g. very limited space to show how the template ‘works’ and what you can do with it. That’s why I decided to write this ‘series’ – showing you what kind of features the Adepto Digital templates have.
About the template
The 20/80 Landing Page Template is a very simple template in every way. It includes a ‘header’ background image, logo, headline area, text area, form, social sharing buttons and a ‘footer’ where you can add e.g. a testimonial.
How to customize the template
Below is a screenshot of how the template looks in the inline editor. The module names should be explanatory enough, but I will go through them just in case.
(from top to bottom)
Select header background image: yes, the header background image. Please note that the height of the image area is always 300px and there is no color overlay option in the template, which means that if you want a dark image – you have to add a dark image.
Choose a color for the bullets: change the color for the bullets in the ‘main’ text box.
Choose a background color for the form: Use the color picker or add HEX/RGB code to change the form background color.
Choose a color for the form text: Use the color picker or add HEX/RGB code to change the form text color (Title, labels etc.).
Normally you can edit the form by clicking on “Form” in the module list (in the left sidebar) – then at the top choosing ‘Styles’ at the top. I have had some client’s that have had a hard time styling the form that way, so I wanted to make it easier by adding separate modules for this.
Logo: Image module where you choose an image from your files (just like any other image). The image is set to have a maximum width of 300px.
Headings: The area that is on top of the image. It is a rich text module, so you can edit the text in any way you want. Please note that the this text area is optimized for approx. the amount of text I have in my examples – if you have more, it will go outside the image on certain screen sizes.
Main Text: this area is also a rich text module, so you can edit the text in any way you want, add images etc.
Form: Normal form module.
Social Sharing: Social sharing module, available to add your facebook/twitter/linkedin/google plus/pinterest/email URLs. If you don’t want the module visible, just uncheck them in the sidebar.
Testimonials Text: this area is also a rich text module, so you can edit the text in any way you want.
Logo images: this is ONE image module, so if you want to display multiple logos like in my example – you have to add them in to one image before you add the image.
Address: A ‘one line of text’ module. If you want to edit the layout, you have to go to the ‘styles’ tab (as explained under Choose a color for the form text). If you don’t want to display anything here, just leave it empty.
Choose a background color for the footer: Use the color picker or add HEX/RGB code to change the footer background color.
- Posted by Andreas Westerlund
- On June 29, 2016