# A section’s look: tone, layouts, spacing, where it shows and the lock > Every section of your page comes in several layouts of one idea, and the “Look” tab is where you choose how this one section looks: its tone (its background), its layout, its parts and its spacing. Where it shows and its lock are in ⋯ beside its name. Colours, fonts and the page’s density are in “Identity”, for every section at once. The example: Lina, a calligrapher, sets up the page of her workshop “Diwani script”. - Time: About 8 minutes - Who can do it: Anyone with “Edit showcases”. Someone who opens the editor read-only sees the tab without being able to change it. - Updated: 2026-11-01 - URL: https://www.dirassaplus.com/en/guide/showcase-section-style ## In short 1. Pick a section and the panel beside the page opens it; take the “Look” tab, or press the layout’s name on the bar above the section. 2. “Tone” first: “Auto” or only those that suit the section. A section with one tone has no such row. 3. The editor places tones by rules; a choice that breaks them is replaced by the automatic one and “Ready to publish?” warns you. 4. The layouts are drawn with your text and all keep it; the “Noqta picks “…” for this section” card suggests the one your data calls for, with “Try it”. 5. “Parts of the section” shows or hides a part, and the spacing (None · Compact · Normal) brings the section closer to its neighbours. 6. “Where does the section show?” in ⋯ beside its name: everywhere, on desktop only, on phone only or hidden from visitors. 7. “Hidden from visitors” keeps it in the draft away from visitors; “Everywhere” brings it back. 8. “Lock the section”, in the same ⋯, stops it being changed or deleted until you unlock it. ## Before you start - A showcase open in the editor with at least one section. Add sections first with “Add a section”. - The “Edit showcases” permission in your role. - Colours, fonts and the page’s density are set in “Identity”, not here. This tab is about the picked section only. ## The steps ### 1. Open the “Look” tab of a picked section Click a section on the page or in “Sections” and the panel beside the page opens it with two tabs, “Content” and “Look”. Open “Look”, or press the layout’s name on the small bar above the section. In order: the tone (when the section has more than one), the layouts, “Parts of the section” and “Settings” when the layout has them, the spacing, then “On phone”. Where the section shows and its lock are in ⋯ beside its name, not here. On a phone, the section’s sheet has the same two tabs. On screen: «Content»، «Look»، «Parts of the section»، «Settings» Tip: Every change here is one step of the history: ⌘Z undoes it, so try freely. ### 2. Layouts: each one drawn with your text, and the one Noqta picks Under the tone, the layouts in miniature, with “Drawn with this section’s words” above them: each is drawn with your own section’s content and its current tone, so you compare them as you will see them. Tap one: it applies to the section at once, marked with a dot beside its name, and the page changes in front of you; with the keyboard arrows you move between them, applying one at a time. Since a section’s layouts share the same text, nothing is lost. Some don’t use every field (an image absent from a layout without images): the content stays saved and returns when you go back to a layout that uses it. A section with a single layout doesn’t show this group. When your page’s data calls for a particular layout, a card shows above them: “Noqta picks “…” for this section”, with the reason under it; “Try it” switches the layout (“Undo” switches it back), and that layout carries a small “Noqta” chip in the list. The rules come from the data alone: the “Opening” becomes “Course card” when the course has a cover and sells through the order sheet, “Split” with a cover only, “Statement” without one; “Sourced reviews” becomes “Score” when there are enough ratings for the five bars, “Wall” from 3 reviews, “Spotlight” for a single one; “Curriculum” becomes “Contents” from 20 lessons, “Chapters” from 3 chapters with lessons; “The creator” becomes “Profile” when your photo exists, “Letter” without one; “What you get” becomes “Bento” with a cover, “Inventory” without; “Questions” becomes “With contact” when a WhatsApp number is saved, “Accordion” otherwise; “Guarantee” becomes “Three reassurances” with WhatsApp, “Statement” otherwise; the “Final word” becomes “With the cover” with a cover, “Dark slab” without; “Live schedule” becomes “Single date” for one upcoming session, “Cards” for two to four, “Calendar” from five; “Contact” becomes “Chat” with WhatsApp; the “Order form” becomes “With summary” with a cover; “Real numbers” and “The journey” become “Cards”, “Value math” a “Receipt”, “Objections” “Said and answered”. When the section already uses that layout, a quiet line says so: “This is the layout Noqta picks for this section”, with the reason. And when nothing in the data prefers a layout, or the section is still waiting for its data, nothing shows: your taste decides. On screen: «Drawn with this section’s words»، «Noqta picks “…” for this section»، «Try it»، «Noqta»، «This is the layout Noqta picks for this section» Tip: Want all your sections to match your theme? In “Identity” › “Theme”, the “Apply “Nabd” layouts to the sections” button change every section’s layout at once, and undo in one step. Heads-up: The miniatures draw your real content. If the section is waiting for its data (reviews, units, photos…), each layout shows with sample content marked “Example”: not yours, and never on your page. ### 3. The tone: the section’s background The tone colours the section’s background, text and button; its colours all come from “Identity”, not from here. It is the first thing in “Look”, under “From your identity’s colours”: “Auto” (with the tone the section really took beneath it), then “Light”, “Paper”, “Dark” and “Your colour”, each drawn in its real colour with an “A” so you see the text. On a dark identity “Paper” becomes “Charcoal”. Light and Paper go with every section. Dark only with proof sections: real numbers, the offer’s author, verified reviews, video results and the final word. “Your colour” with the final word, the deadline and the seats. Only the tones that suit the section show. The opening always keeps one tone so the buy button stays clear, so it has no such row; and offer sections don’t take dark, as the price stays on a light card. On screen: «From your identity’s colours»، «Auto»، «Light»، «Paper»، «Dark»، «Your colour»، «Charcoal» Tip: Best leave “Auto” on most sections: the editor places tones so the page reads with rhythm. Change one only to make a section stand out. ### 4. How the editor places tones, and what happens if you break the rules The automatic tone follows fixed rules that make any mix look like one designer’s work: the opening is always Base. Two consecutive sections of the same group (say both explain) keep one tone and join into a single band with half the space between them; when the group changes, the tone alternates between Base and Soft. Inverse appears at most twice, only on a page with at least 7 visible sections, never with fewer than two sections between it and another, and is assigned automatically on light themes only. Accent appears once per page. These rules count visible sections only: a hidden section changes nothing about its neighbours. If you pick a tone that breaks them, say Inverse for a section that doesn’t allow it, on a short page, or Accent for a second section, the automatic tone is applied instead, and “Ready to publish?” shows a yellow warning “The tone of the “FAQ” section breaks the page rhythm.” with the reason, and a “Use the automatic tone” button that restores it in one tap. On screen: «The tone of the “…” section breaks the page rhythm.»، «Use the automatic tone»، «Ready to publish?» Tip: Added a reviews section and want it inverse but nothing changes? The page often has fewer than 7 visible sections, or another inverse section is close. Add your sections, then try again. ### 5. The section’s parts and spacing Under the layouts, “Parts of the section”: a switch for each optional part of the chosen layout (a badge above the title, a second button, a picture, a countdown…). Parts differ from one layout to the next, and the content stays saved when you hide one. Then the spacing: “Normal” is the space the page’s density in “Identity” decides, “Compact” half of it, “None” nothing. The section’s background stays whole in all three; only the room above and below changes, to bring two sections of one idea together (a question then a button, say). You can also drag the striped strip under the picked section. The whole page’s density, the corners of cards and pictures and the buttons’ shape are in “Identity” › “Details”, for every section at once. If a section already has a look of its own (set by Noqta, say), under the spacing you read “This section has a look of its own, apart from the identity: heading, cards or width” with “Match the identity”. On screen: «Parts of the section»، «Normal»، «Compact»، «None»، «Identity»، «Details»، «This section has a look of its own, apart from the identity: heading, cards or width»، «Match the identity» Tip: Two neighbouring sections of the same tone join on their own with half the space; tighten them yourself only if the gap is still large. ### 6. Where the section shows: everywhere or on one device Pick the section, then press ⋯ beside its name. At the top of the menu, “Where does the section show?” and four choices: “Everywhere”, “On desktop only”, “On phone only” and “Hidden from visitors”. You might keep a wide section on desktop only, to shorten the page on phones. When it doesn’t show everywhere, a line under its name says where it shows; pressing it opens the same menu, and “Sections” marks it “On desktop only” or “On phone only”. On a phone the same choices are in ⋯ at the top of the section’s sheet. In two-column layouts (text beside a picture), “Look” has the “Flip the order on phones” switch: the two columns swap places when they stack, and the text stays the same. On screen: «Where does the section show?»، «Everywhere»، «On desktop only»، «On phone only»، «Hidden from visitors»، «Look»، «Flip the order on phones» Tip: Lina keeps the “Comparison” section on desktop only because it is wide, then checks with the “Device” switch in the top bar. ### 7. Hide the section without deleting it In ⋯ beside the section’s name, choose “Hidden from visitors”. It isn’t deleting: your text, layouts and settings stay as they are, and the section disappears from the published page. In the editor it stays visible but faded, with the line “Hidden from visitors” under its name. To bring it back, choose “Everywhere” in the same menu, or press the line under its name. Each choice is one step of “Undo”. On screen: «Hidden from visitors»، «Everywhere» Tip: Prepare a section before launch season (limited seats, a special offer) and keep it hidden, then show it the day you need it: no rewriting. ### 8. Lock the section so it cannot change by mistake In ⋯ beside the section’s name, choose “Lock the section”. The line “Locked: its text and look stay as they are until you unlock it” appears under its name, with “Unlock” beside it. A locked section can’t have its text, look or tone changed, and can’t be deleted. The lock doesn’t stop visitors seeing the section, nor you unlocking it whenever you like: “Unlock” on the same line or in ⋯. On screen: «Lock the section»، «Locked: its text and look stay as they are until you unlock it»، «Unlock» Tip: Lina locks the “Guarantee” section after writing its text with her lawyer: nobody on her team changes it by mistake. ## Once the layout is set - Set the whole theme: Colours, fonts, corners and motion in “Theme”, for every section. - Add and order your sections: Search, tabs, trying before adding and page limits in the lesson on adding sections. - Run “Ready to publish?”: The tone warning, the count of hidden sections and the rest show up there with their fix buttons. - See the page on every device: Switch “Phone”, “Tablet” and “Desktop” in the top bar to see what you hid. ## Questions **Does switching layout change my text?** No. All of a section’s layouts share the same text: you switch and come back with nothing lost. If the new layout doesn’t use a field, its content stays saved. **Why doesn’t the “Noqta picks” card show on my section?** Because Noqta only suggests a layout when your page’s data calls for one: a cover, your photo, the number of lessons, verified reviews, a WhatsApp number, upcoming dates. When the data prefers no layout, or the section is still waiting for its data, the choice is your taste. **Why don’t I find the “Inverse” or “Accent” tone for my section?** Because tones are shown by what suits the section: Inverse for the proof sections (real numbers, the creator, sourced reviews, video results, the final word) and not for offer sections, Accent for the final word and for deadline and seats, and the opening is always Base. **I chose a tone and it doesn’t apply, why?** The editor respects your choice if it doesn’t break the rules, otherwise it applies the automatic tone. Common reasons: Inverse needs at least 7 visible sections and distance from another inverse one, Accent appears once. In “Ready to publish?” you find the warning “The tone of the section breaks the page rhythm” and the “Use the automatic tone” button. **What do “phone” and “desktop” mean in visibility?** Phone: the page is under 640 pixels wide. Desktop: 640 pixels and over, tablets included. To try, switch “Device” in the top bar. **What’s the difference between hiding and deleting a section?** A hidden section stays in the draft with its text and settings and no visitor sees it; you can show it again any time. A deleted section goes, and only comes back with “Undo” or by restoring an older version from “Versions”. **Does the lock stop page visitors from anything?** No. The lock protects you and your team from changing, moving or deleting by mistake; it has nothing to do with what the visitor sees. **Where do I change the section’s colours?** In “Theme”, not “Layout”: every colour derives from the theme, and the tone picks which of them the section takes. **Why doesn’t “On phone: image after the text” appear in my section?** It only appears for two-column layouts (text beside an image or a card). Try a layout of that kind, or keep the order the layout chose.