A YOOzeCase Company The shop Builder elements and plugins for YOOtheme Pro, Joomla and WordPress. Pick your platform and pay right here, without leaving the site. All products Every element and plugin we make, with the price for Joomla and WordPress. Pay right here, without leaving the site. Please try again in a few minutes.

Popup in da hoot! HootBox The smart popup element for YOOtheme Pro. Place any content, then decide when it appears, how often, and who sees it. Ten placements, six triggers, a schedule and per visitor frequency, on Joomla and WordPress. Everything on this page is live: the examples below are real smart popups on this page, not screenshots. See the layouts Read the questions Hoot hootThis is a smart popup. It opened by itself, five seconds after the page finished loading, and it will leave you alone for the rest of your visit. Popup Pong!Ten ways to place it A popup does not have to be a box in the middle of the screen. Pick the placement that fits the message: a centred dialog when you need an answer, a bar for an announcement, a corner panel for a quiet hint, a side panel for a form or a menu, full screen for a welcome mat. Every placement uses the card styles of your theme, so it matches the rest of the site without extra CSS. Centred modal Top bar Corner panel Side panel Full screen Centred modalThe classic. It sits in the middle, the page behind it is dimmed and cannot scroll, and clicking outside closes it. Use it when the visitor really has to answer something. Top barA slim bar above the content. Nothing is covered, nothing is blocked, and the visitor can read on while it is there. Corner panelA small panel in one of the four corners. Friendly, easy to ignore, and the right size for a hint or a small offer. Side panelA full height panel that slides in from the left or the right. Room enough for a form, a menu, or a longer story. Full screenThe welcome mat. It fills the screen, so keep it short and make the way out obvious. One header, six moods Each popup can open with an alert header: an icon, a title, a short message and up to two buttons. Choose the tone and HootBox picks the colour and a matching icon, or pick your own icon from the list, or upload your own image. Everything under the header is yours to fill with builder elements. Info Success Warning Error Brand InfoNeutral news. A change in opening hours, a new page, a small announcement. SuccessSomething went well. A form was sent, an order came through, a file was saved. WarningSomething needs attention before it becomes a problem. Maintenance tonight, a deadline tomorrow. ErrorSomething is wrong and the visitor has to know. Keep the wording plain and say what to do next. BrandYour own primary colour, for offers and campaigns that should look like you and not like a system message. Anything you can build, in a popup The popup is a container in the builder. Drop in whatever you need: text, an image, a video, a gallery, a form from your form component, a module, or dynamic content from your own data. The alert header is optional; switch it off and the popup is nothing but your own layout. Open the newsletter example Once a month, nothing more This is a normal builder column inside the popup. A headline, a paragraph and a button, all placed the way you always place them. Swap them for a form and you have a newsletter box. Sign me up Maybe later Six ways to open it A smart popup is mostly about timing. HootBox opens on page load after a delay you set, at a scroll depth, when a chosen element comes into view, on exit intent, after a period of inactivity, or on a click on any link or button you point at. Combine as many as you like; the first one that happens wins. Two of them are running on this page right now. Scroll past the middle of the page and a corner panel appears. Move your mouse up towards the address bar and an exit popup shows up. Both only once per visit. You scrolled past halfwayThis one waited until you were 55 percent down the page. A visitor who reads that far is a lot more interesting than one who just arrived. Leaving already?Exit intent: the mouse moved up towards the browser bar. On a phone HootBox watches for a quick scroll up instead, so the idea also works on touch. Set it now, forget it later Give a popup a start and an end date and it takes care of itself. Add weekdays and a daily time window and it only shows during opening hours, or only on the weekend. The Christmas banner disappears on the twenty sixth without anyone logging in. Open the scheduled example Open until 17:00 on weekdaysThis is what a scheduled bar looks like. In a real campaign it would carry a start date, an end date, the weekdays it runs on, and the hours of the day it is allowed to show. How often, and for how long Nothing turns a visitor away faster than the same box on every page. Choose every page load, once per browser session, once per visitor, or again after a number of minutes, hours or days. Set a maximum number of views, decide whether a view counts when the popup opens, when it closes or only after a button click, and add a do not show again checkbox for the people who mean it. All of that is stored in the browser of the visitor. No cookies, nothing sent to a server, nothing to put in a privacy statement. Auto close with a countdown Do not show again Closing in a momentThis one closes itself after eight seconds. The bar underneath is the countdown, and it pauses as long as your mouse or keyboard focus is on the popup. Do not show this againTick the box and this popup stays away for a year, whatever the frequency setting says. Give the visitor the last word and they mind the next one a lot less. Only where it belongs Show a popup to guests only, or to logged in users only. Limit it to phones or to desktops, and give phones a different placement so a modal becomes a bottom bar. Match the language of the page, an address that carries a campaign parameter, or a visitor who arrived from a particular site. Everything the visitor does not fit is simply never rendered. Open the targeting example Made for one audienceA welcome offer for guests, a service message for logged in customers, a phone only bar for people on the move, a campaign popup that only appears when the address carries your newsletter parameter. Same element, different audience. Popups that do not cost you rankings Google penalises pages that cover their content with a dialog right after a visitor arrives from a search result on a phone. HootBox is built around that rule. The delay on the page load trigger starts at a value that keeps you on the safe side, phones can be given a bottom bar instead of a blocking modal, and the close button is a proper tap target from the first second. The same care goes into the parts you cannot see. A blocking popup is a real dialog: focus moves into it, stays inside while it is open and returns to the button that opened it. Escape closes it, the close button meets the minimum tap size, status is never carried by colour alone, and a visitor who asked their system for less motion gets no animation at all. Frequently asked questions Do I need to write any code?No. HootBox is a builder element. You drop it into a section, fill the alert header or build your own layout inside it, and set the triggers and the schedule in the element settings. Every field has its own explanation next to it.Will a smart popup hurt my Google ranking?Only if you build it badly. Google penalises dialogs that cover the content of a page right after a visitor arrives from a search result on a phone. The defaults in HootBox steer you away from that: a delay on the page load trigger, a bottom bar instead of a modal on phones, and a close button that is visible and large enough from the start.Can a visitor always close it?Yes. There is a close button, the Escape key works, and a click outside the popup closes it. You can switch the last two off for a dialog that really needs an answer, but the close button and the keyboard route stay.How does HootBox remember that someone closed it?In the browser of the visitor. No cookies, nothing sent to a server, nothing to declare in a privacy statement. Change the popup identifier and everyone sees it again, which is exactly what you want for a new campaign.Can I open a popup from my own link or button?Yes. Any link that points at the popup identifier opens it, and so does any element carrying the HootBox open attribute. You can also give the element a list of your own CSS selectors. The buttons on this page work exactly that way.Does it work on WordPress as well?Yes. The same element, the same settings and the same behaviour on Joomla and on WordPress, as long as YOOtheme Pro is running. One licence covers both. HootBox YOOtheme Pro The smart popup element for YOOtheme Pro. Place any content, then decide when it appears, how often, and who sees it. What's new 0.9.11 (2026-09-09) 0.9.10 (2026-09-08) 0.9.9 (2026-09-08) 0.9.8 (2026-09-08) 0.9.7 (2026-09-08) Plugin settings Basic yc_state This setting has no help text in the plugin. HootBox adds a popup element to the YOOtheme Pro builder. No configuration needed here; add a HootBox to any page in the builder. Licence Licence key Enter the key from your YOOzeCase account and press Activate. The key ties this site to your subscription and keeps updates coming. Deactivate frees the slot so you can use the key on another site. HootBox Content content This setting has no help text in the plugin. Advanced In the editor Automatic shows the popup inline while you edit and as a real popup on the live site; the Preview as popup button above the inline popup opens it the way visitors see it. Choose Always inline to style it on a test page; switch back before the page goes live. custom_css Custom CSS for this popup only. Selectors are scoped automatically. Start a rule with & to target the popup box itself, for example & { border: 2px solid gold; }. HootBox Popup content The popup content is a sublayout, built with ordinary builder elements. Under Builder at the top of this tab, click New Layout: that puts a row in the popup. Click the + in the row to add any element: text, images, forms, buttons, video. Library offers ready-made layouts. Everything you add shows up inside the popup in the preview. The alert header (below) is the optional coloured strip above that content. Use Preview as popup to see the result as visitors will. Popup ID A short name for this popup, for example summer-sale. Used to remember that a visitor closed it, and to open it from a link: href="#hb-summer-sale". Change the ID to show the popup again to everyone. Alert header The alert header is the coloured strip at the top of the popup, with an icon, a title and a short message. Switch it off for a popup you fill entirely with your own builder elements (added under Builder at the top of this tab). On by default, because it gives most popups their heading and their colour. Type Colour and default icon of the alert header. Info is neutral, Success green, Warning amber, Error red, Brand uses the primary colour of your theme, and Plain leaves the header without a background so it blends into the card. The colours come from your theme, so the popup matches the rest of the site. Icon The icon in front of the title. Match the type picks the icon that belongs to the alert type and stays correct when you change that type later, which is why it is the default. None leaves the space empty and moves the title to the left; the other choices pin one specific icon or your own image. Icon image Your own icon instead of one of the built-in ones. It is shown at 48 x 48 px, so use a square SVG or PNG. Only used when Icon is set to Own image. Title The heading of the popup, shown in the alert header. It is also the name a screen reader announces when the popup opens, so keep it short and say what the popup is about. Leave it empty and the popup announces a generic label instead. Message Short text under the title, inside the alert header. This is not the popup content: for that, use Builder at the top of this tab (New Layout, then the + in the row) to add any element (text, images, forms, buttons, video). Primary button The text on the primary button, for example Show me or Get the discount. Leave it empty and no button appears. Buttons sit under the content and carry the main action of the popup. Link Where the button takes the visitor. Pick a page, an article or a file from your site, or type a full URL for an external page. Leave it empty and the button only closes the popup. New tab Opens the link in a new browser tab, so your page stays open behind it. Off by default, because a new tab is unexpected for a link inside your own site. Switch it on for another website or for a PDF. Action Remember: the popup stays hidden after the click, just like closing it. Style The look of the button, taken from the button styles of your theme. Primary is the accented style and the default for the main action; Default and Secondary are quieter, Danger is the red style for destructive actions, and Text and Link render the button as plain text. Secondary button The text on the second button, for example No thanks. Leave it empty and only the primary button appears. Use it for the way out, so the visitor always has a clear alternative to the main action. Link Where the second button takes the visitor. Hidden when the action is Close the popup, because that button does not go anywhere. New tab Opens the link in a new browser tab, so your page stays open behind it. Off by default. Switch it on for another website or for a PDF. Action What the button does. Follow the link opens the link and leaves the popup rules untouched, Close the popup only closes it, and Follow the link and remember opens the link and keeps the popup hidden afterwards, exactly as closing it would. Close the popup is the default, because the second button is usually the way out. Style The look of the button, taken from the button styles of your theme. Default is the quiet style and the default here, so the second button does not compete with the primary one. Do not show again Adds a checkbox. When ticked, the popup stays hidden for this visitor for a year, whatever the frequency setting says. Checkbox label The text next to the checkbox. Leave it empty for the built-in text, which is already translated into the language of the site. Change it only when you need different wording, for example a legal one. Layout Centered modal, a bar along the top or bottom, a small panel in a corner, a side panel, or full screen. Width (px) Maximum width of the popup. It never exceeds the screen width minus the margin. Margin (px) Distance between the popup and the edge of the screen, for corner panels, side panels and bars. 24 px by default, which keeps the popup clear of the edge without wasting space. The centered modal and full screen ignore it, which is why the field is greyed out for those layouts. Padding The white space between the edge of the popup and its content. Default suits most popups, Small tightens a bar or a small corner panel, Large gives a big modal more air, and None removes the padding completely for a popup filled with an image that has to run to the edge. Style Uses the card styles of your theme, so the popup matches the site. Background colour The background colour of the popup, as a hex value or an rgba value. Only used when Style is set to Custom colours. Use rgba when the page should shine through, for example rgba(20,20,20,.95). Text colour The colour of the text inside the popup, including the title. Only used when Style is set to Custom colours. Always check it against your background colour: light text on a light card is unreadable, and screen contrast is a real accessibility requirement. Corner radius (px) How round the corners of the popup are, in pixels. 8 px by default, which matches the cards of most themes. Set it to 0 for square corners. Shadow The drop shadow under the popup, which lifts it off the page. Large by default, because a popup should read as a layer above the page. Use a smaller shadow, or none, for a bar that is meant to sit flat against the edge of the screen. Close button The X in the corner of the popup. On by default, and worth leaving on: a popup the visitor cannot close is the fastest way to lose them, and Google penalises it on phones. Switch it off only when one of your own buttons already closes the popup. Close button position Where the X sits. Inside the popup is the default and always works. Outside, top right places it just above the popup, which looks cleaner on a popup filled with an image but needs free space around the popup, so avoid it on bars and on full screen. Show close button after (s) Delay before the X appears. Keep this 0 for popups that visitors did not ask for; a hidden close button annoys people and Google penalises it on mobile. Overlay Darkens the page behind the popup, so the popup gets full attention and the rest of the page cannot be clicked. On by default for modals and panels. Bars along the top or bottom never get an overlay, which is why the field is greyed out for those layouts. Overlay colour The colour of the darkened layer behind the popup, as an rgba value. Leave it empty for the built-in rgba(0,0,0,.6). Lower the last number for a lighter overlay, raise it to hide the page almost completely. Blur Blurs the page behind the overlay on top of darkening it. Off by default, because the blur costs performance on older phones. Use it when the page behind the popup is busy and pulls attention away from the message. Page scroll Stops the page behind the popup from scrolling while it is open, so the visitor cannot scroll away from the message by accident. On by default. Switch it off if a long popup on a phone no longer scrolls properly itself. Close on overlay click Clicking the darkened area closes the popup. On by default, because visitors expect it and it is the quickest way out. Switch it off only for a popup that really needs an explicit choice, and then keep the close button on. Animation in How the popup appears. Scale up is the default and works for every layout; slide from top or bottom suits bars, slide from left or right suits side panels, Fade is the quietest and None shows the popup at once. Visitors whose system asks for reduced motion always get the popup without animation. Animation out How the popup disappears. Reverse of the in animation is the default and mirrors the opening, which is what visitors expect. Pick a specific animation only when the popup should leave in a different direction than it came from. Duration (ms) Visitors who prefer reduced motion get no animation regardless. On page load Opens the popup by itself once the page has loaded, after the delay you set below. On by default, because most popups are meant to be seen without the visitor doing anything. Switch it off when the popup should only open on a click, a scroll or one of the other triggers. Delay (s) Wait this long after the page loads. On phones, Google penalises blocking popups that appear right after arriving from a search result; 5 seconds or more, or a bar layout, keeps you safe. On scroll Opens the popup once the visitor has scrolled a part of the page, so they have seen something of your content first. Off by default. It usually performs better than a popup on load, because it only reaches visitors who are actually reading. Scroll depth (%) How far down the page the visitor has to be before the popup opens, as a percentage of the whole page. 30 percent by default. Between 40 and 60 percent works well for long articles; below 10 percent the popup fires almost immediately and loses its point. When an element comes into view CSS selector, for example #pricing, footer or .uk-section:nth-child(3). Opens as soon as the top of that element is one fifth into the screen; with several matches the first one in view wins. Tip: give a section an ID under Advanced in the builder and use #that-id here. Exit intent Opens the popup when the mouse moves up out of the page towards the browser bar, which usually means the visitor is about to leave. Off by default. Use it for a last offer, and pick a frequency other than every page load so it does not come back on the next page. Exit intent on phones Touch screens have no mouse, so exit intent uses a substitute there: a quick swipe up after the visitor has scrolled down. On by default. Switch it off when the popup should only appear on desktop. Inactivity Opens the popup when the visitor has not moved the mouse, scrolled, typed or touched the screen for a while. Off by default. It suits an offer of help; it suits an interrupting offer much less, because the visitor may simply be reading. Idle time (s) How long the visitor has to be inactive before the popup opens, in seconds. 30 seconds by default. Under 15 seconds it fires while someone is still reading, and over two minutes most visitors have already gone. On click Extra CSS selectors (comma separated) that open the popup when clicked. Links with href="#hb-{Popup ID}" and elements with data-yc-hb-open="{Popup ID}" always work, no selector needed. Show from YYYY-MM-DD or YYYY-MM-DD HH:MM, in the time zone of the site. Leave empty for no start. Show until The last moment the popup is shown, in the time zone of the site. A date without a time runs until the end of that day. Leave it empty and the popup has no end date. Weekdays Comma separated, Monday = 1 to Sunday = 7. Empty means every day. Daily from HH:MM. Combine with Daily until for a daily window, for example 09:00 to 17:00. May cross midnight. Daily until The end of the daily time window, in 24 hour notation. It only takes effect together with Daily from, and it limits the popup to a part of the day, for example your opening hours. An end that is earlier than the start makes the window run across midnight, so 22:00 until 06:00 is a night window. Frequency How often a visitor sees this popup. Stored in the browser of the visitor; no cookies, nothing sent to a server. Show again after How long the popup stays hidden before the same visitor sees it again, counted from the moment they closed it or clicked a button. Only used when the frequency is set to Show again after. Unit The unit of the waiting time above. Days is the default and suits most offers; use minutes or hours only for a notice that really has to come back within the same visit. Count a view when Closed: only when the visitor closes it (a reload while it is open shows it again). Opened: as soon as it appears. Button: only after a button click. Maximum views per visitor The highest number of times one visitor ever sees this popup, whatever the frequency allows. 0 means no limit and is the default. Two or three is a sensible value for an offer that should not keep nagging returning visitors. Close automatically after (s) Closes the popup by itself after this many seconds. 0 keeps it open until the visitor closes it, and that is the default. Use at least eight seconds, because anything shorter is gone before the message has been read. Countdown Shows the visitor how much time is left before the popup closes itself. Progress bar is the default and the least distracting, Seconds shows a number, Bar and seconds shows both, and Hidden closes the popup without warning. Only used when Close automatically after is set. Pause Stops the countdown while the mouse is over the popup or the keyboard focus is inside it, so the popup cannot disappear while someone is reading or filling in a field. On by default; switching it off makes the popup considerably harder to use. Escape key Works for every layout, also bars and corner panels. Browsers protect visitors: when a popup with an overlay opened without the visitor clicking anything, Chrome still lets Escape close it whatever this setting says. Turn it off only for popups opened by a click. Priority When several popups want to open at the same moment, the highest number wins. One at a time Makes this popup wait while another popup is open instead of stacking on top of it. On by default and worth keeping on: stacked popups block each other and confuse screen readers. As soon as the other popup closes, this one opens. Show to Limits the popup to a part of your visitors. Everyone is the default, Guests only hides it from people who are logged in and suits a subscribe or register offer, and Logged-in users only suits a message for members. The choice is made on the server, so a hidden popup is not even in the page. Devices Limits the popup to a screen size. All devices is the default; Phones and tablets only shows it below 960 pixels wide and Desktop only from 960 pixels up. Use it for a popup that only makes sense on one of the two, an app download for example. On phones Below 640 px. A bottom bar respects the Google guideline against intrusive interstitials on mobile. Language Only show on pages in this language, for example nl-NL or de. Empty = every language. URL parameter Only show when the address contains this parameter, for example utm_source=newsletter or promo (any value). Referrer contains Only show when the visitor arrived from an address containing this text, for example google or facebook.com.

