Blog Feed Section

Pixpa gives you the option to add your Blog feed to your pages. Using this section you can exhibit any blog you wish to.

You can create advertising blog posts that promote your brand, elaborate on your products/services and show them on any of your pages using this section.

Remember:


In this article:

  1. Add a Blog Feed section
  2. Blog Feed Settings
  3. Change blog feed Layout
  4. The Full card and the Text card

1. Add Blog Feed Section

  • A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
  • On your page, click on the blue + icon to add a New Section to your page.

 

  • You will now see the section categories on the left side.
  • Scroll down and choose the Blog Feed Section (1) option where you can choose from the different layouts.

 

  • Choose any section layout (2) and click on it to add it to your page.

2. Blog Feed Settings

Once you have added the section

  • Click on the Manage Blog Feed (1) button.
  • Click on the Settings (2) option to manage the Blog Feed settings.
  • Save your changes.

Here, you will find two options:

  1. Blog Settings
  2. Style Settings

Blog Settings

  1. Select the Blog from which you want to show the posts.
  2. Choose how to retrieve the blog posts. You can display all the blog posts.
  3. If you have selected Category in the previous step, choose the category from which you want to display the posts.


Style Settings

  1. Choose the image crop of the blog post thumbnails. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
  2. Set the border radius of the thumbnail image by changing the value of Corner Radius.
  3. Set the number of Posts that you want to show.
  4. Specify the Space Between Rows of the list items.
  5. Align the content of the list items. You can set them to be left, right, or center aligned.

  1. Set the Hover Base color and its opacity
  2. Set the Hover Elements color.
  3. Choose to animate the list item images on hover by clicking on Yes.
  4. Choose the animation style for the blog post thumbnails.

  1. Specify the Image Width for list items.
  2. Specify the Content Width for the list items.
  3. Specify the Space below Section Headline in px.
  4. Specify the Space below images and Text of the list items (in %).
  5. Specify the Space below the Date of the posts (in %).
  6. Specify the Space below the Titles of the posts (in %).

  1. Set the Title font style for the list items of the section.
  2. Set the Subtitle font style for the list items of the section.
  3. Set the default Description font style for the list items of the section.

  1. See how to manage Cards.

  1. Display – Choose to show the shadow behind the list items always or on hover only.
  2. Style – Choose from existing presets or create a custom shadow.
    In case you have chosen the Custom option, then visit this Box Shadow Generator to create a custom shadow. Finally, copy and paste the box shadow CSS.
  3. In case you have chosen the presets option, then Choose Shadow Styles from the dropdown.

  1. Specify the Section Headline of the Blog Feed section here.


 

3. Change Blog Feed Layout

Once you have added the blog feed section: 

  • Click on the Manage Blog Feed (1) button.
  • Click on the Layout (2) tab where you can choose the blog feed layout.
  • Choose the layout (3) and save (4) your changes.

 


The Full card and the Text card

When you turn on the Full/Text Card over your blog post list, the list items will have an outline and background with the card color that you have selected in the Design section.
Also See: Website colors and spacing.

Full Card

When the full card option is selected, the card color is applied to the whole card i.e., the image and the text associated with it.

Have a look: 

Text Card

When the text card option is selected, the card color is applied only to the text associated with the image.

Have a look: 

Can't find what you're looking for?

Get in touch with a Pixpa Expert.