Structure first: how to wireframe an Elementor page before you style it.

1. Build in the order it gets read

A web page is read top to bottom, once, quickly. That makes it an argument, and an argument has an order: what this is, why it matters, why I should believe you, what it costs, what stops me, what to do now. When the blocks arrive in that order, the visitor never has to scroll back up. When they don't, no colour scheme fixes it.

The ASAS library is organised around this. The rooms are grouped into wings — page structure (entrance, façade, close), trust & media (voices, figures, logos, team), the market (merits, stairs, bundles, questions, threshold) — and a page is a walk through the house. You do not need ASAS to use the order, but it helps to have the rooms named.

Decide what the page says before you decide what it looks like. Colour is loud. It will win any argument you let it into early.

2. The ten-room home page

Here is the recipe every ready-made Home page in the library follows. Each line is one room and one block. Swap any block; keep the order until you have a reason not to.

Notice where the proof sits: figures and voices come after the merits and before the price. A visitor who has just read a claim wants evidence, and a visitor who is about to read a price wants to have already decided you are credible. Move the testimonials below the pricing and you will watch the bounce rate on the pricing block go up.

A services page drops the team and the figures and adds a Daraj (stair — process) and a Bunoud (checklist). A contact page is entrance, façade, reach, map, bulletin, threshold, close. The order rule holds; only the rooms change.

3. Three checks you can only do in grey

The squint test

Zoom the page out to 25% or stand back from the screen. In grey, what remains is the hierarchy: the heaviest bars are the headlines, the plates are the images, the small dark rectangles are the buttons. You should be able to read the page's shape — claim, proof, offer, action — without reading a word. If two sections look identical at this size, one of them is not earning its place.

The one-button test

Count the buttons above the fold. In grey they are impossible to miss, because nothing else is dark. One primary action is right. Two is a decision you are asking the visitor to make for you. Three is a menu. Kits love to add buttons; grey makes you defend each one.

The gap test

Every block in the library carries its own padding, so stacked blocks meet at a consistent rhythm. When a stack looks wrong in grey, it is almost always because two adjacent blocks both carry a headline, or both carry an image plate, so the eye finds no step between them. Fix it by swapping one block for a quieter variant in the same room — that is what the names are for. A Hadi (quiet) features block after a loud hero; a Raqiq (delicate) hero before a dense features grid.

4. When to add colour

After the three checks pass, and not one minute before. In the Studio that is one click: a kit sets ink, paper, lines and one accent across every block. Watch what the accent lands on. It should land on the primary button, the eyebrow labels and perhaps a figure — the things you want the eye to visit in order. If a kit puts the accent on a decorative element you did not choose, that is a problem with the block choice, not the kit, and it is much cheaper to see it now than after a designer has spent a day on the brand.

Then the real brand: your type, your photography, your illustration, your motion. The grey plates are shaped to be replaced, and the JSON carries every responsive setting, so a photograph dropped into a plate behaves on phone the way the plate did.

5. Export and import without surprises

An ASAS download is a native Elementor template file. Three things are worth knowing before you click Import.

• Twenty-four blocks per file. A longer page comes down as two files. Import both; insert them one after the other.
• Pro widgets. Elementor silently removes any widget it does not have when importing. The Studio names every block in your stack that uses an Elementor Pro widget before you download, so a page never arrives with holes you didn't expect.
• Loop items. A block that repeats a post (a Halqa — ring) travels as a small folder: the page plus the loop item it draws. Elementor cannot link two imported files to each other, so pointing the loop widget at the imported item is one manual step on your side. The folder includes a note that says exactly where.

The import itself: Templates → Saved Templates → Import Templates, choose the .json, then insert from My Templates inside the editor. Placeholder images are fetched from ASAS during import and copied into your media library; replace them and delete the originals when you're done.

6. The checklist

Pin this next to the editor. Every box should be ticked in grey before any kit is applied.

1. The page reads as an argument top to bottom: claim → why → proof → price → objections → action.
2. Proof (figures, voices, logos) sits between the merits and the price.
3. The page passes the squint test: its shape is legible at 25%.
4. One primary button above the fold. Every other button has a reason.
5. No two adjacent blocks carry the same loud element (two headlines, two plates).
6. The stack still reads correctly under at least three kits.
7. The Studio's Pro-widget warning is empty, or you own Elementor Pro.
8. Phone preview checked: the first plate's caption works alone.

Then, and only then, make it yours.