Starting with Build 9, fleXon 2 includes CMS Summaries that you can use in your own projects. Right now (October 30, 2026) there are 21 different templates. You'll find everything from simple blog layouts to quite complex magazine-style templates – so your website can break out of the usual 1, 2 or 3 column layouts.
A CMS Summary is the overview of your posts, for example on your blog page or your homepage. In this blog, we'll build an example from scratch, so you can see how they work.
Building your first page from scratch
As an example, let's build a new website completely from scratch. In Elements, click File > New Empty Project. You now have a completely empty page. The very first thing to do is to create the CMS structure. The first screenshot below shows how it should look. This structure is adopted from Realmac's own examples, so you can take it as best practice. If you don't have much experience with the CMS yet, I'd recommend creating it exactly as shown. Of course, your sample blog posts can have different filenames.
The top part of each blog post is called the front matter, and it should look like the second screenshot. In the fleXon samples, I use title, date, author, tags, categories and image. More fields are possible, but if you're new to the Elements CMS, I'd recommend keeping it this way for now. If you don't want to build the example completely by hand, you can get help from the AI of your choice, or you can use the demo project that comes with fleXon. More about that in the last chapter down below.
[[ shortcode.flexon-02-using-cms-summary.step-01 ]]
Adding your first summary template
Now it finally gets started! We begin with a simple example: a 3 column layout. Go to your Templates tab and open the "CMS Summary" segment of fleXon 2. You'll see all available design templates as a list with their names. In our example, we pick CMS Summary -001 and drag it onto our still empty editor canvas. Please make sure to drop this first design template right into the middle of the empty canvas, exactly as shown in the first screenshot. After that, your page should look like the second screenshot.
[[ shortcode.flexon-02-using-cms-summary.step-02 ]]
Now we need to connect the template to your example CMS – or, if you are using it in your own project, to your CMS. Click on the Collection component. In the Inspector, under Settings, you should now see a Missing Page! warning. Click on this warning, and in the dialog that now appears, select Page > cms > posts. Please do not select a single post, select the posts folder. Confirm with Set Link. That's it – your CMS posts are now connected, and you can preview your example in the browser. Please keep in mind that Elements can't show the CMS items in the editor. The CMS needs PHP to run, so you'll only see your posts in the browser preview.
[[ shortcode.flexon-02-using-cms-summary.step-03 ]]
[[ shortcode.flexon-02-using-cms-summary.step-04 ]]
Adding a more complex magazine layout
Now we'll add a more complex layout. Out of the box, the Elements CMS only supports layouts with 1, 2, 3 or more columns. To get a magazine layout, we need a slightly more sophisticated template. But no worries – this is nothing undocumented, and it doesn't need any special code. It is still an out-of-the-box possibility, just with a little trick. Now add CMS Summary -019 and drag it below the template we already added. Your screen should now look like the third screenshot. Inside the template, you'll find 5 Collection components. Select all 5 and connect them to your CMS as described in the chapter before. You can then preview the page in the browser.
What you need to know: in the template, everything is already set correctly. But if you want to change the layout, there is one important thing to understand. This layout uses 5 Collection components, so how do they know to show different content? The answer is the offset. Click on the first Collection component, go to the Inspector and scroll to Pagination. For the first item, you'll see Items Per Page set to 1 and Offset set to 0. That means the collection shows 1 item and starts with the first one in the list. If you now click on the Collection of the second item, you'll see Offset set to 1, so it shows the second item. The Collection of the third item has Offset set to 2, so it shows the third item. And so on.
[[ shortcode.flexon-02-using-cms-summary.step-05 ]]
A final word
You have now seen how the principle works. CMS Summary -001 to CMS Summary -008 use a single Collection component. CMS Summary -009 to CMS Summary -021 use between 2 and 12 Collection components, and the Offset setting decides which posts each one shows. It's not difficult, but you do need to understand the chapter "Adding a more complex magazine layout".
A collection doesn't always have to show just 1 item. CMS Summary -009, for example, has one collection with Items Per Page set to 1 and Offset set to 0, and a second one with Items Per Page set to 6 and Offset set to 1. So the newest post is shown on its own, and the next 6 posts follow in the second collection.
All collections sort your posts by date, with the newest first. So when you publish a new post, it automatically takes the first position and all other posts move down by one. You don't have to change anything.
Now it's your turn: try out the other CMS Summaries. You connect them to your CMS in the same way.
How to preview the design sections
There is one more thing worth knowing when you design with fleXon 2. Elements 3 currently doesn't show a preview of the design templates in the Templates tab – you only see their names. That can make it hard to pick the right one. My recommendation: always keep the fleXon preview site flexon-elements.weaverpixel.com open in your browser next to Elements. For example, if you're looking for a hero, open the Hero section there and you get a live preview of all available hero templates. I'd say that's a good workaround until Elements offers its own preview.
[[ shortcode.flexon-01-getting-started.step-10 ]]
Where do I find the included project file?
fleXon 2 doesn't only come with single design templates – it also includes a complete project file with various examples. Here is how to find it:
- Create a new project in Elements.
- The projects panel opens and shows you a selection of projects.
- Click
See All Library Itemsto show the full list. - Scroll to
fleXon - Template Wireframesand open it.
[[ shortcode.advertising.ad-sorcodes-toc ]]