Landing Page Template basics

Develop, Build & Integrate CMS Development
1

Hi, I’m creating a landing page. The existing templates don’t match what I have in mind or don’t seem to be changable enough, so I’m designing a new landing page template. I’ve tried to find these answers myself, but I’m stuck.

-in page template design, how allow my user (who’s will create a landing page based on my template), to change the hero image? (Or, does the hero image have to be non-editable (i.e., I must create a separate landing page for each desired hero image) because the hero image is baked into the template?).

-in page template design, how add VERTICAL spacing/padding between sections/containers. Horizontal spacer is a drag-and-drop piece of cake. But how add Vertical spacing?

-How ad horizontal rule/line (like, as a visual separator between sections)?

-How change background color of a section?

Hopefully I do not need to learn CSS to affect these basic design elements.

Here is my work in progress. (I started by cloning the Lander landing page). https://intro.inpixon.info/explore-shoom

Thank you!

2

@Scott-H,

I believe you will have to get your hands a little dirty with some basic css to accomplish some of your goals.

for the customizable image: you can use the image module. this will allow the image to be changed at the page level. Yes, you will need unique landing pages based on this template to have multiple banner images

for the vertical spacing, it would be best to add a little css. if you want a consistent amount of space between sections, add a class called section to each of the template rows. Then, in your css, you can add the following

.section{
 padding: 20px 0. 
*/the first number is the top and bottom. the second is the left and right */
}

that will add 20px of padding to the top and bottom of each section.

if you would like to have a line between your section, you could change the above code to look like this

.section{
 padding: 20px 0. 
 border-bottom: 3px solid #666;
}
.section:last-child{
 border-bottom: 0px
}

what this does is put a solid border of 3px with a hex color of #666 under each section and the last-child rule removes that from the last section.

now, if we want to change the background of a section, we can add another class to the whatever section(s) we want to have the color. so, back in the template editor, add a class of section-color1 to whatever sections you want to have the same color.

then, in the css we would add:

.section-color1{
 background-color: #e1dde6
}

this will add that color to all sections with section-color1 as a class. you can make other classes and have different colors as needed

to make the section full width, you may need to group items.

see screenshot for an example of two rich text fields grouped together

Design_Manager___HubSpot.png
Design_Manager___HubSpot.png1112×367 35 KB

I think you can get this done! dont hesitate to reach out for more help along the way!

3

Hi, Dennis, thanks so much! That was very kind of you to write such a detailed message and to answer my questions so specifically.

If I might ask a followup: So, based on the fact I need to use CSS just to change a little thing like vertical spacing or section background color, I’d say the HS page designer is less mature than most Wordpress page builders I’m used to; so be it. Do you have a recommendation for the situation where our desired landing page design will change from day to day? For example, day 1, we might want section1 = hero image with CTA button, section 2= video, section3= form. The next day, we might need section 1= hero image with no CTA, section 2= a 2-column image+text section, section 3 = CTA button. What I was looking for, but don’t see, is an ‘uber’ landing page template, where the user, when creating the landing page, can use/delete/reorder a variety of section types. Without that, I seem to be forced to create a new landing page template (hassle) everytime I want to create a new landing page.

If that’s indeed the situation, then I’m tempted to forgo the HS-hosted landing page, and opt to create the landing page in Wordpress instead (where the page creator lets me drag in any element type needed and tweak padding, colors, etc. without CSS). But, if I don’t host the landing page in HS, I’ll lose some valuable analytics, if I’m not mistaken.

Sorry for the rambling question, but hopefully you see the decision points I’m trying to navigate. Thanks again!

4

@Scott-H,

You are going to want to create several templates to accomodate your various pages.

My standard practice is to create a full width template, a 2 column (1/2 - 1/2) template and a 2 column (2/3 | 1/3)

I change these columns to “flexible columns” When you select a template to build your page, you can add various content types to these columns and drag and drop.

When you are adding to the page, each module you add will have an option to set spacing, color etc which is similar to a wp visual builder.

With that being said, I do not believe this type of page building scales well (here or on wp) soon, consistency issues will be introduced and your 3rd landing page will look a bit different that you 1st (and begins the game of telephone)

If this is not a big deal, then this approach will work, but I think it is best to put a little extra effort up front to save you time and keep things consistent in the long run.

Does that make sense?

5

Thanks again, Dennis. That’s really nice of you to help out like that!

6

you can also try looking inside Marketplace, there are lots of Custom Module that are free and can do what you want.