Sections & layout — add, arrange and style any block

Press Add section and answer “Where should it go?”

The button at the top of the section list opens a short list — Top, After each section by name, Bottom. Pick one and the block picker opens with that spot written in its header (“Adding right after your Flash Deals section”).

…or tap a ＋ pill

The dashed pills in the list are the same thing with one tap fewer. On a computer, moving the mouse between two sections in the preview also shows a ＋ Add section here pill on the line between them.

Pick the block

Search by name or browse the groups below. The first group is named after your trade — ✨ Made for your salon, Made for your clinic (Popular starters where the website has no trade of its own) — and those cards are pre-filled with that trade's copy: a salon gets Bridal Packages, a clinic gets OPD timings. My blocks holds sections you saved from other pages. Every block arrives with sample photos and text so it looks finished on the preview at once — replace the samples with your own.

Get it on the page

Home page: press 🖼 Use my own banner slider as the hero in the section list — it hides the design's hero and adds the slider on top, already Full width with square corners. Any other spot: Add section → Banner Slider. New sliders are edge to edge automatically.

Slides

Each slide has Banner photo (computer / wide) — 1600×600 is a good size — and an optional Phone version (1080×1080 or 1080×1350). Phones show the phone version instead of squeezing the wide banner into a thin strip. Optional text over the photo: eyebrow, heading, text, alignment, one or two buttons. Make whole slide clickable turns the entire banner into a link.

A video on a slide (optional)

Every slide has Video for this slide. Upload a short clip and it plays silently over that slide's banner photo. Keep the photo: it is what visitors see first, and the video fades in over it only after the page has finished loading — so a video slide never slows your first screen. Stay on this slide until the video finishes (on by default) makes the slider wait for the clip to end before moving on; turn it off and the clip loops while the slider keeps its usual timing. 6 to 12 seconds works best. Visitors who have switched on “reduce motion” or data saving on their phone see the photo only.

How the slider shows

My slides are ready-made banners — ON when the headline and price are already designed into the image: each banner shows whole, no crop, no dark wash. Banner size: Follow the photo (the slider is exactly as tall as the banner showing — never an empty band; if your banners are different sizes the height changes as they rotate) or Fixed height (uses the Height below and crops the edges — pick this when banners of different sizes must look uniform). Height (Short · Medium · Tall · Full screen · Custom) applies to photo mode and fixed-height mode; each slide also has Photo focus (which part stays visible when cropped) and Text position (top / middle / bottom). The 📱 On phones group sets the phone version separately — height, photo focus, text position, alignment and size, whether the text line shows, and whether arrows and dots show (phones can swipe). 📟 On tablets sets the tablet height and whether arrows/dots show there. Leave any of them on “Same as computer” to inherit. Every slide has a Show text & button switch for photo-only slides; ⬅➡ Arrows & dots sets the arrow style, size and position (edges or a corner pair) and the dot style (dots · lines · numbers) and position (on the photo, or below it); 🔤 Text & button look adds a box behind the text (frosted glass, dark, white, outline), a soft text shadow, the button style (pill · square · outline · link) and size, plus the text column width and size. Slide change effect: Fade, Slide or Slow zoom. Auto-advance seconds (0 stops it). Arrows and dots on or off.

Text readability (photo mode)

With ready-made banners OFF, a dark wash sits over the photo so your typed heading stays readable — tint it with a brand colour, or set its darkness. Colors lets you change the slide text and button colours.

📱 On phones

Layout on phones — Text over the photo (default) writes the heading on top of the picture; Photo on top, text below shows the whole phone banner first and puts the heading, text and buttons on a colour panel under it (the panel uses the “Colour behind the slides”), so nothing covers your picture. Best with a 4:3 or square phone version. Text size on phones has Smaller / Larger and a Custom choice that reveals exact heading and text sizes in pixels; Text size above does the same for computers. Text position / alignment on phones, and the hide switches (small label, text line, button, or everything) finish the phone set — computers keep their own settings.

📐 Layout — width, spacing & visibility

