Every part of your website, explained simply.

Also called: Hero banner · Hero image · “Above the fold”

The hero is the first thing visitors see: a large area near the top of the page, usually with a big headline, a short supporting line, and a button. Its whole job is to tell people what the site is about and what to do next, all within a few seconds.

Where you'll find it: Top of a homepage or landing page, right under the navigation bar.

Beginner tip: If a visitor read nothing but your hero, would they understand what you offer? If not, simplify it.

Also called: Site footer · Bottom bar

The footer is the band at the bottom of every page. It's a catch-all for things people look for but that aren't important enough for the top: contact details, secondary links, social icons, copyright, privacy policy and terms.

Where you'll find it: The very bottom of the page, repeated site-wide.

Beginner tip: Footers are where people expect the “boring but important” links to live. Don't hide your contact or privacy info anywhere else.

Also called: 2-col · Split layout · Multi-column

Instead of one single stack of content, the space is divided into columns sitting next to each other, for example text on the left and an image on the right. Designers say “2-column”, “3-column”, etc. On phones these columns usually stack into one.

Where you'll find it: Feature sections, blog layouts (article + sidebar), comparison areas.

Beginner tip: Columns that look great on a laptop must stack neatly on mobile. Always picture the phone view too.

Also called: Side panel · Side navigation · Side rail

A narrow column running down one side of the page, separate from the main content. It often holds navigation, filters, categories, or related links. Common in dashboards, documentation and online shops.

Where you'll find it: Left or right edge, alongside the main content area.

Beginner tip: Sidebars are great for tools and filters, but they eat horizontal space. On mobile they usually slide out instead.

Also called: Content block · Band · Row · Wrapper

A page is built from stacked sections, each a horizontal band with its own background and a chunk of related content. Builders like Squarespace or Webflow let you add, reorder and restyle these blocks. A “container” keeps content from stretching too wide.

Where you'll find it: Stacked top-to-bottom to form the whole page.

Beginner tip: Think of a page as a stack of LEGO bands. Reordering sections is how you reshape a page fast.

Also called: Tile · Panel · Box

A card is a contained rectangle, usually with rounded corners and a subtle shadow, that bundles a little package of related content: maybe an image, a heading, a line of text and a button. Cards are repeated in rows or grids (think product listings or blog previews).

Where you'll find it: Product grids, blog previews, pricing, dashboards, or anywhere with repeated items.

Beginner tip: When you have many similar items, cards make them scannable. Keep every card the same shape and size.

Also called: Card grid · Gallery grid · Masonry

A grid lines content up into evenly spaced rows and columns, like a checkerboard. It keeps lots of items (photos, products, articles) tidy and balanced. A “masonry” grid is the Pinterest-style version where item heights vary.

Where you'll find it: Photo galleries, shops, portfolios, blog archives.

Beginner tip: Grids automatically reflow on smaller screens: 4 across on desktop might become 2 across on a phone.

Also called: Navigation bar · Top bar · Menu · Navbar

The bar that runs across the top of every page. On the left is usually the logo (which links home); to the right sit the main menu links and often a key button. A “sticky” header stays pinned as you scroll. This is your site's main signpost.

Where you'll find it: Top of the page, repeated site-wide.

Beginner tip: Aim for 4–6 top links. If you have more, that's a sign your content needs grouping.

Also called: Mobile menu · The three lines · Menu icon

Three stacked horizontal lines (it looks a bit like a hamburger). Tapping it reveals the navigation menu that's been tucked away to save space. That's almost always how menus work on mobile.

Where you'll find it: Top corner of the header, especially on phones and tablets.

Beginner tip: It saves space but hides your links. On desktop, show the menu openly if you have room.

Also called: Breadcrumb trail · Path

A horizontal trail of links, usually separated by › or /, that shows the path back to the start, like Home › Category › This Page. It tells visitors where they are in the site and lets them hop back up a level.

Where you'll find it: Just above the page title, on deep pages like products or articles.

Beginner tip: Most useful on sites with lots of nested pages (shops, docs). Tiny sites rarely need them.

Also called: Tabbed content · Tab bar

A row of labels where only one is active at a time. Clicking a tab swaps the panel of content beneath it, like the tabs in a ring binder. Great for splitting related info (Description / Reviews / Shipping) without making people scroll or load a new page.

