• Contact
  • Support
  • Login
Popular
  • Homepages
    • Homepage
    • Alt Homepage 1
    • Alt Homepage 2
    • Alt Homepage 3
    • Homage Homepage populjar
    • Homage Homepage p⚡️pular
  • Web pages
    • Product page
    • Pricing page
    • Multi Pricing page
    • Pillar page
    • Team page
    • About us
    • Contact us
    • Privacy policy
    • Cookie policy
    • Legal stuff
    • Overview modules
    • Documentation
  • Conversion
    • Landing page
    • Landing page 2
    • Landing page 3
    • Landing page 4
    • Webinar page
    • Demo page
    • Thank you page
  • Blog
    • Blog overview
    • Blog post
    • Blog topic overview
    • Blog author overview
  • Cases
    • Cases overview
    • Cases post
    • Cases topic overview
    • Cases author overview
  • System
  • Contact
  • Support
  • Login
    Get a demo

    Documentation

    Get it now at the HubSpot Marketplace

    Quick Links

    • Before you start
    • General theme settings
    • All modules in this theme
    • Extra blog settings in this theme

    Best practice

    General advice

    Before you start using the theme and creating pages: we advise you to clone your theme in the HubSpot design manager and use the cloned version!

    Doing this you will be able to update, add, create,... extra features to the theme in the future.
    If you do not start with a copy, you may get stuck at some point and may need to redo things.
     
    How to clone a theme (HubSpot knowledge base)

     

    GLObal settings

    Before you start

    Each CMS has his own behaviour.
    Working with a theme does not mean you do not need to know the essentials about building a website, webdesign, creating pages, using images, videos,...

    HubSpot: knowledge base & 24/7 support

    HubSpot Has a very good documented knowledge base and has a 24/7 support

    • knowledge base
      If you have a question search the knowledge base there is a BIG help buttons at the bottom right of HubSpot
    • help center
      find here the help you need
    • hubspot status center
      an outage is always possible, heer you can check if all HubSpot services are operational
    HubSpot: CMS

    The theme needs a HubSpot CMS, you can not use this theme on your own server. Find out about the HubSpot CMS here.

    HubSpot: Get started with the theme

    We selected some interesting reading that hubSpot produced about the theme in general

    • Get started with themes
    • Edit your theme settings
    • Set up your site's navigation menus
    • Use global content across multiple templates

     

    HubSpot: Create and publish a page (general)
    • Create and publish a page
    • Create and publish a page > Types of templates > is a THEME template
    • Create and publish a page > Create a new page
    • Create and publish a page > Edit an existing page
    • Create and publish a page > Edit content in a module
    • Create and publish a page > Edit styles applied to your modules
    • Create and publish a page > Optimise for SEO
    • Create and publish a page > Edit page settings
    • Create and publish a page > Preview tour page
    • Create and publish a page > Publish or schedule your page

    HubSpot: Edit content in pages using a website theme
    • Edit content in pages using a website theme
    • Edit content in pages using a website theme > Edit page layout
    • Edit content in pages using a website theme > Manage styles
    • Edit content in pages using a website theme > Edit Page settings
    • Edit content in pages using a website theme > Publish your page

    HubSpot: Blog & theme
    • Apply a theme template to your blog
    • Create and publish blog posts

    HubSpot: filemanager, images, video's
    • Upload files to use in your HubSpot content
    • Organize, edit, and delete files
    • Add videos to your HubSpot content

    HubSpot: Some advanced functionalities
    • Personalize your content
    • Run an A/B test on your page

    GLObal settings

    General theme settings

    The theme settings is where you can define the sizes of the text, font family used and colors.
    These setting will be applied on all pages using the theme templates.

    Where are the theme settings located

    Go to your settings by clicking on the gear icon in the top right corner.
    In de sidebar select website  \ themes
    There you will find our popular theme
    Click on it and in the new sidebar you will find the theme settings

    1. Edit the general settings
    2. Preview then on some page
    3. Publish the changes

     

    Global Colors

    Set you 2 main colors

    Header

    Her you can set fonts, colors, and activate functionalities in your header.

    1. activate an config top header
    2. manage spacing
    3. extra styling options, font colors,
    4. activate top header
    5. show search
    6. show CTA right of menu and mange colors
    7. make header sticky or not

    Typography

    Here you can manage all foint settings on the basic Html typography such as h1, h2, h3,... + config off buttons

    extra functionality use class="cta_primary"  or class="cta_secondary",...  in the source code of your rich text in a href

    Forms

    Here you can style your forms
    form label, input fields, GDPR text, etc

     

    Blog

    Manage all items on the blog listing and blogposts

     

    Cases blog

    Manage all items on the cases listing and  case blogposts

     

    Layout

    Manage the Content width and the space between the sections here: 

    Footer

    Manage the Stylings of the footer here

    Footer (LP)

    Manage the Stylings of the footer (LP) here

    Remarks on fonts

    Using a lot of different fonts is not a good idea, it will make your website messy and it will slow down your website.

    The HubSpot theme's are using google fonts. Its possible to override google fonts and use customs fonts but then you will need to add a little code yourself. Contact us on how to deal with it.

     

     

     

    modules

    All modules in this theme

    View all modules on this overview page

    In alphabetical order:

    HubSpot drag and drop areas

    How HubSpot Drag and Drop Areas are working

    Drag and drop areas are composed of modules, which are blocks of website content. These modules may be arranged in horizontal rows or vertical columns. Rows and columns may be grouped into sections of elements.

    By grouping these elements together, you can apply background styles to an entire area of your page. You can also drag and drop entire rows, columns, or sections to rearrange your page layout.

    1. Module: an individual block of website content. You can edit your page's text and images within an individual module.
    2. Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page, and apply a background color or style to an entire column.
    3. Row (*): a horizontal row of modules or columns. You can move or rearrange rows on your page, and apply a background color or style to an entire row.
    4. Section: a group of multiple rows or columns. You can move an entire section, or apply a background color or style to an entire section.

    Check out this HubSpot knowledge page that explains all functionalities

    Different modules

    1. You can search for modules to be used
    2. Theme modules are modules developed form especially for the theme
    3. Common modules are default HubSpot modules such as Rich Text
    4. All modules, beware of using these modules, probably they are old modules and NO Drag & Drop modules.  It's possible that they do not behave correctly

    Section \ Column \ Row \ module hierarchy

    (*) creating a row is sometimes hard ;-) but follow these steps and you will get one

    1. create 2 cols with a Rich Text module in each
    2. in first col drag an Image module below the Rich Text field
    3. then clone Image module in first row using the icon when hovering
    Accordion

    accordion

    This is the module you are looking add, the FAQ or FAQ accordion module

    Advanced Image Tab

    advanced-image-tab

    Use this module to display a series of images with a caption on the right. Clicking the caption will let you navigate to a different image. On this module, you can categorized the images, update its icon and have an option to add a link. advanced-image-tab-preview

    See it in action here

     

    Blog Latest Feed with Newsletter subscription

    blog-latest-feed

    Display the latest blogs on a webpage, select blog and topic

     

    Column/Card module

    card-section

    Use this module to display your team / your products. Each card can hold an image, title, description. Add as many cards as you like, the 5th card automatically goes to the next row.

    Customizable button/cta

    customizable-button

    Just add a button on your page and style in in your theme style.

    Extended Pricing module

    extended-pricing

    Manage your different pricing plans, use different currencies, switch to monthly & annual pricing. 

    Footer Column Module

    footer-column-module

    This module is used in the footer, each row of the footer you can add, text, image, social, menu's,... 
    Think out of the box, use this module as a pillar page navigation.

     

    Form with Extra Options

    form-with-extra-options

    The default Form Module does not contain an option to control the text color of the GDPR text. This Module contains colours field wherein you can modify the text on your form and also lets you control the colour of your submit button.


    See it in action here

    Header CTA

    This module is used on the Header

     

    Hero Animated Typing Text

    hero-typing-text

    This module is also used to add text on your Hero, the paragraph font size of this module can be controlled on the theme settings (Typography > Hero Paragraphs). 

    This module lets you add a series of texts that looks like its typing.

    Note: Use this keyword "%%typing%%" to insert the typing text on the header. 

     

    Hero Floating Background

    hero-floating-background

    This module will let you add a floating background color under your hero content.

    Note: Make sure the floating background's width matches your hero content width. Make adjustments as needed.

    hero-floating-bg-preview

     

    Hero Rich Text with Extra Options

    hero-rich-text-with-extra-options

    This module is used to add text on your Hero, the paragraph font size of this module can be controlled on the theme settings (Typography > Hero Paragraphs). it also contains a colour field at the bottom, to control the colour of the text. 

    See it in action here

    Icon with Text

    icon-with-text

    This module have the ability to control the Background colour, background colour in hover and many more. It will let you add an icon at the top, a text and custom link.  Just like the example below:

    See it in action here

    Image Slider

    image-slider

    This image slider module lets you control how the slider will behave that fits your needs. It contains options like the items to be shown per slide.

    Here the slider settings options available on this module

    See it in action here

    Image Tab

    image-tab

    Use this module to display a series of images with a caption on the left. Clicking the caption will let you navigate to a different image.

    See it in action here

     

    Image with Extra Options

    image-with-extra-options

    Use this module if you want to control the alignment (text, right, and center) of the image and it also has an option to hide and show the image on desktop, tablet, and mobile.

    See it in action here

     

    Inline Subscribe Form

    inline-subscribe-form

    Use this module to show the submit button and a field on one line. Be aware that you can only add one field on this form in order to preserve the look.

    See it in action here

    Link Text

    link-text

    Use this module if you need a link with an icon. 

    See it in action here

    Map

    map

    Use this module to add the map of the company and it will let you turn on/off the grayscale of the map

    See it in action here

    Masonry with Slideshow

    magazine-module-masonry-with-slideshow

    Use this module to add a gallery, when an image is clicked it will popup and will let you navigate to the next image

    See it in action here

    Menu Section

    This module is used on the header

    Office Details

    magazine-module-office-details

    Use this module to add information about the company like address, email and phone number

    See it in action here

    Other Office Details

    magazine-module-other-office-details

    Use this module to add the branches of the company from other countries. 

    See it in action here

    Pricing Card

    pricing-card

    Manage the pricing using this module

    See it in action here

    Page post

    This module will let you choose a website page/landing page  and show it like on the screenshot below:



    See it in action here

    Repeatable Customizable Button

    repeatable-customizable-button

    Use this module to add a series of buttons with icons.

    Rich Text with Extra Options

    rich-text-with-extra-options

    Use this module to control the color of the text

    See it in action here

    Social Follow

    social-follow

    This module is typically used on the thank you page. add this module to add the social media of the company

    See it in action here

    Social Sharing

    This is a module that can be found on the blog post and cases post. 

    You have an option to switch this on/off by going to the theme settings > blog > post > display social share

    See it in action here

    Social Sharing Page

    social-sharing-page

    This module will let you share your page url to facebook, twitter, linkedin and email.

    Screen Shot 2021-02-10 at 9.20.24 PM

    See it in action here

    Spacer with Extra Options

    spacer-with-extra-options

    Use this module to add spacing between your columns or rows. This module lets you define the spacing on mobile, desktop and tablet.

    Tab

    tab

    Use this module to add contents that can navigate thru the tab

    see it in action here

    Team Module

    team-module

    Use this module to add the team members of the company

    see it in action here

    Testimonial Slider

    testimonial-slider

    Use this module to add the testimonials. This module lets you define the number of items to show per slide

    or

    or

    see it in action here

    Text and Image

    text-image

    Use this module to swap the contents of your image and text on the desktop. On mobile, the image will always show at the top of the text.

    see it in action here

    modules

    Special features in this theme

    Some functions can be manipulated in the code itself.

    How to change the big CTA just above the footer in the blog section?

    The big CTA that is located just above the footer on a blog can be changed by code in the design manager.

    popular-prefooter-CTA

    Go to the design manager, search for prefooter.html and hit edit.

    popular-prefooter-code

    Hit the Global content editor button and make your changes. Then save

    popular-prefooter-global-content-editor

     

     

    How can I edit the related blogpost section in the blog?

    The related blogposts on the post template can be changed by code in the design manager.

    Search for blog-post.html or hiet edit post template on the hubspot sprocket menu

    popular-hubspot-sprocket

    In the design manager you can edit some translations

    popular-blogpost-related-translations

    In the design manager you can block or delete the complete module.

    popular-blogpost-related-code

     

    How to handle multiple languages on the blog

    This theme is multilingual ready, you can handle the multilingual of the blog on the design manager like on the screenshot

    Once you made the changes, click publish changes and check your update on the blog 🤓.

    Note: the "custom_newsletter_form" is the form id of the HS form, to get the id of the form, just open the list of forms and choose the form that you would like to add and get it from the URL like:

    popular-white-logo

    { { popular } } is a HubSpot drag & drop website theme uniquely created for SaaS-businesses. 

    Follow Us
    Quick Links
    • Product page
    • Pricing page
    • About us
    • Team
    • Contact us
    Contact

    leadstreet bv
    Office Belgium (EU)

    Juliaan Claerhoutstraat 13
    8572 Kaster (Belgie)
    BTW 0556.843.742
    RPR Gent, afdeling Kortrijk

    0123.456.789

    inbound@leadstreet.be

    Get it now

    Request your personal demo
    right now

    Get a demo


    © 2023 All rights reserved.
    • Privacy Policy
    • Terms of Use
    • Cookies Policy
    Website ❤️  Hubspot by leadstreet.be