Blog Posts

You are here:

How to configure Webflow attributes

If you’ve already created a Blog Posts CMS collection in Webflow, skip the following steps.

1) Click on CMS

2) Click on Add New

3) Select Blog Posts collection

4) Customize the collection adding all the WordPress usual fields to have the perfect preview

5) Click on Create

6) Insert some dummy data

 

Insert a Collection List element

and connect it to the Blog Posts Collection.

Select Collection List Wrapper in the navigator and insert these attributes for Categories

wp=blog
el=blog-posts

 

 

Select now the Collection Item from the navigation and customize your posts. You can add all the elements or only the one you desire:

 

 

Title

This will be the title of your blog post. To create it select a Text Block

insert the attribute:

el-child=title

connect it to the field name of the CMS

Permalink

This is the link to the post. Select a Link Block, Button or a Link Text element

    

Insert the attribute:

el-child=permalink

Date

This is the publishing date of your post. Select a Text Block

Insert the attribute:

el-child=date

Connect it to the field created on of the CMS

By default, it gets format from your WordPress settings (You can change it, following the path Settings -> General -> Date Format). Otherwise, you can set another format using the attribute

udesly-data=your format

You find all the available formats here.

 

Time

This is the publishing time of your post. Select a Text Block

Insert the attribute:

el-child=time

Connect it to the field created on of the CMS

By default, it gets format from your WordPress settings (You can change it, following the path Settings -> General -> Time Format). Otherwise, you can set another format using the attribute

udesly-data=your format

You find all the available formats here.

 

Featured Image

This is the featured image of your post. You can select a Div Block or an Image

  

Insert the attribute:

el-child=featured-image

Connect the image or the background image to the field main image of the CMS

Excerpt

This is the excerpt of your post. Select a Text Block element

Insert the attribute:

el-child=excerpt

Connect it to the field post summary of the CMS

You can customize the length of the excerpt and the last word from the Udesly Plugin->Settings->Blog

 

Author

This is the author link of your post. Select a Text Block or a Text Link element if you want the url linking to blog posts created by that author

  

Insert the attribute:

el-child=author

Connect it to the field author of the CMS

Avatar

This is the gravatar of the post author. You can select a Div Block or a Image

  

Insert the attribute:

el-child=avatar

Connect the image or the background image to the field author_image of the CMS

Categories

These are the categories of your post. You can select a Text Block

Insert the attribute:

el-child=categories

On default the separator will be “,” . Where there’s a need to change the separator between categories, insert the attribute

udesly-data=your separator 

e.g udesly-data=/ will make it shows the “/” between the categories

Tags

These are the tags of your post, you can select a Text Blog

Insert the attribute:

el-child=tags

On default the separator will be “,” . Where there’s a need to change the separator between tags, insert the attribute

udesly-data=your separator 

e.g udesly-data=/ will make it shows the “/” between the tags

Main Category

This is the main category of the post. Select a Link Block, Button, Link Text element or simply a text block if you don’t need the link.

    

Insert the attribute:

el-child=main-category

Don’t forget that you need to set the Main Category for each post if you want to use it.

 

 

How to setup pages in the Udesly Adapter

 

Blog Posts is an element that can be inserted only in the page you set as Archive Page in the Udesly Adapter App.

 

How to configure the Udesly plugin in the WP admin panel

The Blog Page does not require any action on the Udesly plugin, because it automatically recognize it as Archive Page.

Related documentation: