What is a blog panel?
A blog panel is a way of displaying a number of blog articles with titles, summaries, images and dates. When a customer clicks an article title or image, they are redirected to the relevant article page. Blog panels have a range of settings that can be used to customise the arrangement of the articles, the appearance of the article image and the appearance and behaviour of the scroll-triggered animation.
Once a blog panel has been added, it can then be displayed on your website by adding it to the content of a row column.
How do I add a blog panel?
In the admin area
For a blog panel that displays the articles in individual rows:
Go to Website > Widgets.
Click the Add button in the top right.
Click the Blog panel icon.
Enter a Title.
Optionally, enter a Number of articles.
Optionally, select a Category.
Optionally, select a Tag.
Optionally, enter a No articles message.
Tick/un-tick Show images.
Tick/un-tick Show date.
Select the List option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Horizontal layout.
Optionally, select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width.
Optionally, enter a listing image Maximum width.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
For a blog panel that displays a number of articles per row:
Go to Website > Widgets.
Click the Add button in the top right.
Click the Blog panel icon.
Enter a Title.
Optionally, enter a Number of articles.
Optionally, select a Category.
Optionally, select a Tag.
Optionally, enter a No articles message.
Tick/un-tick Show images.
Tick/un-tick Show date.
Select the Grid option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Orientation.
Select a listing arrangement Horizontal layout*.
Enter a listing arrangement Maximum per row.
Enter a listing arrangement Minimum width.
Optionally, select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width*.
Optionally, enter a listing image Maximum width*.
Optionally, enter a listing image Maximum height**.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
You can now add this widget to your website but it will only be visible if it contains published articles so it's important to ensure that you have some published articles available.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.
How do I edit a blog panel?
In the admin area
Go to Website > Widgets.
Find the blog panel you are looking for and click the Edit button in the Options column.
Edit the blog panel's details.
Click the Update button.
How do I delete a product panel?
In the admin area
Go to Website > Widgets.
Find the blog panel you are looking for and click the Delete button in the Options column.
Click the Delete button to confirm.
How do the settings affect the appearance of a blog panel?
The range of customisation settings available depends on which listing arrangement layout option is used.
For a blog panel using the List option:
Listing arrangement horizontal layout - Changes the ratio of the text and the image.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.
Listing animation type - Changes which animation will play when a customer scrolls past the blog panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the blog panel or to play every time the customer scrolls past the blog panel.
For a blog panel using the Grid option:
Listing arrangement orientation - Changes the orientation of the articles to vertically (image above, text below) or horizontally (image on the left, text on the right).
Listing arrangement horizontal layout* - Changes the ratio of the text and the image.
Listing arrangement maximum per row - Sets the maximum number of articles you want to display per row in the grid. (e.g. 3 per row, 4 per row, etc).
Listing arrangement minimum width - Sets the minimum width of an article. This determines when the articles will wrap onto the next row in the grid when the space available is reduced.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.
Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.
Listing animation type - Changes which animation will play when a customer scrolls past the blog panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the blog panel or to play every time the customer scrolls past the blog panel.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.