When you’ve gone through so much trouble for making the graphics and layout look perfect, margins that are askew, haphazard alignment or similar spacing issues give your page a very shoddy and unprofessional impression. All of your previous efforts would go in vain. It can be as annoying as making the perfect short film, with off-the-mark editing, resulting in the voices not syncing with the actors’ lip movements (totally not writing from personal experience!). It’s also something faced by anyone who’s trying to manage their HubSpot page. This short video tutorial shows you how to get it right all by yourself. It doesn’t take advanced skills to get it done- just some simple steps!
The video includes the demonstration of the following steps-
- Using the HubSpot builder to address inner and outer spacing issues
- Going into edit mode
- Navigating to the particular module you wish to change
- Editing CSS declaration
- Adding the padding in the spaces within the module (like when your text is “leaking” into an image and you need to add uniform spacing)
- Selecting the size of the spacing on either side of your text/picture
- Previewing the result and making further changes if needed
- Adding outer spacing (for example, image/text could be “merged” with the top of the page/heading
- Saving the progress
On the quest to get in-depth information from experts, I had a short-interview with a designer on our Computan team, Ahmad Ali. Here’s what he had to say:
Do you think imperfect margins on websites with spacing issues have any impact on website design and an overall impression?*
Yeah it ruins the beauty of a clean and professional page.
*How important is this?*
It’s really important to have consistent spacing on the entire page / website because that allows the customers to easily focus on the primary objectives of the web pages like CTAs.
*Do you think it’s easy for any person to fix those imperfection?*
Yeah,it is, only if they start sticking to some rules in the beginning and keep following them. For example, every time they use <h1>, there must be a particular amount of spacing at the top and bottom of that <1>. Another good example is that sometimes people add a particular space before the title of each section but mostly, they do not keep it consistent for all sections.
*What do you recommend people should do to avoid such mishaps?
*
The best way to avoid such issues is designing a mockup before moving to coding phase and then before making it live for the whole world. It’s always a good practice to let it go through the QA team to make sure everything is implemented according to plan.
So, in conclusion, with the easy-to-follow steps in the video, you can eliminate these nuisances, without having to seek professional help or using the hit-and-miss method for addressing problems.
Take a look at our video below for more information.
