Demo

Written by admin on 07 September 2026. Posted in Demo.

HootBox Demo

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 hoot

This 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 modal

The 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 bar

A slim bar above the content. Nothing is covered, nothing is blocked, and the visitor can read on while it is there.

Corner panel

A small panel in one of the four corners. Friendly, easy to ignore, and the right size for a hint or a small offer.

Side panel

A full height panel that slides in from the left or the right. Room enough for a form, a menu, or a longer story.

Full screen

The 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

Info

Neutral news. A change in opening hours, a new page, a small announcement.

Success

Something went well. A form was sent, an order came through, a file was saved.

Warning

Something needs attention before it becomes a problem. Maintenance tonight, a deadline tomorrow.

Error

Something is wrong and the visitor has to know. Keep the wording plain and say what to do next.

Brand

Your 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.

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 halfway

This 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 weekdays

This 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 moment

This 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 again

Tick 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 audience

A 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 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 advertising
The connection between you and the site is encrypted
The site passed a government safety check
The site does not store any data

Roughly how many websites exist today?

Around 10 million
Around 200 million
Around 1 billion
More than 100 billion

What was one of the very first things ever sold online?

A pizza
A Sting CD
A pair of sneakers
Concert tickets

Which of these is the oldest?

Google
Wikipedia
The :-) smiley
The text message

True 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 ones

Roughly how many emails are sent every day, worldwide?

About 3 billion
About 30 billion
More than 300 billion

Which colour appears most often in the logos of the world's biggest brands?

Red
Blue
Green

What share of all web traffic comes from phones?

Around 15 percent
Around 60 percent
Around 90 percent

Make 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 yours

Where does this quiz get its colour?

From a stylesheet someone had to edit
From the Custom accent picker in the element settings
It is hardcoded, like in most quiz tools

The answers in this quiz appear in a different order for every visitor. Why?

Shuffle answers is switched on
Pure coincidence
A caching problem

New 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 apply

Two 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 Slider
Crazy Highlights 'n Doodles
The Most Useless Element Ever
Smart Background Sound

A points based self-test with score bands

The digital stress check

Four 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 spotlight
Reorganising the bookshelf, again
Vinyl, coffee and nowhere to be
Doing absolutely nothing, proudly

Your role in a group project?

The presenter
The planner
The mood manager
The comic relief

Pick a motto.

Go big or go home
A place for everything
Good vibes only
Less is more

Your browser, right now?

A fullscreen demo is playing
Tabs neatly sorted in groups
A music tab is pinned
One 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 somewhere

A 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.

Never
Rarely
Sometimes
Often
Very often

The list of things to do felt longer than the day.

Never
Rarely
Sometimes
Often
Very often

You felt on top of what the week was asking of you.

Never
Rarely
Sometimes
Often
Very often

You lay awake going over the day again.

Never
Rarely
Sometimes
Often
Very often

A small setback felt bigger than it really was.

Never
Rarely
Sometimes
Often
Very often

You ended a day feeling it had gone the way you wanted.

Never
Rarely
Sometimes
Often
Very often

You put something off that mattered, because there was no energy left for it.

Never
Rarely
Sometimes
Often
Very often

You dealt with an annoyance and let it go straight afterwards.

Never
Rarely
Sometimes
Often
Very often

You felt you were reacting to the day rather than steering it.

Never
Rarely
Sometimes
Often
Very often

You found time that was genuinely your own.

Never
Rarely
Sometimes
Often
Very often

Two 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 up

Forty-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.

Wow, Handshakable Downloads Demo

Wow, Handshakable Downloads Demo | Accept Terms Before Download

Some downloads deserve a proper handshake first. Wow, Handshakable Downloads shows your visitors the terms and conditions, waits for their agreement and only then hands over the file, enforced on the server, not just with a popup.

Everything on this page is the real element at work. Go ahead, click a file and shake on it.

Your first handshake

A simple download list with country flags and file sizes. Accept the terms once and every file on this page unlocks for the rest of your visit.

Sample brochure
Voorbeeldhandleiding
Musterdokument

Sealed with a button

The same handshake, dressed up as buttons. Flags and file sizes are optional per element.

Sample brochure
Voorbeeldhandleiding

Ask again, every single time

For files that deserve extra care you can require a fresh agreement before every single download - even in the same visit.

Strictly guarded brochure

Your own terms, per element

Terms ship in six languages out of the box and follow the language of your site. Prefer your own words? Override them per language in the plugin settings, or per element - like this one:

Download with custom terms

Works anywhere: the shortcode

No builder around? Drop {yc_handshake file="files/brochure.pdf" title="Brochure" flag="gb" size="yes"} in an article, a Custom HTML module or inside any other element - this panel, for example:

A stock YOOtheme Panel

