Blogs are getting more and more popular every year. Some website projects are just blogs, while others use a blog as an additional source of content and for SEO (search engine optimization) purposes. This article will show you how to integrate a blog into your website with Sitejet.

Basic knowledge

Before we dive into creating a blog, we have a quick overview of the Collections Feature that we will use to create and manage the blog. A collection consists of 4 parts:

1. The collection defines the structure (fields) that make up all blog posts, e.g. title, author, date, etc.
2. The items that contain the respective content of the blog post
3. The collection container, which organizes the preview of the individual blog posts
4. The single page layout that sets the general design of all the blog posts 

You can read more about how collections work in our "Collections" article.

Add a blog to your website

You can use the collection template "Blog" to quickly and easily add a blog to your website. Collection templates are pre-configured collections (e.g. for real estate listings, product listings, team overviews, etc.) that have already been designed and include dummy content. Both - the design and the dummy content - can easily be adjusted to your needs. You can find the collection templates in the left sidebar under "Collection". Simply drag and drop the "Blog" option to the preferred position on the website. 

You will be asked to name your blog. We recommend using a meaningful name, especially if you want to create multiple blogs on one website. The default name is "Blog". The element that is added to the website by the extension contains the preview of all blog posts and is called the "collection container". The blog extension already contains examples of blog posts so you can get a first impression of how they are presented. In the section on creating and modifying blog posts, you'll learn how to create or edit the content of the blog posts. The collection container settings shown on the left are described in more detail in the section about sorting and filtering.

The element added to the site by the "Blog" extension uses typical blog fields such as "Title", "Category", and "Author". These fields are organized in the collection. The collection for the blog has already been created by default with the extension. The next section will show you how to edit and use fields.

Fields

Blog posts are comprised of fields, such as "Title", "Category", "Author", "Image", and "Content". With these fields, you create a form that you can fill out for each blog post. Clicking "Configure collection" in the collection container settings on the left side will open the collection manager with the collection fields.  

Available fields

By default, the fields "Name", "Slug", "Description", "Content", "Category", "Author", "Image", "Publishing Date" and "Status" are created in a blog.

Add more fields or edit existing fields

When you are in the Collections Manager, have selected your collection, and are in the "Data Fields" section you will be able to add new fields using the "+ Add field" button in the top right. You can also adjust existing fields by clicking the pen icon or delete existing fields by clicking the bin icon. 

When creating a new field, you can choose from different field types:

• Plain text: For a simple short text, e.g. a name for an author 
• Link: When you want to link to something 
• CMS: Offers you the power of the whole CMS meaning you can add elements or section templates
• Rich text: If you want to add long text or use formatting or HTML code within the text
• File: If you want to add one image, e.g. as a title image
• Multiple Files: If you want to display multiple images, e.g. to create a gallery
• Checkbox: If you want to use a yes-or-no-option like "Published", so you can use it as a filter
• Choice: If you want to have a selection of options from which you can choose one, e.g. for categories 
• Date: Is generally used in Collections for publication purposes, meaning you can specify a date in the future to plan the release of a post on a specific day
• Number: If you want to use numbers e.g. to sort blog posts

In the "Label" input field, enter the name of the field. As soon as you have decided on a type, another input field called "Help text" will be displayed. This gives you the option to enter a short description of the field here to make it easier for you to remember what to enter in the field later.

Using fields

To display the content from a blog post in the collection container or in the single page layout, you will need to assign elements like headline, text, and gallery to a collection field - if not, the content in the element stays static and doesn't adjust to the blog post content. Assigning an element to a blog field is easy. In our example, the blog post name is displayed as the headline, the category as a headline element, and the publication date in another text element. The assignment is done via the menu on the left side. By default, the blog post title is assigned to a heading element and the publication date is assigned to a text element.

Of course, you can also use other fields in additional text and heading elements. Simply duplicate an existing element or add it as usual and assign the respective blog field to the element as described above.

Blog post page (Single Page Layout)

The Single Page Layout ensures that all blog posts have the same structure. This structure is automatically created in the background when adding a collection template and can be changed at any time. You can open the "Single Page Layout" by double-clicking on the Collection Container and then clicking on "Open Single Page Layout". 

The Single Page Layout opens in a new tab. Here you can either edit the existing elements or you can add new elements and assign them to collection fields. The structure that you set up here is the general structure that will be used for each one of the blog posts. So changing the design here will affect all blog posts to ensure that they all have the same style. You can see a box in the left corner that allows you to switch between the different blog posts using the dropdown, so you can check if all blog posts look good in this design. 

Create and manage blog posts

A collection item equals a blog post. You create and change blog posts by customizing the content of the collection item. To customize the items or add new ones, click on "Manage content", e.g. in the collection container settings.

Alternatively, you can also click on More > Collections Manager, select the respective collection, and ensure that you have the section "Content" open: 

Here you will find the list of all items aka. all blog posts. You can add a new blog post by clicking on the "+ Add item" button in the top right. To edit an existing item you can simply click on it. 

Every blog post comes with the following fields"Name", "Slug", "Description", "Content", "Category", "Author", "Image", "Publishing Date" and "Status" and as you can see, these fields create some sort of form that you can fill out for each blog post. Most of the fields can be edited directly in this interface. Just the CMS field opens in a new tab when you click on "Edit in CMS" to give you access to all Website Builder features. 

Customize sort and filter options

In the collection container settings, you have a number of options for deciding which content of the blog should be shown here. Among other things, you can specify which property you'd like your blog items to be sorted by, and under which filtering conditions they will be displayed. For this, you can use any "field" of the collection.

The order of the displayed blog posts can e.g. depend on the publication date.

Add filter options to show only certain blog posts. Typical filter options are the author, a specific category, or a specific time period.

Customer CMS

One of the most important aspects of the blog is to give the customer an opportunity to quickly and easily continuously publish more content on the site. 

Once you have added a blog to your website, your customer will be able to add, edit and delete blog posts easily from the customer CMS. You don't need to enable this yourself because collections are editable by default.

So, that your customer can add and edit blog posts, just click on "Collections" and then on the desired collection itself within the Customer CMS.

In order to edit blog posts (collection items), your customer simply has to click "Collections" at the top of the Customer CMS.

Once in the Customer CMS, your customer will see the same view that we have already shown you in the section on how to create and change blog posts. Your customer will also have access to the same features that are available to you when editing blog posts.

If you want your customer to be able to customize the blog post template and/or collection container as well, you can make them editable by following these steps:

1. Open the collection template
   1. To do this, click on "Fields" in the item management
   2. Click on the "Open" icon next to the blog name in the section called "Blog title: Collection Item Template"
2. Right-click the element you want to make editable by the customer
3. Move the mouse over "Editable for customer"
4. Click one of the three choices: "This item", "All items of this type" or "All items on this page" (depending on what access you want to grant your customer)

Right-click the collection container like any other Sitejet element, and then click on "Editable for customer" to make it editable.

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Back to the top