Where you'll find it: Product pages, settings screens, dashboards, info-dense areas.

Beginner tip: Tabs hide everything except the active panel. Don't bury must-see info inside a tab people may never click.

Also called: Page numbers · Pager · Load more

When there are too many items for one page, pagination breaks them into pages with controls like “1 2 3 … Next”. A common alternative is a “Load more” button or endless scrolling that fetches items as you go.

Where you'll find it: Bottom of search results, blog archives, product listings.

Beginner tip: Pagination lets people jump to a specific page; infinite scroll feels effortless but can hide the footer forever.

Also called: Headline · Title · H1, H2, H3…

Headings are the titles that break content into chunks and tell people what's coming. They come in sizes: H1 is the single biggest title on a page, H2s are section titles, H3s are sub-points, and so on. They also help search engines and screen readers understand structure.

Where you'll find it: Top of the page (H1) and the start of each section (H2, H3…).

Beginner tip: Use exactly one H1 per page, then nest H2s and H3s in order. Don't pick a size just because it looks big.

Also called: Subtitle · Tagline · Deck · Supporting line

The supporting line that sits just below a heading. It's smaller and lighter than the main title and adds a little context, expanding on the headline or summarising what follows. In a hero it's the “sales pitch” line under the big title.

Where you'll find it: Directly beneath a heading, especially in heroes and section tops.

Beginner tip: Let the heading make the bold claim and the subheading explain it. Don't repeat the same words in both.

Also called: Paragraph · Copy · Body copy

The normal-sized running text people actually read: sentences and paragraphs. Designers and writers call the words on a site “copy”. Body copy is sized for comfortable reading and kept to a sensible line length so eyes don't get lost.

Where you'll find it: Everywhere there's something to read: articles, descriptions, about pages.

Beginner tip: Keep paragraphs short and lines around 50–75 characters wide. Walls of text get skipped.

Also called: Image gallery · Photo grid · Lightbox

A set of images displayed as a group, in a grid or row. Clicking one often opens a bigger version in a “lightbox” (a focused overlay) you can flip through. Used by photographers, shops, real estate and portfolios.

Where you'll find it: Portfolios, product photos, event recaps, real-estate listings.

Beginner tip: Crop thumbnails to a consistent shape so the gallery looks tidy; let the full image show on click.

Also called: Slideshow · Slider · Rotator

A space that shows one slide at a time and cycles through more, automatically or via arrows and the little dots underneath. Used for featured images, promotions or testimonials when you want several things to share one spot.

Where you'll find it: Heroes, featured products, testimonial sections, promo banners.

Beginner tip: People often ignore everything past the first slide. Put your most important message there.

Also called: Promo bar · Announcement bar · Notification bar

A full-width strip carrying a single message: a sale, a shipping notice, a cookie note or an alert. Often sits as a thin bar above the header. The skinny one at the very top is usually called an “announcement bar”.

Where you'll find it: Pinned above the header, or as a full-width strip mid-page.

Beginner tip: Give people a way to dismiss it (an ✕). A banner that can't be closed quickly becomes annoying.

Also called: CTA · Action button · Primary button

CTA stands for “Call to Action”. It's the element, usually a bold button, pushing people toward the single thing you want them to do: “Sign up”, “Buy now”, “Get started”, “Book a call”. Strong CTAs use clear action words and stand out from everything around them.

Where you'll find it: Heroes, end of sections, inside cards, all over landing pages.

Beginner tip: One primary CTA per screen wins. Too many competing buttons and people click none of them.

Also called: Reviews · Quotes · Customer stories

Short quotes from real customers praising the product or service, usually shown with the person's name, photo and sometimes a star rating. They build trust by letting other people make your case for you.

Where you'll find it: Below the hero, near pricing, or just before the final CTA.

Beginner tip: A real name, photo and specific result (“saved us 4 hours a week”) beats a vague “Great service!” every time.

Also called: Trust signals · Stats · “Used by…”

A broad term for anything showing that real people already chose you: customer counts (“Trusted by 10,000+ teams”), star ratings, press logos, follower numbers, or live activity (“12 people bought this today”). It reassures newcomers they're not the first.

Where you'll find it: Right under the hero, near CTAs, and beside pricing.

Beginner tip: Specific, true numbers persuade. Vague or inflated claims do the opposite once people sense them.

Also called: Trust badges · Client logos · “As seen in”

