# Add a section and change its order: all of the “Add a section” panel > Your page is built one section on top of another. This lesson goes through the “Add a section” panel: where the new section lands and how to change that place, how to search and browse with the tabs, how to see every section at real size with your own page’s content, how to try it in its place on the page before adding it, and why some sections wait for their data. Then how to order sections by drag, arrows or “Move to…”, and the limits the editor keeps. Example: Karim, a programming trainer, builds the page for his course “Python from Zero”. - Time: About 10 minutes - Who can do it: Anyone with “Edit showcases”. Someone who opens the editor read-only sees the lists but cannot add or reorder. - Updated: 2026-10-09 - URL: https://www.dirassaplus.com/en/guide/showcase-sections ## In short 1. Open “Add a section” from the button, from the + between two sections or from ⌘K; “Where the new section goes” says where it will land and “Change” picks another place. 2. The lens button “Search sections” searches in Arabic, French or English; without a search, browse with “Suggested” and “All”. 3. One tab per goal: Top of the page, Explain the offer, Reviews and results, Price and offer, Answer the doubts, Ask them to sign up. 4. Every section at real size with your page’s content, its layouts as words with the chosen one underlined; “Add” adds it, and what reached its maximum moves to “On your page”. 5. On a computer: hover or click a section and it is drawn in its place with a thin black outline and “Preview”, plus a bar with ← →, “Add here” and ✕. 6. On a phone: “Try” lowers the sheet and shows the section in the page, with “Add section”; swipe sideways to change its layout. 7. Sections that cannot find their data wait in a closed group that gives their reason in its own words. 8. Reorder by dragging the handle, with the two arrows, or with “Move to…”; the headings follow from station to station. 9. A page holds 30 sections, many appear once only, and “Ready to publish?” watches order and count. ## Before you start - A showcase open in the editor. Without one, create it first with “New showcase”. - The “Edit showcases” permission in your role. - A screen of at least 1024 pixels to see the sections panel (about 440 pixels wide) and the page together; on a phone the same panel opens in a sheet from the bottom bar. ## The steps ### 1. Where does the new section land? “Where the new section goes” and “Change” Every door opens one panel, “Add a section”. On a computer it appears in the middle of the screen, over the page. At its top is a small line “Where the new section goes” and under it the current place: “After “FAQ”” if a section is selected or you started from a + under it, “At the start of the page”, or “At the end of the page” if nothing is selected. Beside it the “Change” link opens a list of every possible place: “At the start of the page”, then “After “FAQ”” for each of your sections, then “At the end of the page”, with a check on your current place; pick one and the line changes. The panel’s doors on a computer: “Add a section” under the “Sections” list (after the selected section, or before the closing word when none is selected), the + between two sections on the page itself, and the A key. On a phone, the “+” in the middle of the bottom bar, and “Add a section below” in the section’s menu (⋯). In the ⌘K palette, type the section’s name and “Add: FAQ” adds it at once in its first layout, without opening the panel; ⌘K does not list sections that lack a piece of your offer’s data (see “Sections waiting for their data”). On screen: «Add a section»، «Where the new section goes»، «Change»، «At the start of the page»، «After “…”»، «At the end of the page»، «Sections»، «Add»، «Add a section below»، «Add: …» Tip: After adding, the editor goes to the new section, selects it and opens its properties, with a notification ““FAQ” added” and “Undo”. Adding is a history step like any other: try freely. Heads-up: The published page does not change when you add: everything stays in the draft until you publish. ### 2. Search sections, or browse: “Suggested” and “All” Beside the section’s place, a lens button “Search sections” opens a search field that reads “Search: FAQ, guarantee, curriculum, prix…”; the button becomes ✕ named “Close search” (Esc inside the field closes it too). Type in any of the three languages, even if it is not your interface’s: “أسئلة”, “FAQ” and “questions” find the same section, with no worry about accents, hamza, vowel marks or capitals. The search compares the section’s name, description and keywords, and shows only what you can add right now. If no name matches you read “No section with that name” with “Try “FAQ”, “guarantee”, “curriculum” or “price”.” Without a search, four tabs sit on the side: “Suggested”, “All”, “Lesson tools” and “My sections” (next step). “Suggested” gathers up to eight sections under the line “missing from this page”, each with its reason under its name: first what the “Publishing” check asks you to add (such as the final word), then what this kind of showcase usually carries and you haven’t added yet, with the reason “Missing from your page’s order”, then one section of each goal your page has nothing of; the tab disappears when nothing is left to suggest, and the panel then opens on “All”. “All” shows every section you can still add, under its goal’s heading. On screen: «Search sections»، «Close search»، «Search: FAQ, guarantee, curriculum, prix…»، «No section with that name»، «Try “FAQ”, “guarantee”, “curriculum” or “price”.»، «Suggested»، «All»، «missing from this page»، «Missing from your page’s order» Tip: Karim types “prix” and the offer and price sections his page accepts appear; he types “faq” and finds “Questions”. No need to know the name in one particular language. ### 3. “All”: sections under their goal’s heading In “All”, sections come under one heading per goal, in this order: “Top of the page”, “Catch the eye”, “Explain the offer”, “Reviews and results”, “Price and offer”, “Answer the doubts”, “Ask them to sign up”, then “From your data” and “Other”. Under each heading a line says what its sections do. On a computer the goals’ names show under “All” on the side: click one and the panel scrolls to its heading. “Lesson tools” is a tab of its own: explanations and exercises from inside the lesson that visitors try to see how you teach. Each card says how many layouts the section has; you walk them with “Another layout” when you try it in place. The library offers nothing your page can’t take: the page’s price is one section, so once there is one no other shows. What is already on your page as often as allowed, and sections waiting for their data, are found in search results: the first under “On your page” with a button that goes to it, the second with what they need. On screen: «All»، «Lesson tools»، «My sections»، «Top of the page»، «Catch the eye»، «Explain the offer»، «Reviews and results»، «Price and offer»، «Answer the doubts»، «Ask them to sign up»، «On your page»، «Another layout» Tip: A good page walks the goals in order: the top, what explains, reviews, the price, the doubts, then the invitation to sign up. ### 4. Every section at real size: pick its layout, then add Each section in the list is drawn with your page’s real content and theme, at a size close to the real one (the panel is as wide as a phone), not with sample text, so you see what you will actually get. Under the drawing, the section’s name (for example “Questions”), a line describing it, and at its edge the “Add” button (“Try” on a phone). Below, its layouts as plain words: for questions “Accordion”, “Grouped”, “With contact”, “Open”, “Cards” and “Chat”, the chosen layout underlined; tap a word and the drawing changes. Tap “Add”: the section is added in the chosen layout, at the place shown at the top of the panel, and the editor selects it, goes to it and opens its properties. You can change layout afterwards in the “Layout” tab without losing text. A section that reached its maximum on the page (most appear once only) leaves the list for the “On your page” group at the bottom: a row with a check, the section’s name and a “Go to it” link that selects it in the page and opens its properties. This group disappears during a search. On screen: «Add»، «Try»، «Accordion»، «Grouped»، «With contact»، «Open»، «Cards»، «Chat»، «On your page»، «Go to it»، «Layout» Tip: Add the layout closest to what you want first, then try the others from “Layout”: all of a section’s layouts share the same text, so your writing is not lost. ### 5. Try before you add: the section in its place on the page (computer) You do not need to add a section to know how it will look among yours. On a computer, hover over the section’s drawing for about a quarter of a second, or click it: the section is drawn in its real place on the page, with your content and your theme, inside a thin black outline with a “Preview” tag in its corner, and the page scrolls to it. Above it, a small bar: ← and → (“Previous layout” and “Next layout”) with the layout’s name between them and then its number, like “1 of 5”, then “Add here”, then ✕ (“Cancel”). Choosing another layout word in the panel changes the drawing on the page, and changing the place with “Change” moves the preview along. From the keyboard: ← → move between layouts (wrapping from the last to the first), Enter adds, Esc cancels, and none of this works while you are typing in a field. A section with a single layout shows only its name in the bar. During a preview the + marks between sections and the hover frame disappear. Nothing is saved and nothing enters the undo history before “Add here”: if you click ✕ or close the panel, the page goes back to what it was. On screen: «Preview»، «Previous layout»، «Next layout»، «2 of 5»، «Add here»، «Cancel» Tip: Step through the six layouts of the Questions section with ← →, one after the other, between your real sections: you see which one suits your page before you have added anything. Heads-up: The preview is a temporary drawing: visitors never see it, it is not saved in the draft, and it does not count toward the thirty-section limit. ### 6. Try it on a phone: the section in your page, then “Add it” On a phone the library opens full screen, with “Tap to try it in place” under its title: tap any section and the library steps down, and the section shows inside the page in its place, marked “Trying · not added yet”. At the bottom of the screen, the try bar: the section’s name and its place in its list (such as “2 of 8 in “All””), with “Previous” and “Next” to walk the other sections of the same list (or swipe sideways on the page), a “Section layouts” line to give it another layout, then ✕ (“Cancel the try”) and the “Add it” button. “Add it” puts it in the page and selects it; ✕ puts the page and the library back as they were. Nothing is saved before “Add it”. On screen: «Tap to try it in place»، «Trying · not added yet»، «Previous»، «Next»، «Section layouts»، «Cancel the try»، «Add it» Tip: The library steps down to leave you the whole page: see how the section looks on your real screen, then walk the others before you decide. ### 7. Sections waiting for their data Some sections read your real data; they mean nothing before it exists. They are not listed among the ready sections, in any tab: they gather at the bottom of the panel in a closed group titled, for example, “3 sections waiting for their data” (it disappears during a search); open it and you see each section’s name with the reason it waits underneath, in its exact words, as the section itself writes it, for example: live schedule: “No upcoming live session in this offer right now.”, curriculum: “No published lessons in this offer yet.”, sourced reviews: “Your students' verified reviews appear here once the first is published. Ask for them, or add a sourced screenshot.”, student work: “No work ready: add one and confirm consent.”, guarantee: “Shows only once a refund policy is linked to the offer.”, pay and start: “No payment method is ready for this offer yet.”, contact: “WhatsApp is not turned on in your site settings.”, space window: “No space in this offer.”, certificate: “This section shows only when this course has an active certificate. Turn one on in “Certificates” and it shows with its design and conditions.” with an “Open “Certificates”” button, deadline and seats: “This section only shows with a real date: a price ending, sales closing, an upcoming live, or limited seats.” When the data exists, the section moves up among the ready ones. Advanced offer sections such as Bundle and Build your bundle say which offer they wait for, for example “This section shows with a “bundle” offer: several items at one price the server computes.”; once you link an offer of that type, they move up among the ready sections. On screen: «No upcoming live session in this offer right now.»، «No published lessons in this offer yet.»، «Your students' verified reviews appear here once the first is published. Ask for them, or add a sourced screenshot.»، «No work ready: add one and confirm consent.»، «Shows only once a refund policy is linked to the offer.»، «No payment method is ready for this offer yet.»، «WhatsApp is not turned on in your site settings.»، «No space in this offer.»، «This section shows only when this course has an active certificate. Turn one on in “Certificates” and it shows with its design and conditions.»، «Open “Certificates”»، «This section only shows with a real date: a price ending, sales closing, an upcoming live, or limited seats.»، «This section shows with a “bundle” offer: several items at one price the server computes.» Tip: On Karim’s page the curriculum section says “No published lessons in this offer yet.”: he publishes his course’s lessons from the course editor, comes back and finds the section among the ready ones. Heads-up: The ⌘K palette only lists sections that do not lack a piece of your offer’s data, and does not know the reason a section writes about itself. If you add from ⌘K a section that has nothing to show, it enters the draft, says “waiting for data” in its tag and stays invisible to visitors. ### 8. Order the sections: drag, two arrows, “Move to…” The “Sections” panel shows your page as a list in its real order; each station carries a heading at its first section: “Hook”, “Explain”, “Prove”, “Reassure” and “Decide” (these are not the names of the tabs in “Add a section”); since the headings follow the order and not the other way round, they repeat when you mix the stations. Each row has a dot in the section’s tone colour, its name and layout, and small marks: “Hidden”, “Hidden on phone”, “Hidden on desktop”, “Different on phone”, “Locked”, “Reads your data”, “Not reviewed”; under the name of a section waiting for its data, the reason it waits. Three ways to move: drag the handle at the row’s edge, or tap “Move “FAQ” up” and the opposite arrow to move down (on a computer they appear when you hover the row, on touch after “Reorder” at the top of the list, and “Done” turns it back into a list you tap to select), or, from the section’s floating bar, “More” then “Move to…”: you choose the position from a numbered list that marks the current place. ⌥↑ and ⌥↓ move the selected section. A screen reader announces ““FAQ” moved to position 3 of 9”. And below the list, the buy bar’s state: “Buy bar · page settings”. On screen: «Sections»، «Hook»، «Explain»، «Prove»، «Reassure»، «Decide»، «Drag to move “…”»، «Move “…” up»، «Move “…” down»، «Move to…»، «More»، «Hidden»، «Hidden on phone»، «Hidden on desktop»، «Different on phone»، «Locked»، «Reads your data»، «Not reviewed»، «“…” moved to position 3 of 9»، «Buy bar · page settings» Tip: A locked section neither moves nor deletes: unlock it first from its bar. A hidden section is shown again with the eye on its row. Heads-up: On touch screens the handles and arrows are always visible since there is no hover; and dragging starts from the handle, not the section’s name, so it never gets confused with scrolling the list. ### 9. The page’s limits, and what “Ready to publish?” watches A page holds 30 sections at most, and past 18 visible sections “Ready to publish?” warns you the page is getting long: “The page has 21 sections; it reads better under 18.” Most sections appear once only: “The “Final word” appears only once per page.” Three of them may appear twice (real numbers, student work, the method), call to action three times, and text and media four times. By kind there are also checks: the “Opening” comes first, the “Final word” belongs at the bottom of the page, and a single offer section carries the price and the button; each has a fix button that adds the section, removes the extra one or moves it. In the “Add a section” panel itself, if the page reaches 30 sections you read at the top of the list “This page has 30 sections, the limit. Remove one to add another.” and the “Add” buttons are disabled; someone read-only reads “You cannot add sections right now.” If you try to add or duplicate a section from somewhere else while the page is at 30, the notification “A page holds at most 30 sections.” appears; and if you duplicate a section that reached its own maximum you read “appears only once per page”. A locked section does not move: ““Pricing” is locked. Unlock it first.” On screen: «The page has 21 sections; it reads better under 18.»، «“…” appears only once per page.»، «The “Opening” comes first.»، «The “Final word” belongs at the bottom of the page.»، «This page has 30 sections, the limit. Remove one to add another.»، «You cannot add sections right now.»، «A page holds at most 30 sections.»، «“…” is locked. Unlock it first.» Tip: Need 30 sections? Rarely. A page of 8 to 14 sections, read station by station, beats a long page where the idea repeats. ## Once your sections are in - Set each section’s layout: Tone, spacing, phone and desktop visibility and lock in “Layout”. - Write your text: Tap the section twice and write in place, or from “Content” in the properties. - Run “Ready to publish?”: The checks say what is missing before publishing, with a fix button beside each. - Try it on a phone: Add and reorder from the phone itself, if you like. ## Questions **Where do I find the add-a-section panel?** From the “Add a section” button in the “Sections” panel, the + between two sections on the page, ⌘/ , or ⌘K then “Add: …”. On a phone, from “Add” in the bottom bar. **Can I search in French when my interface is in Arabic?** Yes. The search compares names, descriptions and keywords in Arabic, French and English at once, and ignores vowel marks, hamza and letter case. You find it behind the lens button “Search sections”. **Why can’t I find the section I want?** Three reasons: it doesn’t fit your showcase’s kind so it isn’t listed, or it is waiting for its data and sits in the closed group at the bottom with the reason, or it reached its maximum on the page and sits under “On your page” with “Go to it”. You may also have opened a tab with nothing left to add: you read “No section with that name”; switch to “All”. **How many sections can I add?** 30 at most per page. Past 18 visible, “Ready to publish?” warns you the page is long. Many appear once only; two of a kind are allowed for real numbers, student work and the method, four for text and media. **Do I lose my text if I change a section’s layout?** No. All of a section’s layouts share the same text: you switch from “Layout” and your writing stays. **Can I see the section in my page before adding it? And if I add one by mistake?** Yes: “Try” on a phone, or hovering or clicking the section on a computer, draws it in its place with a thin outline and “Preview”, and nothing is saved before “Add here” or “Add section”. If you add it and regret it, tap “Undo” in the notification that appears right after adding, or ⌘Z; deleting from the section’s floating bar offers “Undo” for six seconds too. **I drag but the section won’t move, why?** Usually because it is locked (unlock it first), or you are dragging by its name instead of the handle at the row’s edge, or the editor is read-only. With the two arrows or “Move to…” you move without dragging. **Does moving change what visitors see on the published page?** Not before you publish. Order and additions go to the draft; the published page stays as it was published until you press “Publish”.