Blog Components

How to use blog components

Step 1

Add content to the selected component.

Block quote: to edit the author image, double-click the image and select 'Choose image'. Upload a new image or select one from the image panel.

Tweet this block: Double-click the embed code (the grey bar or the 'Tweet this' text). First, find href="

By default, you'll see href="

You'll want to replace the URL between url= and &text= with the URL of the article you would like to share, for example, href="

Next, replace the text after &text= with the text that you would like to share, for example, &text=this is some text.

The whole string will look something like this: href=" is some text."

Note: It's important to keep the closing quotation mark after the text (there's an opening quotation mark after href=")


Step 2

Publish your changes.


Step 3

Navigate to the Blog Components page and select 'Inspect' (right-click the page and select 'Inspect' or 'Inspect element' - you may need to turn on developer tools).


Step 4

Use the picker to select the correct element - the CSS classes are:

Call out: .call_out

Block quote: .blockquote_item

Twitter share: .share_item

Here's a video guide for assistance


Step 5

Right click the '<div class=' in the developer panel and select Copy > Copy Element


Step 6

In your article CMS panel, add a space and then click the '+' icon. Add the embed element and paste the code here.


Step 7

Publish your article and check that the styling has been copied successfully.

Stylised call outs

Good to Know: If you’re looking for a way to get started with structured content, have a look at this article about structured content templates.

Stylised block quote

"The problem is many brands and agencies focus just on content production and output, but fail to optimize the structure of that content in a way that helps users and machines understand it.

This is why good content isn't enough."
Ryan Shelley
SEO & Inbound Marketing Expert

Social share component