How to create a landing page with the Super List Block plugin


Aurooba Ahmed has developed the Super List Block plugin with which you can nest blocks within lists and easily create a content grid.

As a practical example, in this post we are going to see how to create a small landing page with Super List Block.

What is intended in this exercise is to see the possibilities of the Aurooba Ahmed plugin. Clearly the same can be achieved, with group and column blocks.

We are going to work with an (advanced) theme generated using Block Theme Generator Carolina NymarkActually, you can work with any block theme.

Create a new page first. We will choose the “No title” template to remove the page title. Depending on the theme you are working with, this can be done differently. We are also not concerned now about removing the header and footer, leaving the page empty.

1. Insert the Super List block, changing style and orientation

As you can see in the GIF, once the Super List block is inserted, we have a default list of two elements. More can be added but we will work with these two. You can use the list view to better see the structure. Next, change the list’s style and orientation (from portrait to landscape). To do this, you can use the options button that appears at the top of the block, when you select it; or the block configuration that you will see on the right side.

2. Fill the two elements of the list with content

In the element on the left, as seen in the GIF, we will insert an image (with full size) and in the element on the right, a text and a button. Then we need the grid that we have created, through the list of two horizontal elements, to be seen at a wide width and centered on the screen. In turn, we want the two elements to be stacked one below the other on a mobile device screen. Let’s see how to do it in the next section.

3. Adjustments to display the grid well on desktop and mobile

Finally, observe in the GIF how the padding value is adjusted (especially so that on mobile you get a small separation around the elements). Also, the Super List block is configured to wide width (or full width, as preferred) and the value of the maximum width of the Sub-item to a value that must be calculated so that the two elements are distributed well, plus the padding and the distance between the elements. All this allows the elements to be viewed well on mobile devices.

Final considerations

The Super List plugin is a good idea to give lists more possibilities in an easy way.