Post grids

There are an infinite amount of possibilities  available within Visual composer. Grids are controlled using master grids created within VC Grid builder software.

All grid imagery should be uploaded at 2880px wide and personal either 16:9 1:1 or custom proportions dependent on layout need

Many custom grids have been created (Numbers 1 to 28) for existing content and these can be used but remember that they are specific to existing content pages and should NEVER be changed as this will effect published pages and may break them. Custom grids can be created for individual needs but they may require additional CSS and front end work to make them look correct in Magento. In the majority of cases this will not be the case but please be aware. In most instances these do not support responsive imagery.

1. Default visual composer elements

You can use preconfigured VC grids to show content but many of these will not look correct in the Magento front end. Some will work OK for instance example one is a simple image grid. Please note that these images use a background image function to place images and these will not be responsive. It will be necessary to individually size and optimise each image.

Simple image grid from default setting (Media Grid: Default)

(non responsive images)

Simple masonry grid from default setting (Masonry Media: Default)

(non responsive images)

2. Custom AJ grids for Magento

We have created 4 standard grids which can be used for displaying a list of posts as images or displaying a set of images from the media gallery.

These grids will presents either 1:1 square images in a grid or 16:9 landscape images in a grid. Options for text or no text overlay are available by choosing a different grid layout.

A&J custom post grid 1:1 ( 28_AJ_Master 1:1 text overlay and 31_AJ_Master 1:1 )

A&J custom post grid 16:9 (32_AJ_Master 16:9 and 29_AJ_Master 16:9 text overlay)

A&J custom post grid to 16:9 with title, caption text and zoom image (35_AJ_Master_image grid 16:9 zoom (text+caption)

More complicated image combinations.

In order to preserve responsive images we suggest constructing more complicated image grids using a combination of 1:1 and 16:9 image blocks. These can be constructed from either posts or image grids.

Custom image combinations.

This image grid utilises both 1:1 and 16:9 image grids but the "Cottons" image is a custom grid to make the images line up.

A&J custom post grid masonry article (30_AJ_Master Blog grid)

This grid will display  either a grid or a masonry grid of posts.

  • Title
  • Image
  • Linke
  • Content snippet

4. A&J custom IMAGE grid masonry text overlay (25_AJ_image gallery_zoom)

It is possible to apply any grid to either a IMAGE grid, IMAGE masonry grid, POST grid or POST masonry grid. This WILL NOT necessarily always have a desirable effect as most grids are designed for specific in page modules. Shown here is an example of applying an existing grid to a set of images in a masonry grid.

This grid will not pull responsive images correctly as to create a masonry effect VC uses a background image and this is not possible to control using Responsify. (potentially in future releases.

What type of content can I add to a grid?

Content and images can be added in a number of ways dependent on the module functionality but the most usual will be

  • Specific images from the Media library
  • Posts from a specific category (note sometimes posts are created simple to create dynamic image lists which can then be redirected to other pages an example of this would be the Our fabric page image grid.
  • Indeividual posts or pages which can be added to a list
  • Other options are described in the Visual composer documentation

Request your free samples

If you’re happy with your selected fabric samples and product details cards, fill in your details below and we’ll pop your lovely Arlo & Jacob swatch pack in the post for free.

Your free fabrics

Your free details cards

Your details

Your Address details

(Don’t worry, we won’t share your data with anyone else).
Read our full privacy policy.