Wix Blog: Adding and Setting Up a Post List

5 min read
A Post List element is a great way to give your visitors snippets of some of your blog posts in other areas of your site. The Post List element is fully customizable. You can choose from various layouts and edit the design and display to match your site.
Note:
In this article, we are using the Classic layout in our examples. The options vary based on which layout you select. 

Step 1 | Add a Post List element to your site

Your Wix Editor has a variety of customizable blog elements. Choose a Post List element from the options available and place it on your site. 
Tip:
Make sure you're on the page you want to add the Post List to. You can add a Post List to as many pages as you want.

To add a Post List element:

  1. Click the Switch Page drop-down menu at the top of the Editor.
  2. Select the page you want to add the Post List element to.
  3. Go to the Add panel:
    • Wix Editor: Click Add Elements  on the left side of the Editor.
    • Editor X: Click Add Elements  at the top of Editor X.
  4. Click Blog
  5. Click the Post List you want to use, or drag it to position it on the page.
A screenshot showing the Add Panel and the Post List options available.

Step 2 | Adjust the settings

Once you've added the Post List to your site, you can change some of the settings to suit your needs. Choose what category you want the posts to be displayed from and how many posts appear in the list. 

To adjust the settings:

  1. Click the Post List element in your Editor. 
  2. Click Settings.
  3. Click the Settings tab.
  4. Choose which posts (and how many) you want to display in this list:
    • Choose a category: Click the drop-down to choose which blog category you want to display in the list.
    • Filter posts by tag: Click the drop-down to filter posts by tag.
    • Show Featured Posts only: Click the toggle to choose the type of posts you want to display:
      • Enabled: The Post List only shows featured posts.
      • Disabled: The Post List shows all your blog posts, not just featured posts.
    • How should posts be displayed?: Choose how you'd like your posts to display:
      • By a fixed number: Drag the toggle below to choose how many posts display on your Post List.
      • With page numbers: Drag the toggle below to choose how many posts display per page in your Post List.
A screenshot showing the post list settings tab and the options to customize.

Step 3 | Edit the display

Go a step further with the display and choose what additional icons and information appear in your Post List. For example, would you like to show the author name on each post, or enable a like counter that identifies how many "likes" the post has received?

To edit the display:

  1. Click the Post List element in your Editor.
  2. Click Settings.
  3. Click the Display tab.
  4. Click the checkbox next to each item you want to show on your feed. 
A screenshot showing the post list display settings.

Step 4 | Change the Layout

Choose the layout you like best and customize the layout settings. Some options differ depending on the layout you choose.

To change the layout:

  1. Click the Post List element in your Editor.
  2. Click Settings.
  3. Click the Layout tab. 
  4. Select the layout from the options available.
  5. Choose what you want to customize:
    • Image resizing: Choose how you want images to resize in the post list: 
      • Crop: All the images get trimmed to fit within the image ratio you select. They all appear the same size and parts of your images may get cut off. Select the Image ratio you want your images to fit within. 
      • Fit: The images keep their original aspect ratio and fit within each post's image area. 
    • Additional Image Settings: Click Additional Image Settings and choose the alignment and proportions for your images. Then click Back to Layout to continue customizing the layout.  
      • Image alignment: Choose to align the images on the left or right. 
      • Image proportions: Drag the slider to change how much space the image takes on your post list. 
    • Text alignment: Choose where you want the text to appear: Left, Center or Right
    • Cards per row: Adjust the layout of the posts per row. 
      • Fit to screen: The total posts per row varies based the size of the posts and the screen width. Drag the Post size slider to adjust the size of the posts. 
      • Set posts per row: You set the total posts displayed per row. Drag the Posts per row slider to choose how many posts show in each row.
    • Spacing between posts: Set how far apart your posts are from each other. 
    • Post height: Adjust the height of each post. 
    • Margins: Set the spacing around the posts and the edge of the field.
    • Text padding (left & right): Set the amount of space on both sides of the text.
    • Number of lines for the title: Set the maximum amount of lines the post title can take up. 
A screenshot of the post list layout settings.

Step 5 | Customize the design

Add some flair to your Post List, by customizing the design settings for specific parts of the list. 

To customize the design:

  1. Click the Post List element in your Editor.
  2. Click Settings.
  3. Click the Design tab. 
  4. Choose what you want to customize:
    • Posts: Customize the style and color of your post title and description, change the text color on hover, and customize the opacity and color of your boarder and background.
    • Category Label: Choose a layout for your category label and customize the category style.
    • Ratings: Customize the colors for the star that shows the rating for each post. Change the font style, size and color for your rating display.
    • Video Settings: Customize how your videos play in the Post List. Do you want them to autoplay, play on click, or on hover? You can also choose the speed in which your videos play and if you want to have them play on loop.
A screenshot of the post list display settings.

Did this help?

|