# 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. - Time: Two to five minutes - Who can do it: Anyone with “Edit showcases”. - Updated: 2026-10-09 - URL: https://www.dirassaplus.com/en/guide/showcase-themes ## In short 1. Open “Theme”: ten cards, each showing your own page’s opening; tapping one resets every knob to that theme’s design. 2. Turn 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. 3. Set the “Highlighter”, the “Greys” and a light or dark “Base”. 4. Choose the “Fonts” from three pairs, then the “Corners”, “Density” and “Buttons”. 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. 7. A section’s “Tone”: “Automatic” is usually enough, and some sections allow only certain tones. 8. Try 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. ## The steps ### 1. “Choose a theme”: your page in every card 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 screen: «Theme»، «Choose a theme»، «Each card shows your own page opening in that theme.» Tip: Choose for your audience rather than your own taste: “Fus'ha” for parents, “Laqta” for content creators, “Satr” for programmers. Heads-up: Adjusted the corners or buttons, then tapped another theme? They all go back to its design. Pick the theme first, then customise. ### 2. Your colour: “Keep my colour” and the “Brand colour” 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 screen: «Keep my colour»، «Customise»، «Colours»، «Brand colour»، «Custom colour»، «Colour code»، «Use my workspace colour»، «Your colour»، «Shown as is»، «Shown like this so text reads well» Tip: Wrong code? The panel says “Type a code like #1f53b8”. Copy the code from your logo or your site settings. Heads-up: A 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. ### 3. Highlighter, greys and base 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 screen: «Highlighter»، «None»، «From your colour»، «Now:»، «Greys»، «Neutral»، «Warm»، «Cool»، «Base»، «Light»، «Dark»، «As designed» ### 4. Fonts and shape “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 screen: «Fonts»، «Three pairs that fit this theme.»، «Theme fonts»، «Shape»، «Corners»، «Sharp»، «Trimmed»، «Soft»، «Round»، «Pill»، «Density»، «Compact»، «Normal»، «Airy»، «Buttons»، «Solid»، «Tactile»، «Arrow»، «Framed» Tip: You cannot upload your own font: the pairs are chosen so Arabic and French show correctly and the page stays light. ### 5. Motion: reveal, buy button, ornaments 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 screen: «Motion»، «Reveal motion»، «Calm»، «Lively»، «Buy button motion»، «Pulse»، «Shine»، «Theme ornaments»، «As designed» 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. ### 6. “Theme layouts”: the same sections, another look “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 screen: «Theme layouts»، «Your sections already follow this theme.»، «Let Noqta design the page»، «Review as a visitor»، «Let Noqta set the page rhythm»، «Your page rhythm is already set.» Tip: Love a section’s layout and want it kept? Lock it first (“Lock the section” in the “Layout” tab): locked sections never change. ### 7. The “Tone”: each section’s background 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 screen: «Look»، «Auto»، «Light»، «Paper»، «Dark»، «Your colour»، «Charcoal» Tip: Keep “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. ### 8. Try freely 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 screen: «Before a theme change»، «Versions»، «Undo»، «Phone»، «Desktop»، «Preview»، «Apply to all my showcases» Heads-up: The theme is saved for this showcase only: for another showcase in the same theme, choose it there. ## After the theme - Images that match: Focal point, descriptions and moving clips. - Keep editing on a phone: Text, sections and tones under your thumb. - A share card in your colours: The automatic card takes your theme’s colours. - Your workspace colour everywhere: Site and app colour, in the school settings. ## 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.