The Easyrio HubSpot Landing Page Template

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 Easyrio Landing Page Template is a very straight forward template. It includes a header area (logo, slogan/phone number,  hero image,headline area), a main area (text area, form) and a simple footer area.

This template includes a lot of color picking, which I think easier to use than the built in function. Normally (for some modules) you can edit the styles by clicking on the item in the module list (in the left sidebar) – then at the top choosing ‘Styles’ at the top. You choose which method you want to use.
 

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: select a header/hero background image. The height of this area is set to 456 pixels, and the image is set to be 100% wide and auto height with the image centered. This means if your image is normally 1000 pixels wide and 500 pixels tall, on a bigger screen that is 2000 pixels wide your image will be stretched to 2000 pixels wide and 1000 pixels tall – BUT, it will only display 456 pixels from the center of the image (and the full width of course). Then again on smaller screens, it will keep the whole 456 pixels height and ‘cut’ the image from the sides instead. View the demo and resize the window and you will see what I mean.

Logo image: normal image module for the logo. It is set to have a maximum width of 250 pixels and a maximum height of 100 pixels.

Slogan / phone number: this area is a rich text module, so you can edit the text in any way you want. If you don’t want to display anything here, just leave it empty.

Banner text box: this area is a rich text module, so you can edit the text in any way you want. This area is always centered both vertically and horizontally.

Choose a background color for the header: use the color picker or add HEX/RGB code to change the header background color.

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 labels: use the color picker or add HEX/RGB code to change the color for the form labels.

Choose a background color for the form invalid input text: use the color picker or add HEX/RGB code to change the background color for the invalid input text.

Choose a text color for invalid input: use the color picker or add HEX/RGB code to change the text color for the invalid input text.

Choose a border color for invalid input: use the color picker or add HEX/RGB code to change the form input field’s border color when invalid .

Invalid input border, background color and text color. Shown if e.g. the email is written in the wrong format, the user tries to submit the form without filling out all required fields etc.

Choose a background color for the footer: use the color picker or add HEX/RGB code to change the footer background color.

Choose a text color for the footer: use the color picker or add HEX/RGB code to change the footer text color.

Choose a background color for the form button: use the color picker or add HEX/RGB code to change the form button background color.

Choose a text color for the form button: use the color picker or add HEX/RGB code to change the form button text color.

Main Text: this area is a rich text module, so you can edit the text in any way you want, add images etc.

Text Above the Form: this area is a rich text module, so you can edit the text in any way you want.

Form: normal form module.

Footer text: a ‘one line of text’ module.

That’s it, very simple! If you want to view the live demo, please click here. If you want to view the template on the HubSpot Marketplace, please click here.

If you have any questions about the template, do not hesitate to contact me by sending me an email at andreas@adeptodigital.com or filling out the form here.