How to create custom css in hubspot?
To create custom CSS in HubSpot, you can follow these steps:
- Log in to your HubSpot account: Go to the HubSpot website and log in using your credentials.
- Navigate to the Design Manager: In the top navigation menu, click on "Marketing" and then select "Files and Templates" from the dropdown. From the left sidebar, click on "Design Tools" and select "Design Manager".
- Find or create a template: In the Design Manager, locate the template you want to add custom CSS to. If you don't have a template yet, you can create one by clicking on the "Create" button and selecting the desired template type.
- Edit the template: Click on the template you want to modify, and it will open in the code editor.
- Add custom CSS: Within the code editor, you can add your custom CSS code. Look for the
<style> tags or locate the CSS section specific to the element you want to style. Write or paste your CSS code within those tags.
- Save and publish: After adding your custom CSS, click on the "Save" button to save your changes. If you're ready to make the changes live on your website, click on the "Publish Changes" button.
- Test and refine: Visit your website or the specific page where the template is used to see the effects of your custom CSS. Inspect the elements using your browser's developer tools to ensure that the CSS styles are being applied correctly. Make any necessary adjustments to your CSS code if needed.
It's important to note that when adding custom CSS to a template, it will affect all instances of that template on your website. If you want to apply custom CSS to a specific page or module, you may need to target those elements specifically using unique class names or IDs.
Remember to be cautious when modifying CSS code, as incorrect or conflicting styles can affect the overall appearance and functionality of your website. It's recommended to test your changes thoroughly and have a backup of your original code in case you need to revert any modifications.
