• Blog

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.


Easyrio HubSpot Template
(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 .

Easyrio_invalid_input
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.
 

Share on Facebook Share
Share on TwitterTweet
Share on Google Plus Share
Share on LinkedIn Share
Send email Mail
  • Posted by Andreas Westerlund
  • On July 8, 2016

0 Comments

Leave Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • The Demo HubSpot Landing Page Template
  • The Simplory HubSpot Landing Page Template
  • The Beta HubSpot Landing Page Template
  • The Easyrio HubSpot Landing Page Template
  • The 20/80 HubSpot Landing Page Template
Categories
  • Employment
  • HubSpot
  • Inbound Marketing
  • Project Management
  • Uncategorized
  • Web Development

The 20/80 HubSpot Landing Page Template

Previous thumb

The Beta HubSpot Landing Page Template

Next thumb
Scroll

Adepto Digital logo

© Adepto Digital – Privacy Policy

Contact:

Email: contact@adeptodigital.com
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkRead more