From Uncode 2.6.0, the Posts and Media Gallery modules offer a new layout variation named Pattern. With the custom Pattern, you can create modern and creative procedural grid layouts based on a Content Block with no limits on creativity. This new mode allows you to create creative and modern layouts, in complete freedom, with high visual impact, for your Portfolios, Blog Posts, Products, and Media Galleries. Custom Pattern allows you to create a custom grid through the Page Builder and use it as a matrix to display your elements through an advanced procedural system.

Here are some examples of Custom Pattern:

• Features Pattern
• Portfolio Pattern
• Media Gallery Pattern
• Blog Pattern
• Shop Pattern

How it works

Creating a Pattern layout is very easy because you take advantage of all of Uncode's grid options, so plenty of design and responsive settings are available. Let's see how to do it.

1. First, you need to create the Pattern using a Content Block. Please note that once a Pattern is created, it can be used to display both Post Types (Blog, Portfolio, and Products) and Media Galleries of images. Create a grid to your liking, which will become your Pattern structure. Please read the specifications in the 'Pattern and Rows Structure' section, screenshot ;
2. Insert a 'Placeholder' module in the columns where you want to display a thumbnail. The Placeholder module represents the position occupied by an element part of the referenced Query, so a thumbnail will be shown where the Placeholder module is placed. To better understand the functioning of the Placeholder module, you can read the corresponding section, 'Placeholder Module'. Please note that if you create a design of 3 Rows containing 6 Placeholder modules, and your Query or your Image Gallery contains 24 posts or images, Uncode will procedurally repeat your Pattern until all elements are shown. In this case, four iterations will be created (24/6 = 4). In a few words, the Pattern you have made will be used as a matrix to display all the content of the Posts or Media Gallery module, screenshot ;
3. Now that the Pattern has been created, please open a page and insert a Posts or a Media Gallery module, select the Pattern mode and link the Content Block with the Pattern, screenshot ;
4. Set the design options in the Block tab to your liking to define the layout of the thumbnails that are part of the loop, as is usually done in Uncode with all other design modes.

Note that once you have created a Pattern, it can be used from the Posts module and the Media Gallery module. In addition, the same 'Pattern' can be used by multiple pages and populated with different content.

Pattern and Rows structure

When creating a Pattern, you must create a container Row with Inner Rows to house the content (note that this is a requirement). However, the external Row is not considered when rendering the page because it is replaced by the Row that contains the Posts or Media Gallery module, screenshot .

In a few words, when the page is rendered, the External Row contains the Posts or Media Gallery module, and the Internal Rows are the ones defined in the Content Block. Any kind of modification that is applied to the parent Row of the Content Block is non-influential. So if you want to change the Background of a Pattern layout, you have to work on the Row that contains the Posts or Media Gallery module. If instead, you want to modify, for example, the spacing, the Skin, or the Background of the columns, you have to intervene on the Inner Row of the Content Block. Please note that if you want to space the columns on the vertical rhythm, you have to work on the Column of the Main Row. To summarize, the Content Block first level parent Row acts only as a 'technical' container that is replaced in the rendering phase by the Row of the parent page.

Wireframes

From the Wireframes Plugin, it's possible to import several ready-to-be-used Patterns. Please note that the Wireframe Pattern should be imported into a Content Block and then linked from a Posts or Media Gallery module on the main page. If you want to use one of the Patterns of the Wireframes plugin, please follow these simple steps:

1. Create a Content Block, import a Pattern, and save the Content Block;
2. Insert in the page where you want to display the Pattern a module Posts or Media Gallery;
3. Activate the Pattern mode and associate the Content Block Pattern.

Placeholder module

Please use the Placeholder module to build custom layouts using the Posts and Media Gallery modules Pattern display feature. Once a Content Block with a Placeholder is associated with the Posts and Media Gallery modules, all Placeholders will be procedurally replaced by the elements part of the Query (Blog Post, Portfolio, Products, or Images). In a few words, a Placeholder element represents the position of a thumbnail on the final page. NB. Please note that the Placeholder is only visible as a stylization when used in a Content Block via the Frontend Editor to create a Pattern; this happens because the same pattern can be used on the final page to create loops of different Posts Type. When rendered via a page that uses the Pattern, it faithfully represents the real page's rendering.

Notes

• Due to technical limitations, it is impossible to insert modules with animations inside a Column with Parallax. For example, please don't use a Placeholder module with Opacity animation inside a column with Parallax since it is impossible to correctly calculate the position and instantiate the animation at the right moment.
• The Pattern method is not compatible with Sticky Scroll.