Self-initiated tool · Elementor · English and Arabic
ASAS Studio
Plan the page, then take it into Elementor.
The problem
A styled template can make it difficult to judge the page structure on its own. I built ASAS around a simpler sequence: choose the sections, arrange the page, then apply the visual treatment.
The solution
I built ASAS as a structure-first workspace for Elementor pages. Browse the block library, start from a ready-made page, then stack or swap sections in the order a visitor reads them.
Apply a colour kit and export a native Elementor JSON template. Containers, widgets, spacing, and responsive rules stay editable after import. The library supports English and Arabic, including right-to-left layouts.
Structure first. Colour earns its turn.
Then take it into Elementor
I arrange the page before committing to its visual treatment. Blocks can move, the hierarchy can change, and a colour kit can test the composition. The exported Elementor template remains editable.
The workflow
Choose the sections. Browse blocks by what they do on a page.
Arrange the journey. Reorder sections before committing to the layout.
Apply the visual system. Use a color kit to assess the composition.
Export the page. Take the native template into Elementor and keep editing.
Watch ASAS in use
Ten short lessons on page structure, proof, hierarchy, spacing, and color. Watch them in order or choose the decision you are working on.
ASAS 01 — Build Your Elementor Page Before Styling
Most Elementor pages start with somebody else's colours. ASAS starts with the structure instead: 3,881 real Elementor blocks, drawn in grey.
ASAS 02 — A Page Is an Argument
A visitor reads a page once, top to bottom. So a good page answers their questions in the order they ask them.
ASAS 03 — Plan an Elementor Home Page with Ten Sections
An ASAS home page is built like a house, with ten rooms. Each room has one job, and every block in the library belongs to one of them.
ASAS 04 — Put Proof Before Pricing on Your Elementor Page
Where you put your proof matters as much as what it says. Figures, testimonials and logos belong after the claim, and before the price.
ASAS 05 — The Squint Test for Elementor Page Hierarchy
Here's the first of three tests you run before any colour. Zoom your page out to twenty-five percent, or step back from the screen.
ASAS 06 — One Primary Button Above the Fold
The second test: count the buttons above the fold. In grey, every button is easy to count, and hard to hide behind colour.
ASAS 07 — Check Spacing and Rhythm Between Elementor Blocks
The third test is about rhythm: what happens where two blocks meet. When two loud blocks sit next to each other, the hierarchy collapses.
ASAS 08 — Apply Colour After Planning Your Elementor Page
Colour is loud. It will win any argument you let it into early. So in ASAS, colour is the last move, after the page passes all three greyscale tests.
ASAS 09 — Test Your Elementor Page with Three Colour Kits
ASAS has twelve colour kits. Each one is ink, paper, lines and one accent. The point of trying them isn't to find a favourite. It's to test the structure.
ASAS 10 — Use Accent Colour to Guide Attention in Elementor
Every ASAS kit has exactly one accent colour. Where you spend it decides where the eye goes.
A conversation is a good place to start.
Let’s talk about
the work.
Send the role, or your website and what needs to change.
Warren, Michigan