Blog Post
The section Blog Post allows you to automatically add those articles which have the same blog group without manually adding one-by-one. It's never been easier to create a blog post.
From Theme section sidebar -> Add section Blog post
But first, please create these articles by going to your store admin page > Online store > Blog posts.
1. HEADING OPTIONS
Design heading: There are a variety of designs for you, please try each all.
Heading align: You can set positions Left, Center or Right for heading.
Heading: You can add the heading title for this Blog section.
Enter a icon name on heading: You can choose the icon that you want to add in this LineAwesome and paste the name in here (Only used for design 6).
Subheading: You can add the sub title for this Blog section.
Space bottom (px): You can set the vertical spacing between heading and content.
2. GENERAL OPTIONS
Blog post: Select statistic blog to show.
Post item design: You can choose the designs for post item.
Date format: You can set date format to display (different format options display for various languages).
Content align: You can choose between Default and Center.
Maximum posts to show: You can set number of articles per page to show.
Image hover effect: This option allows you to set an effect when hovering for image with many selections (Warning: Hovering effect will resize your images).
Blog effect when hover: You can set the effect for the blog when hovering.
Image ratio: You can set the ratio for images (Aspect ratio custom will settings in general panel).
Image size: You can set Full size or Auto for images (This settings apply only if the image ratio is not set to 'Adapt to image').
Image position: This option allows you to choose the position for image (This settings apply only if the image ratio is not set to 'Adapt to image').
Items per row: You can set the number of items display per row on each devices.
Space horizontal items: You can adjust space between items by horizontal.
Space vertical items: You can adjust space between items by vertical.
3.Box options
Layout design: You can choose between Carousel, Grid, Masonry.
4.OPTIONS FOR CAROUSEL LAYOUT
Enable loop: At the end of cells, wrap-around to the other end for infinite scrolling.
Autoplay speed in second: Set is ‘0’ to disable autoplay.
Pause autoplay on hover: Auto-playing will pause when the user hovers over the carousel.
5.Prev next button
Use prev next button: Creates and show previous & next buttons.
Visible: You can choose between Always visible or Only hover.
Button style: You can set style for prev/next button.
Button shape: You cans set button shape for prev/next button (Not working with button style 'Simple').
Button color: You can set color for prev/next button.
Button size: You can set size for prev/next button.
Hidden buttons on mobile: This option allows you to disable prev/next button on mobile.
6.Page dots
Use page dots: Creates and show page dots.
Dots style: You can set style for dots.
Dots color: You can set color for dots.
Enable dots round: This option allows you to change the dots square to dots round.
Dot between horizontal: You can adjust space between dots.
Hidden dots on mobile: This option allows you disable dots on Mobile versions.
7.OPTIONS FOR GRID OR MASONRY LAYOUT
Pagination: You can select pagination type like Load more button, View more button or None.
Enable progress bar: Only active when you use 'Load more' or 'Infinit scrolling'.
Page-loading speed is everything for good user experience. Multiple researches have shown that slow load times result in people leaving your site or delete your app which result in low conversion rates. And that’s bad news for those who use an infinite-scrolling. The more users scroll down a page, more content has to load on the same page. As a result, the page performance will increasingly slow down.
Another problem is limited resources of the user’s device. On many infinite scrolling sites, especially those with many images, devices with limited resources (such as mobile devices or tablets with dated hardware) can start slowing down because of the sheer number of assets it has loaded.
Therefore, we recommend that you only use 'Load more', 'Infinite scrolling' for when your collection is less than or equal to 400 products.
Enable button icon: This option allows you to display arrow icon button.
Button settings: You can customize button with some options like style, effect, color, size, position.
8.DESIGN OPTIONS
Layout: You can choose between Container, Full width and Wrapped container.
Background: You can change the background color for Blog post section.
Background gradient: You can change the background gradient color for Blog post section.
Background image: You can add an image for Blog post background.
Margin, Padding: You are allowed to change both of them for Blog post section.
[Private Offer] EComposer Partner Plan
Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Kalles with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free
Cheers, The4.
Last updated
