The Essential Guide to Blogging

How to Create a Beautiful Custom Feed with Pro Gallery


Ever wanted to add a more personalized touch to your custom feed? The Blog’s regular custom feed lets you adjust font styles, borders and backgrounds. But what if you want to play even more with layout and design?


By connecting your blog info to a Pro Gallery, you can add bonus features to your Custom Feed like overlay effects, heart icons, hover effects, and scroll animations. Display videos in place of cover images. You'll also get more layouts to choose from - slideshows, thumbnails, strips and more. Feel free to play around with it until it fits your site’s style and vision.



The Final Product



How to Make a Cool Custom Feed


In this post, we’ll show you how to build a cool custom feed that only shows posts from a specific category.


Make sure your site has a Blog, with your posts connected to categories.


Step 1. Add Content Manager to your site and connect it to a category.



  1. The first thing you’ll want to do is add the Content Manager to your site. Go to the Editor > Add (+) > Content Manager > Add to Site. (If you see the icon on the left side of the Editor, you’ve added it already.) Close the “Create a New Page” window that pops up.

  2. In the Content Manager, go to Add Content Elements and add a Dataset to your page. (This won’t be visible to visitors on your live site.)

  3. Click the Dataset > Settings > Connect a collection > Blog > Posts.

  4. Give your Dataset a name, and input the number of items to display in your custom feed. Now your feed will show All Posts.

  5. To customize which posts to display, scroll down and click on +Add Filter.




6. Under Field, choose Categories. Under Value, choose the category you want to display, then Add Filter.

7. Optional: Go to Sort > +Add Sort in order to sort by published date, likes and more.



Step 2. Add a Pro Gallery to your site and connect it to your posts.



  1. Back on the Editor, go to Add (+) > Gallery > Pro Galleries.

  2. Add any gallery marked as a Pro Gallery to any page.

  3. Click on your Pro Gallery and in the options that pop up, you should see a Connect to Data icon . Click on this and then > Connect a dataset > your collection.


4. Select the appropriate Connection Options for your cover image, title, description (excerpt) and link (post page URL).

5. You won’t see the changes just yet, since the Editor only displays the template. Once you hit Preview, you’ll be able to see all your posts in your chosen category pop up in the Gallery.



Step 3. Customize Your Pro Gallery / Custom Feed.



  1. Click on your Pro Gallery and then Settings.

  2. Once the Wix Pro Gallery Settings pops up, click on the Settings tab.

  3. Open the drop-down menu “When clicking on an item:” and set it to "A link opens".

  4. Now it’s time to customize! Click on Layout to choose your favorite setup, then hit Customize to play around with different ways to display your images, titles, and slideshows.

  5. Amp it up with Design and make it a living, breathing feed. Add an overlay or hover effect to your image, adjust the corner radius, and turn on scroll animations. Your design options may change based on what layout you choose.

  6. Then Publish and check out your work on the live site! Your images should be replaced with coverage images. Click on the image to go to the post page.


Congratulations! You now have an awesome Custom Feed with all the frosting.


Want to play around with more customization and just a little bit of code? Check out Corvid by Wix.

WixBlog Icon

Create a stunning blog and grow an online community with people who share your passion. With beautiful, up-to-date layouts, visitors can easily discover your posts and share them in a click. Readers can join your blog, create member profiles, like & follow posts, comment with images & videos, and even become contributing writers.

 

 

© 2006 - 2020 Wix.com, Inc 

  • Black Facebook Icon
  • Black Twitter Icon
  • Black Google+ Icon
  • Black YouTube Icon
  • Black Pinterest Icon
  • Black Instagram Icon
  • Black LinkedIn Icon
WixBlog Icon