Before diving into the details, let’s talk a little bit about the HubSpot page editor. It’s where you edit and optimize your content.
Are you tasked with copying and pasting content into the page editor? Are you relatively new to HubSpot? Are you facing trouble maintaining CSS styling while copy-pasting into the HubSpot page editor?
No need to worry!!!
In this article, you’ll get a step by step guide to how you can easily add content from the web or other editors without messing up the styling.
Whether you’re using Mac or Windows, this guide will allow you to successfully copy-paste content in the HubSpot page editor without affecting the style.
Let’s take a look at the steps.
Step by step guide to copy & paste the content using HubSpot page editor without messing up the styling
After logging into your HubSpot account, navigate to Marketing> Website >Website Pages/Landing Pages.
You will be redirected to this page, which lists all your pages.
Hover over the page that you want to edit and click on the “Edit” button on your dashboard.
This opens up the page that you want to edit.
To edit the page content, hover over a module where you want to copy-paste the content. To make changes in the content and styling, click the pencil icon.
Now, on the left side of your screen, you will see a sidebar editor. Here you have to copy-paste the content to update the page editor. (The shortcut to copy and paste the content is Ctrl+C and Ctrl+V for Windows and Cmd+C and Cmd+V for mac respectively).
To see live changes, don’t forget to click on the “Apply changes” button on the bottom of the page.
Challenges faced while copy-pasting content into the HubSpot Page Editor.
No matter whether you are formatting website pages or landing pages, most people face similar challenges.
Have a look at the issues commonly faced by editors.
One of the significant challenges that you might face while copy-pasting the content is maintaining the font size and style, especially when the content is copied from the web or another text editor.
While copy-pasting the content from another source, people usually forget about its styling. If you directly copy the formatted text, there is a good chance that the uniform styling of the page will mess up.
In the above screenshot, you will see that pasted content is already formatted. Moreover, you can observe that the changes reflected in the page editor are not the same as styled by the developer on the back end for paragraphs <p> and headings <H1>.
This happens because the inline style of the copied content is also pasted into the rich text editor. Many times, it requires a developer to go in and undo the damage.
Things to consider when copy-pasting content so it won’t affect the styling of the page
Preview the page
You can preview the page before making it live. It allows you to check whether the layout is correct or not.
To preview the page, click on the device type icon. You can preview the page for desktop, mobile, and even on a tablet.
Moreover, the upgraded user interface of the HubSpot CMS includes simplified icons that allow you to update and make the changes in the content when required. Additionally, its global setting features help you update all the pages of your website in one go.
If you want the content you copied from the text editor to not affect the actual style of the page editor, then make sure you keep the below-mentioned points in mind.
Instead of pasting the content directly into the HubSpot Rich Text Editor, first paste it into a plain-text editor like Notepad on Windows, or notes on Mac.
You might be pondering over which text editor works best. No worries! Here are some guidelines to help you to make an informed decision.
What happens when copy-pasting from Notepad on Windows or Notes on Mac?
When you copy inline text from the web or another editor and paste it in Notepad/Notes content style, all the pre-defined tags will be automatically removed.
Let’s assume you copy website content and paste it in Notepad, the content will look like this:
You will see only the raw text. Pre-defined tags will be removed.
Now, when you copy the same content from Notepad and paste in HubSpot Rich Text editor, you will notice that the style and code which is defined by the developers at the backend is not affected.
But, if you want pre-defined tags in Hubspot Rich Text editor, you need to add manually. To add <h1>, <h2>, etc., click on the drop-down button and choose the tag you want to add. It will not affect the original CSS style code.
Note: Whenever you copy-paste content from a text editor, into the HubSpot page editor, it’s best not to style the content in it. The edited content will override the actual code and it will create a real fuss for the developers to correct the code and style of the pasted content.
Check “Advanced” in HubSpot
Make sure to re-check the code and ensure that the actual style of the HubSpot page editor set on the back end did not get affected.
Sounds like a lot of work? Truthfully, it’s not! Just follow the steps mentioned below.
Click on the “Advanced” button added above the pasted content in HubSpot Rich Text Editor.
From the drop-down list, click on the Source code.
A window will pop-up with the HTML code.
Here you can easily check to see whether the pasted content includes extra CSS classes or not. If the content only includes <p> and <h1>, <h2> tags, then your copied content is ready to publish, but if it includes extra CSS like <div class>, <g>, SCR, etc. then you need to remove all the extra code.
In a Nutshell
Clear coding and styling are essential to make an optimized and effective website.
Most of the time, the actual code of the page editor gets overridden while copy-pasting content. But now, hopefully, you’ll be able to easily copy-paste content into Hubspot page editor without messing up the style.
Got any questions? Feel free to reach out: email@example.com.