Hello!
I am looking to make two simple changes to the blog post template, the standard Hubspot template - I would just like to add some empty space between the menu and title, as well as add an image between that space and the title.
Is there an easy way that I can do this? We don’t have an on-staff developer. Thank you!
@VBrawdy - every HubSpot template is different, so if you could add a link to one of your blog posts, someone might be able to help.
Also, to clarify on the image, will this pull in the post’s featured image? Or a custom image?
I would like to add more white space in between the menu and title. as well
as an image either above the title or in between the title and content
@VBrawdy - For the whitespace between the header and the title you can go to Marketing > Files & Templates > Design Tools and find the blog post CSS file (which should be under FacilityONE > css > templates > blog.css). Then update this code:
.blog-post {
margin: 0 auto;
max-width: 960px
}
to
.blog-post {
margin: 0 auto;
max-width: 960px;
padding: 80px 0;
}
Where 80px can be any amount of padding.
You could also include the following code below if you want a different amount of padding on mobile:
@media (max-width: 767px) {
.blog-post {
padding: 40px 0;
}
}
Again, 40px can be any amount of padding.
As for adding an image. The code will depend on whether you want to show the featured image or a custom image field.
The simplest solution (to just add in the featured image), would be to find the blog post HTML file, which is likely in your Design Tools under FacilityONE > templates and will be called something like blog-post.html.
I’m assuming you’re going to see something like this in the code:
<article class="blog-post">
<h1>{{ content.name }}</h1>
<div class="blog-post__body">
...
So you can update that to something like:
<article class="blog-post">
<h1>{{ content.name }}</h1>
{% if content.featured_image %}
<div class="blog-post__featured-image">
<img src="{{ content.featured_image }}" loading="lazy" alt="{{ content.featured_image_alt_text }}">
</div>
{% endif %}
<div class="blog-post__body">
...
You can always go back to your blog.css file above and add some styling to that, like spacing:
.blog-post__featured-image {
padding: 40px 0;
}
For anything more than the above, you’ll probably want to hire a developer to help who should be able to make these updates fairly quickly.
Hi, I’d like to have the author’s name and date displayed in two lines (blog listing), but so that it’s lined up below each other. At the moment it’s indented on two lines and it doesn’t look nice. Can you please point me in the right direction to change this, I can’t even find the right item to see it in.
Thank you 