dev-mfjlabs Blog Layout - Code | Callouts | Classes | CTAs | Images


Chief HubSpot Consultant at MFrankJohnson.com and author of the Perfect HubSpot Series, Frank contributes daily at Community.HubSpot.com where he's been voted #1 HubSpot Solutions Author in the USA. As a lifelong learner and college educator, Frank builds powerful HubSpot Marketing automation solutions for HubSpot Enterprise and HubSpot Pro users, and publishes a wide range of inbound content for the freelance HubSpot consultant community.
Connect on LinkedInHubSpot Community

Who This Code Is For

alt-txt-goes-here

Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante.

Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante.

Nulla ultrices nunc id mi porta molestie.

If -- eBook pitch -- this eBook is for you. Request your free copy of Perfect HubSpot _title_.

 

Code Example

Example of - p class="mfjlabs-blog-accent"

<p class="mfjlabs-blog-accent"> </p>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit sed quam nec laoreet. Praesent consequat erat nec ante blandit, sit amet fringilla leo condimentum. Curabitur scelerisque augue vitae lorem euismod, at volutpat nunc luctus. Suspendisse consequat scelerisque tristique. Suspendisse elit dui, imperdiet facilisis massa in, gravida solllicitudin est.

Code Example - ClickToTweet.com

Example of - div class="mfjlabs-blog-click-to-tweet"

<div class="mfjlabs-blog-click-to-tweet"><a target="_blank" href="https://ctt.ac/9zZ7b" rel="noopener noreferrer"><img src="http://clicktotweet.com/img/tweet-graphic-1.png" alt="Tweet: In 2018 alone, ..." style="float: right; height: 50px;" />Tweet goes here ...</a></div>
Code Example

Example of - a class="mfjlabs-blog-cta-text-mini"

<a class="mfjlabs-blog-cta-text-mini" href="#"> </a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit sed quam nec laoreet. Praesent consequat erat nec ante blandit, sit amet fringilla leo condimentum. Curabitur scelerisque augue vitae lorem euismod, at volutpat nunc luctus. Suspendisse consequat scelerisque tristique. Suspendisse elit dui, imperdiet facilisis massa in, gravida sollicitudin est. Example link with link emphasis.

Code Example

Example of div class="mfjlabs-blog-callout-left"

<div class="mfjlabs-blog-callout-left"><p> </p></div>

Left callout divs center on screens <=768px.

  • 1st on callout list
  • Second of three
  • Third of 3
<h6> tags inside of callout divs

Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. emper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.

This is what a block quote looks like by default. Some would say the design is very close to a callout.

Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam velit leo, dignissim a tortor a, dignissim cursus nibh. Duis sodales est sed scelerisque aliquet. Ut eget tortor ante. Nulla ultrices nunc id mi porta molestie. Nunc eu ultricies diam. Etiam dignissim tortor tempus nibh placerat, ac elementum libero mattis. Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.

Code Example

Example of div class="mfjlabs-blog-callout-center"

<div class="mfjlabs-blog-callout-center"><p> </p></div>

A centered callout div looks like this in the layout update.

<h6> tags inside of callout divs

Vivamus maximus augue quis ex maximus rhoncus. Phasellus elementum magna ac lacus congue interdum. Vivamus fringilla tortor ipsum, porta cursus purus rutrum et. Pellentesque scelerisque molestie tempor. Aenean fringilla tempor sodales. Praesent id dignissim libero, nec lobortis purus. Nam a ipsum libero. Ut quis posuere nisl, a interdum turpis. Mauris ac odio quam. Phasellus non aliquam mi. Cras in auctor felis. Maecenas eu velit sed nunc rutrum viverra. Donec dolor nisi, facilisis a dignissim in, imperdiet varius nulla.

Code Example -- (viewports >=768px)

Example of div class="mfjlabs-blog-callout-center-wide"

<div class="mfjlabs-blog-callout-center-wide-border-top"></div>
<div class="mfjlabs-blog-callout-center-wide-inner">
<p>Center-wide callout div DESKTOP ONLY content goes here. </p>
<h6>&lt;h6&gt; tags inside of callout divs</h6>
</div>
<div class="mfjlabs-blog-callout-center-wide-border-bottom"></div>

A center-wide callout div is wider than the content area and will extend outward to both sides. It's best used to emphasize a point on desktop and tablets in landscape mode. This type of callout will not display on viewports <=768px. (by design)

<h6> tags inside of callout divs

