Installation and initial configuration

conclusion

After installing and activating WordPress.org, you can immediately start using it in the block editor. Customizing breakpoints is optional, but if you adjust them to match your site’s design, you can achieve more accurate responsive display.

Installation method

Install from the WordPress management screen (recommended)

  1. Open Plugins > Add new on the WordPress management screen
  2. Enter “ZenBlocks” in the search field
  3. When ZenBlocks appears, click Install now
  4. After installation is complete, click Activate

Points: Since it is distributed from the official WordPress.org directory, it is a safe plugin that has passed a security review.

Install from ZIP file

  1. Download the ZIP file from ZenBlocks page of WordPress.org
  2. On the WordPress management screen, open Plugins > Add new > Upload plugin
  3. Select and upload the downloaded ZIP file
  4. Click Enable Plugin

Confirm activation

Once enabled, the ZenBlocks Elements category will appear in the block editor's insert panel.

  1. Open the edit screen for any post or page
  2. Click the + button on the top left to open the block insertion panel
  3. Search for "ZenBlocks" or search for ZenBlocks Elements from the category list
  4. Button Basic If the block is displayed, the installation is successful.

Settings screen overview

You can access the plugin's general settings from Settings > ZenBlocks.

ItemDescription
Breakpoint settingsChange screen width threshold per device
CSS cache clearManually clear frontend style cache
License managementEnter the license key and check the status of Pro version

Customizing breakpoints

ZenBlocks allows you to customize four breakpoints for responsive design.

Default value

deviceDisplay namescreen width
PCdesktop1141px or more
MDmiddle screen841px ~ 1140px
TBtablet541px ~ 840px
SPsmartphone540px or less

How to change

  1. Open Settings > ZenBlocks
  2. Change values in the breakpoint settings section
  3. Click Save

Note: Changing the breakpoint will regenerate responsive CSS for all ZenBlocks blocks. If the style breaks on an existing page, please clear the CSS cache.

next step

Once the settings are complete, try using the block using [Create your first button] (../first-button/).