Adding styles to the module

[Dimaeiya323]

Although our module doesn’t look very attractive right now, this can be fixed with CSS , but I won’t go into much detail about the code as it’s outside the scope of this guide. Also, I’ll change the section title to “Testimonials” and put some random text in the testimonial description.

We will add these styles in the module's CSS block:

block styles

We will apply styles to:

Section Container – To center all content with a maximum width.
Title: We will center it and assign it a color.
Testimonial container: we will apply flexbox to place the content to the right of the image and center it.
Image: rounded edges and a fixed size (170 x 170 pixels).
Description, name and position: we will apply colors, sizes and spacing.
testimony example

You can download the styles and copy them into the module if you want. If we now clone the testimonial we created previously o create new ones (from the UI in the preview), we will see that they are listed one below the other and we already have the complete module

Throughout the article we have seen how powerful and flexible the HubSpot module design tool is and that, with little effort, it is possible to create any type of module in a completely customized way that we can use on our sites.

We have also seen a bit of HubL syntax, how to structure our module by conditioning non-mandatory fields, as well as how to plan it beforehand. I hope it helps you dare to create your own modules guided by the methodology we saw during this post and improve it according to your needs. For my part, I can only congratulate you for having reached this point and thank you for your time. Greetings!


Emmanuel Umana
Emmanuel Umana
Front End Developer at InboundCycle. Responsible for the visual development of InboundCycle's DIY platform. Higher Technician in programming and web development at Seeway's school of design and digital communication.
EmmanuelleLumana
Subscribe to the Blog
Enter your email
I have read and accept the Privacy and Cookies Policy . *
Share article

Facebook icon
Twitter icon
Linkedin icon
Pinterest icon
Whatsapp icon
Email icon
Other articles that may interest you...

HubSpot
HubSpot Workflows: What are they and cio and cto email lists how do I set them
By Marina Mele in April 9, 2024
HubSpot
Marketing Automation in HubSpot: Secrets to getting the most out of it
By Aina Moncho in April 20, 2023
HubSpot