Vivamus maximus augue quis ex maximus rhoncus. Phasellus elementum magna ac lacus congue interdum. Vivamus fringilla tortor ipsum, porta cursus purus rutrum et. Pellentesque scelerisque molestie tempor. Aenean fringilla tempor sodales. Praesent id dignissim libero, nec lobortis purus. Nam a ipsum libero. Ut quis posuere nisl, a interdum turpis. Mauris ac odio quam. Phasellus non aliquam mi. Cras in auctor felis. Maecenas eu velit sed nunc rutrum viverra. Donec dolor nisi, facilisis a dignissim in, imperdiet varius nulla.

Code Example

Example of div class="mfjlabs-blog-callout-right"

<div class="mfjlabs-blog-callout-right"><p> </p></div>

Right callout divs center on screens <=768px.

  • 1st of three
  • Second of three
  • Third of 3
<h6> tags inside of callout divs

Vivamus maximus augue quis ex maximus rhoncus. Phasellus elementum magna ac lacus congue interdum. Vivamus fringilla tortor ipsum, porta cursus purus rutrum et. Pellentesque scelerisque molestie tempor. Aenean fringilla tempor sodales. Praesent id dignissim libero, nec lobortis purus. Nam a ipsum libero. Ut quis posuere nisl, a interdum turpis. Mauris ac odio quam. Phasellus non aliquam mi. Cras in auctor felis. Maecenas eu velit sed nunc rutrum viverra. Donec dolor nisi, facilisis a dignissim in, imperdiet varius nulla.Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.Praesent tempor dignissim vehicula. Aliquam congue porta metus eget semper. Duis rhoncus nulla augue, at dapibus lorem faucibus eget.

 

 

Blog Image Example -- NO LINK

Moz On-Page SEO - Google SERP Feature Prevalence
Source: Image Not Linked
 

 

Code Example

Example of Linked Blog Image

<div class="mfjlabs-blog-img">
<figure style="text-align: left;"><a href="#" target="_blank" rel="noopener noreferrer"><img src="//cdn.shopify.com/s/files/1/2223/4409/files/moz-on-page-seo-serp-feature-prevalence-example.png?16641830783197846194" alt="-update-alt-txt-" /></a>
<figcaption>update-figcaption</figcaption>
</figure>
</div>

Blog Image Example -- LINKED target="_blank"

Moz On-Page SEO - Google SERP Feature Prevalence
LINKED target="_blank"
 

 

Code Example

Example of Linked Blog CTA

<div class="mfjlabs-blog-cta">
<figure style="text-align: left;"><a href="#" target="_blank" rel="noopener noreferrer"><img src="//cdn.shopify.com/..." alt="-update-alt-txt-here-" /></a>
<figcaption>-update-caption-here-</figcaption>
</figure>
</div>

Linked Blog CTA Example -- With Class

HubSpot Contractor - HubSpot Academy Inbound Marketing Certification
div class="mfjlabs-blog-cta"
 

 

Blog CTA Example -- No Div / No Class

HubSpot Contractor - HubSpot Academy Inbound Marketing Certification
No Div / No Class
 

 

Code Example

Example of

<-add-code-between-these-&lt-and-&gt-html-entities-> </p>

Example of - p class="mfjlabs-blog-accent"

<p class="mfjlabs-blog-accent"> </p>

Example of - p class="mfjlabs-code-header" and div class="mfjlabs-code" -- the actual code used to create these examples! :)

<p class="mfjlabs-code-header"> </p>
<div class="mfjlabs-code"> </div>
 

 

Font Examples

Test Phrase - Arial

Test Phrase - Times New Roman

Test Phrase - Tahoma

Test Phrase - Dosis

Test Phrase - Inconsolata

Test Phrase - Montserrat

Test Phrase - Merriweather Sans

Test Phrase - Open Sans

Test Phrase - Raleway

Test Phrase - Quicksand

Test Phrase - Roboto

Test Phrase - Roboto Condensed

Test Phrase - Cambria

Test Phrase - Garamond

Test Phrase - Arvo

Test Phrase - Libre Baskerville

Test Phrase - Lora

Test Phrase - Noto Serif

Test Phrase - Roboto Slab

Test Phrase - Sanchez

 

Client Exclusive

{{ nowDOW }} Monthly
Free One‑on‑One HubSpot Q&A
Live HubSpot Solutions
Check Pricing & Availability
Hubspot Pop-Up Link a href="javascript:void(0);" onclick="window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open()">Hubspot Pop-Up Link

11311 -

Client Exclusive

Thursday Monthly
Free One‑on‑One HubSpot Q&A
Live HubSpot Solutions
Check Pricing & Availability
Chief HubSpot Consultant at MFrankJohnson.com and author of the Perfect HubSpot Series,...