The theme: a beautiful page without being a designer
A theme is more than a colour: fonts, colours, corners, buttons, motion and section layouts designed to work together, in Arabic, French and English. You pick one of ten, then make it yours with your colour and fonts, and you cannot break it: every option in the panel is safe, and colours are adjusted so text stays readable. Our example: Meriem, a home-fitness coach, moves her page from “Midad” to “Nabd” and keeps her teal.
- Two to five minutes
- 8 steps
Who can do it: Anyone with “Edit showcases”.
Let Noqta show youIn 8 steps
- 1Open “Theme”: ten cards, each showing your own page’s opening; tapping one resets every knob to that theme’s design.
- 2Turn on “Keep my colour” before tapping a card, or choose the “Brand colour” or “Use my workspace colour”: its shade is adjusted to stay readable.
- 3Set the “Highlighter”, the “Greys” and a light or dark “Base”.
- 4Choose the “Fonts” from three pairs, then the “Corners”, “Density” and “Buttons”.
Show all
- 5“Reveal motion”, “Buy button motion” and “Theme ornaments”, with “As designed” beside each group.
- 6“Theme layouts” gives the unlocked sections the theme’s layouts, in one undoable step.
- 7A section’s “Tone”: “Automatic” is usually enough, and some sections allow only certain tones.
- 8Try freely: “Before a theme change” in “Versions”, “Undo”, and nothing reaches visitors before you publish.
Before you start
- A showcase open in the editor: “Identity” in the bottom bar on a phone, or “Identity” in the “Sections” panel on a computer.
- Your brand colour if you have one: its code like #0e7c66, or your workspace colour saved in the site settings.
- A clear photo in the “Opening”: the cards show it in every theme.
- Step 1 of 8
“Choose a theme”: your page in every card
You see your own page’s opening in ten themes, and pick in one tap the identity that suits your audience.
- In every cardYour title, price and photo in that theme, with its name and audience: “Fus'ha” for parents, “Laqta” for editing and photography.
- What changesThe whole identity: colours, fonts, corners, density, buttons, motion, ornaments. Your text, images and sections stay.
- In that orderPick the theme first, then customise: tapping another theme resets all your adjustments to its design.
TipChoose for your audience rather than your own taste: “Fus'ha” for parents, “Laqta” for content creators, “Satr” for programmers.
All the details
Under “Choose a theme” (“Each card shows your own page opening in that theme.”) sit ten cards with your title, price and photo, and the theme’s name and meaning: Midad (copybook ink, a lesson made clear — school, tutoring, languages), Ufuq (growth and confidence — coaching, marketing, freelancing), Laqta (a dark screening room — video editing, photography, design; dark base), Satr (a line of code — programming, data, Excel), Mishkat (light and serenity — Quran, Arabic, calligraphy), Fus'ha (recess, joyful and safe — children’s courses parents buy), Nabd (pulse and energy — fitness, sport, nutrition), Waqar (quiet luxury — high-ticket mentorship and consulting; dark base), Warraq (the bookseller-copyist — authors, books, PDFs), Mashghal (the workshop — pastry, sewing, crafts). Tap a card and the theme spreads over the page from it. A theme is a whole identity: tapping resets the brand colour, highlighter, greys, base, fonts, corners, density, buttons, motion, ornaments and “Buy button motion” to that theme’s design. Your text, images, section order and section layouts do not change.
On screenThemeChoose a themeEach card shows your own page opening in that theme.Heads-upAdjusted the corners or buttons, then tapped another theme? They all go back to its design. Pick the theme first, then customise.
- Step 2 of 8
Your colour: “Keep my colour” and the “Brand colour”
You keep your brand colour in any theme; the platform adjusts its shade so text and the buy button stay readable.
- “Keep my colour”Turn it on before tapping a theme card: fonts and shapes change, your colour stays.
- Where the colour comes fromTwelve named colours, your own “Colour code”, or “Use my workspace colour” from your site settings.
- A very light colour?It can’t carry white text: the theme darkens the button text and tells you so, so the buy button reads.
TipWrong code? The panel says “Type a code like #1f53b8”. Copy the code from your logo or your site settings.
All the details
When your colour differs from the theme’s, “Keep my colour” shows above the cards (“Fonts and shapes change, your colour stays.”): turn it on before tapping a card to keep your colours. In the “Colours” tab, choose the “Brand colour” (“Pick any colour. We adjust its shade so text stays readable.”) from twelve named colours (Bookbinder red, Dirassa orange, Horizon green, Ink blue…), or a “Custom colour” by typing the “Colour code”, or “Use my workspace colour” when your site settings hold another one. Under the field, “Your colour” and, beside it, what will really show: “Shown as is” or “Shown like this so text reads well”, then four squares in the four tones so you see the letter and the button on every background.
On screenKeep my colourCustomiseColoursBrand colourCustom colourColour codeUse my workspace colourYour colourShown as isShown like this so text reads wellHeads-upA very light colour (Sunny yellow, say) cannot carry white text: the theme makes the button text dark and tells you so. That is on purpose, so the buy button stays readable.
- Step 3 of 8
Highlighter, greys and base
You set the colour of highlighted words, the shade of the greys and a light or dark base; the panel warns you if reading gets hard.
- The “Highlighter”“None”, “From your colour”, or eight shades from Saffron to Pistachio.
- Light or dark?Dark suits photography and video editing; light suits most lessons.
- To go back“As designed” resets highlighter, greys and base, and leaves your colour alone.
All the details
The “Highlighter” colours the words you highlight in your text: “None”, “From your colour”, or eight shades: Saffron, Gold, Apricot, Rose, Lavender, Sky, Mint, Pistachio; “Now:” shows your choice. The “Greys”: “Neutral”, “From your colour”, “Warm” or “Cool”. The “Base”: “Light” or “Dark” (“Dark suits photography and video editing. Light suits most lessons.”). If anything becomes hard to read, the panel says so plainly, like “Text is hard to read in the Inverse tone.” or “The highlight covers the text in the Inverse tone.”. “As designed” beside “Colours” resets the highlighter, greys and base, and leaves your colour alone.
On screenHighlighterNoneFrom your colourNow:GreysNeutralWarmCoolBaseLightDarkAs designed - Step 4 of 8
Fonts and shape
You choose a font pair, corners, density and buttons that fit your theme, seeing every option before you tap it.
- “Fonts”Three pairs per theme, a heading face and a text face, measured to keep the page light on phones.
- “Shape”Corners from “Sharp” to “Pill”, density, and buttons: “Solid”, “Tactile”, “Arrow” or “Framed”.
- Your own font?It can’t be uploaded: the pairs are chosen so Arabic and French show correctly.
TipYou cannot upload your own font: the pairs are chosen so Arabic and French show correctly and the page stays light.
All the details
“Fonts” (“Three pairs that fit this theme.”): every theme has three pairs, a heading face and a text face, the first being “Theme fonts” and the other two “Like …” a neighbouring theme; under each pair, the two font names (for “Nabd”: Lalezar · Almarai). All are measured to keep your page light on phones. “Shape”: “Corners” “Sharp”, “Trimmed”, “Soft”, “Round”, “Pill”; “Density” “Compact”, “Normal” or “Airy”; “Buttons” “Solid”, “Tactile” (with a shadow under it), “Arrow” or “Framed”. Every option has a small preview before you tap it.
On screenFontsThree pairs that fit this theme.Theme fontsShapeCornersSharpTrimmedSoftRoundPillDensityCompactNormalAiryButtonsSolidTactileArrowFramed - Step 5 of 8
Motion: reveal, buy button, ornaments
You decide how much the page moves as visitors scroll, whether the buy button draws the eye, and whether the theme’s ornaments show.
- “Reveal motion”“None”, “Calm” or “Lively”. The first screen never moves, so the page opens fast.
- “Buy button motion”“None”, “Pulse” or “Shine”. It starts at “None”, and is disabled while “Reveal motion” is “None”.
- “Theme ornaments”A switch, with your theme’s ornament described under it, like the row of gold dots of “Mishkat”.
Tip“Buy button motion” starts at “None” in every theme. Try “Pulse” on a short page where the button is the point; leave it at “None” on a long page made for reading.
All the details
In “Motion”: “Reveal motion” for sections as visitors scroll, “None”, “Calm” or “Lively”; “The first screen never moves, so the page opens fast.” Then “Buy button motion”: “None”, “Pulse” or “Shine” (“Draws the eye to the button without disturbing reading.”), disabled while “Reveal motion” is “None”, and stopped on phones that reduce motion. Last, “Theme ornaments”: a switch, with this theme’s ornament described under it, like “A pulse bar above headings, oversized count figures” for “Nabd” or “A row of gold dots above headings and under figures, cream paper and green ink” for “Mishkat”. “As designed” beside “Motion” resets all three.
On screenMotionReveal motionCalmLivelyBuy button motionPulseShineTheme ornamentsAs designed - Step 6 of 8
“Theme layouts”: the same sections, another look
You give your sections your theme’s layouts at once, and let Noqta set the page rhythm; both undo in one step.
- “Theme layouts”One button gives every unlocked section the theme’s layout: the “Opening” a poster in “Nabd”, prices a table in “Satr”.
- What staysLocked sections, and layouts that carry meaning: a live’s ticket, a single session’s schedule, a cohort’s weekly curriculum.
- Noqta’s rhythm“Let Noqta set the page rhythm” changes only four “Presentation” keys, never your text or layouts.
TipLove a section’s layout and want it kept? Lock it first (“Lock the section” in the “Layout” tab): locked sections never change.
All the details
“Theme layouts” (“Each theme has its own section layouts, not just fonts and colours: a poster or a statement to open, a receipt or a card to sell…”). The button under it carries your theme’s name, like “Apply “Nabd” layouts to the sections”: it gives every unlocked section that theme’s layout. The “Opening” becomes a poster in “Nabd”, prices become a table in “Satr”, and the page closes on a signed letter in “Mishkat”. A line then says what happened: “5 sections changed layout. Undo in one step if you like.” or “Your sections already follow this theme.”. Some layouts carry meaning and are never replaced: a live’s ticket, the thin band above a live’s opening, a single session’s schedule, a cohort’s weekly curriculum. Next come two Noqta rows, explained in the “Noqta designs and reviews” lesson: “Let Noqta design the page” (“She suggests sections from your course, you choose, she picks layouts and rhythm.”) and “Review as a visitor” (“The buyer’s questions before paying: which your page answers, which it misses, with a one-tap fix.”). Then comes “Let Noqta set the page rhythm”: one step you can undo, which touches neither your texts nor your layouts, only four keys of each section’s “Presentation” (presence, density, cards, width). The offer section’s title (or the “Order form”’s, when the page has one) turns bold, thin strips go compact (“Announcement bar”, a deadline ribbon, logo bands, a one-line “Call to action”…), the “Final word” gets more air, the second of two card grids in a row lays flat, and “Questions”, “Objections”, the story and a guarantee statement sit at reading width. Your head, accent word and pictures choices stay as they are, and locked or hidden sections do not change; on the others those four keys take Noqta’s decision. A line then says what it did, like “Noqta adjusted 4 sections: …”, or “Your page rhythm is already set.”.
On screenTheme layoutsYour sections already follow this theme.Let Noqta design the pageReview as a visitorLet Noqta set the page rhythmYour page rhythm is already set. - Step 7 of 8
The “Tone”: each section’s background
You choose which of your identity’s colours each section’s background takes, and the editor orders them so the page reads with rhythm.
- Where to change it?Pick the section, then the “Look” tab: the tone comes first, on desktop and on phone.
- The rulesThe opening always keeps one tone. “Dark” at most twice on a page of seven sections, “Your colour” only once.
- Broke the rhythm?“Ready to publish?” suggests leaving the tone automatic.
TipKeep “Your colour” for one section that deserves it, like the final word: repeated, it loses its effect, which is why the page allows it once.
All the details
Each section takes a tone from your identity’s colours: “Light”, “Paper”, “Dark” and “Your colour” (on a dark identity “Paper” becomes “Charcoal”). Pick the section, then the “Look” tab: the tone comes first, on desktop and on phone. “Auto” orders the tones so the page’s rhythm alternates, and it is usually best. The rhythm has rules: the opening always keeps one tone so its button stands out, so it has no tone row; “Dark” at most twice, on pages of seven sections or more, and only on numbers, reviews, the offer’s author and the final word; “Your colour” only once; offer sections are never dark. So each section only shows what suits it. If you pick a tone that breaks the rhythm, “Ready to publish?” suggests leaving it automatic.
On screenLookAutoLightPaperDarkYour colourCharcoal - Step 8 of 8
Try freely
Try themes as much as you like: everything undoes, and visitors see nothing until you publish.
- A version beforeThe first look change keeps “Before a theme change” in “Versions”, and “Undo” steps back.
- How to check?Switch “Phone” and “Desktop” at the top of the editor, or open “Preview”.
- This showcase onlyThe theme doesn’t carry to your other showcases: choose it in each one.
All the details
The first look change keeps a version named “Before a theme change” in “Versions” (then at most one every ten minutes), “Undo” steps back, and “Theme layouts” undo in one step. Check the result with “Phone” and “Desktop” at the top of the editor, or with “Preview”. Visitors do not see the new theme until you publish. At the bottom of the panel, “Apply to all my showcases” is disabled, with: “Coming later: one theme for all your showcases at once. For now the theme is saved for this showcase only.”
On screenBefore a theme changeVersionsUndoPhoneDesktopPreviewApply to all my showcasesHeads-upThe theme is saved for this showcase only: for another showcase in the same theme, choose it there.
After the theme
Questions
Why did my colour change a little?
Because text on it would have been hard to read. Its shade is adjusted, the panel says so (“Shown like this so text reads well”), and your original colour stays in the field as you typed it.
I tapped a theme and lost my colour — what now?
Press “Undo”, or pick your colour again in “Brand colour”. Before trying the cards, turn on “Keep my colour”: it shows above them when your colour differs from the theme’s.
Can I upload my own font?
No. Each theme has three pairs, chosen and measured so the page stays light on phones and Arabic and French show correctly.
Does the theme change for my visitors right away?
No. It shows in the editor at once, and reaches visitors when you publish.
Does “Theme layouts” change my text?
No. Every layout keeps your text; the button only changes how unlocked sections look, and it all undoes in one step.
Is a dark theme fine on phones?
Yes, and every theme is checked for readable text in its four tones. “Laqta” and “Waqar” are dark by design, and any theme can be made dark with the “Base”.
Does “Buy button motion” annoy visitors?
It is light, stops on phones that reduce motion, and does not run while “Reveal motion” is “None”. Try it in the preview before publishing.
Can I apply a theme to all my showcases at once?
Not yet. “Apply to all my showcases” is coming; for now each showcase keeps its own theme.