Building an Article

Ready to build an article page? Here we go.

Maneuver to the site Heat & Glo, Stellar or Heatilator in the drop down in upper left. These are the only sites with articles.

You will see Presentation mode. You will want to click on the Structure tab.

You will see a list of folders.

Articles reside under Inspirations.

Click on that folder.

A new section opens to the right. Click on Articles.

You will see the list of articles already created in alphabetical order.

To create a new one, you will click on the “+” symbol highlighted above in yellow.

You will now see a new section open in the last right section. You are now ready to start filling in the blanks.

Start with your title. Fill that in and the system automatically says you need certain information.

Once that is filled in, the error goes away.

The slug is important, as that is where the page shows up on the site. If this is the URL you want:
www.heatnglo.com/ideas/outdoor-fireplaces-for-better-living

than this is your slug:

/ideas/outdoor-fireplaces-for-better-living

You can also adjust the publish date.

Next, an image is required.

You will click on Browse. It will open up likely to a Bynder log in screen, where you will use your SSO to gain access.

You can search by name or use the filters in the upper left.

For my example, I have a Bynder ID. Once the search is complete, you click on the image. If you want to use the image as is, you will select the blue “Add asset” button in the lower right.

At this time, you also have an option transform your image. For example, you can crop the image to zoom in on an area or mirror the image. To do this, after selecting your image click on the white transform Base Url button.

Click New transformation.

You will then click on Add transformation.

You can select from the drop down menu and play around with them. Most used is the Crop feature, which is what I will display here.

I set the Dimension to a 4:3 ratio.

You can also adjust the Focus of the image using the X&Y percent or real time editor.

Once you have the image set to your liking, you select the blue Apply transformations button. Then click the blue Add asset button.

Your image will populate.

Moving down, you will select the Article Style using the drop down.

Before we dive into the Page Builder, let’s talk tags.

Article Tags define which section your article will appear in. You can choose multiple sections. This example only uses Trends & Transformations.

If you want your article to have similar pages tied, you will use the Related Articles section to add those articles by name.

My example does not have any, so I’m leaving it blank.

The next section is Product Tags.

My example does not have any, so I’m leaving it blank.

The last section you can choose multiple products to be featured on your page.

My example does not have any, so I’m leaving it blank.

Before we talk Page Builder, there in one more section you need to make sure is filled in.

Scroll up to the top and click on the SEO tab.

Here you will fill in the three sections SEO meta title, SEO meta description and Keywords. There are character limits here, but they can be adjusted. We used what was setup in Sitecore.

Ok, back up to Page Builder. This is where the magic happens. :)

Click back on Content tab and scroll down to Page Builder.

You will click the + Add item… button. A new pop-up will open.

Here is where you choose the component you want to build.

For my article example it uses text and images, no other components. So I will scroll down the list and use Custom Text. Here I will be able to create my main image, captions, subheads and copy.

If you are switching from copy and images to another component, you will exit out of the first component, click the + Add item… button again and choose your new component.

Once that component opens, you will add in the required fields to make it display appropriately.

Back to my example, here is an empty Page Builder window.

I will fill in the title, which populates per the template.

Then I will begin the Rich Text to add my image.

To help with the window closing after adding an image, click on the expand button.

Click in the box where it says “Empty” and then click on Bynder Asset.

Same as above when adding the image for the preview card, the Bynder pop-up opens. Click Browse.

My article has a Bynder ID, so I search for it.

Click on the image and then select the blue Add asset button.

Your image will populate in the window. You will click on the “x” in the upper right to close it.

My article looks like this:

My image has a caption with a link so I will click in the open area under my image and paste in the copy. Now because my copy already had a link already, it pasted like this:

Villawood Outdoor Fireplace (https://www.heatnglo.com/fireplaces/wood/outdoor/villawood-open-wood-fireplace) (burns real wood or gas logs)

You will highlight and delete the URL that was brought in.

Then highlight the copy you want the link added to.

Next click on the Link icon. An Edit Link window pops up.

You will select Internal since we are going to link to a product page.

For articles, the standard is open the link into a new tab, so turn that toggle on.

Now scroll down and we will select the product.

NOTE 1: Here is where you would choose External, Open in a new tab, and the external URL path.

NOTE 2: You only use Internal for pages within that site. So if you are on Heat & Glo and you want to link to the ProAdvantage page, you will treat that URL as an external link.

In the search bar, type in your product. It will display a list to choose from. Select the product.

Then in the upper right of the pop-up, click the X to close the window.

Your image with caption is now ready to have style applied. Highlight the copy and where you see Normal, click the drop down. You will choose Caption and then in the style bar the i to make it italicized.

There is copy and then an H2 headline next to add.

I copy/pasted into the window and selected the H2 text.

Where you see Normal in the drop down scroll to the H2. As you can see, you have lots of style options to choose from.

Above you can see the copy reflects the H2 size.

The rest of this article is copy and images. You can see the complete article here.

If you want to visually see your page come to life, click on the globe icon.

Your page will open up to Presentation mode.

Click anywhere on the article and a side bar appears.

You can now maneuver to each component and make adjustments and visually see it on the left after a few seconds.

You can continue building your page in this mode.

Once the page is complete, most likely you want to send it out for review.

You will click on this boxed up arrow icon.

A new pop-up window appears with a QR code and a Copy preview link.

Click on the Copy preview link and then you can send out that link.

With mobile view being important, use the little cell icon to see your page as you would on a device.

Once the page is ready to go live, you will click on the black Publish button in the lower right corner.