Magical Blocks – Elementor Style Blocks for Gutenberg
Magical Blocks brings the Elementor experience to Gutenberg – build stunning websites with the same powerful design controls you love, but 100% native to the WordPress block editor. 🎯 Why Magical Blocks? Elementor-Style Workflow – Familiar container-based layouts with Flexbox controls Lightweight & Fast – Only loads assets for blocks you actually use Design-First – Professional styling with full customization options WordPress Native – Built entirely on the Gutenberg block editor Developer Friendly – Clean code following WordPress coding standards 🚀 Get the Elementor Vibe in WordPress Editor Miss Elementor’s intuitive design controls? Magical Blocks brings that same power to Gutenberg: Flexbox Containers – Build complex layouts with direction, wrap, justify, and align controls Nested Containers – Create sophisticated multi-column designs with Inner Container blocks Full Responsive Control – Desktop, tablet, and mobile settings for every property Visual Design Panel – Intuitive controls just like your favorite page builder 📦 12 Free Blocks Layout Blocks: 1. Container Block – Powerful Flexbox container with full layout controls (direction, wrap, justify, align) 2. Inner Container Block – Nestable container for complex multi-column layouts 3. Section Block – Full-width sections with backgrounds and inner blocks Content Blocks: 4. Heading Block – Advanced typography controls with Google Fonts integration 5. Button Block – Stylish buttons with hover effects and icon support 6. Icon Box Block – Icon + text combinations for features and services 7. Testimonial Block – Customer reviews with avatar and star ratings 8. Info Box Block – Information cards with icons and call-to-action 9. Image Box Block – Image + text layouts with hover effects 10. Counter Block – Animated number counters for statistics 11. Progress Bar Block – Visual progress indicators with animations 12. Divider Block – Stylish separators with icons and text ⚡ Key Features Flexbox Layout System – Container blocks with full Flexbox controls like Elementor On-Demand Asset Loading – CSS/JS only loads when blocks are used Responsive Controls – Desktop, tablet, and mobile settings for all properties CSS Variables – Easy theme integration and customization Block Patterns – Pre-designed layouts (coming soon) Pro Blocks – Additional premium blocks available (coming soon) 🎨 Full Customization Every block includes comprehensive styling options – just like Elementor: Typography (font family, size, weight, line-height, letter-spacing) Colors (text, background, borders with opacity support) Spacing (padding, margin with responsive controls) Borders (width, radius, style, color) Shadows (customizable box shadows) Hover effects (transitions and transforms) Layout Controls (Flexbox direction, wrap, justify, align, gap) 🔧 Developer Features PHPCS compliant (WordPress Coding Standards) ESLint & Prettier configured Webpack build system with @wordpress/scripts Proper internationalization (i18n ready) Documented codebase with PHPDoc/JSDoc 💡 Perfect For Elementor Users Switching from Elementor to Gutenberg? Magical Blocks makes the transition smooth: Same container-based workflow you’re used to Familiar Flexbox layout controls Visual design panels for all styling options No learning curve – just start building!
Top keywords
- block16×3.65%
- blocks14×3.20%
- controls12×2.74%
- elementor7×1.60%
- flexbox7×1.60%
- container6×1.37%
- wordpress6×1.37%
- full5×1.14%
- layout5×1.14%
- layouts5×1.14%
- box4×0.91%
- design4×0.91%
Bootstrap Blocks for WP Editor v2
The essential WP Editor Plugin for Bootstrap websites. Fully manageable responsive containers, rows and columns. Developers and editors easily create and edit bootstrap pages within the WP Editor. Without coding. Works perfectly in combination with loads of other plugins. Use it with self-developed Bootstrap themes or regular themes! Whether you want to set up a complete Bootstrap WordPress site or just want to quickly set up a temporary page. The Bootstrap blocks for WP Editor plugin enables you to make use of your activated WordPress theme. But you can also choose to start without the header and footer and start with a fresh page. Without any header and footer. It’s all up to you. Features of Bootstrap Blocks for WP Editor v2: NEW! in v2: Align columns in row: left, center and right Set visibility of columns per breakpoint Set order of each column per breakpoint Container wrapper: full width background colours and set additional class Container and column background color option Bootstrap button Independent text parts colouring Responsive spacer colouring Responsive spacer visibility per breakpoint Optimized for Bootstrap 5.3 Editor: adjustable view width (up to 100% of screen width) Editor: collapse containers, rows and columns for better overview Editor: view columns vertical and horizontal Editor: breakpoint labels for quick overview Features that were already there: Insert containers, rows and columns in the WP Editor Use the WP Editor blocks in the Bootstrap grid Seamless integration with themes that use Bootstrap grid Seamless integration with themes that do not use Bootstrap grid Set overall identity colours and apply these in WP Editor Option: start with empty ‘Bootstrap Page’ template Option: enable Bootstrap grid from plugin dashboard Option: wrap page title in Bootstrap grid on ‘Bootstrap page’ template pages Option: hide default page title on ‘Bootstrap page’ template pages Collapse containers for clear overview in the Editor Add labels to containers for clear overview in the Editor Extra Features of the Design Package add-on: Set column use for all (6) Bootstrap breakpoints Use of standard Bootstrap classes (such as mx-auto) Responsive Spacer Block (not pixel based, but screen size based) Suppress default header and footer on ‘Bootstrap page’ template pages Full control over gutter setting Make use of fluid containers Lock container layouts to avoid unintended changes by editors Editor: custom CSS code editor for adding css only to current post-item More information on our website Requirements: WordPress 6.0 and up Bootstrap 4.0 and up Installation: Add the free Bootstrap blocks for WP Editor plugin via your WordPress plugins page: On the ‘Plugins’ page: click on “add new” Search “Bootstrap blocks for WP Editor” Click “install now” Activate Bootstrap blocks for WP Editor on the ‘Plugins’ page Or download it on the WordPress Plugins page and install manually: On the ‘Plugins’ page: click on “add new” Click on “Upload Plugin” Choose the downloaded file on your hard drive Click “install now”