Zigzag thumbnail vertically (alternate thumbnail position)

Content Views helps you to show the thumbnail image of posts easily without coding.
In the Pro version, you can show thumbnail zigzag vertically. Here is how to do that with 2 simple clicks:

  • Under “Display Settings” tab, select the option Show thumbnail on the left/right of text of Format
  • Select the checkbox Alternate thumbnail position

Content Views Pro - Vertical zigzag thumbnail


Customization

If you want zigzag thumbnails to touch each other in an edge, like this:
zigzag thumbnail touch in an edge
Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

@media (min-width: 992px) {
#pt-cv-view-VIEW_ID .pt-cv-thumbnail {width: 50%!important; margin-bottom: 0!important;}
#pt-cv-view-VIEW_ID .pt-cv-content-item {padding-bottom: 0!important}
#pt-cv-view-VIEW_ID .pt-cv-title {padding-top: 30px}
}

(replace VIEW_ID with ID of your View)

Notice: This customization only works with the Grid layout.

Scroll to Top