[Coming Soon] Blogs | Page Builder (New)

ECSC.png

When adding or editing advanced pages through the new page builder, you can add a Blog widget to show your existing blog articles on the advanced page. You can also adjust the layout ratio of blog images and texts on the advanced page, add a "Read more" button, etc., to increase the reach of your blog posts, and drive more website traffic.

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

In this article, you'll learn how to

 

1. Add Blogs Widget

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages], select the advanced page that you want to add to the Blog widget, and click Advanced Page/Edit to open up the Advanced Page settings page.

Please refer to this article to learn how to create an advanced page.

EN1.png

 

Step 2

Click the Widget button.

EN2.png

 

Step 3

Click Blogs under the "Content" widgets.

EN3.png

 

Step 4

Click the "Quantity" drop-down menu on the left edit column to set the number of blog posts you want to display.

Please refer to this article to learn how to create blog posts.

*Note: The blog posts are sorted by last added by default. Other sorting orders are currently unsupported.

EN4.png

 

Step 5

You can customize the title of your blog widget in the "Title" field. The title will appear in the location as shown by the arrow. Use the "Title Alignment" buttons below can adjust the title position.

EN5.png

 

Step 6

Use the "Style" drop-down menu to adjust the display style of your blog posts. There are two types: horizontal and vertical displays.

  • Horizontal
    1. Desktop version: Displayed from left to right according to the order in which the articles were added. The widget will be presented in a carousel if there are more than 4 blog posts.
    2. Mobile version: Due to the layout limitation, the blog posts are presented one by one in the order in which they are added, and presented in a carousel manner.

EN6.png

  • Vertical
    1. Desktop version: Arranged from top to bottom according to the order in which articles are added.
    2. Mobile version: Due to the layout limitation, the blog posts are presented one post per row in the order in which they are added, and presented in a carousel manner.

EN6a.png

 

Step 7

The image proportion setting is available for desktop and mobile versions. You can customize the display ratio of blog post images.

EN7.png

 

Step 8

You can adjust the alignments for the blog post title, description, and button.

*Note: This setting does not change the blog post image alignment.

EN8.png

 

Step 9

Switch on the "Show Post Button" toggle to show the "Read More" button at the bottom of each blog post. Customers can click the button to view the full text.

Switch on the "Show List Button" toggle to show the "View All" button at the bottom of the Blog widget. Customers can click the button to enter your store blog and view all published blog articles.

EN9.png

 

Step 10

If you are displaying more than 4 blog posts, you can customize the scroll bar style of the blog post carousel. The styles are available in three types: "button," "dot," and "scroll bar."

  • Scroll bar style: Button

EN10a.png

  • Scroll bar style: Dot

EN10b.png

  • Scroll bar style: Scroll Bar

EN10c.png

 

Step 11

Use the widget padding bar to customize the spacing between widgets on the advanced page.

EN11.png

 

Step 12

After confirming the setup above, please click the Publish button at the top right so that customers can view all the new page content at the storefront.

EN12.png

 

2. Notes

  • If you want to view the feature effect applied on the preview area on the right, please click Save under the edit column on the left first.
  • A maximum of 12 blog posts can be displayed.

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments