Menu Close

Blocksify Docs

Editor tour

The Blocksify editor tour maps the inserter category, toolbar, inspector, responsive slots, settings sidebar, and Design Library. Use it after you install Blocksify.

Before you start: Open a page or post in the WordPress editor with Blocksify active.

Open the Blocksify category

  1. Go to Pages → Add New. A blank page opens in the WordPress editor.
  2. Click the + block inserter.
  3. Open the Blocksify category. The Blocksify block tiles appear.
The Blocksify category in the block inserter shows the available Blocksify block tiles for a new page.

The Blocksify category lists every Blocksify block, including separate tiles for Text and Heading. Both tiles open the same text-editing experience.

Use the selected block toolbar

The toolbar above a selected block handles immediate actions. The Text block includes a text-align control in this toolbar.

  1. Select a Text block. The block toolbar appears above the selected block.
  2. Use the alignment control in the toolbar. The selected text updates in the canvas.

Read the inspector panel list

Blocksify uses a flat, single-column inspector list instead of WordPress’s native inspector tabs. The selected block’s settings appear in one list, so you can scan Layout, Colors, Spacing, Interactions, and Advanced from the same sidebar.

The Blocksify inspector shows a flat list of block panels for scanning layout, color, spacing, interaction, and advanced settings.
PanelUse it for
LayoutColumns, presets, gaps, and content width.
ColorsText, link, and background color choices.
BackgroundColor, image, gradient, video, overlay, shape, and an Effect row offering On scroll → Parallax, On scroll → Zoom, and On hover → Zoom.
TypographyText size and typography controls.
SizingBlock size controls.
SpacingPadding, margin, and gap values.
PositioningPosition and z-index choices.
Border, Radius & ShadowRounded corners and shadow treatment.
VisibilityPer-device visibility choices.
InteractionsInteraction controls for the selected block.
AdvancedWordPress’s own Advanced panel for HTML anchors and additional CSS classes.

Switch responsive and hover slots

The Blocksify device row lives inside the block inspector. It is separate from WordPress’s native top-bar preview switcher.

  1. Select a Section, Container, or another Blocksify block.
  2. Click Desktop, Tablet, Mobile, or switch to Hover State with the fourth icon button in the Blocksify device row. The inspector shows values for that view or state.
  3. Adjust only the values that need an override.
  4. Look for override dots on the device buttons. A dot shows that the view or state has a custom value.
The Blocksify device row shows Desktop, Tablet, Mobile, and Hover State controls with dots for custom overrides.

Open Global Settings

  1. Open any post in the WordPress editor.
  2. Click the ⋮ menu in the top-right toolbar.
  3. Under Plugins, click Blocksify Settings. A sidebar slides in.
  4. Click the pin icon if you want to keep the sidebar button in the toolbar across sessions.
The Blocksify Settings sidebar opens from the WordPress editor menu and lists global design token panels.

The sidebar manages design tokens in five panels: Global Colors, Global Gradients, Global Shadows, Global Spacing Presets, and Global Font Size Presets.

Note: Spacing and font-size preset edits update the editor preview. Check the published page before relying on a changed preset outside the editor.

Open the Design Library

  1. Click Design Library in the document toolbar. A full-screen modal opens.
  2. Use the Patterns tab to browse pattern cards. Kits do not insert layouts.
  3. Click a pattern card when you want to insert it into the current page.
The Design Library launcher opens a modal where the Patterns tab displays searchable pattern cards for insertion.

Was this helpful?

0

Updated