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?
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
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 -
}
or
.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
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
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
- 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
or
- 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...).