Hello everyone, I’m Al Carmona. I’m with USERACTIV, which is a HubSpot website UX design and development company. We help companies get the most out of the HubSpot CMS.
What today’s tip is going to be an into to HTML markup for non-developers. Just some simple tags that you’re going to see when you’re editing if you’re in charge of editing content in pages in the HubSpot CMS. You may be able to dig a little bit deeper and use some of these tags, or know when you shouldn’t be using any tags, in your pages.
Just to give you an example, I’m going to go into this page right here in the page editor. This is pretty user friendly. You can just go in here and click in an area. Then it’s going to bring up on the left-hand side an editor. Here are your options here for this section. You see the copy is there. Whatever you change here, you’re going to want to hit Apply Changes, and then it will be reflected in the preview here. If you make a change, then you can hit publish, and then it will be live on the site. Otherwise, it’s autosaved, whatever changes you make.
What we want to do here is take a peek at what the source code for this section looks like. This corresponds to that. If we click on, Advanced, and we look at the source code here, we’re going to see that it’s that whole big paragraph.
This is called a paragraph tag. Whatever is between the opening and the end tag, and if you notice here that this has bracket, p, and then another bracket, closed bracket, so <p> and </p>.
At the end, it’s got the same thing except for one difference. It’s got this forward slash: /. That just tells the browser that, hey, this paragraph is ending. This formatting or styling is ending.
This is very common. What a lot of developers will do is that they’ll use this in the stylesheet. They’ll make a style for <p>, and a class for that particular module, so that whatever you put in here, it’s already going to be styled the way that you want, or the way the developer was told to do it on the backend.
This is the best-case scenario. You’re not really screwing up any text by just going in here directly and just making changes. You see it reflected real time there. If you click Apply, then it’s applied and it autosaves.
What happens if you want to change this and bold it? You could always hover over that.
Here, in the WYSIWYG, which is What You See Is What You Get, you could click on this and make it bold.
Now, if you see in advanced source code, you see that section has strong, <strong> open tag, </strong> close tag. That really just means to bold whatever is between the start tag and the end tag.
What I see a lot – what a lot of content editors do is that they try to style within the editor. That could be a mistake because what you have is you have an inconsistency of style throughout pages if you don’t put in the stylesheet, and you try and style each page independently.
Let’s take this, for instance. Say we highlight this. This gives you the ability to do it, but I don’t really recommend it. You can see in this drop down for more, you could change the font. Let’s make it to some really kooky font like Terminal. Then let’s make it a much bigger font. Then let’s make it a crazy color, let’s try this. Then let’s make it bold.
You can see it here. This is going to be completely different than your style guide or what you have on your site. It may actually be what’s part of the style guide.
If you’re an editor, you may be trying to change it. What’s going to happen is that you’re going to have to do this for every page. If you redesign this page, you’ve got to go in and change this manually instead of just automatically having it changed because it changed the style sheet in the back end.
If we go into the source code, this is where you see that change. This is the span. This is what’s used a lot of the times for developers to – front end developers, to change what a particular text block is going to look like. You see span, open tag, and this is a closed tag, and then style equals. That’s defining how you want this text right here to look. It says, font family, terminal, monaco, font size, 20px, color – and then this is a hex value, which translates to a particular color.
This is a no-no, styling within paragraphs. You don’t really want to do this.
You want to be able to, if you have the chops, come in here and remove this. Then ideally, from your developer, you’ll have a list of classes that you could use. These classes are in a style sheet that is attached to the template that this page is based on.
Hopefully, we’ll have more videos about that.
We could have, say, maybe a class that’s defined by your developer that says paragraph, new color. By doing that, it’s much easier if you were to migrate the design of this page or change the template. As long as this is still the same, you could just change it. It will change it everywhere it says this class, span class.
I’m not going to change it because that class hasn’t been created.
If it were created, that class would just say the same thing it says here. Instead of having to define it on every single page, implicitly, you just use a class. That’s really what CSS or cascading stylesheets are for. That’s why you have a developer to make this easier, so you have this consistency throughout your website. It’s much easier to change things.
That’s a quick intro. I hope that helped, if you are a HubSpot content editor, how to take care with what you’re putting in here.
Check out this post, about how to copy/paste, which is a big deal because a lot of times people will take stuff from Word and paste it straight into here.
It copies over a lot of those stylings that you don’t necessarily want in there. We’ll probably make another video just on that because that seems to be a pretty big issue for content editors that are using the HubSpot CMS.
I hope that helps, and until next time, thanks.