Go Back to Parent Doc

Getting Started

Bloqra has no settings screen and no wizard — everything happens inside the block editor. This guide covers the handful of patterns that every Bloqra block shares, so once you’ve learned one block you’ve effectively learned them all.

Inserting a block

  1. Open any post or page in the block editor.
  2. Click the + inserter (top-left, or the inline + between blocks).
  3. Search for the block name — “Accordion”, “Slider”, “Pricing Table” — or type “Bloqra” to browse the full collection.
  4. Click the block to insert it, then start editing directly on the canvas.

Most text in Bloqra blocks is edited inline, right on the canvas — click a heading, quote, label, or button and type. Settings that aren’t text live in the block sidebar (the gear icon) and the block toolbar.

Block styles: one-click looks

Most blocks ship with multiple block styles — for example the Countdown Timer offers Default, Colons, Boxed, Outlined, and Circle; the FAQ offers Default, Boxed, Separated, and Minimal. You’ll find them at the top of the block sidebar under Styles. Pick one, then fine-tune it with the color and spacing controls — styles and custom settings combine freely.

Native controls, everywhere

Bloqra deliberately uses the same panels core WordPress blocks use, so nothing needs relearning:

  • Color — text, background, and block-specific colors (star color, connector line color, overlay, marker color…) all live in the standard Color panel, including your theme’s palette and gradients where supported.
  • Typography — font size, family, weight, line height, letter spacing.
  • Dimensions — padding, margin, and block spacing (the gap between items in lists, galleries, timelines, and carousels uses the native block-gap control).
  • Border & Shadow — radius, width, style, and shadow presets.

Because these are the native supports, your theme’s presets (colors, font sizes, spacing scale) appear automatically, and blocks inherit your site’s look by default.

The List View workflow

Container-style blocks — Tabs, Content Switcher, Slider, Timeline, Steps, FAQ, Icon List, Filterable Gallery, Image Hotspots, Social Share, Video Playlist (Pro) — manage their items through the editor’s List View (the ☰ icon in the top bar). Each item appears as a named row (tabs by their label, timeline entries by their date, FAQ items by their question), so you can select, reorder by dragging, and add items without hunting on the canvas.

Transforms: convert what you already have

Bloqra blocks convert to and from core blocks wherever it makes sense:

  • Core Gallery ↔ Masonry Gallery / Filterable Gallery — turn an existing gallery into a masonry or filterable layout in one click, and back.
  • Core Table ↔ Comparison Table — an existing table becomes a comparison table with check/cross marks and a highlight column.
  • Any blocks → Slider — multi-select any group of blocks and transform them into a Slider; each block becomes a slide.
  • Testimonials → Testimonial Carousel — multi-select Testimonial blocks and wrap them into a carousel; a carousel can also unwrap back to individual testimonials.

Select a block (or several), click the block icon in the toolbar, and the available transforms are listed.

Works without JavaScript — by design

Bloqra’s front-end philosophy: JavaScript enhances, it never gate-keeps. Sliders scroll natively on touch, FAQs open via the native <details> element, tables render complete, and the QR code is baked-in SVG. Buttons that require JavaScript (copy, dismiss, share) are only added to the page when JavaScript is available, so visitors never see dead controls. You don’t need to configure any of this — it’s how the blocks are built.

Performance notes

  • Each block’s CSS and JavaScript load only on pages that use the block.
  • There is no jQuery and no shared framework bundle.
  • Media-heavy blocks (Lottie, Video Popup, feeds in Pro) lazy-load — a video only loads when played, a Lottie animation only when it approaches the viewport.

Next steps

Browse the block reference for the blocks you plan to use:

Shopping Cart
  • Your cart is empty.