Landing Page

Marketing & Content Hub Blog, Website & Page Publishing
, , ,
1

Hello there,

I’m new to Hubspot and creating a Landing Page.

I am using a custom stylesheet. But some issues I’m not able to solve.

First, I want to remove the header, because i want to integrate the Landing Page in an existing Wordpress page. How do i do that?

second, I want to edit the “Testimonial” Module and change it a little bit, for example to put hyperlinks into it.

and last but not least, I would be so happy if someone could give me hints on how to optimize my landing Page.

I hope it’s okay to ask all of this here.

Thank you for your time.

Greetings,

Lisa

2

Hi @LM-IT,

Thank you for reaching out to the Community!

I wanted to ask some clarifying questions in order for the Community to better assist as we don’t have access to your account :slightly_smiling_face:

  • Could you please share a link to the website page with the referenced module and header?
  • Can you also tell us more about how you are trying to remove the header? Are you trying to remove it from the Global Content Header or the Custom Style Spreadsheet?
  • When you say optimize, are you looking to speed up your page and clean up modules that could potentially slow it down?

The more information and examples you can share with us, the better guidance we can provide with the next steps.

Thank you! :raising_hands:

Best,

Kristen

3

Hello Kristen,

Thank you for your reply.

Well, removing the header seems to be obsolete. It works within wordpress now.

But still I have difficulties to identify, where to change css. Is it only possible in a Template Copy?

http://27160678.hs-sites-eu1.com/natural.-pure.-energy
This is the page. The header is still not looking like i want it to be, because the text box doesn’t fit the bottom of the image.

Also i can’t change the container with the testimonials. For example i want to place the link and logo differently.

  • "When you say optimize, are you looking to speed up your page and clean up modules that could potentially slow it down? "

→ Exactly.

Best,

Lisa

4

Hi @LM-IT,

Thank you for your reply as well as these details!

I wanted to share these resources on how to optimize your page load speed:

I hope these are helpful :slightly_smiling_face:

I also wanted to invite our subject matter experts to see if they have insight into how you could modify your website template.

Hi @Anton, @LMeert, @Teun - Do you have any CMS tips for @LM-IT?

Thank you!

Best,

Kristen

5

Hi @LM-IT,

why do you want to integrate it into a WordPress page and how? Just asking because if the answer is “with an iframe” - I don’t recommend it. iFrames are hard to optimize for responsiveness, can lead to a longer loading time and won’t get recognized by search engines, also they can - depending on content lead to security issues.

I think there are only two good approaches for a seamless WordPress integration:

  1. Create a landing page in HubSpot, and connect a subdomain for your landing pages.
  2. Create a HubSpot form and embed it into a page that was build completly in WordPress

both options have pros/cons but if you want to have it as quick as possible working - go with the embeded form. Also you don’t need the WordPress HubSpot plugin for this. It just works. The only thing that you may have to do is applying some minor adjustments to your WordPress stylesheet so the HubSpot form looks the same as your WordPress forms.

As for the testimonials - the module can be modified in the Design-Tools (Marketing->Files & Templates → Design-Tools) or via CLI(only recommended for developers). Since you’re working with the Growth theme you will need to create a child-theme, clone the module and paste it into the child-theme or just clone the whole theme.

Note: Once you created a child-theme or cloned it you will select the template from the child-theme.

For the performance topic:

Your images are slowing down the page.

My personal recommendation is to use images not larger than 250KByte in the webp format.

The webp format was initially developed by Google as a great compromise between look and speed.

The best way to optimize an image is:

Open the image in an image-tool like Photoshop, Gimp or photopea(free Photoshop), resize it to usecase size(nobody needs a 3000px wide image on the page); optional: save it as web-optimized image; upload it to an image optimizer like kraken.io or tinypng.com, optimize and download it, upload the optimized image to HubSpot

best,

Anton

6

Hello Anton,

thank you so much.

You nailed especially the whole integration topic.

We’ve integrated it via iframe, and as you said, the responsiveness is poorly.

The reason for that was, that we wanted to have the header and footer from the main page.

I think I’ll go with the embedded forms.

Afterwards, I will optimize the image sizes.

Again, thank you so much four your reply.

Best,

Lisa

7

Hi @LM-IT

To remove the header from your HubSpot landing page, you can follow these steps:

1. Go to your HubSpot account and navigate to the landing page you want to edit.
2. Click on the “Edit” button to open the landing page editor.
3. In the editor, locate the header section. This can vary depending on the template or layout you’re using.
4. Select the header section and delete it from the page.
5. Save and publish your changes to apply the updated landing page without the header.

Regarding editing the “Testimonial” module, you can typically customize modules in the following way:

1. In the landing page editor, locate the “Testimonial” module you want to edit.
2. Click on the module to select it.
3. Look for options or settings specific to the “Testimonial” module that allow you to modify its content or appearance.
4. Make the desired changes, such as adding hyperlinks, updating text, or adjusting the layout.
5. Save and publish your changes to see the updated version of the module on your landing page.

For optimizing your landing page, here are some general tips:

1. Clear and compelling headline: Craft a concise and attention-grabbing headline that clearly communicates the value proposition or main message of your landing page.

2. Engaging visuals: Use high-quality images, videos, or graphics that are relevant to your offering and capture the audience’s attention. Visuals can help convey your message effectively.

3. Strong call-to-action (CTA): Place a prominent and persuasive CTA button on your landing page, making it clear what action you want visitors to take. Use action-oriented language and create a sense of urgency if appropriate.

4. Minimal distractions: Keep the design clean and clutter-free, focusing on the key elements and removing any unnecessary distractions. Avoid excessive text, links, or elements that may divert attention from your primary goal.

5. Mobile optimization: Ensure that your landing page is mobile-friendly and responsive. Test its appearance and functionality on various devices and screen sizes to provide a seamless experience to all visitors.

6. Social proof: Incorporate testimonials, reviews, or case studies to build credibility and trust with your audience. Positive feedback from satisfied customers can increase conversion rates.

7. A/B testing: Experiment with different versions of your landing page to identify the most effective elements and optimize its performance. Test variations of headlines, CTAs, layouts, or colors to determine what resonates best with your target audience.

Remember to continuously monitor and analyze the performance of your landing page using analytics tools. This will help you understand visitor behavior, conversion rates, and areas for further optimization.

Note: The specific customization options and features may vary depending on the HubSpot template or tools you are using.

Hope this will helps you out. Please mark it as ACCEPTED SOLUTION to help other Community member.

Thanks!