Create a blog

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

In this article, you'll learn how to add a blog to your website with Sitejet, which makes organizing blogs and blog posts faster and easier.

Blogs are created with our Collection feature. A collection consists of 4 parts:

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

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

Watch a video

Add a blog to your website

To quickly and easily add a blog to your website, Sitejet includes an "extension" for the blog. This already contains the most important features of a blog by default. You start by inserting the blog extension at the place on the website where you would like to see the blog post overview later.

In the Website Builder (CMS), click on "Collections" in the left sidebar and drag and drop "Blog" into your site. 

You will be asked to name your blog. We recommend using a meaningful name, especially if you want to create multiple blogs in 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 the way 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". Clicking the "Collection" icon will take you from the collection container settings in the top left corner of the screen to the collection manager on the right.

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

In the "Blog: Fields" section you will see the fields of the "Blog" collection. You can add more fields by clicking on "New field" in the top right corner of the collection manager. You can also edit existing fields here.

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

• Plain text is a plain text field
• CMS offers you the possibility to integrate individual Sitejet elements, presets, or entire pages
• Rich text can contain not only plain but also formatted text, links, and even HTML code via the code editor function in the toolbar of the editor field
• File(s) lets you upload one or more files
• Checkbox creates a simple checkbox
• Choice creates a radio button, also known as an option button
• Date is generally used in Collections for publication purposes, meaning you can specify a date in the future to plan a release of a post on a specific day

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

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. To do this, field contents are assigned to the text and heading elements so that the field contents are displayed instead of static text. 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. For example, instead of the date, you can assign the author using the menu.

1. Open the element properties with a double-click
2. Click on "Publication date" to open the option list under "Assign content from Blog"
3. Select the appropriate field (which would be "Author" in this example)

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 (collection item template)

The collection template ensures that all blog posts follow the same structure. This structure is automatically created in the background by the blog extension and can be changed at any time. You can open the " Collection Template" by double-clicking on the Collection Container and then clicking on "Open Collection Item Template". Each blog post will automatically create its own blog post page.

Use the drop-down menu in the upper left corner of the Website Builder (CMS) to switch between blog posts.

In addition to quickly previewing blog posts, you can edit the template yourself here. For example, if you want to display the author on the blog post page by default, follow the procedure in the section on using fields.

The template is used to define a general structure for the blog posts. The content of the blog posts is defined in the entry in the Blog Collection. In the next section, we'll show you how to create and edit the content.

Create and manage blog posts

A collection item corresponds to 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 items" in the collection container settings.

Alternatively, you can also click on the "More" button in the top right corner and select "Collections Manager": 

The items manager tab shows a listing of all blog posts. Select any post to change a blog post. Every post comes with the following fields, as mentioned in the "Fields" section: "Name", "Slug", "Description", "Content", "Category", "Author", "Image", "Publishing Date" and "Status". You can create a new blog post by clicking on "New item" in the upper right corner.

Edit content

The "Fields" section describes how to create and use fields in detail. To edit the content of a field, just click on the field and enter new content into it.

Content

The structure of the blog post is organized in the collection template. Here is where you define the order in which the fields "Title picture", "Title", "Author", "Date of publication", "Content", etc. of your blog post are displayed. You can edit the individual content of a given blog post in the field "Content" by clicking on "Edit in CMS". In this view, you are using Sitejet elements. In our example, two text elements and one picture element were used.

The content contains all texts, images, links, and other elements that are individually defined for blog posts and do not follow the same structure for all blog posts.

Customize sort and filter options

In the collection container settings, you have a number of options for customizing the display. Among other things, you can specify which property you'd like your blog entries to be sorted by, and under which filtering conditions they will be displayed. For this, you can use any "field" of the collection. The meaning of fields is explained in the section on creating and changing blog posts.

The order of the displayed blog posts can, for example, 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. If you had to create new articles for your customers every time, instead of having them created by your customers themselves, this would contradict the basic principle of Sitejet: to reduce your workload.

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