Accordion Blocks vs Envision Page Builder – A collection of WordPress Gutenberg blocks & templates

Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features Adds a Gutenberg block for adding accordions to your site. Supports multiple accordions with individual settings for each accordion item. Fully responsive. Support for item IDs and direct links. Supports nesting accordions. Accessible (for users requiring tabbed keyboard navigation control). Optional Features Open individual accordion items by default. Disable auto closing of accordion items. Manually close items by clicking the title again. Scroll page to title when it’s clicked open (including setting a scroll offset position). Set the HTML heading tag for the title element (h1–h6, button). Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults. Supports adding custom block styles using wp.blocks.registerBlockStyle. Output The plugin will ultimately output following HTML (simplified for this example): Title with H2 tag Content Custom CSS You can use the following CSS classes to customize the look of the accordion. .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 ` ` 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 */

🤝 Learn More | Buy Now 🤝 Envision Page Builder is a powerful solution for designing modern websites with WordPress. Seamlessly integrated into the block editor, this plugin enhances your design experience by providing an extensive library of custom Gutenberg blocks and templates. Whether you’re a blogger, small business owner, or designer, Envision Page Builder gives you the tools to create visually stunning websites without touching a single line of code. Designed with ease of use in mind, this page builder is perfect for beginners but also offers advanced features for experienced developers. Envision Page Builder is the leading Gutenberg builder and focuses on versatility and functionality. Use our collection of unique blocks to create interactive, dynamic, and professional pages. From responsive design features that adapt beautifully to all devices to animations that bring your content to life, this page builder will keep your website modern and performing at its best. With an extensive icon library and SEO-friendly design built in, your website will function even better, and the block editor gives you everything you need to create a compelling web presence. Envision Page Builder is the ultimate choice for anyone wanting to unlock the full potential of Gutenberg blocks. Its flexibility and user-friendly interface make it easy to customize every aspect of your website. Whether you’re designing an elegant portfolio, a vibrant blog, or a professional business website, the plugin’s intuitive block editor makes the process seamless. Designed for performance, Envision Page Builder helps you create a visually appealing website and ensures that your website loads quickly and ranks highly in search engines. Unleash the power of the true Gutenberg builder and transform your WordPress site with Envision Page Builder today! 🌟 Unlock More Flexibility! Use the Blocks to Shortcode plugin to **convert any blocks into shortcodes and embed them anywhere! 🚀** Envision Page Builder Features (Free) Essential Blocks: Access to Row Columns, Container, Button, Advanced Text, and Icon Box blocks. Design Library: Import free, professionally designed templates to save time. Responsive Design: Customize layouts and styles for Desktop, Tablet, and Mobile. Basic Scroll Animation: Add scroll animations to your blocks. Icon Library: Integrated icon picker with support for multiple libraries. SEO Friendly: Optimized markup for better search engine ranking. Envision Page Builder Pro Features Premium Design Library: Unlock exclusive, high-quality templates and patterns. Advanced Scroll Animations: Trigger animations on scroll with precise control. Custom CSS: Add custom CSS code directly to any block. Advanced Backgrounds: Use Background Overlays, Filters, and Masks. Transform Controls: Rotate, Scale, Skew, and Translate elements in 2D/3D space. Advanced Shadows: Create complex Box Shadows and Text Shadows. Transitions: Control hover transition duration and easing. Responsive Visibility: Hide blocks on specific devices (Desktop, Tablet, Mobile). HTML Attributes: Add custom HTML attributes to block wrappers. Pro Block Features: Icon Box: Upload custom Image/SVG icons, advanced sizing, and styling. Button: Advanced hover effects and styling options. How to use Envision Page Builder First, install the Envision Page Builder plugin. Add blocks from the Envision Builder category in the Gutenberg editor. Adjust the settings in the settings sidebar on the right. Enjoy! For installation assistance, click on the Installation tab. Feedback Was this plugin useful to you? Or do you have any concerns? Have a feature request? Send us your feedback Third-Party Libraries Freemius SDK Source: https://freemius.com/ GitHub: https://github.com/Freemius/wordpress-sdk License: GPLv3 – https://github.com/Freemius/wordpress-sdk/blob/master/LICENSE.txt Purpose: Provides opt-in usage tracking and analytics to help improve the plugin. AOS (Animate On Scroll) Source: https://michalsnik.github.io/aos/ GitHub: https://github.com/michalsnik/aos License: MIT – https://github.com/michalsnik/aos/blob/master/LICENSE Purpose: Provides smooth scroll animation effects for blocks on the frontend.