Menu Close

Blocksify Docs

Create your first page with Blocksify

Create your first Blocksify page by combining layout blocks, text, buttons, and responsive checks in the WordPress editor. The walkthrough uses Section and Container blocks before publishing.

What you’ll need

  • A WordPress page you can edit.
  • The Blocksify plugin active on the site.
  • A short headline, body text, button label, and button link.

Create a new page and open the inserter

  1. Go to Pages → Add New. A blank page opens in the WordPress editor.
  2. Type a page title in the Add title field.
  3. Click the + block inserter.
  4. Open the Blocksify block category. The Blocksify block tiles appear in the inserter.
The WordPress block inserter is open with the Blocksify block category visible.

Insert a Section

Use a Section as the main layout area for the top part of the page. When you insert it, the inspector opens the Layout panel and the canvas shows column layout presets for the chosen column count.

  1. Click the Section block in the inserter. The placeholder reads “Divide into columns. Select a layout:”.
  2. Choose a column preset. A fresh Section starts with 2 columns.
  3. Use the Columns control if you need a count from 1 to 6.
  4. Adjust Column Gap and Row Gap if the columns feel too tight or too far apart.
The Section block placeholder shows column preset choices in the editor canvas.

Tip: Start with the closest preset, then fine-tune spacing after the content is in place.

Add content inside the layout

Each Section column is built with a Container. The Container gives the content in that column its own layout controls, so you can stack text, buttons, and other blocks without rebuilding the Section.

  1. Select the first Container inside the Section.
  2. Add a heading or short title. The Text and Heading inserter tiles are variations of the same Blocksify Text block.
  3. Add a paragraph below the heading.
  4. Add a Button block under the text, then set its label and link.
  5. Use the second Container for supporting copy, another call to action, or a simple content group.
The editor canvas shows a Blocksify Section with two populated columns.

Adjust spacing and style

Blocksify blocks use a flat inspector panel list. For a first page, start with spacing before changing visual style.

PanelUse it for
LayoutColumns, presets, gaps, and content width.
SpacingTop and bottom padding, plus margin when needed.
BackgroundSection color, image, gradient, overlay, or shape.
ColorsText, link, and background color choices.
TypographyText size and typography choices.
Border, Radius & ShadowSofter Container or button treatments.
  1. Select the Section.
  2. Open Spacing and add enough top and bottom padding for the area to breathe.
  3. Open Background if the whole section needs a visual treatment.
  4. Select the Text or Button block before changing text-specific settings.

Preview responsive views

Use Blocksify’s own device row in the block inspector to switch between Desktop, Tablet, Mobile, and hover editing. The fourth icon button in that row switches to Hover State.

  1. Select the Section.
  2. Click Desktop, Tablet, or Mobile in the Blocksify device row.
  3. Adjust only the values that need a smaller-screen override.
  4. Look for override dots on the device buttons. The dots show which views have custom values.
The Blocksify inspector device row shows Desktop, Tablet, Mobile, and Hover State controls.
  1. Click Preview to review the full page.
  2. Click Publish when the layout, spacing, and links are ready. The page becomes available on the site.
The WordPress editor shows the publish controls after a Blocksify page has been prepared.

Was this helpful?

0

Updated