When creating a blog, there are two main elements that can be styled; Blog catalog and Blog post. The Blog catalog is a module that can be inserted anywhere on your website and displays your blog posts. The Blog post allows you to style the page of individual blog entries.
Both of these elements inherit styling from the Global Design of your website, but can be edited further to meet your needs. To style each of these elements, navigate to Global Design > Blog.
Blog catalog
The Blog catalog is made up of different elements that provide rich information and a consistent structure. These elements include the following:
- Main image
- Post date
- Author
- Comments
- Post title
- Post content
- Button
Below is an example of an entry in the Blog catalog.
After you have selected to edit the Blog catalog from the Global Design menu, you can now begin styling the elements within it.
Visually style the Blog catalog
Before styling the Blog catalog, it is recommended to have some blog entries added and display the Blog catalog on a page. Doing so will allow you to see the style changes you apply in real time.
Arrows and Pagination dots
The first options in the Design menu are Arrows and Pagination dots. These two elements inherit from Global Design, but you are able to customize each element by expanding its respective section to access all styling options. These sections include:
- Arrow color and size
- Arrow background color
- Arrow background width and height
- Pagination dot background color
- Pagination dot width and height
- Border style
- Border color
- Border thickness
- Border radius
Where are my arrows and pagination dots?
If you do not see arrows or pagination dots on your Blog catalog, ensure that they have been activated in the settings of the Blog catalog module and that the amount of posts shown is less than the total amount of posts on the website.
Text area
The text area of the Blog catalog is made up of three text styles that can be further styled from the inherited Global Design; Info text, Title and Text.
- Info text - styles the post date, author, and comments text
- Title - styles the post title text
- Text - styles the post preamble text
You can expand the Customize style sections for all three text elements to access many styling options such as:
- Font weight
- Color
- Text decoration
- Font family
- Font size
- Letter spacing
- Paragraph height
- Font case
- Margin
Button
The button for the Blog catalog inherits its style from the Button module, but can be styled differently by expanding the Customize 'Button' style section. Here you will find all of the same styling options that are available for the Button module.
Background, Border and Spacing
The Editor also provides options to edit the Background color, Border style and Spacing of the Blog catalog. You can read more details of these option here.
Image hover
The last option for styling the Blog catalog is Image hover. This option must be toggled on in the settings menu of the module and it inherits from the Image hover Global Design. You can override the styling by expanding Customize 'Image hover' style. Learn more about how to style image hovers.
Blog post
When selecting to style the Blog post in the Editor, you will be taken to a page that displays all the elements that make up the Blog post page. Here you will be able to style the Blog post page and see the effects of the changes in real time. After making your styling adjustments, all Blog post pages will inherit this styling. The elements that you can edit are the following:
- Background and container
- Main image
- Divider
- Post text
- Comments text
- Inputs and text areas
- Download button
- Share icons
Below is an example of a Blog post page.
Background and container
The background of the Blog post page and its container can be styled independently from your website pages. While they both inherit from the Global Design of the website, you are able to style the Background color, add an image and adjust spacing. As for the container, you are able to style the Background color, add an image, add a border and style it with color, thickness and radius. You are also able to adjust the container's padding.
Main image
The image you use in your Blog post will be located directly above the content and you are able to style some of its elements. These include:
- Border style
- Border color
- Border thickness
- Border radius
Divider
The Divider helps visually separate the different content elements of the Blog post. By default, it inherits from the Divider module's Global Design, however, if you expand the Customize 'Divider' style section, you will have access to style this specific divider as needed with options such as:
- Divider type
- Divider color
- Divider thickness
- Divider width
- Divider alignment
Post text
The text area of the Blog post is made up of three text styles that can be further styled from the inherited Global Design; Title, Text and Info text.
- Title - styles the post title text
- Text - styles the post body text
- Info text - styles the post date, author, and comments text
You can expand the Customize style sections for all three text elements to access many styling options, such as:
- Font weight
- Color
- Text decoration
- Font family
- Font size
- Letter spacing
- Paragraph height
- Font case
- Margin
Comments text
The Comments text area of the Blog post is made up of four text styles that can be further styled from the inherited Global Design; Title, Text, Info text and Post label.
- Title - styles the 'Comments' title
- Text - styles the text of the comment
- Info text - styles the comment date and author
- Field label - styles the label of the input field (eg.: "Name", "Email", "Comment")
Inputs and text areas
To style the form where visitors can leave comments, you can expand Customize 'Inputs' style and Customize 'Button' style. Both elements inherit their respective styles from the Global Design of the website but can be further styled if you wish.
Download button
The button for the Blog post inherits its style from the Button module, but can be styled differently by expanding the Customize 'Button' style section. Here you will find all of the same styling options that are available for the Button module.
Share icons
The share icon styles are pre-determined, however you do have the option to style the margin of the icons.