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”.
- About 8 minutes
- 8 steps
Who can do it: Anyone with “Edit showcases”. Someone who opens the editor read-only sees the tab without being able to change it.
Let Noqta show youIn 8 steps
- 1Pick 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.
- 3The editor places tones by rules; a choice that breaks them is replaced by the automatic one and “Ready to publish?” warns you.
- 4The 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”.
Show all
- 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.
- Step 1 of 8
Open the “Look” tab of a picked section
Pick a section and the panel beside the page opens it; then “Look” holds everything that changes how this one section looks.
- Where does it open?The panel’s “Look” tab, or the layout’s name on the bar above the section. On a phone, the “Shape” tab of the section’s sheet.
- What’s in it?In order: the tone, the layouts, “Parts of the section”, “Settings”, the spacing and “On phone”.
- Can I undo?Every change here is one step of the history, and ⌘Z undoes it. Try freely.
TipEvery change here is one step of the history: ⌘Z undoes it, so try freely.
All the details
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 screenContentLookParts of the sectionSettings - Step 2 of 8
Layouts: each one drawn with your text, and the one Noqta picks
You compare the section’s layouts drawn with your own content, and switch between them without losing a word.
- Will I lose my text?No. A section’s layouts share the same text, and what a layout doesn’t use stays saved.
- When does Noqta suggest?When your data calls for one layout: a cover, your photo, the lesson count, reviews. “Try it” switches, “Undo” switches back.
- What you seeEach layout in miniature, with your section’s content and tone. A section waiting for its data shows its layouts with sample content marked “Example”, never saved or seen by visitors.
TipWant 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.
All the details
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 screenDrawn with this section’s wordsNoqta picks “…” for this sectionTry itNoqtaThis is the layout Noqta picks for this sectionHeads-upThe 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.
- Step 3 of 8
The tone: the section’s background
You choose which of the “Identity” colours the section’s background, text and button take.
- What are the choices?“Auto”, “Light” and “Paper” for every section, “Dark” and “Your colour” for some sections only.
- Who gets dark?Proof sections: real numbers, the offer’s author, verified reviews, video results and the final word.
- What doesn’t changeThe opening always keeps one tone so the buy button stays clear: it has no tone row.
TipBest leave “Auto” on most sections: the editor places tones so the page reads with rhythm. Change one only to make a section stand out.
All the details
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 screenFrom your identity’s coloursAutoLightPaperDarkYour colourCharcoal - Step 4 of 8
How the editor places tones, and what happens if you break the rules
Automatic tones make any mix of sections look like one designer’s work, and correct a choice that breaks the rhythm.
- How often?Inverse at most twice, on a page of 7 or more visible sections, never side by side. Accent just once.
- Two sections in a rowFrom the same group, they keep one tone and join into a band with half the space.
- If you break the rules?The automatic tone applies, and “Ready to publish?” warns in yellow, with “Use the automatic tone”.
TipAdded 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.
All the details
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 screenThe tone of the “…” section breaks the page rhythm.Use the automatic toneReady to publish? - Step 5 of 8
The section’s parts and spacing
You show or hide a part of the section, and bring it closer to its neighbours when they complete each other.
- “Parts of the section”Switches for the layout’s optional parts: a badge, a second button, a picture… They change with the layout.
- The spacing“Normal” as the identity decides, “Compact” half of it, “None” nothing. The section’s background stays whole.
- And the rest?The whole page’s density, the corners of cards and pictures and the buttons’ shape are in “Identity” › “Details”.
TipTwo neighbouring sections of the same tone join on their own with half the space; tighten them yourself only if the gap is still large.
All the details
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 screenParts of the sectionNormalCompactNoneIdentityDetailsThis section has a look of its own, apart from the identity: heading, cards or widthMatch the identity - Step 6 of 8
Where the section shows: everywhere or on one device
In ⋯ beside the section’s name you choose where visitors see it, for example to shorten the page on phones.
- Four choices“Everywhere”, “On desktop only”, “On phone only”, “Hidden from visitors”. One choice, one undo step.
- How do you know?When it doesn’t show everywhere, a line under its name says so, and a mark in “Sections”. Press the line to change it.
- The order on phonesIn two-column layouts, flip their order on phones from “Look”. The text stays the same.
TipLina keeps the “Comparison” section on desktop only because it is wide, then checks with the “Device” switch in the top bar.
All the details
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 screenWhere does the section show?EverywhereOn desktop onlyOn phone onlyHidden from visitorsLookFlip the order on phones - Step 7 of 8
Hide the section without deleting it
You take the section away from visitors while its text and settings stay in the draft, until the day you need it.
- Who sees it?No visitor. In the editor it stays faded, and in “Sections” too.
- How does it come back?In ⋯ beside its name: “Everywhere”. Or press the line under its name.
- What changesA hidden section isn’t sent to visitors at all, and doesn’t change its neighbours’ tones.
TipPrepare a section before launch season (limited seats, a special offer) and keep it hidden, then show it the day you need it: no rewriting.
All the details
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 screenHidden from visitorsEverywhere - Step 8 of 8
Lock the section so it cannot change by mistake
You protect a carefully written section, like the guarantee or payment details, from being edited or deleted by mistake.
- What is blockedEditing its text, look and tone, deleting it, until you press “Unlock”.
- Do visitors see it?Yes. The lock protects you and your team; it changes nothing visitors see.
- Where is it?In ⋯ beside the section’s name, on desktop and on phone.
TipLina locks the “Guarantee” section after writing its text with her lawyer: nobody on her team changes it by mistake.
All the details
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 screenLock the sectionLocked: its text and look stay as they are until you unlock itUnlock
Once the layout is set
- Set the whole themeColours, fonts, corners and motion in “Theme”, for every section.
- Add and order your sectionsSearch, 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 deviceSwitch “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.