topic Re: Landing Page Design Help in CMS Development

Landing Page Design Help

jerranalley — Fri, 22 Feb 2019 16:22:11 GMT

Hi there! I am running into a few issues with our landing page design that I was hoping someone could help me with. Here are the problems on this page: https://app.hubspot.com/content/5324475/edit/7553067878/content

1) How can we center our logo? It was a locked field and I can't figure it out in the design settings

2) We deleted a few sections that were not needed from the original template and now the text is running into each other, how can we put them back in the place they were suppose to be?

3) On this landing page: https://app.hubspot.com/content/5324475/edit/7597091090/content Our form has two issues, one question (what type of items) is too large compared to the other text and just below that on location preference there are bullet points and check boxes, any way to fix that?

Thanks!

Re: Landing Page Design Help

Anton — Fri, 22 Feb 2019 21:44:08 GMT

Hi @jerranalley

unfortunately you've posted links to the template inside your Hub. Nobody who isn't in your Hub is able to access them, except you add him/her to it.

If you post some preview links(without "display options" - the second option in the dropdown)

this option

we can (re)view it and help you

Without looking at your template/sourcecode:

To center the logo you should try following soultion(there are a few different possibilities how to center it):

- the logo module should be "full-width" (not the image, just the module)

- go to your main css and look for the logo class/ID

- most likely there will be something like

#LOGO-ID-NAME img{
- SOME STYLING -
}

.LOGO-CLASS-NAME img{
- SOME STYLING -
}

you can add following line at the end

margin:0 auto;

your code should look like this now:

#LOGO-ID-NAME img{
- SOME STYLING -;
margin:0 auto;
}

otherwise you can try to add/search for the element class/ID(it's without the img-attribute) and add a text-align:center. The code should look similar to this:

#LOGO-ID-NAME{
- SOME STYLING -;
text-align:center;
}

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

Re: Landing Page Design Help

jerranalley — Mon, 25 Feb 2019 22:40:19 GMT

Does this help? http://event.leisurlist.com/bark-bash?hs_preview=vnqHsfJZ-7553067878

Re: Landing Page Design Help

jerranalley — Mon, 25 Feb 2019 22:41:35 GMT

Or this https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=5324475&tc_deviceCategory=undefined&template_layout_id=7690127682&updated=1550698980036

Re: Landing Page Design Help

jerranalley — Thu, 28 Feb 2019 17:08:52 GMT

@Anton

Re: Landing Page Design Help

Anton — Sun, 03 Mar 2019 16:57:47 GMT

Hi @jerranalley ,

sorry for not responding earlier.

It seems that:

- your logo is to big(that's what causes the issue)

- some CSS formating is wrong(did you change something?)

Following changes worked for me:

- changing the logo size with css

.jtc_event_logo{
text-align:center;
}
.jtc_event_logo img{
width:auto;
height:100px;
}

- changing some values from the ".hero_heading_block" element

from:

#hero-background-image .hero_heading_block {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;

#hero-background-image .hero_heading_block {
    text-align: center;
    width: 100%;
    margin: 25px 0;
}

Does this work for you?

best

Anton

Did my post help answer your query? Help the Community by marking it as a solution

Re: Landing Page Design Help

jerranalley — Mon, 04 Mar 2019 14:57:40 GMT

@Anton how do I access the CSS on this template? I don't even know where to access to change it.

Re: Landing Page Design Help

Anton — Mon, 04 Mar 2019 19:17:26 GMT

@jerranalley

you can access your template CSS by:

- navigate to your design manager(Marketing => Files and Templates => Design Manager);