This is a regular Panel element. The download link below comes from the shortcode in its content.

Brochure via shortcode(1.4 kB)

Frequently asked questions

What happens when a visitor clicks a download?

A popup shows your terms and conditions. The visitor ticks the checkbox, clicks accept and the download starts immediately. You choose whether one agreement covers the whole visit or every single download.

Can the popup be skipped with a direct link?

No. The links on the page never contain the file path - they carry a signed code, and the download itself needs a short-lived ticket that is only issued after the terms have been accepted. The gate lives on the server, not in the browser.

Where do I see how often a file was downloaded?

The plugin settings open with a dashboard that counts downloads per file, with the first and last download date. No personal data is stored - no names, no IP addresses.

Can I use my own terms, in multiple languages?

Yes. Default texts ship in English, Dutch, German, French, Spanish and Italian and follow the language of your site. You can override them per language in the plugin settings, or write custom terms for a single element.

Which files can I offer?

Any file from your Joomla media library: PDF, ZIP, Office documents and more. Optionally with a country flag and the file size next to the link. Server-executable file types are always refused.

Does it work outside the page builder?

Yes. The {yc_handshake} shortcode works in articles, in Custom HTML modules and even inside other YOOtheme elements - the Panel above is living proof.

Hits: 238

Written by admin on 07 July 2026. Posted in Demo.

Epic Slider Demo

Epic Slider

New in v0.3 - Text animations

Give every slide a headline, a subtitle and an optional button, on any of nine positions with an optional glass panel. Pick how the text arrives.

New in v0.3 - Sweeps & spins

Nine fresh ways to move between slides: Wave, Spiral Wind In and Out, Wipe left, right, up and down, Circle Reveal and a full 3D Flip.

New in v0.3 - Ken Burns

Switch on a slow, cinematic zoom and pan for every slide. Combine it with a soft fade for an elegant, moving backdrop.

New in v0.4 - New transitions

Three more ways to move between slides: Flipbook (a page turn from the left), Curtain (opens from the middle) and Lamellen (vertical blinds). The labels here use the Outline text style - dark letters with a white edge, readable on any image.

New in v0.5 - Alert box

Put a colored alert over any slider: seven colors and seven positions, an optional image or icon, a title and text, and a button or a newsletter signup field. Visitors can dismiss it and it stays hidden. See the blue newsletter box on the Blinds and Reveals slider above, and the amber offer bar here.

New in v0.6 - Flipbook page-turn from every corner

The Flipbook transition folds the slide diagonally like a real page in a book. New in v0.6: it now opens from any of the four corners, as a seamless fold with no tiles and no gaps.

New in v0.6 - Video slides that fill the frame

Add an mp4, YouTube or Vimeo URL to a slide. The video plays muted and looping, and by default fills the whole slider with no black bars. Your title, text and button stay on top.

New in v0.6 - A different effect per slide, with playback controls

Give every slide its own transition instead of one effect for the whole slider. This slider also shows the new playback controls: a progress bar and a play or pause button. Endless looping is the default.

New in v0.7 - Free content per slide and scoped custom CSS

A slide is no longer just an image with a title. Put any content on a slide - headings, lists, several buttons - and style a single slider with its own scoped CSS, without touching the rest of the site.

Blinds and Reveals - dot navigation

Louvres that swing open diagonally and curtain effects that reveal the next slide. Navigate with the dots below.

Tiles, Spiral and Mosaic - thumbnails

The image breaks into a tile grid that appears in a spiral or at random. Jump to any slide with the thumbnail strip.

Sweep and Burst - arrows plus dots

Diagonal wipes and an explosive zoom-in. Swipe or drag on any slider to move between slides.

Dynamic content

Testing with dynamic content

Fully configurable

Choose the effect, interval and transition duration, the tile-grid density, autoplay with pause-on-hover, navigation style (arrows, dots or thumbnails), swipe, full width, and the height or aspect ratio. All right inside the YOOtheme builder.

Frequently asked questions

Does Epic Slider work with my own images?

Yes. Pick an image per slide from your site media manager. The slider crops each image neatly (cover, no distortion), whatever the aspect ratio.

Which transitions can I choose?

23 effects: blinds, reveals, tiles, spiral, mosaic, sweep, burst and fade. Pick a fixed effect per slider, or let it choose at random.

How can visitors navigate?

Side arrows, dot navigation, a thumbnail strip, and touch swipe or mouse drag. Each one is optional, per slider.

Can I control speed and behaviour?

Yes. Interval, transition duration, autoplay with pause-on-hover, and the tile-grid density, all in the builder.

Is it fast and accessible?

The slider runs on lightweight, modern JavaScript (the Web Animations API), with no jQuery or heavy libraries. It respects prefers-reduced-motion.