Quiz Whizz Demo | Quiz element for YOOtheme Pro The quiz element YOOtheme Pro deserved. Most quiz tools are solid software wrapped in a dated interface: cramped forms, clashing colours and a wall of questions that nobody finishes. Quiz Whizz turns that around. One YOOtheme Pro element, built design-first, that plays like the quizzes you actually enjoy taking.Everything below is the same element, configured differently in the builder. Play them. A knowledge quiz your visitors actually finish One question per step, a progress bar, answers that respond the moment you pick them, and an animated score ring at the end. The intro card, the pass mark and every text on the buttons are settings, not code. How well do you know the web?Four questions, one at a time. You see instantly whether you were right, with a short explanation. Reach 75% to pass.What does the padlock in your browser's address bar mean?The site contains no advertisingThe connection between you and the site is encryptedThe site passed a government safety checkThe site does not store any dataRoughly how many websites exist today?Around 10 millionAround 200 millionAround 1 billionMore than 100 billionWhat was one of the very first things ever sold online?A pizzaA Sting CDA pair of sneakersConcert ticketsWhich of these is the oldest?GoogleWikipediaThe :-) smileyThe text messageTrue or false, in your own words The true or false type gives every question two large buttons. The labels are free text per question, so a security quiz can ask Fact or Myth and a language course can ask Der or Die. Fact or myth?True or false, restyled to Fact and Myth with two settings. Big buttons, dots for progress.The first computer bug was an actual insect.Private browsing makes you invisible to websites.Email is older than the World Wide Web.Or everything on one page, with the review at the end Longer questionnaire, self-test, checklist? Switch the flow to a single page. Nothing is judged while your visitor fills it in; the result card shows the score and a question by question review afterwards. Three quick onesRoughly how many emails are sent every day, worldwide?About 3 billionAbout 30 billionMore than 300 billionWhich colour appears most often in the logos of the world's biggest brands?RedBlueGreenWhat share of all web traffic comes from phones?Around 15 percentAround 60 percentAround 90 percentMake it yours: presets, colours and shuffle Three style presets (Cards, Minimal Line, Filled Accent), an accent that reads your real theme colours, and free text for every button. This one runs a custom accent and shuffled answers; the questions explain themselves. Make it yoursWhere does this quiz get its colour?From a stylesheet someone had to editFrom the Custom accent picker in the element settingsIt is hardcoded, like in most quiz toolsThe answers in this quiz appear in a different order for every visitor. Why?Shuffle answers is switched onPure coincidenceA caching problemNew in v0.1: the launch set Two question types (multiple choice with up to six answers, true or false with your own labels), two flows, instant or end feedback with explanations, a pass mark, three presets, theme colour support, shuffle, full keyboard play, screen reader announcements, reduced motion support and six languages. Coming next: multiple correct answers, image answers, a points based self-test with score bands, a personality mode, and a results dashboard with optional lead capture. New in v0.2: pick many, pick pictures, count points Three additions in one release. Multiple correct answers with a deliberate check step and optional partial credit, answers as image cards, and a complete points based self-test with score bands, the pattern behind every good online stress or personality test. Several correct answers, with a check step Select all that applyTwo questions where more than one answer is right. Notice how the next button becomes a check button.Which of these are real YOOzeCase elements? Select all that apply.Which claims about this quiz are true? Select all that apply.Answers as image cards, without spoilers Answer with a picture instead of a sentence. The text labels are switched off here (new in v0.3), because the caption would give the answer away; screen readers still hear the full answers. Which of these is The Most Useless Element Ever?Epic SliderCrazy Highlights 'n DoodlesThe Most Useless Element EverSmart Background SoundA points based self-test with score bands The digital stress checkFour honest yes or no questions. Every answer carries points, the total lands in a score band. Just for fun, not science.I check my phone within ten minutes of waking up.I have more than twenty browser tabs open right now.Unread notifications make me nervous.I have answered work email during a holiday.New in v0.3: the personality quiz The third quiz mode. No right or wrong: every answer quietly counts towards one of up to six outcome profiles, each with its own title and text, and the highest total wins. The pattern behind every which-type-are-you quiz that ever went viral. Which YOOzeCase element are you?Four questions, no wrong answers. Every choice quietly counts towards one of four profiles. Just for fun.Your ideal Saturday afternoon?On a stage, or at least in the spotlightReorganising the bookshelf, againVinyl, coffee and nowhere to beDoing absolutely nothing, proudlyYour role in a group project?The presenterThe plannerThe mood managerThe comic reliefPick a motto.Go big or go homeA place for everythingGood vibes onlyLess is moreYour browser, right now?A fullscreen demo is playingTabs neatly sorted in groupsA music tab is pinnedOne tab. It is blank.New in v1.1: a tie is a tie Weighted answers make a personality quiz more precise, and they also make ties more likely. When two outcomes end with the same total, most quiz tools quietly pick one, usually the one that happens to be listed first. Quiz Whizz did that too, up to 1.0.3.Now the visitor gets what the answers say: both outcomes, each with its own text. Switch on the profile and the result card also shows how the answers spread over every outcome, so someone who is mostly one thing sees how close the others came. The percentages always add up to a hundred.Try it below. The last question counts double, so answer designer, designer, storyteller and then engineer, and you land on a tie between the designer and the engineer. What kind of site builder are you? A new site lands on your desk. Where do you start? Which compliment would make your week? Your favourite part of YOOtheme Pro? Launch day. What do you check one last time? Does your quiz need exactly one result, a product advice for example? Pick a deciding question in the settings. If the answer to that question belongs to one of the tied outcomes, that one wins. If it does not, the visitor still sees the tie. The order of your outcomes never decides anything. In the statistics a tie counts for each outcome involved, and a separate line tells you how often a quiz ends level, which is a good hint to have another look at your weights. New in v1.2: a result that leads somewhereA result used to end with a text and a Try again button. Now every outcome and every score band can have its own image and its own button, so a quiz ends on a next step: a product page, a booking form, an article. On a tie, every outcome card gets its own image and button.The quiz below does that for our own shop. Four questions, and the result sends you to the element that fits your site. The buttons are real links.What does your site need next?What do visitors ask you most often?Your homepage right now is...Which compliment would you like to hear?Where does your time on the site go?Two changes you will not see here. The result can now be a heading instead of a paragraph, so a screen reader can jump straight to it; this quiz uses one. And while you build, the preview in YOOtheme Pro points out mistakes the builder cannot show: an answer that points at an outcome the quiz does not have, an outcome no answer leads to, or a score band nobody can reach. Visitors never see that note. New in v0.4: results, without the creepy part The personality quiz above is doing something the ones before it do not: it keeps what people answer. Switch on Store Results in a quiz and every finished attempt lands in your own site database, where the plugin settings show the totals per quiz: how many people played, the average score, the pass rate, and how the attempts spread over your outcomes or score bands.What it does not do is follow anyone around. No IP address, no name, no e-mail address, no cookie, no third party. You decide how many days results are kept, you can wipe a quiz clean with one button, and uninstalling the plugin leaves your data alone unless you tell it otherwise.Give the quiz above a go, and know that all you are adding to this site is one anonymous line saying which element you turned out to be. New in v0.5: asking, without the pressure A quiz can now ask for a name and an e-mail address on the result card, and you decide how insistent that is. Optional shows the result first and puts the form underneath, the way the personality quiz above does it. Gate keeps the result covered until the visitor sends the form or clicks past it. Off is what you get if you never touch the setting.Three things are deliberate. The attempt is stored anonymously the moment the quiz ends, so your numbers are complete whether or not anyone fills the form in. The consent box is never ticked in advance, and you write the sentence next to it yourself. And the address is attached to the attempt on the server, using a reference the browser never sees, so nobody can write their details onto someone else's answers.Get a mail per contact or one summary a day, and export the lot to CSV when you want it somewhere else. New in v0.6: one question at a time, and it keeps up with you Answer a question and the quiz moves on by itself. A thin line runs out along the card while the answer is still readable, and then the next question arrives in exactly the same spot, so nothing jumps and nobody has to hunt for the Next button. The personality quiz further up this page has it switched on: play it, and compare it with the knowledge quizzes, which still wait for you.Three paces, and the plugin picks the right one for the quiz. With instant feedback the pause is longer, because the visitor should have time to see whether they got it right. With feedback held back to the end it is quick, because there is nothing to read. Standard, relaxed or quick shifts that in either direction.Moving on by itself must never take something away, so four questions are deliberately left alone: one with more than one correct answer, which is finished with the check button; one showing an explanation, because nobody should read against a clock; the last one, so the result appears when the visitor asks for it; and every quiz outside the one question at a time flow. Clicking Next yourself cancels the wait, and if you prefer no motion at all, the line stands still. The same element, in a serious register Everything above is built to be enjoyed. This one is not, and it is the same element with different switches. A five point frequency scale instead of right and wrong, four questions that count in reverse so agreeing is not always the higher score, and three score bands set on real totals rather than percentages.It also shows the quick side of moving on by itself. There is nothing to read between the questions, so the plugin uses a much shorter pause here than on the personality quiz further up. Answer, and the next one is already there. How has the past month felt?Ten questions about the past four weeks. There are no right answers: pick the one that fits and the quiz moves straight on. Four of the questions count in reverse. Takes about a minute.Something unexpected threw your plans off course.NeverRarelySometimesOftenVery oftenThe list of things to do felt longer than the day.NeverRarelySometimesOftenVery oftenYou felt on top of what the week was asking of you.NeverRarelySometimesOftenVery oftenYou lay awake going over the day again.NeverRarelySometimesOftenVery oftenA small setback felt bigger than it really was.NeverRarelySometimesOftenVery oftenYou ended a day feeling it had gone the way you wanted.NeverRarelySometimesOftenVery oftenYou put something off that mattered, because there was no energy left for it.NeverRarelySometimesOftenVery oftenYou dealt with an annoyance and let it go straight afterwards.NeverRarelySometimesOftenVery oftenYou felt you were reacting to the day rather than steering it.NeverRarelySometimesOftenVery oftenYou found time that was genuinely your own.NeverRarelySometimesOftenVery oftenTwo deliberate choices worth pointing out. This quiz stores nothing: the answers never leave the browser, because a page like this has no business keeping how anyone's month went. And the questions and the result texts are our own, written for this demo. It is a reflection exercise, not a validated instrument and not a health assessment. If stress is genuinely weighing on you, talk to your doctor or to someone you trust. Forty-three questions, and it still takes a minute The other pattern behind self-tests is not a scale but a weighted checklist. Every item carries its own number, the ones that apply are added together, and the total lands in a band. In the builder that is forty-three true or false questions with a figure in the points field, and three bands with a minimum score. There is nothing else to it.It is also the fastest setting of moving on by itself. There is no feedback to read and the answer is one of two buttons, so the pause is two tenths of a second: you tap, and the next one is already there. Three quizzes on this page now run at three different paces, each one picked for how much the visitor has to take in between questions. A year, added upForty-three things that may or may not have happened in the last twelve months. Yes or no, and the quiz moves straight on. Every item carries its own weight, so the answer is a total rather than a count. Under a minute.You moved house.You started a new job.Your daily routine was disrupted for months.You worked noticeably longer hours than the year before.Your team or your manager changed.You moved from an office to working at home, or the other way round.You were promoted.You renovated or built while living there.You took a long holiday, or a sabbatical.Your sleeping pattern changed for months on end.You changed how you eat, deliberately and for months.You started or stopped a demanding training routine.Your income rose noticeably.You paid off a large debt.You took on a large loan or a mortgage.A large unexpected bill landed.Your income dropped noticeably.You went back to studying alongside work.You took on a second job or a side business.You started working for yourself.Your role changed substantially without you asking for it.You retired.You moved to another town or another country.Someone moved into your home.Someone moved out of your home.A child left home.A child was born, or joined your family.You married, or committed to a partner.You got back together after a break.A close friend or relative moved far away.A close friendship fell apart.There was a lasting falling out in the family.You spent a long stretch on your own, more than you wanted to.You had a long running dispute with an organisation or an authority.You were involved in a legal matter.You lost your job.You became responsible for the care of a parent or a relative.You had an accident, or someone in your household did.You had an operation, or a long recovery.Someone in your household became seriously unwell.You separated from a partner, without calling it final.A long relationship came to an end.Someone close to you died.Same two rules as the quiz above. Nothing is stored, and the result is a sum of numbers we chose ourselves, not a measurement and not a health assessment. New in v0.7: the card people meet first Every quiz on this page now opens on a card, and that card had one job: get someone to press start. So it can carry a bit more than a title and a button. An icon in your accent colour, or an image from your media library. How long it takes, next to the question count, either written by you or worked out from the questions themselves. And one small line under the button for the reassurance that gets people over the line.Look at the four quizzes on this page. The knowledge quiz at the top has its icon above the text. The personality quiz has an image instead, sitting beside the text. The two self-tests further down use an icon beside the text, which makes a tall card noticeably shorter. That is one setting per quiz. Leave everything empty and the card looks exactly as it did before.The time is an estimate, not a promise: four seconds to take in a question, one per answer to read the options, six more where an explanation follows. Rounded up, and never less than a minute, because about zero minutes helps nobody. New in v0.8: keep the box, or lose it The intro card always had a frame around it and the questions never did, so the box vanished the moment someone pressed start. That is now a setting of its own, next to the style preset, with three positions: follow the preset, around every step, or none at all.Two quizzes on this page have it switched on. The personality quiz further up keeps its card from the intro through the questions to the result. The stress check does the same on the quiet Minimal Line preset, which is a combination the presets could not give you: soft dividers inside a card. Every other quiz here is left on follow the preset, so you can see the difference on one page.It is a separate setting rather than a fourth preset on purpose. The preset decides how the answers look; the frame is a different question. Folding the two together would have ruled out exactly the combination the stress check is using. New in v0.9: it reads well for everyone We put the quiz through an accessibility audit against WCAG 2.1 and 2.2 AA, measured on this page rather than read off the source, and then acted on what came out. Fifteen findings, all of them fixed.The biggest one was colour. A quiz takes its accent from your theme, and until now the text on top of that accent was always white, which is fine on a deep blue and too faint on a soft red. The element now measures your accent against the background behind it and works out a readable counterpart, so a button label, the question counter and the line that tells someone how they did stay legible whatever colours you use. The personality quiz further up runs on its own red accent and gets dark labels for exactly that reason.The rest is the sort of thing you only notice when it is missing. Answers now tell a screen reader whether you may pick one or several. The focus follows you when you start a quiz, when your result appears and when you play again, instead of dropping you back at the top of the page. A question can be a heading rather than a paragraph: the two quizzes on this page that show all their questions at once use that, so anyone moving through the page by headings lands on each question instead of having to read past it. And the download is less than half what it was. Frequently asked questions What is Quiz Whizz?One YOOtheme Pro builder element for quizzes and self-tests. You build the questions where you build your pages, pick a flow and a style, and publish. No separate quiz manager, no shortcodes.Do I need to write CSS or code?No. Three presets, an accent that follows your theme colours and free button texts cover the styling; every behaviour is a switch in the element settings.Where do the answers and scores go?Scoring happens in the visitor's browser. Storing is a separate choice and it is off until you switch it on, per quiz. With it on, every finished attempt is saved in your own site database and nowhere else, and the plugin settings show the totals per quiz. No IP address and no cookies, and you set how many days results are kept. A name and an e-mail address are only stored when the visitor fills in the contact form and ticks the box. The personality quiz on this page has both switched on.Can I use it for exams or assessments?No. Scoring happens in the browser, so a determined visitor can find the correct answers in the page. Quiz Whizz is made for marketing, knowledge and self-test quizzes, and it is honest about that.Is it accessible?It is built to WCAG 2.1 and 2.2 AA, and in v0.9 we audited it against that standard on this very page rather than on paper. You can play a whole quiz from the keyboard: number keys pick an answer, arrow keys move within a question, and the focus follows you when you start, when your result appears and when you play again. Answers announce what kind of choice they are, so a screen reader says whether you may pick one or several, and the group is named after the question it belongs to. Colours are worked out rather than assumed: the element measures your accent against the background behind it and picks a readable counterpart, so the labels stay legible whatever colours your theme uses. Every button is at least 44 pixels, the layout holds from 320 pixels up and at 200 percent text size, and animation stops for anyone who asks their system for less motion.Does a quiz move on by itself?Only if you switch it on, and only in the one question at a time flow. The visitor answers, a short line runs out along the card, and the next question arrives in the same spot. It never rushes anyone: a question showing an explanation stays put, so does a question with more than one correct answer, and the last question always waits for the visitor to finish. Clicking Next yourself simply cancels the wait. The personality quiz on this page has it switched on.Which platforms does it run on?Joomla 5 and 6, and WordPress 6 and 7, always with YOOtheme Pro. Both versions share one core, so a quiz behaves the same on either.What happens when two outcomes end with the same total?The visitor sees both, each with its own text, instead of whichever one is listed first. If a quiz needs a single result, you pick a deciding question; when that answer does not settle it, the visitor still gets the tie. The quiz under New in v1.1 on this page lets you try it.Can a result link to a product or a booking page?Yes. Since version 1.2 every outcome and every score band can have an image and a button. The link can be a page on your own site, a full web address, an e-mail address or a phone number. On a tie, each outcome gets its own button. The quiz under New in v1.2 on this page links to four of our own elements. What has changed since the beta?Version 1.0 brought the update server, so new versions arrive in your updater like any other extension, and the WordPress version followed from the same core. Version 1.1 settles ties honestly and adds the profile on the result card. Version 1.2 adds an image and a button per outcome and per score band. Before that: result storage with a dashboard in v0.4, contact capture and CSV export in v0.5, moving on by itself in v0.6, a richer intro card in v0.7, the frame setting in v0.8 and the accessibility audit in v0.9.

Ever wish your site could remember what each visitor loves? Smart Grid makes it happen. Every card it shows gets a heart and a 5-star rating - visitors save what they like with a tap, filter the page down to just their favourites in a click, and show you what's actually worth the time. Then fill those cards with anything: your Joomla articles, your ZOO items, hand-picked highlights, or live posts from eight social platforms. One drag-and-drop YOOtheme Pro element, one Joomla install, zero code - and easily the most epic grid you'll ever add to a page.

YOOtheme Pro accordion and FAQ element. Don't ask. Just install!

Bulk-fill every missing alt text while you sip your coffee. Titles only when they add something.

Ever wish your site could remember what each visitor loves? Smart Grid makes it happen. Every card it shows gets a heart and a 5-star rating - visitors save what they like with a tap, filter the page down to just their favourites in a click, and show you what's actually worth the time. Then fill those cards with anything: your Joomla articles, your ZOO items, hand-picked highlights, or live posts from eight social platforms. One drag-and-drop YOOtheme Pro element, one Joomla install, zero code - and easily the most epic grid you'll ever add to a page.

YOOtheme Pro accordion and FAQ element. Don't ask. Just install!

Bulk-fill every missing alt text while you sip your coffee. Titles only when they add something.