Question 1 of 50 A reveal animation on 40 cards uses Move + Opacity + a blur filter at the same time, and scrolling drops frames on mid-range Android devices. What’s the best first change? a a. Remove the blur filter (paint-heavy across many elements) and keep transform + opacityb b. Add more cards so the animation has less to do per cardc c. Switch easing to lineard d. Increase the stagger delay to 2 seconds per card
Answer: a. Blur filters are paint-heavy, and animating them on 40 elements is the likely cause. Transform + opacity give nearly the same look at a fraction of the cost. (b) more elements means more work. (c) easing doesn’t change rendering cost. (d) a 2-second stagger per card makes the experience slow and doesn’t fix the per-frame cost.
Question 2 of 50 What’s the main problem with using only flags in a locale switcher? a a. Flags load slowlyb b. Flags represent countries, not languages, which confuses multilingual countries and languages spoken in many countriesc c. Flags can’t be linksd d. Search engines penalise flag images
Answer: b. A flag shows a country, not a language. Use language names written in their own language. Flags can be a secondary visual at most.
Question 3 of 50 What are Webflow Designer Extensions? a a. Browser plugins that modify the published siteb b. Apps that run inside the Designer to assist with building and managing the sitec c. CSS frameworks bundled with Webflowd d. Server-side CMS backups
Answer: b. Designer Extensions run inside the Designer. (a), (c) and (d) are wrong.
Question 4 of 50 A table-of-contents sidebar is set to position: sticky with top: 2rem, but it scrolls away with the page instead of sticking. Its section wrapper has overflow: hidden to clip a decorative shape. What is the most likely cause? a a. Sticky positioning only works inside a Grid parentb b. The ancestor with overflow: hidden becomes the element’s scroll container, so the element has nothing to stick to while the page scrollsc c. The sidebar’s z-index is too lowd d. Sticky elements need position: absolute on their parent
Answer: b. A sticky element sticks within its nearest scrolling ancestor. overflow: hidden (or auto/scroll) on any ancestor creates that container, so the element never sticks to the viewport. Remove the overflow from the ancestor, or move the clipping to a separate decorative wrapper. (a) sticky works in flex, grid and block layouts. (c) z-index affects stacking, not whether it sticks. (d) an absolutely positioned parent isn’t required.
Question 5 of 50 A stakeholder needs to see updates before they go live on the production domain. Which workflow is most effective? a a. Publish to production and collect feedback afterwardsb b. Publish to the staging subdomain, request review, then publish to productionc c. Send screenshots via emaild d. Duplicate the site for review
Answer: b. This mirrors the official sample answer: staging review before production. (a) risks errors going live. (c) screenshots miss interactions and responsiveness. (d) duplication drifts.
Question 6 of 50 · Multi-select Which are site-level (not page-level) settings? (Choose three.) a a. Default domain and SSLb b. Global canonical tag URLc c. robots.txtd d. A blog post template’s meta description binding
Answer: a, b and c. Domains, SSL, the global canonical and robots.txt are site-wide. (d) template metadata bindings are page settings (of the template).
Question 7 of 50 What’s the difference between Workspace roles and site roles? a a. There’s no differenceb b. Workspace roles govern workspace-level administration (members, billing, sites); site roles govern what someone can do on a specific sitec c. Site roles govern billingd d. Workspace roles are only for content editors
Answer: b. Workspace = organisation-level; site = per-site capabilities.
Question 8 of 50 A homepage redesign will take two weeks, but the current homepage needs urgent copy fixes published during that time. Which feature best supports this? a a. Duplicate the site and swap domains at launchb b. Page branching: build the redesign on a branch while the main page remains editable and publishablec c. Pause all publishing for two weeksd d. Build the redesign directly on the live page and publish often
Answer: b. Branching isolates the redesign while the main page stays live and editable. (a) duplicates sites, which is messy. (c) blocks business needs. (d) exposes unfinished work.
Question 9 of 50 Which is the best meta description for a Webflow agency’s services page? a a. services services webflow webflow agency services bestb b. Custom Webflow design and development: CMS builds, migrations and SEO-ready launches. See our process and book a free consultation.c c. (empty) d d. A copy of the homepage description
Answer: b. Specific, readable, unique, with a reason to click. (a) keyword stuffing. (c) search engines will generate their own. (d) duplicate.
Question 10 of 50 A blog’s URL structure changes from /blog/post-name to /articles/post-name. What preserves search rankings with the least effort? a a. One pattern 301 redirect: /blog/(.*) → /articles/%1b b. Redirect every old URL to the homepagec c. Use 302 redirectsd d. Leave the old URLs to 404 so search engines re-crawl
Answer: a. A pattern 301 preserves equity for every post with one rule. (b) homepage redirects lose relevance and may be treated as soft 404s. (c) 302 is temporary. (d) loses traffic and rankings.
Question 11 of 50 A design shows a section title that should be visually small, but structurally it’s the main heading of that section, below the page’s H1. What’s correct? a a. Use an H5 tag because it is visually smallb b. Use an H2 tag and apply a class that gives it the smaller visual sizec c. Use a Paragraph styled boldd d. Use an H1 and reduce its size
Answer: b. Heading levels describe document structure. Under the page’s H1, a section’s main heading is an H2. Visual size is a styling concern handled by a class. (a) choosing the level by appearance breaks the outline used by screen readers and search engines. (c) loses heading semantics altogether. (d) adds a second H1 and an incorrect structure.
Question 12 of 50 Why should images and scripts referenced in custom code use https:// URLs? a a. HTTP URLs load fasterb b. HTTP resources on an HTTPS page cause mixed-content warnings or blockingc c. Webflow rewrites them anywayd d. It only matters for fonts
Answer: b. Mixed content is blocked or flagged on HTTPS pages. (a), (c) and (d) false.
Question 13 of 50 · Multi-select Marketing wants to track conversions by URL and show next steps after a demo request. What should you configure? (Choose two.) a a. A redirect URL to a dedicated thank-you pageb b. noindex on the thank-you pagec c. Remove the success state entirely and show nothingd d. A custom action pointing to the thank-you page
Answer: a and b. A redirect to a dedicated page enables URL-based conversion tracking and next steps, and the page should be noindexed. (c) users need feedback. (d) a custom action changes where data goes; it isn’t how you redirect.
Question 14 of 50 A brand’s primary colour is used on 60 classes across the site. The brand is updated to a new shade. What setup would make this a one-step change? a a. A colour variable (e.g. brand-primary) used by all those classesb b. A combo class added to every element with the colourc c. Hex values typed into each classd d. An Embed that overrides colours with !important
Answer: a. A colour variable is the single source of truth: update its value once and all 60 classes update. (b) combo classes don’t centralise a value. (c) hex values mean 60 manual edits. (d) !important overrides bypass the system and cause specificity problems.
Question 15 of 50 A company wants its site to rank in Google France and Germany with properly translated content. Which approach is most appropriate in Webflow? a a. Add a client-side translation widget that translates pages in the browserb b. Use Webflow Localization with French and German locales served in subdirectoriesc c. Duplicate the site three times and link them in the footerd d. Put French and German text on the same page under the English text
Answer: b. Native localization gives real, indexable, translated pages in subdirectories with localized SEO. (a) client-side widgets aren’t indexed reliably and offer no quality control. (c) duplication multiplies maintenance and splits authority. (d) mixed-language pages confuse users and search engines.
Question 16 of 50 · Multi-select Before installing a Marketplace app that requests access to a client’s site, what should you check? (Choose two.) a a. The permissions/scopes it requestsb b. Whether the app is maintained and reputablec c. Whether the app’s logo matches the site’s coloursd d. Nothing; all Marketplace apps have full access by default
Answer: a and b. Scopes and trustworthiness determine the risk. (c) irrelevant. (d) false; apps request specific scopes.
Question 17 of 50 A designer accidentally broke many styles while cleaning up classes yesterday. What’s the most direct recovery? a a. Restore an earlier backup, then publishb b. Rebuild the styles by memoryc c. Duplicate the sited d. Disable minification
Answer: a. Restore the backup from before the clean-up, then publish. (b) slow and error-prone. (c) doesn’t recover anything. (d) irrelevant.
Question 18 of 50 A resource center has articles, authors and topics. Authors need their own pages, and each article can belong to several topics. Which structure is most scalable? a a. One Collection with a “type” text field for articles, authors and topicsb b. Separate Collections: Articles with a reference field to Authors and a multi-reference field to Topicsc c. Duplicate each article once per topicd d. Static author pages, with author names typed into each article
Answer: b. Separate Collections give each entity its own fields and template pages. A reference models one author per article, and a multi-reference models many topics per article. This matches the official sample question. (a) mixes unrelated fields and makes filtering fragile. (c) duplicates content and URLs. (d) static pages don’t scale, and typed names can’t power relationships.
Question 19 of 50 Buttons must come in Primary, Secondary and Ghost styles. Builders currently add random combo classes to button instances, and the styles are drifting. What should the developer implement? a a. Style variants on the Button component, selectable per instanceb b. A separate unlinked button for each pagec c. More combo classes with clearer namesd d. Inline styles via custom attributes
Answer: a. Variants make the allowed styles explicit, discoverable and centrally maintained, which stops the drift. (b) unlinked buttons can’t be updated centrally. (c) more combo classes is the problem itself; nothing limits which ones are used. (d) inline styles bypass the system.
Question 20 of 50 Where do you find and export Webflow form submissions? a a. In the Assets panelb b. In the site’s form submissions area (Forms in site settings), with CSV exportc c. In the Navigatord d. In the robots.txt file
Answer: b. Submissions live in the site’s Forms area, exportable as CSV. The others are unrelated.
Question 21 of 50 A designer adds the existing utility class margin-bottom-large (styled standalone elsewhere) as a second class on an element with card. Then, with both classes selected, they set background: grey. What happens? a a. All elements with margin-bottom-large turn greyb b. All elements with card turn greyc c. Only elements with both card and margin-bottom-large turn grey, and the standalone margin utility still appliesd d. Webflow throws an error because a class can’t be used both standalone and as a combo
Answer: c. Styles added while two classes are selected go to the compound selector .card.margin-bottom-large, so only elements with both classes turn grey. The standalone .margin-bottom-large rule exists independently, so the margin still applies. That’s how utility stacking works in Webflow. (a) and (b) would require styling the classes individually. (d) is false; this is a normal pattern.
Question 22 of 50 Which layout task is better suited to CSS Grid than to Flexbox? a a. Centring an icon and a label inside a buttonb b. Spacing navbar links evenly along a rowc c. A feature section where one tile spans two columns and two rows, and others fill in around itd d. Pushing a footer link group to the right side of a row
Answer: c. Spanning tiles across rows and columns is two-dimensional placement, which is what grid is for. (a), (b) and (d) are one-dimensional alignment tasks that flexbox handles more simply.
Question 23 of 50 Where should page-specific JSON-LD schema for every blog post be added? a a. Site footer code, hard-coded for one postb b. The blog post Collection template’s page settings custom code (head), using CMS field valuesc c. Each blog post’s rich text bodyd d. robots.txt
Answer: b. Template-level head code with CMS fields generates schema for every item from one configuration. (a) one hard-coded post on every page is wrong. (c) rich text doesn’t belong in the head and isn’t reliable for scripts. (d) robots.txt is for crawl rules.
Question 24 of 50 A blog card component appears on the homepage, the blog index and in a “related posts” list. How should each card get its content? a a. Type the content into each instance by handb b. Place the component in Collection Lists and connect its properties to CMS fieldsc c. Unlink each card and bind the inner elements to CMS fields individuallyd d. Build three different card components, one per list
Answer: b. Connecting component properties to CMS fields inside Collection Lists means one card design serves every list, each instance filled from its item. (a) manual content doesn’t scale and goes stale. (c) unlinking loses centralised design updates. (d) three components is the duplication components are meant to prevent.
Question 25 of 50 · Multi-select A landing page has scroll-linked parallax, a looping marquee and many reveal animations. Which steps make it production-ready from an accessibility standpoint? (Choose three.) a a. Respect prefers-reduced-motion by reducing or removing large motionb b. Give the looping marquee (moving for more than 5 seconds) a way to pausec c. Make sure nothing flashes more than three times per secondd d. Increase parallax distance so the effect is noticeable to all users
Answer: a, b and c. These map to reduced-motion support, WCAG 2.2.2 (Pause, Stop, Hide) and WCAG 2.3.1 (Three Flashes). (d) larger parallax distance increases vestibular risk, the opposite of what’s needed.
Question 26 of 50 A page has layout shift as images load and push content down. What’s the best fix? a a. Reserve space by setting image dimensions or an aspect ratiob b. Lazy-load all images including the heroc c. Add more fontsd d. Use 302 redirects
Answer: a. Reserved dimensions prevent content from moving when images load (CLS). (b) lazy-loading the hero hurts LCP and doesn’t fix shift. (c) and (d) unrelated.
Question 27 of 50 An external system should be notified immediately whenever a form is submitted on the Webflow site. Which mechanism fits best? a a. Poll the forms API every 10 secondsb b. A webhook for form submission eventsc c. Export a CSV weeklyd d. An Embed that emails the system
Answer: b. Webhooks push events in real time without wasteful polling. (a) inefficient and rate-limit unfriendly. (c) not immediate. (d) not a real mechanism.
Question 28 of 50 A Products Collection stores price in a Plain text field like “$120”. Sorting the Collection list by price puts $120 before $20. What is the best fix? a a. Add leading zeros to every price, like “$020”b b. Store the price in a Number field and add the currency symbol in the designc c. Move the price into a Rich text fieldd d. Replace the price with an Option field of price ranges
Answer: b. Text sorts character by character, so “1” comes before “2” whatever the length. A Number field sorts and filters numerically and keeps the data clean, and the “$” belongs in the design as static text next to the bound value. (a) is a fragile workaround that editors will break. (c) Rich text can’t be sorted numerically either. (d) loses the exact price.
Question 29 of 50 Which easing is most appropriate for a dropdown panel entering the screen? a a. Linearb b. Ease-inc c. Ease-outd d. Bounce with long overshoot
Answer: c. Ease-out starts fast and settles gently, so the UI feels responsive as the panel enters. (b) ease-in starts slowly, which feels laggy for entrances; it suits exits. (a) linear feels mechanical outside scroll-linked contexts. (d) exaggerated overshoot is distracting for routine UI.
Question 30 of 50 After updating a page’s OG image, the old image still appears when the link is shared on social media. What’s the most likely reason? a a. Webflow doesn’t support OG imagesb b. The platform cached the previous preview; re-scrape with its debugging/inspector tool after publishingc c. OG images must be GIFsd d. The page needs a 301 redirect
Answer: b. Social platforms cache previews. Use their re-scrape/debug tools after publishing. (a), (c) and (d) are false.
Question 31 of 50 Why set the site language in site settings? a a. It translates the site automaticallyb b. It outputs the lang attribute, which helps screen readers pronounce content and helps search engines understand the languagec c. It changes the fontd d. It enables site search
Answer: b. The lang attribute is required for WCAG 3.1.1 and helps search engines. It doesn’t translate anything (a).
Question 32 of 50 A testimonial component uses a hard-coded H2 for the person’s name. On the homepage the section already has an H2 heading, and the testimonials sit below it. What’s the accessibility concern, and the best direction? a a. None; heading levels only affect visual stylingb b. The heading hierarchy may be illogical (names at the same level as the section title); use the appropriate level (e.g. H3) or a non-heading element styled as neededc c. H2 elements can’t be inside componentsd d. Use an H1 instead so it’s more prominent
Answer: b. Heading levels define the document outline used by screen-reader users to navigate (WCAG 1.3.1 Info and Relationships). Names sitting at the same level as the section title create an illogical structure. Use H3, or a non-heading text element styled to match. (a) false; headings carry semantics. (c) false. (d) multiple or incorrect H1s make the problem worse.
Question 33 of 50 A form is getting hundreds of spam submissions. What’s the most direct native measure? a a. Remove the submit buttonb b. Enable reCAPTCHA (keys in site settings) and add the reCAPTCHA element to the formc c. Rename the formd d. Change the field types to text
Answer: b. reCAPTCHA is Webflow’s native spam measure for forms. (a) breaks the form. (c) and (d) don’t stop spam.
Question 34 of 50 A button has the class button. A designer needs a secondary style that differs only in background and text colour, and future padding changes to button should apply to both. What should they do? a a. Duplicate button as button-secondary and change the coloursb b. Add a combo class (button is-secondary) and override only the coloursc c. Change the colours directly on button for that one elementd d. Use an Embed with inline CSS for the secondary button
Answer: b. A combo class inherits all of button‘s styles and overrides only the colours, so future padding changes on button reach both variants. (a) creates two independent classes; padding changes then have to be made twice and will drift. (c) changes every button across the site, because classes are global. (d) bypasses the design system and is invisible in the Style panel.
Question 35 of 50 Editors change a Collection’s slug from blog to insights. What must you do to protect SEO? a a. Nothing; Webflow keeps old URLs working automaticallyb b. Add a 301 redirect from /blog/(.*) to /insights/%1c c. Add a noindex tag to all postsd d. Recreate all posts in a new Collection
Answer: b. Changing the Collection slug changes every item’s URL. A pattern 301 redirect with a capture group ((.*) → %1) sends old URLs, and their search value, to the new paths. (a) Webflow doesn’t create these automatically. (c) would remove posts from search. (d) unnecessary and destructive.
Question 36 of 50 A site’s Body text is the Webflow default of 14px. A developer sets section padding to 2rem. What is the computed padding with default browser settings? a a. 28pxb b. 32pxc c. 2× the parent’s font sized d. 2% of the viewport
Answer: b. rem is relative to the root html font size, which is 16px by default, not to the Body’s 14px, so 2rem = 32px. (a) would be 2em on an element whose font size is 14px. (c) describes em. (d) describes vw.
Question 37 of 50 Which field configuration improves both mobile usability and validation for an email address? a a. Type: text with placeholder “email”b b. Type: email, with an appropriate autocomplete value and a labelc c. A text aread d. Type: password
Answer: b. type="email" adds native validation and the right mobile keyboard, autocomplete speeds up filling, and a label makes it accessible. (a) no validation. (c) wrong control. (d) masks input.
Question 38 of 50 A client wants to review a new landing page before it goes live on www.example.com. What should you do? a a. Publish to production and ask for feedbackb b. Publish only to the staging subdomain, get approval, then publish to productionc c. Duplicate the site and send the copyd d. Send a screenshot of the Designer
Answer: b. Staging review before production is the safe workflow, and the official sample answer. (a) risky. (c) and (d) don’t show real published behaviour.
Question 39 of 50 A marketing site has 30 pages with the same CTA banner. Each page needs a different heading, button text and link, but the layout and styling must stay identical and editable in one place. What’s the best approach? a a. Copy and paste the banner on each page and edit the textb b. Create a component with Text and Link properties for heading, button label and URLc c. Create 30 separate components, one per paged d. Make the banner a component and unlink each instance to change the text
Answer: b. One component keeps layout and styling in one place, and properties expose only what varies: heading, label and link. (a) copies can’t be updated centrally. (c) 30 components defeats the purpose. (d) unlinking breaks the connection, so future design changes won’t reach the banners.
Question 40 of 50 Several pages share the identical meta title “Home | Example”. What’s the impact? a a. None; titles don’t matterb b. Duplicate titles reduce relevance signals and click-through; each page needs a unique, descriptive titlec c. Search engines rank duplicates higherd d. It breaks the sitemap
Answer: b. Unique titles describe each page’s distinct content. (a), (c) and (d) false.
Question 41 of 50 After connecting the domain, the site shows “Not secure.” DNS was changed 30 minutes ago and a stale A record to the old host still exists. What’s the most likely fix? a a. Disable SSLb b. Remove the conflicting record, make sure the records match Webflow’s instructions, and allow propagation so Webflow can issue the certificatec c. Rebuild the sited d. Add a meta tag for HTTPS
Answer: b. Certificate issuance depends on correct, conflict-free DNS that has propagated. (a) disabling SSL makes it worse. (c) and (d) don’t help.
Question 42 of 50 A company requires that only the web lead can push changes to the production domain, while designers can publish to staging. What should you configure? a a. Publishing permissions that restrict production publishing to specific roles/peopleb b. Give all designers Owner accessc c. Disable stagingd d. Use a shared login for the web lead
Answer: a. Publishing permissions restrict who can publish where. (b) violates least privilege. (c) removes a safe review step. (d) shared login.
Question 43 of 50 A site in the EU uses analytics and ad pixels. What’s required for production readiness? a a. Load all tags immediately for accurate datab b. Use a consent mechanism so non-essential tracking fires only after consentc c. Hide the tracking scripts in the footerd d. Only use pixels on staging
Answer: b. Privacy laws require consent before non-essential tracking. (a) non-compliant. (c) moving scripts doesn’t affect consent. (d) pointless.
Question 44 of 50 On an article template, some items have no hero image, and the empty wrapper leaves a large gap. What’s the best fix? a a. Upload a blank placeholder image to those itemsb b. Use conditional visibility to hide the wrapper when Hero image is not setc c. Set the wrapper’s opacity to 0 on every paged d. Create a second template page for items without images
Answer: b. Conditional visibility removes the wrapper from the output when the field is empty, so there’s no gap. (a) placeholder images add useless content and weight. (c) opacity: 0 still takes up space and hides it everywhere. (d) only one template exists per Collection; branching logic belongs in conditional visibility.
Question 45 of 50 A section should rotate an illustration gradually as the user scrolls through it , reversing if they scroll back up. Which trigger fits? a a. Scroll into viewb b. While scrolling in viewc c. Mouse clickd d. Page load
Answer: b. While scrolling in view maps animation progress to the element’s position in the viewport, so the rotation follows the scroll and reverses with it. (a) Scroll into view fires a timed animation once (or each time) when the element appears; it isn’t tied to scroll position. (c) and (d) aren’t scroll-linked.
Question 46 of 50 · Multi-select Which practices improve keyboard accessibility? (Choose two.) a a. A visible focus style on interactive elementsb b. Use real <button> elements for actionsc c. Remove focus outlines for a cleaner lookd d. Trigger key navigation menus only on hover
Answer: a and b. Visible focus (WCAG 2.4.7) and native buttons (keyboard-operable by default). (c) and (d) harm keyboard users.
Question 47 of 50 · Multi-select Which items belong on a style guide page for a Webflow design system? (Choose three.) a a. Typography scale and tag stylesb b. Colour variables with notes on approved contrast pairingsc c. Buttons and components with their variantsd d. Live client analytics dashboards
Answer: a, b and c. A style guide documents and tests the system: type, colour (with contrast pairings) and components and their variants. (d) analytics aren’t part of a design system.
Question 48 of 50 · Multi-select Blog posts from a CMS rich text field show unstyled headings and lists. Which approaches fix this in a maintainable way? (Choose two.) a a. Define global tag styles (All H2, All Paragraphs, All Lists, etc.)b b. Style tags nested inside a class on the Rich Text element (e.g. .text-rich-text h2) where blog content needs different stylingc c. Ask editors to apply classes to each heading inside the rich text fieldd d. Convert every blog post into static pages and style each element
Answer: a and b. Rich text output is plain tags, so global tag styles cover it. Where blog content should differ from the site default, nested tag styles under a Rich Text class target only that content. (c) editors can’t reliably add classes inside rich text, and it doesn’t scale. (d) throws away the CMS.
Question 49 of 50 With subdirectory routing and English as the primary locale, what is the typical URL of the French version of /pricing? a a. fr.example.com/pricingb b. example.com/fr/pricing (or a localized slug like /fr/tarifs)c c. example.com/pricing?lang=frd d. example.fr/pricing automatically
Answer: b. Secondary locales live in subdirectories, optionally with localized slugs. (a) subdomains aren’t Webflow’s native localization routing. (c) query parameters are weak locale signals. (d) separate country domains aren’t created automatically.
Question 50 of 50 · Multi-select On a blog post template, you want a “Related posts” section. Which settings produce a correct result? (Choose three.) a a. Source: Blog Posts Collectionb b. Filter: Category equals the current post’s Categoryc c. Exclude the current post and limit to 3 itemsd d. Source: Authors Collection
Answer: a, b and c. Related posts come from the same Collection, filtered by a shared attribute relative to the current item, excluding the current post, with a sensible limit. (d) Authors is the wrong source.