Getting Started with fleXon 2 – From Empty Page to Complete Layout in Minutes

Chances are you're reading this blog because you just bought fleXon 2 – so first of all, thank you very much! I hope you'll have as much fun building websites with it as I had creating all those design templates.

This blog shows you what your first steps with fleXon 2 can look like. We'll start with the question most people ask right after the purchase: where do I actually find fleXon? Then we'll build a complete page together, step by step – with a navigation, a hero section, content, a contact section and a footer. At the end, I'll show you where to find the project file that comes with fleXon 2.

You don't need any special knowledge for this. If you know how to drag something with your mouse, you're ready to go. And as the title already says: from an empty page to a complete layout, it really only takes a few minutes. Filling it with your own texts and images is then your part – but with the design already done, you can fully focus on your content.

Where do I find fleXon after purchase?

After buying fleXon 2, nothing visible has changed in Rapidweaver Elements at first. No project is loaded or anything like that. But if you go to the Templates tab, as shown below, you'll see the whole fleXon 2 library. Right now (October 14, 2026) there are 256 templates in 26 segments. The number is growing fast, and every update adds new design templates. Please keep in mind that the Elements interface is very flexible, so your Templates tab may be in a different place than in the screenshots.

[[ shortcode.flexon-01-getting-started.step-01 ]]

Building your first page

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, and it should look like the screenshot below.

Elements is very flexible, and you can arrange its interface to suit your personal preferences – so your screen may look a little different. To follow this tutorial easily, I recommend arranging your Elements interface like the one shown below. It's a good setup for everyday work anyway.

[[ shortcode.flexon-01-getting-started.step-02 ]]

Adding your first design templates

Now it finally gets started! Every website needs a navigation – it's the first thing your visitors look for and the one element they use on every single page. That's why we begin with it and then add the other sections one by one.

The navigation

Go to your Templates tab and open the "Navigation" segment. You'll see all available design templates as a list with their names. In our example, we pick Navigation -035 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 screenshot.

[[ shortcode.flexon-01-getting-started.step-03 ]]

Now it gets fun. Go back to your Templates tab and add the next sections one after another.

The hero section

Open the "Hero" segment and drag Hero -004 below your navigation. This is the big eye-catcher at the top of your page – the first thing your visitors see.

Tip: We dropped the first design template right into the middle of the editor canvas. For all further design templates, I recommend a different way: drag the design template onto Untitled Page. It is then placed directly below the navigation, so you don't have to worry about where exactly it lands. Of course you can still drop it into the editor canvas if you prefer.

[[ shortcode.flexon-01-getting-started.step-04 ]]

The content

Next, open the "Card Box" segment and drag Card Box -008 below the hero. Cards are perfect for presenting your services, features or products.

[[ shortcode.flexon-01-getting-started.step-05 ]]

The contact section

Now open the "Contact" segment and add Contact -005. This gives your visitors an easy way to get in touch with you.

[[ shortcode.flexon-01-getting-started.step-06 ]]

The footer

Finally, open the "Footer" segment and drag Footer -010 to the very bottom of your page.

And that's it – in just a few minutes the complete layout of your page is done: navigation, hero, content, contact section and footer. Every section is already fully responsive and supports light and dark mode, so there is nothing you have to set up.

[[ shortcode.flexon-01-getting-started.step-07 ]]

Changing the look with a theme

The fleXon 2 design templates are of course fully compatible with the Elements theme system. So open the Elements themes and pick the one that comes closest to what you have in mind. In our example, I choose the Solar theme. Click on it and go back to your website – you'll see the difference right away. Of course you can pick any theme you like and adjust it to your taste.

[[ shortcode.flexon-01-getting-started.step-08 ]]

Your new website

Below you can see the complete page we created in just a few minutes – with a navigation, a hero section, content, a contact section and a footer, all in the Solar theme. It already works on every screen size, from a small phone to a large desktop, and it switches between light and dark mode automatically.

[[ shortcode.flexon-01-getting-started.step-09 ]]

Now it's your turn: replace the placeholder texts and images with your own content and link your menu items to your pages. The design work is already done – you only need to fill it with life.

For your next pages, simply repeat the steps and pick the matching design templates from the library. My tip: turn your navigation and footer into Globals. Then you only have to edit them once, and every page stays up to date.

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 Items to show the full list.
Scroll to fleXon - Template Wireframes and open it.

[[ shortcode.advertising.ad-sorcodes-toc ]]