- search for the template(you can find the name by editing the page you're working on und settings and clicking "advanced options")

- open the template by clicking on "edit this template"

- you'll find the used CSS file under "linked stylesheet"

- click on the name and you'll see the whole CSS for the page/template

- go to your design manager and search for the template(top left of the design manager you'll find the search field)

- open the CSS and edit it as you like

I suggest to backup your original CSS by right clicking on the file(after you found it) in the left sidebar and select "duplicate". By that you can always come back to the original styling - there are more options how to backup but this is the easiest one.

To navigate faster in the CSS(which can be - depending on the template - extremly big) you can activate the search-function by pressing STRG+F(Windows) or CMD+F(Mac OS) in the CSS(and in every HTML, custom module...).

Here some pictures that should help you

the name of the Template

the linked stylesheet(CSS file)

Re: Landing Page Design Help

jerranalley — Mon, 04 Mar 2019 19:54:29 GMT

I think I got it fixed partially but it's still running over, see it here https://event.leisurlist.com/bark-bash @Anton

Re: Landing Page Design Help

jerranalley — Mon, 04 Mar 2019 19:56:04 GMT

@Anton I also don't need the grey background....

Re: Landing Page Design Help

Anton — Mon, 04 Mar 2019 23:27:43 GMT

I could find your template @jerranalley and tested just your logo to get things right from the top 😉

I don't know how you(or your webdev) modified the template - here's my solution:

1. Backup every text(if you don't have it as a text/word... doc)

2. reset everyting what has been modified on the template - so you can work on a clean base

- you can either download the pack again(easier)

- go back via the revision-functionality in the design manager(open the template, every group and every file) and select the first record and hit "restore/ok"

After you did this you can work on a "brand new" template:

1. Getting your Logo inside the Template

Open(or clone and open) the "Header - PawPaw Event Landing Page" Template

- delete the "Header Slogan" module on the right if you don't need it

- select the "Logo" module and type

text-align:center;

inside the inline-styling input. After that click on

- "replace" in the logo section

- select your logo

- give it an alt-title(if there is none)

- and type "100" as the second(size) value

- if you want to link the logo - put the desired link url below the two values

It should look like this

the inline-css inputthe image size

Click on "publish"(top right, orange button)

You can close this template now since we don't need it anymore

2. Building the "main part" of the template

Open the "PawPaw Event Landing page" template.

There are many so called "containers" inside the template - each container is like a own section. For best results change only the modules not the groups.

This means:

- The first container is called "Hero Section", the second "Speaker Section"...

- The first module is called "Background Image", the second "Hero Section Main Heading"(not Hero Heading Block)

If you don't need a container - delete it completly(not just the modules and groups inside)

As we build the page you've provided I would recommend to: delete every container/section except "Hero Section", "Testimonial Section" and "Sponsors Section".

- we'll use the "Hero Section" for the Hero Image(your dog image)

- "Testimonial Section" for the information and the CTAs

- the "Sponsors Section" for the sponsor image

2.1 The Hero Section

If you don't need a CTA - delete "Hero Section Call-to-Action"

2.2 Testimonial Section

- replace "Testimonial Section:Subtext" with a regular rich-text module

- remove the flexible column("Add testimonials here") completly

- drag&drop a rich-text module inside the "Page Center" container(the one which hold the flex-column)

- drag&drop a CTA module below the rich-text module(inside the "Page Center" but not inside the rich-text module)

- right-click on the CTA module and select the first option(seperate/divide or simmliar)

- repeat the last two steps until you have the desired amout of CTAs inside the "Page Center" container

2.3 Show the world who's supporting you(Sponsors Section)

- remove 3 of the 4 "Client Image" modules

- select the one which left and type

text-align:center;

inside the inline-styling input

3. The Footer

Open the "Footer - PawPaw Event Landing Page" Template.

- Remove the Slogan(if you don't need it)

- Center the "Page Footer" module (you should know how it's done by now 😉 )

- don't modify anything in the "Custom HubL" module unless you know what you do!

- publish the template

As the template is build we can move on.

Navigate to:

Marketing => Website => Landing Page and create a new one

select the template you've build right now. If you didn't rename it it's "PawPaw Event Landing page". Give your page a name like LP_Bark-Bash and hit "create page".

You should see the page with the template you've build.

On the very left you'll find a small sidebar with 4 icons. Click on the third one(looks like a box). The sidebar will expand and you should see all of your modules that are inside the template.

By clicking on a module you can edit the content of it.

After you've changed everything you like, go to the settings(top center) and give the page a page title. If you want you can edit the page-url right now(you can do it later, but then there gonna be redirects and that's kinda bad for SEO)

Hit on save(or publish) and you're done 🙂

Hope this helps

p.s:

If you want the logo inside the "Hero Section"(without the grey background) simply drag&drop a Logo module inside the "Hero Heading Block" and delete the "Header - PawPaw Event Landing Page" from above. (You'll need to center it too 😉 ).

If there shouldn't be enough space between the logo and the headline - add

margin-bottom:25px;

to the inline-styling of the logo module(you can change the amout of px as you like)

best

Anton

Did my post help answer your query? Help the Community by marking it as a solution

Re: Landing Page Design Help

jerranalley — Wed, 06 Mar 2019 03:28:08 GMT

@Anton

Ok I think I've almost got it but the bottom p.s. part tripped me up a bit, see what's happening here: https://event.leisurlist.com/bark-bash

Also, is the testtimonal part suppose to be formatted in that way?

Re: Landing Page Design Help

jerranalley — Wed, 06 Mar 2019 03:40:40 GMT

@Anton I also tried to update our background image, its not showing up and I assume it is a sizing issue?

Re: Landing Page Design Help

jerranalley — Mon, 11 Mar 2019 15:30:49 GMT

@Anton any update here?

Re: Landing Page Design Help

Anton — Mon, 18 Mar 2019 19:09:35 GMT

Hi @jerranalley

sorry for the delay.

Since you've removed the testimonials - I can't say what's wrong with them 🙂

Do you have a link and/or screenshot?

For the background-image

You're assumption is correct - it's a sizing issue.

If you want it to be responsive and "nice looking". You should add a custom module to the template.

I think that the "WCS All-Purpose Hero"(free) from the module section in the marketplace should be the best module for your needs.

Also you could try the "Parallax Hero Banner" from HubSpot itself 🙂

I've tried the "WCS..." with your template. It works really great.

To insert(and use) it simply delete the highlighted area in the image below

note: After you delete the highlighted area the text will be deleted too - so back it up 🙂

and insert the module as shown here:

After that save the template, go to your landing page and insert the information you like.

As for your questions here

The first three ones will be done after you changed the header module(see above).

The last one is completly up to you. If you don't really know how to use the (new) design manager you should really do the "HubSpot CMS for Developers" certification.

It's less than two hours and you will learn (the basics) how to build and use the design manager(and some other useful things). Also you should know that HubSpot is build upon the Bootstrap2 grid system (here's the documentation). This doesn't mean that you should know how to "code" your templates but understanding how to work with rows(groups in HubSpot) and columns(most likely your modules) should help you to get awesome results 🙂

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution