TrainedPixels

<p>THE FAST, VISUAL FAQ BUILDER FOR WORDPRESS</p>
<p>TrainedPixels FAQ Builder helps you create polished, conversion-friendly FAQ sections in minutes. Build and organize content in one place, style everything visually, and publish anywhere with a shortcode.</p>
<p>Whether you run a support center, business website, or online store, the plugin gives you precise control over design, accessibility, and SEO without writing code.</p>
<p><strong>Create professional FAQ sections with confidence:</strong></p>
<ul>
<li><strong>Visual Settings Panel + Live Preview</strong> — Style typography, colors, spacing, borders, and icons while previewing real FAQ interactions.</li>
<li><strong>FAQ Manager</strong> — Create, edit, categorize, and reorder FAQs from a clean drag-and-drop admin interface.</li>
<li><strong>Flexible Shortcode Engine</strong> — Use <code>[trained_faq]</code> with category, ID, limit, order, and schema controls.</li>
<li><strong>Beautiful Defaults</strong> — Accordion behavior, smooth slide animation, and 4 icon presets out of the box.</li>
<li><strong>Custom Icon Uploads (PNG/JPG/GIF)</strong> — Upload closed/open icons for branded FAQ toggles.</li>
<li><strong>Responsive Typography Controls</strong> — Keep FAQ readability strong across mobile and desktop.</li>
<li><strong>SEO Schema Built In</strong> — Automatically outputs FAQPage JSON-LD for search visibility.</li>
<li><strong>Accessibility Focused</strong> — Keyboard navigation, ARIA attributes, and focus styles are built in.</li>
<li><strong>Translation Ready</strong> — Full i18n support with <code>.pot</code> included.</li>
</ul>
<p><strong>Unlock more with PRO (premium add-on):</strong></p>
<ul>
<li><strong>Gutenberg Block</strong> — Insert FAQs directly in the block editor with visual controls.</li>
<li><strong>Elementor Widget</strong> — Add and configure FAQs natively inside Elementor.</li>
<li><strong>Toggle / Multi-open Mode</strong> — Allow multiple questions to stay open.</li>
<li><strong>Advanced Animation Types</strong> — Fade, scale, collapse, and more.</li>
<li><strong>Rotate Icon Animation</strong> — Add 180-degree rotate transitions for custom icons.</li>
<li><strong>Question-Answer Gap Control</strong> — Fine-tune spacing between each question and answer.</li>
<li><strong>Analytics Dashboard</strong> — Track views, clicks, read duration, and engagement.</li>
<li><strong>WooCommerce Integration</strong> — Show mapped FAQs directly on product pages.</li>
<li><strong>Preset Library (Coming Soon)</strong> — Save and reuse full design presets.</li>
</ul>
<p><a href="https://trainedpixels.com/trainedpixels-faq-builder" rel="nofollow ugc">Learn more about PRO at trainedpixels.com</a>.</p>
<h3>Development</h3>
<p>Source code for all compiled JavaScript and CSS is available at:<br />
https://github.com/TrainedPixels/trainedpixels-faq-builder-lite</p>
<p>To build from source:</p>
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code></li>
<li>Run <code>npm run build</code></li>
</ol>
<p>Build tools used: webpack (via @wordpress/scripts), PostCSS, Tailwind CSS.</p>


TrainedPixels FAQ Builder

Create beautiful FAQs with visual styling, shortcode support, and automatic SEO schema markup.

philbuchanan

<p>Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages.</p>
<p>The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme.</p>
<h4>Features</h4>
<ul>
<li>Adds a Gutenberg block for adding accordions to your site.</li>
<li>Supports multiple accordions with individual settings for each accordion item.</li>
<li>Fully responsive.</li>
<li>Support for item IDs and direct links.</li>
<li>Supports nesting accordions.</li>
<li>Accessible (for users requiring tabbed keyboard navigation control).</li>
</ul>
<h4>Optional Features</h4>
<ul>
<li>Open individual accordion items by default.</li>
<li>Disable auto closing of accordion items.</li>
<li>Manually close items by clicking the title again.</li>
<li>Scroll page to title when it’s clicked open (including setting a scroll offset position).</li>
<li>Set the HTML heading tag for the title element (h1–h6, button).</li>
<li>Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults.</li>
<li>Supports adding custom block styles using <code>wp.blocks.registerBlockStyle</code>.</li>
</ul>
<h4>Output</h4>
<p>The plugin will ultimately output following HTML (simplified for this example):</p>
<pre><code><div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
    <h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false">
        Title with H2 tag
    </h2>
    <div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true">
        <p>Content</p>
    </div>
</div>
</code></pre>
<h4>Custom CSS</h4>
<p>You can use the following CSS classes to customize the look of the accordion.</p>
<pre><code>.c-accordion__item {} /* The accordion item container */
.c-accordion__item.is-open {} /* is-open is added to open accordion items */
.c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */
.c-accordion__title {} /* An accordion item title */
.c-accordion__title--button {} /* An accordion item title that is using a `<button>` tag */
.c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */
.c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content {} /* An accordion item content container */
</code></pre>


Accordion Blocks

Gutenberg block for creating responsive accordion drop-downs.

TrainedPixels FAQ Builder vs Accordion Blocks