A tidy row or grid of the logos of clients, partners or press that feature you. Seeing familiar brands tells a visitor “serious companies trust this”, lending you instant credibility. Often labelled “Trusted by” or “As featured in”.

Where you'll find it: Just below the hero, or near testimonials and pricing.

Beginner tip: Keep all logos one flat colour (usually grey) so the row looks unified rather than a clash of brand colours.

Also called: Pricing plans · Tiers · Plan comparison

A row of columns, one per plan (Basic / Pro / Enterprise), each listing a price and a tick-list of what's included. One plan is usually highlighted as “Most popular” to steer choices. It helps people compare options at a glance.

Where you'll find it: A dedicated pricing page, or a pricing section on the homepage.

Beginner tip: Three options works well, and gently highlighting the middle one nudges people toward it.

Also called: Email capture · Opt-in form · Subscribe box

A short form, usually one email box and a button, that lets visitors subscribe to updates. It's the simplest way to keep in touch with people who aren't ready to buy yet. Often paired with an incentive like a discount or free guide.

Where you'll find it: Footer, end of articles, or as a pop-up modal.

Beginner tip: Ask for as little as possible: just an email. Each extra field you add lowers the number who sign up.

Also called: Btn · Primary / secondary button

The classic clickable rectangle (usually rounded) that does something: submit, add to cart, next. A “primary” button is the bold, filled, most important one; a “secondary” button is quieter (outline or grey) for less important actions. Wording should say what happens (“Download”, not “Click here”).

Where you'll find it: Everywhere: forms, cards, heroes, navigation.

Beginner tip: Make the most important button the most eye-catching, and label it with a verb.

Also called: Pop-up · Dialog box · Overlay window

