Brutal Blocks

Tag: Design

  • Brutal Timeline Block: The Most Beautiful Storytelling Layout for Gutenberg

    Whether you are showcasing your company’s history, building a product roadmap, or designing a step-by-step tutorial, boring bullet points just don’t cut it. The Brutal Timeline Block is a beautifully engineered, fiercely responsive timeline builder that turns your chronological data into an absolute visual masterpiece directly inside the WordPress editor.

    We didn’t just build a timeline; we built a cinematic experience. It is flawlessly designed, incredibly lightweight, and perfectly inherits your theme’s style while giving you total control over the layout.

    🔥 What makes it brutal?

    • Dual Orientations: Choose between a classic Vertical scrolling timeline or a stunning, modern Horizontal layout to perfectly fit your page design.
    • Cinematic Animations: Make your timeline come alive as users scroll. Choose from premium entrance effects like Blur Reveal (cinematic), Fade + Rise, Slide In (Alternating), or Scale Pop.
    • Stagger Delay Control: Fine-tune the exact millisecond delay between each item appearing on screen to create a mesmerizing, cascading visual effect.
    • Custom Data & Icons: Each timeline node gives you total control. Add a Date/Label, a striking Title, and a detailed Description. Plus, enable “Custom Icons” to assign a unique, zero-bloat SVG to every single step of the journey.
    • Perfect Branding: Use the built-in color picker to easily set the Accent Color of the timeline track and nodes so it matches your brand identity flawlessly.

    Event

    An event

    Whatever

    Description

    Another event

    Another description

    💸 FREE vs. PRO

    The Free version is a gorgeous way to display a short, static list. But if you want to tell a real story and drop your visitors’ jaws with motion design, the PRO version is exactly what you need.

    • FREE Version: Extremely sleek, but you are locked to the Vertical orientation only, with a maximum of 5 timeline items. You can change the Accent Color and toggle the Date/Labels, but you get no animations and no custom icons.
    • PRO Version (Unleash the Beast): The ultimate storytelling tool.
      • Unlimited Items: Build massive, multi-year company histories or complex roadmaps.
      • Horizontal Layout: Unlock the beautiful, modern horizontal timeline orientation.
      • Cinematic Animations & Stagger: Access the premium motion effects (Blur Reveal, Slide In, etc.) and control the cascade speed with the Stagger Delay slider.
      • Custom Icons: Unlock the ability to assign specific, lightweight SVGs to every single node on your timeline with our icon picker.

    🛠️ Quick Help: Up and running in seconds

    Crafting a stunning timeline takes no time at all:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Timeline” block onto your canvas.
    2. Click on the default timeline items to add your Date/Label, Title, and Description. Need more? Just add a new item block inside!
    3. Free users: Use the right sidebar to change your Accent Color. You can add up to 5 items in vertical mode, directly in the canvas.
    4. PRO users: Head to the Global Settings in the sidebar. Switch the Orientation to Horizontal if it fits your design, and toggle “Enable custom icons” to assign unique SVGs to each step.
    5. PRO users: Finally, select a premium Animation (like the cinematic Blur Reveal) and adjust the Stagger Delay slider. Save your page and enjoy the show.

  • Brutal Tabs Block: The Ultimate Fluid Content Organizer

    When you have a massive amount of information to share—like technical product specs, pricing details, or dashboard panels—forcing users to endlessly scroll is a UX nightmare. The Brutal Tabs Block is the ultimate Gutenberg tabs plugin. It allows you to elegantly pack complex layouts into a clean, compact, and highly organized interface.

    Forget about broken layouts on small screens. We engineered these tabs to be flawlessly responsive. If the screen or sidebar gets too narrow, the tabs smartly transform into a sleek horizontal scrolling list. Zero layout breaks, perfect mobile experience.

    🔥 What makes it brutal?

    • Drop Anything Inside: Built with native Gutenberg InnerBlocks. This means your tab content is not limited to boring text. Drop in image galleries, videos, forms, or even other Brutal Blocks directly into the editor.
    • Flawless Mobile UX: Impeccable horizontal scrolling for the tab navigation on narrow mobile screens.
    • Total Design Control: Use the intuitive color pickers to customize the background and text colors of both your active tabs and your content panels. Make it seamlessly match your brand.
    • Zero-Bloat Icons: Make your tab navigation visually striking by injecting lightweight Lucide SVG icons right next to your tab titles (complete with our custom Fill toggle).
    • Premium Animations: Bring your content to life. Add silky-smooth entrance animations (Fade In, Slide Up) every time a user clicks a new tab.

    tab #1

    💸 FREE vs. PRO

    The Free version is great for a basic breakdown, but if you are building complex pages, you will hit the ceiling fast. The PRO version unlocks the true power of dynamic content organization.

    • FREE Version: A solid starting point. You get full control over the colors to match your theme, and you can drop any block inside the content area. However, you are strictly limited to a maximum of 3 tabs. Plus, you are locked out of all icons and animations.
    • PRO Version (Unleash the Beast): The ultimate organizational tool.
      • Unlimited Tabs: Build massive, comprehensive tabbed interfaces without any restrictions.
      • Zero-Bloat SVG Icons: Access the 1,600+ custom Lucide icon-picker to make your tab titles instantly recognizable.
      • Advanced Animations: Make your content transitions feel expensive with premium Fade In and Slide Up effects.

    🛠️ Quick Help: Up and running in seconds

    Organizing your dense content takes just a few clicks:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Tabs” block onto your canvas.
    2. Click directly on the tab navigation to type your titles.
    3. Drag and drop absolutely any WordPress block into the content area below the tabs.
    4. Free users: Use the right sidebar to tweak the background and text colors. You are allowed up to 3 tabs.
    5. PRO users: Add unlimited tabs. Use the icon-picker to add SVGs to your tab titles, and turn on the Fade In or Slide Up animations for a premium feel. Save and watch your layout transform.

  • Brutal Stats Block: The Ultimate Animated Number Counter for Gutenberg

    People don’t read; they scan. If you want to build trust instantly, you need to hit your visitors with hard numbers. The Brutal Stats Block is a lightning-fast WordPress number counter that lets you showcase your milestones, client counts, or completed projects with zero bloat.

    Whether you need a single massive milestone or a 4-column grid of achievements, this block instantly grabs attention and builds absolute authority. It inherits your theme’s default colors for a native look, but gives you total freedom to customize every pixel.

    🔥 What makes it brutal?

    • Flexible Grids: Seamlessly display from 1 up to 4 perfectly aligned columns in a single row. Need more? Just stack another block below it.
    • Precision Formatting: Total control over the data. Add a Prefix (like “$”), set your Target Number, and append a Suffix (like “K”, “M”, or “%”).
    • Zero-Bloat SVG Icons: Visually reinforce your stats by adding ultra-lightweight Lucide icons next to your numbers. Plus, use our exclusive “Fill” toggle to make simple shapes pop.
    • Scroll-Triggered Animations: Make your data come alive. When the block enters the viewport, the numbers automatically count up to your target using premium motion curves (Linear, Ease Out, or Bounce). You even control the exact duration, from a snappy 500ms to a dramatic 5000ms buildup.
    0+
    Satisfaction
    0%
    Satisfaction
    0%
    Satisfaction
    €0Ms
    Satisfaction

    💸 FREE vs. PRO

    A static number is fine, but motion is what actually captures the human eye. The Free version gives you the layout, but the PRO version gives you the show.

    • FREE Version: Extremely generous for basic needs. You get unlimited stat blocks (up to 4 columns per row), full access to the Prefix/Target/Suffix fields, and total color customization. However, you get zero icons and zero animations. The numbers are strictly static.
    • PRO Version (Unleash the Beast): The ultimate trust-building layout.
      • Animated Number Counters: Bring your stats to life. Unlock the scroll-triggered counting animations (Linear, Ease Out, Bounce) to make your numbers roll up when users scroll down.
      • Speed Control: Access the custom duration slider (500ms to 5000ms) to make your animation as fast or as dramatic as you want.
      • 1,600+ Zero-Bloat Icons: Access the custom Lucide SVG icon-picker (and the Fill toggle) to visually enhance every single stat.

    🛠️ Quick Help: Up and running in seconds

    Deploying a professional stats section is incredibly simple:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Stats” block onto your canvas.
    2. Select how many columns you want to display (from 1 to 4 per row).
    3. Click on each individual stat to set your Prefix, Target Number, and Suffix.
    4. Free users: Customize your colors to match your brand, save, and you are done.
    5. PRO users: Head to the right sidebar to add SVGs with the icon-picker. Finally, choose your preferred Animation (Ease Out looks incredibly premium) and adjust the Duration slider to perfect the counting speed.

  • Brutal Marquee & Ticker Block: The Ultimate Scrolling Announcement Bar

    Scrolling text bars are back and they are the hottest way to grab your visitors’ attention. Whether you want to announce a flash sale, display breaking news, or showcase a scrolling list of your clients’ logos, the Brutal Marquee Block is the perfect WordPress ticker for the Gutenberg editor.

    Forget about heavy plugins that slow down your site. Our ticker is incredibly lightweight, perfectly inherits your theme’s default colors (so it matches your brand instantly), and seamlessly adapts to any screen size or narrow sidebar without breaking a sweat.

    🔥 What makes it brutal?

    • Unlimited Items: Add as many announcements, text snippets or icons as you want into a single scrolling bar.
    • Total Color Control: Easily customize the background and text colors to make your ticker pop or blend smoothly with your design.
    • Insanely Responsive: Just like the rest of the Brutal Blocks family, it automatically recalculates and perfectly adapts to 4K monitors, tiny mobile screens, or tight widgets.
    BRUTAL BLOCKS IS AWESOME •

    💸 FREE vs. PRO

    The Free version gets the job done if you just need a simple, rolling piece of text. But if you want to create an eye-catching, dynamic element that forces users to look, you need the PRO version.

    • FREE Version: The basics. You can add a text and change the background and text colors. However, you are locked out of the animation controls, speed settings, and icons.
    • PRO Version (Unleash the Beast): The ultimate control panel for your ticker.
      • Zero-Bloat Icons: Inject our lightweight SVG icons directly next to your text items to make them visually striking.
      • Advanced Animations: Unlock premium motion effects like “Ping-Pong” (bouncing back and forth) and “Vertical Scroll”, plus the essential “Pause on Hover” feature so users can easily read your content.
      • Speed & Direction Control: Fine-tune the exact speed (seconds per loop) and choose whether your ticker scrolls to the Left or the Right.
    BRUTAL BLOCKS IS AWESOME •
    BRUTAL BLOCKS IS AWESOME •

    🛠️ Quick Help: Up and running in seconds

    Deploying a custom marquee on your site is ridiculously easy:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Marquee” onto your layout.
    2. Start typing your text into the item fields. Need more? Just click to add unlimited new items.
    3. Use the right sidebar to tweak your background and text colors.
    4. PRO users: Add SVG icons to your text, adjust the scrolling speed, change the direction, and activate advanced animations like Pause on Hover or Vertical Scroll.
    5. Save your page and watch your announcements roll.

  • Brutal Icon Block: The Ultimate Zero-Bloat SVG Icon Library

    Stop destroying your Google PageSpeed scores by loading massive icon fonts (like FontAwesome) just to display a couple of graphics on your page. The Brutal Icon Block is a lightning-fast WordPress SVG icon block that gives you absolute design control natively inside the Gutenberg editor.

    🔥 What makes it brutal?

    • 1,600+ Pure SVGs (Zero Bloat): Powered by our custom Lucide icon-picker. We only save the raw SVG path directly to your database. No external scripts, no heavy font files loaded on the frontend. Just instant, uncompromised speed.
    • Infinite Scaling: Use the custom size slider to make your icons as tiny as a text character or incredibly massive. Because it is pure SVG code, it stays flawlessly crisp at any resolution.
    • The “Fill” Magic Toggle: Lucide icons are only available beautifully outlined. We engineered a custom toggle that automatically fills the inside of the icon (this works perfectly on simple geometric shapes like hearts, stars, or squares).
    • Bring Your Own Code: Have a specific vector graphic? You can bypass the library entirely and paste your Custom SVG code directly into the block.
    • Animate & Style: Wrap your icons in a sleek Circle or Box background, turn them into clickable links (with an “Open in new tab” option), and grab your visitors’ attention with premium CSS animations (Spin, Float, Pulse, and Shake).

    💸 FREE vs. PRO

    The Free version lets you taste the pure speed of SVG, but if you are building a serious landing page, the PRO version is non-negotiable.

    • FREE Version: Extremely limited. You get access to the 1,600+ icon picker, but you are strictly locked to a maximum of 3 icons per page. No animations, no backgrounds, no custom SVGs.
    • PRO Version (Unleash the Beast): The ultimate design upgrade.
      • Unlimited Icons: Build massive feature grids, service sections, and complex layouts with zero restrictions.
      • Advanced Styling: Unlock the sleek Circle and Box background wrappers.
      • Animations: Make your page alive with Spin, Float, Pulse, and Shake effects.
      • Link & Fill: Turn any icon into a fully functional hyperlink and unlock the exclusive Fill toggle.
      • Custom SVG Support: Total freedom to paste your own vector code.

    🛠️ Quick Help: Up and running in seconds

    Adding optimized icons to your layout takes no time at all:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Icon” onto your layout.
    2. Open the icon-picker in the right sidebar to search and choose from over 1,600 native SVGs.
    3. Use the slider to effortlessly scale your icon from tiny to massive.
    4. PRO users: Link your icon, toggle the Fill option, or paste your Custom SVG code.
    5. PRO users: Apply a background shape (Circle or Box) and select an eye-catching animation. Save your page and enjoy the blazing-fast load times.

  • Brutal Bento Grid: The Trendiest Manual Layout for WordPress

    Bento grids are the hottest design trend right now (popularized by Apple and modern SaaS dashboards). But building them from scratch is an absolute nightmare. The Brutal Bento Grid block gives you a highly flexible, visual canvas to craft stunning “bento box” layouts directly inside the Gutenberg editor.

    Unlike our Dynamic version, this manual WordPress bento grid block is built for curation. It is the perfect tool to showcase your social media highlights, external links, portfolio pieces, or favorite resources exactly how you want them.

    🔥 What makes it brutal?

    • Pixel-Perfect Curation: You are in total control. Each cell allows you to manually set a gorgeous background image, add your custom title/content, slap on a sleek category badge, and link it anywhere you want.
    • Customize the Vibe: Keep it sharp with square edges or toggle the rounded corners on to give it that authentic, modern app feel.
    • Flawlessly Responsive: Forget about broken layouts. It looks incredibly premium on desktop monitors and smartly adapts to mobile screens and sidebars by stacking the cards cleanly one on top of the other.
    homepage

    Plugin

    SolGate Pro

    PLUGIN

    SolMint Pro

    💸 FREE vs. PRO

    The Free version is a great taste of the bento trend, but to build a real layout, you’ll need the firepower of the PRO version.

    • FREE Version: Perfect for a quick teaser. It limits you to a maximum of 3 cards per grid.
    • PRO Version (Unleash the Beast): Unlocks the true bento experience. Build stunning asymmetrical layouts with up to 12 cards. Got more to show? Push it beyond 12 cards, and the block automatically scales into a beautifully clean, classic grid layout.

    🛠️ Quick Help: Up and running in seconds

    Crafting a trendy manual bento layout is incredibly satisfying. Here is how:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drag and drop the “Brutal Bento Grid” onto your layout.
    2. Simply add cards by clicking + on the editor (up to 3 in Free, unlimited in PRO -a classic grid will apply with 12+ cards).
    3. Click on each individual cell to manually add your background image, write your title/content, set your badge, and paste your destination link.
    4. Toggle the rounded corners on or off in the block settings to match your style.
    5. Save your page and watch your custom layout shine.

  • Brutal Bento Dynamic Grid: The Auto-Pilot Layout for WordPress(PRO Exclusive)

    Stop wasting time manually updating your homepage grids every time you publish a new article. The Brutal Bento Dynamic Grid automatically fetches your latest posts or pages and injects them into a perfectly calculated, highly responsive “bento box” layout.

    If you are looking for the most beautiful and effortless Gutenberg dynamic grid, this is it. It handles the math, the image sizing, and the responsive breakpoints for you. Powered entirely by modern CSS Grid and PHP server-side rendering, it uses ZERO frontend JavaScript. It loads instantly, protects your Core Web Vitals, and looks incredibly sleek.

    ⚡ The “Set It and Forget It” Powerhouse

    This block is built specifically for power users, agencies, and busy publishers who want a premium aesthetic without the manual labor.

    • Stunning Visuals on Auto-Pilot: Each grid cell automatically grabs the post’s featured image as a gorgeous background, overlaying the exact title and a sleek category badge. It looks premium out of the box.
    • Smart Auto-Mapping (Max 12): Choose from 1 to 12 items, and the grid automatically recalculates its asymmetrical bento layout. Need to show more? Push it up to 24 cards, and it seamlessly transforms into a beautifully clean, classic post grid.
    • Insanely Responsive: It looks spectacular on large desktop monitors. On mobile screens or narrow sidebars, the grid smartly adapts, stacking the blocks cleanly one on top of the other.
    • Category Filtering & Styling: Pinpoint exactly what content appears by filtering standard posts by Category. Plus, you can toggle rounded corners on or off to perfectly match your site’s vibe.

    🛠️ Quick Help: Up and running in 3 clicks

    Setting up this auto-updating WordPress bento grid is ridiculousy easy:

    1. Click on the + icon in your editor and type “Brutal”, then click on Browse All. Alternatively, click the + icon on the top left corner of the editor screen, scroll down to the Brutal Blocks section (or type “brutal” in the search field), and drop the “Bento Dynamic (PRO)” block onto your layout.
    2. Head to the right sidebar settings. Select your source (Posts or Pages) and filter by Category if you want to narrow things down.
    3. Choose how many items to show (up to 12 for the dynamic Bento layout, or up to 24 for a classic grid).
    4. Toggle the rounded corners on or off.
    5. Save your page. The block will automatically pull your latest content, titles, badges, and featured images forever.

×

Wallet not authorized.