{"id":5647,"date":"2026-07-14T08:19:40","date_gmt":"2026-07-14T08:19:40","guid":{"rendered":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/?post_type=docs&#038;p=5647"},"modified":"2026-07-14T08:54:33","modified_gmt":"2026-07-14T08:54:33","password":"","slug":"interactive-creative-blocks","status":"publish","type":"docs","link":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/docs\/interactive-creative-blocks\/","title":{"rendered":"Interactive &amp; Creative Blocks\u00a0"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Animated, GSAP-powered blocks for engaging, scannable content sections.<\/em>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Accordion<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Build animated FAQ sections and multi-section content areas that are easy to scan.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unfolds content with sleek, interactive panels powered by GSAP animations. Fully responsive and editable directly in the block editor, with no custom code required.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Unlimited collapsible panels\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smooth GSAP open\/close animation\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fully responsive layout\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">FAQ sections, service breakdowns, multi-topic content areas.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/accordion\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/accordion\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tabbed Content<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Organize content into tabbed interfaces with smooth GSAP transitions between panels.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lets visitors switch between content panels (Features, Pricing, FAQ, etc.) with a single click, keeping long pages compact and scannable.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add\/remove\/reorder tabs from the block toolbar\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Horizontal and vertical tab layouts\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smooth animated tab transitions\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customizable colors, fonts and spacing\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Feature\/pricing\/FAQ groupings, product spec sheets.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/tabbed-content\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/tabbed-content\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Content Switcher<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>A pill-style toggle for switching between two distinct content states in one area.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A compact pill-shaped toggle for flipping between two states of content in the same space, such as Monthly vs Yearly pricing or Before vs After.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Two-state pill toggle control\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smooth state transition\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Monthly\/yearly pricing toggles, comparison views.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/content-switcher-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/content-switcher-block\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Card Slider<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>A scroll-animated card row for showcasing services, content, features or portfolio items.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A horizontally scrolling row of cards with scroll-linked animation, useful for showcasing multiple items without consuming excessive vertical space.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll-animated horizontal card row\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Works for services, portfolio items, or content cards\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Service showcases, portfolio highlights, agency case studies.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/card-slider\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/card-slider\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Timeline<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Showcase milestones, history, project steps or a clean process timeline.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Presents a sequence of steps or milestones (e.g. &#8220;How It Works&#8221;) as a clean numbered timeline, with an optional slider\/carousel presentation with next\/previous controls.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Numbered step layout with heading + description per step\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Optional carousel navigation (next\/previous arrows)\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eyebrow label and section heading\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Company history, onboarding steps, process explanations.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/timeline\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/timeline\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Gallery<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>A responsive image gallery with support for up to eight images on the free tier.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A responsive image gallery block for showcasing photos, portfolio work or product shots, supporting up to eight images in the free tier.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Up to 8 images (free tier)\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsive grid layout\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Portfolio pages, project galleries, product photo grids.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/gallery-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/gallery-block\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Video Player<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Embed YouTube videos with a clean, lightweight player design.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A lightweight embed block for YouTube videos with a clean player frame, avoiding the visual clutter of default embeds.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>YouTube embed support\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clean, minimal player chrome\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Product demo videos, testimonials, tutorial embeds.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/video-player-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/video-player-block\/<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Icon Box<\/strong>&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Display an icon with customizable styling, powered by a large UXWing icon library.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pairs an icon with a heading and description, drawing from the large UXWing icon library, with full style customization.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key features<\/strong>&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Large built-in icon library (UXWing)\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customizable icon size, color and background\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best for<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Feature callouts, service highlights, benefit lists.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/icon-box-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">View live demo: https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/icon-box-block\/<\/a>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animated, GSAP-powered blocks for engaging, scannable content sections.&nbsp; Accordion&nbsp; Build animated FAQ sections and multi-section content areas that are easy to scan.&nbsp; Unfolds content with sleek, interactive panels powered by GSAP animations. Fully responsive and editable directly in the block editor, with no custom code required.&nbsp; Key features&nbsp; Best for&nbsp; FAQ sections, service breakdowns, multi-topic [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[39,44],"doc_tag":[],"class_list":["post-5647","docs","type-docs","status-publish","hentry","doc_category-gutenblocks","doc_category-interactive-creative-blocks"],"year_month":"2026-09","word_count":602,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin","author_nicename":"admin","author_url":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/author\/admin\/"},"doc_category_info":[{"term_name":"Gutenblocks","term_url":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/docs-category\/gutenblocks\/"},{"term_name":"Interactive &amp; Creative Blocks","term_url":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/docs-category\/interactive-creative-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/docs\/5647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/comments?post=5647"}],"version-history":[{"count":1,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/docs\/5647\/revisions"}],"predecessor-version":[{"id":5648,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/docs\/5647\/revisions\/5648"}],"wp:attachment":[{"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/media?parent=5647"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/doc_category?post=5647"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/adairedigitaldev.adaire.dev\/gutenblocks\/wp-json\/wp\/v2\/doc_tag?post=5647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}