A focused window that appears on top of the page, darkening the rest so you must deal with it before continuing: confirming a delete, signing in, or a newsletter pop-up. (This very window you're reading is a modal!) It usually has a close ✕ and can be dismissed by clicking outside it.

Where you'll find it: Triggered by an action, such as a click, or after a delay on the page.

Beginner tip: Use sparingly. Modals interrupt people, so reserve them for things that truly need a decision right now.

Also called: Pop-over · Flyout · Click bubble

A little box that pops up anchored to a button or icon, like a mini-menu floating beside it, often with a small pointer arrow. Unlike a modal it doesn't dim the page; you click elsewhere to dismiss it. Profile menus and “⋯ more” menus are popovers.

Where you'll find it: Attached to icons, avatars, and “more options” buttons.

Beginner tip: A popover is for a small set of related actions. If it grows large, you probably want a full menu or modal.

Also called: Hint · Hover label · Info bubble

A small bubble of text that pops up when you hover (or tap) an element, explaining what an icon does or adding a hint, like hovering a “?” to see a definition. It's purely informational: read-only, with no buttons inside.

Where you'll find it: On icons, abbreviations, and form fields that need a hint.

Beginner tip: Tooltips are for nice-to-know extras. Never hide essential information that people need but might never hover.

Also called: Select · Picker · Expandable menu

A closed control (showing the current choice or a label) that opens a list of options when clicked, then collapses again once you pick one. Used in forms (choose a country) and navigation (a top menu that reveals sub-links on hover).

Where you'll find it: Forms, filters, and navigation bars with sub-menus.

Beginner tip: Great for 5+ options to save space. For just 2–3 choices, plain buttons or radio options are friendlier.

Also called: Switch · On/off toggle

A small pill-shaped control that slides between two states, like a light switch. It's for instant on/off settings (dark mode, notifications). Unlike a checkbox, a toggle usually takes effect immediately, without needing a “Save” button.

Where you'll find it: Settings panels, preference screens, feature options.

Beginner tip: Use a toggle only for clear on/off choices. For “pick one of several”, use radio buttons instead.

Also called: Snackbar · Alert · Flash message

A small message that slides into a corner to confirm an action (“Saved!”, “Message sent”) or warn of an error, then usually disappears on its own after a few seconds. It's a “toast” because it pops up like bread from a toaster.

Where you'll find it: Usually a top or bottom corner, after you do something.

Beginner tip: Keep it short and let it auto-dismiss. For errors people must fix, show a sticky message instead.

Also called: Text field · Input · Form fields

A form is a set of fields that collect information: boxes to type in (inputs), dropdowns and checkboxes, finished off with a submit button. Each labelled box is a “field”. Contact forms, sign-ups and checkouts are all forms.

Where you'll find it: Contact pages, sign-up/login screens, checkout, search.

Beginner tip: Label every field clearly above it, and only ask for what you truly need. Long forms scare people off.

Also called: Loading indicator · Spinner · Progress · Skeleton

A visual cue that something is loading: a spinning circle, a progress bar, or “skeleton” grey shapes standing in for content that's on the way. It reassures people the site is working rather than frozen, so they don't give up and leave.

Where you'll find it: While pages, images, or results are loading.

Beginner tip: For longer waits, a progress bar feels faster than a spinner because people can see it advancing.

Also called: FAQ · Collapsible · Expander · Toggle list

A list of headers where clicking one slides open its answer below, while the others stay closed, like folding panels. Perfect for FAQs: questions are visible, answers stay tucked away until needed, keeping the page short and scannable.

Where you'll find it: FAQ sections, product specs, help pages, long detail lists.

Beginner tip: Ideal when people only want one or two answers. If everyone needs to read all of it, don't hide it away.

Also called: PDP · Product page · Item page · Buy box

A page focused on a single product. Usually the photo gallery sits on one side and, on the other, the name, price, options (size/colour) and an Add to Cart button, the area called the “buy box”. Details, shipping info and reviews follow further down. This is where the buying decision is made.

Where you'll find it: Reached by tapping a product from a listing, search result or ad.

Beginner tip: The price, key options and Add to Cart button should be visible before any scrolling. Don't make people hunt for them.

Also called: Plan picker · Tier selector · Option cards

An interactive set of options, usually selectable cards or buttons, for picking a plan, package or size before buying. One option is chosen at a time (shown with a border, fill or tick) and the price and details update to match. Common for subscriptions, memberships and tiered products.

Where you'll find it: Subscription products, SaaS pricing, and “choose your size” steps.

Beginner tip: Pre-select a sensible default (often the popular middle option) so people aren't faced with a blank, undecided choice.

Also called: Subscription · Auto-ship · Recurring order · Sub & save

A choice on the product page between buying once and subscribing for regular automatic deliveries, usually at a lower price (“Subscribe & save 15%”). The shopper picks a frequency (say, every 30 days) and can skip or cancel later. Big for consumables like coffee, vitamins, razors and pet food.

Where you'll find it: On product pages for consumable, repeat-purchase items.

Beginner tip: Make the saving and the “cancel anytime” reassurance obvious. People hesitate to agree to recurring charges.

Also called: Bundle builder · Build your own · Mix & match · Box builder

An interactive picker that lets shoppers assemble their own set: choose 6 of these snacks, build a skincare routine, fill a gift box. A progress indicator tracks how many slots are filled (“3 of 6”), and a running total updates as items go in. It lifts order size and feels personal and fun.

Where you'll find it: Subscription boxes, gift sets, sample packs and mix-and-match deals.

Beginner tip: Keep the progress (“2 more to go”) and the running price visible at all times so there are no surprises at checkout.

Also called: Swatches · Options · Size & colour picker · Variants

Controls for picking a product's options: colour swatches, size buttons, style chips. Choosing a different variant can change the price, the photo and the stock. Each combination (e.g. “Large / Blue”) is a “variant” the shop tracks separately.

Where you'll find it: On product detail pages, just above the Add to Cart button.

Beginner tip: Grey out or strike through sold-out options instead of hiding them, so shoppers understand what's unavailable.

Also called: Qty selector · Number stepper · − / + control

A small control with a minus button, a number, and a plus button to set how many units to buy. Tapping + and − changes the count, and you can usually type a number directly too. It appears on product pages and beside each line in the cart.

Where you'll find it: Product pages and shopping carts, next to each item.

Beginner tip: Stop the minus button at 1 and use a separate remove/trash action, so people don't accidentally drop to zero.

Also called: Add to bag · Add to basket · Buy button

The primary product button that adds an item to your cart so you can keep shopping. It's different from “Buy now”, which jumps straight to checkout. Clicking it usually triggers a mini-cart or a small toast confirming the item was added.

Where you'll find it: The main action on product pages and product cards.

Beginner tip: Always confirm the add (a sliding cart or a toast). Silence makes people unsure and click the button twice.

Also called: Cart drawer · Slide-out cart · Basket · Side cart

A panel, usually sliding in from the side, that shows the items you've added, their quantities and a subtotal, with a button to checkout. It lets shoppers review and tweak their cart without leaving the page they're browsing.

Where you'll find it: Opens when you add an item, or when you tap the cart icon.

Beginner tip: Always show the subtotal and a clear Checkout button; a free-shipping progress bar here nudges bigger orders.

Also called: Checkout flow · Payment page · Cart-to-purchase

The process that turns a cart into an order: entering shipping details, choosing delivery and paying. It might be one page or several steps shown by a progress indicator. Keeping it short and offering guest checkout (no account needed) is what stops people abandoning at the last moment.

Where you'll find it: After the cart, the last stage before the order is placed.

Beginner tip: Every extra field and forced sign-up loses sales. Offer guest checkout and show how many steps remain.

Also called: Cart summary · Basket totals · Receipt

A panel listing what you're buying with the maths: subtotal, shipping, any discount, tax and the grand total. It usually sits beside the checkout form and updates live as you change quantities or apply a code, so the final number is never a surprise.

Where you'll find it: Alongside the cart and checkout, often a sticky side panel.

Beginner tip: Reveal every cost, including shipping and tax, before the final step. Surprise fees are the top cause of abandoned carts.

Also called: Faceted search · Refine · Filter sidebar · Facets

Controls, usually down the side, that let shoppers narrow a long product list by attributes like category, brand, colour, size and price range. Each filter is a “facet”. Ticking them instantly trims the results so people reach what they want faster.

Where you'll find it: Beside category and search-results pages (a slide-out drawer on mobile).

Beginner tip: Show how many results each option will return, and make the filters someone has applied easy to see and clear.

Also called: Star ratings · Customer reviews · Product feedback

Shoppers' star scores (e.g. 4.6 out of 5) and written feedback shown on the product page. A summary up top gives the average and the number of reviews, with individual reviews below. Unlike marketing testimonials, these are product-specific and often from verified buyers.

Where you'll find it: Lower down on product detail pages; a star summary near the title.

Beginner tip: Show real reviews, including some critical ones. A wall of flawless 5-star ratings makes shoppers suspicious.

Also called: “You may also like” · Frequently bought together · Recommended · Add-ons

Recommended-product strips that nudge a bigger order. A cross-sell suggests companions (“Frequently bought together”, “You may also like”); an upsell points to a better or larger version. They appear on product pages, in the cart, and right after you add an item.

Where you'll find it: Product pages, the cart, and post-add-to-cart screens.

Beginner tip: Keep suggestions genuinely relevant. Random “recommended” items just add clutter and quietly erode trust.

Also called: “Only 3 left” · Low-stock badge · Scarcity · Countdown timer

Small signals of scarcity or time pressure: “Only 3 left in stock”, “Selling fast”, an “In stock / Out of stock” badge, or a “Sale ends in 02:14:09” countdown. They prompt quicker decisions, but they only keep working when they're truthful.

Where you'll find it: On product pages and listings, near the price or buy button.

Beginner tip: Use real scarcity only. Fake countdowns and permanent “almost gone” labels destroy trust the moment shoppers notice.

Also called: Coupon · Discount code · Voucher · Gift card field

A small input in the cart or checkout where shoppers enter a discount code and hit “Apply” to reduce the total. Once applied, the saving appears in the order summary. It's often tucked behind a “Have a code?” link so it doesn't tempt everyone to go hunting for one.

Where you'll find it: In the cart and at checkout, near the order summary.

Beginner tip: A big empty “promo code” box can send buyers off to search the web (and abandon). Hide it behind a small link.

Also called: Sticky add-to-cart · Floating buy bar · Persistent CTA

A slim bar pinned to the top or bottom of the screen showing the product name, price and an Add to Cart button. It stays put while you scroll through photos and reviews, so the buy action is always one tap away. Especially common on mobile product pages.

Where you'll find it: Pinned to the bottom (mobile) or top of product pages.

Beginner tip: Keep it to the essentials: a small thumbnail, price and one button, so it helps the sale rather than blocking the content.

Also called: Marquee · Ticker · Sliding banner · Logo marquee

A horizontal band whose contents glide endlessly sideways: offers, announcements, or a row of brand logos on repeat. The motion catches the eye and packs lots of short messages into a small space. Modern stores use it for promos (“Free shipping · New drop · 20% off”) and “as seen in” logo strips.

Where you'll find it: Pinned at the very top of the page, or as a divider strip between sections.

Beginner tip: Keep it slow enough to actually read, and don't hide anything essential in it. Moving text is easy to tune out.

Also called: Countdown · Timer · Sale clock · Urgency timer

A live clock that counts down to zero: the end of a sale, a product launch, or the cut-off for next-day dispatch. The shrinking numbers create urgency and a “don't miss out” feeling that nudges people to act now rather than later.

Where you'll find it: Heroes, promo bars, product pages, and inside email-capture pop-ups.

Beginner tip: Tie it to a real deadline. A timer that quietly resets on every visit gets noticed, and then shoppers trust nothing else on the page.

Also called: Email pop-up · Opt-in popover · Lightbox · Welcome offer

A small window that appears over the page offering something, usually a first-order discount or a freebie, in return for an email address. It's the workhorse of list-building: one headline, one email field, one button. The offer (“10% off”) is what makes people hand it over.

Where you'll find it: Triggered a few seconds after arrival, partway down a scroll, or on exit.

Beginner tip: Lead with the reward, ask only for the email, and make the “no thanks” link easy to find. Cornered visitors rarely convert.

Also called: Exit pop-up · “Wait! Before you go…” · Abandonment offer

A pop-up triggered when your cursor races toward the close button or the back arrow: the site reads that you're leaving and throws out a final offer (a discount, or a nudge about your cart) to win you back. Subbly's own site does exactly this with a “Hey, wait! Before you go…” message and a countdown.

Where you'll find it: Fires on the homepage, product pages, and especially at checkout.

Beginner tip: Save your strongest offer for here: these visitors were leaving anyway, so there's little to lose and a sale to recover.

Also called: Email sign-up section · Subscribe block · List opt-in

A band built into the page (not a pop-up) with a headline, a line on what subscribers get, and an email field with a button. Unlike the small footer sign-up, this is a deliberate stop in the page, designed to grow your list with people who scrolled, liked what they saw, and want to hear more.

Where you'll find it: Near the end of the homepage, after blog posts, or just above the footer.

Beginner tip: Say exactly what people are signing up for and how often: “monthly box drops & subscriber-only deals” beats a bare “Subscribe”.

Also called: Sales pop · Recent-activity popup · “Someone just bought…” · Live proof

A little card that slides into a corner with a real-time-style message: “Maria in Austin just subscribed”, “14 boxes sold today”. It's social proof in motion: watching others buy reassures newcomers and stirs gentle fear of missing out.

Where you'll find it: Lower corner of product and landing pages, reappearing every so often.

Beginner tip: Only show genuine activity. Invented “purchases” are the fastest way to lose trust the moment someone gets suspicious.

Also called: Gamified popup · Wheel of fortune · Spin-the-wheel · Gamified opt-in

An email pop-up dressed up as a game: enter your address, spin a wheel, and “win” a discount. Turning a plain opt-in into a tiny game lifts sign-ups, because it feels fun and the prize feels earned rather than simply handed over.

Where you'll find it: On arrival or exit, on stores running a promotion.

Beginner tip: Make every segment a real reward, and use it sparingly. Gamified pop-ups grab attention but feel gimmicky if they're everywhere.

Also called: Cookie banner · Consent bar · GDPR notice · Privacy banner

A bar or small box that appears on a first visit asking whether you accept cookies and tracking. It exists for privacy laws like GDPR, letting visitors accept, reject, or choose which cookies to allow before the site stores anything non-essential.

Where you'll find it: Bottom or top of the screen, shown once on a visitor's first arrival.

Beginner tip: Give “Reject” equal weight to “Accept”. Burying the decline button is bad manners and, in many regions, against the rules.

Also called: Hello bar · Announcement bar · Top bar · Smart bar

A thin, full-width strip locked to the top edge of the site carrying a single promo and a link, “Free shipping over $50 → Shop now”. Because it stays put while you scroll, the message follows the visitor everywhere. (A one-off announcement banner, by contrast, scrolls away with the page.)

Where you'll find it: Pinned above the header, persistent across every page.

Beginner tip: One message, one action, and let people dismiss it. Don't stack three sticky bars. They eat the screen people came to read.