Side space (left & right) is the gap between a block's edge and what is inside it — Default keeps the design's own, None lets photos and cards touch the block's edge, Small / Medium / Large set it explicitly. On phones the whole site now uses a smaller side gap automatically (about 22px from the screen edge for contained blocks, 16px inside full-width bands), and every block also takes its own Width — phones (Full width edge to edge, or Contained) and Side space — phones under 📱 Phones & tablets — so a colour band can run edge to edge on phones while it stays a contained card on computers.

Section width with a Custom slider (480–1400px). Space above / below with presets or exact pixels, and separate phones only / tablets only values. Show this section (the same as the eye icon), Hide on phones / tablets / desktop. Jump link name: type “offers” and any menu item or button linking to #go-offers scrolls straight to this block.

🎨 Look — background, corners & motion

Background photo with a focus point and a light / dark / custom tint; or a gradient — brand colours, soft tint, dark fade, or your own two colours and direction. Corner style (square → extra round, or exact). Card frame: soft shadow, thin border, both, or custom thickness / colour / shadow strength. Entrance animation (fade up, fade in, slide in, zoom). Cards appear one by one — the items inside the block (cards, tiles, photos) fade in one after another as visitors scroll to it. Stick to top while scrolling (computers). Background scroll effect (parallax, computers). Card hover effect (lift or glow).

✨ Pattern & shaped edge

Background pattern draws a quiet texture behind a block's content — dots, a fine grid, diagonal lines, corner rings, or a soft glow in your brand colours. It follows the block's own text colour, so it works on light and dark backgrounds. Keep Pattern strength on Soft for most blocks, and use Where the pattern shows to fade it into the top, one corner or the two sides — calmer than covering the whole block.

Shaped edge ends a block in a wave, a curve, a slant or a small arrow instead of a straight line. It is drawn in the block's own background colour, so give the block a background colour first (it looks best on a block that runs the full width). Choose the bottom edge, the top, or both, and a shallow / medium / deep shape; phones always get a shallow one. The shape adds its own space, so it never covers the block below.

🎨 Illustrated blocks

Five blocks draw from a library of 356 illustrations that wear your brand colour by themselves: an Illustrated banner, Illustrated features (every card with its own drawing), Illustrated steps, Drawing & text (a drawing beside a heading, a paragraph and points) and an Illustrated invitation. Each drawing field opens a searchable picker — type a word (booking, chef, delivery, doctor, teacher, wedding…) and tap one. Pages without photos look designed with them; pages with photos get a second, lighter visual language.

↔ Text alignment + heading line

Text alignment (in Width, spacing & visibility) lines up the block's headings and text left, centre or right. Galleries, FAQs, team, pricing, testimonials, stats and timelines also take a small line under the heading and their own heading alignment.

Move

Design sections: ▲▼ on their row (most designs allow it; ↺ Restore the design's original order appears once you've rearranged). Added blocks: Up / Down in the block's toolbar, or drag the dots on its left edge on a computer.

Hide instead of delete

The eye on any row. Hidden sections stay saved and disappear from the site; the row dims so you can find them again. Only added blocks can be deleted (the bin asks first).

Blocks you added after a design section stay on the page when you hide that section: your live website shows them right after the nearest section above it that is still showing (or at the bottom of the page when none is), and the preview puts them in the same place. A note above them in the preview says where they now show and why — for example On your live website these blocks show right after “Hero” — “Trust strip” is hidden on this page. The page outline lists them in that same place, with the same note: under “Hero”, above the blocks you added after “Hero” itself — the order your visitors see. The hidden section keeps its ＋ pill; a block you add there joins them.

Copy and save

Copy duplicates a block right below itself. Save names it into My blocks, available in the picker on every page of this site — build an offer strip once, drop it on five pages. Only you or a Manager can save blocks and add saved ones; a team member who edits the website sees a line saying so in the picker.

If an agency looks after your website, the picker also shows 🏢 <agency name> blocks — sections your agency saved for its clients. Tap one to add a copy to your page (your business name fills in); it is yours from then on, and nothing your agency later changes in its library touches your page. Only the agency can add to or remove from that group.

Not sure what a section can do? Its ⋯ menu has Ask Asha about this section — the chat opens with the section and the page named, and you type the question (more).