Does it work well on mobile?

Yes. It is responsive, supports swipe, and adapts to the height or aspect ratio you choose.

Can I add text and buttons to each slide?

Yes. Every slide can carry a title, a subtitle and an optional button or link, placed on any of nine positions with an optional semi-transparent panel. The title animates in with your chosen style: a calm fade, letters sliding in, dancing letters, or words sharpening from a blur.

Which transition effects are available?

Epic Slider ships with 31 effects, including blinds, reveals, tiles, spiral, sweep and burst, plus the new Wave, Spiral Wind In and Out, Wipe left, right, up and down, Circle Reveal and a full 3D Flip. You can also choose Random to mix them. New in v0.6: the Flipbook page-turn opens from any of the four corners, and the vertical Slats effect (formerly Lamellen).

What is the Ken Burns option?

Ken Burns adds a slow, cinematic zoom and pan to the active slide. Combined with a soft fade it turns the slideshow into an elegant, moving backdrop. Like every animation, it respects the visitor’s reduced-motion setting.

Can I show an alert or newsletter box on the slider?

Yes. Every slider can show a colored alert box in one of seven positions, with a title, text, an optional image, and either a button or an email signup field that posts to your own newsletter service. Visitors can close it and it is remembered per visitor.

Can I use a video as a slide?

Yes. Add an mp4, YouTube or Vimeo URL to a slide. It plays muted and looping and, by default, fills the whole slider with no black bars. Your title, text and button stay on top of the video.

How does the Flipbook page-turn look?

Flipbook folds the slide diagonally like a real page in a book, revealing the next slide underneath. New in v0.6 you can start the fold from any of the four corners, as one seamless fold with no gaps.

Can the slider loop forever, with play and pause?

Yes. Endless looping is the default, so it runs from the last slide back to the first. You can also show a progress bar and a play or pause button, and give every slide its own transition.

Can I put my own content on a slide?

Yes. Next to a title, subtitle and button, each slide has a Free content field. Add headings, lists, several buttons or formatted text; it shows as an overlay and uses the slide position and animation you set.

Can I style one slider without touching the rest of the site?

Yes. Each slider has a Custom CSS field on the Advanced tab. Write normal rules and they are applied only to that one slider (scoped automatically), so other sliders and the rest of the page stay untouched.

Epic Slider YOOtheme Pro

Epic Slider - a premium YOOtheme Pro slideshow element with grid-based cinematic transitions.

What's new

1.0.2 (2026-09-06)

1.0.1 (2026-08-11)

1.0.0 (2026-08-11)

0.12.0 (2026-08-06)

0.11.0 (2026-08-06)

Plugin settings

Basic

yc_state

This setting has no help text in the plugin.

Epic Slider adds a premium slideshow element to the YOOtheme Pro builder. No configuration needed here; build sliders directly 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.

Magic Menus Demo

Magic Menus

Turn a plain list of links into a ride. Magic Menus presents your menu as an elevator: every link is a floor, the lift really travels, and a click takes your visitor to the page. Built for YOOtheme Pro, no jQuery, works with mouse, touch and keyboard.

Hover previews, click follows

The default mode. Move your mouse over a floor button and the lift glides to that floor for a preview. Click and you actually travel to the page. Try it: this building is the real YOOzeCase site.

Click mode, with the lift on the left

Prefer a calmer menu? In click mode the lift only moves when a visitor clicks: the first click brings the lift to the floor, the second click follows the link. The elevator can sit on either side of the buttons.

Your brand colors

Every part of the scene picks up your own colors: walls, doors, frame, lamp and buttons. Give each floor its own interior color, or upload your own artwork per floor.

Transparent, at home on any background

Switch on transparent mode and the elevator shaft drops its own background, so the menu blends into dark sections, gradients or photo backgrounds.

Frequently asked questions

What is Magic Menus?

Magic Menus is a menu element for YOOtheme Pro that shows your links as an animated scene. The first theme is an elevator: each link is a floor, and the lift travels to the floor your visitor picks.

Does it work with my existing YOOtheme Pro site?

Yes. Magic Menus installs as a regular Joomla plugin and adds a new element to the YOOtheme Pro page builder. Drop it on any page, add your links as floors and you are done. No template changes needed.

What happens on phones and tablets?

On touch screens the first tap previews the floor and the second tap follows the link, so nobody travels by accident. The scene scales down gracefully and you can optionally show a plain button list on small screens.

Can I use my own colors and images?

Yes. Walls, doors, frame, lamp and buttons all take your brand colors, and every floor can have its own interior color or your own uploaded artwork.

Is it accessible and fast?

The element is plain modern JavaScript, no jQuery. It works with mouse, touch and keyboard, respects reduced-motion settings, and its assets only load on pages that actually use the element.