Creating your first button

conclusion

Insert Button Basic from the “+” button and apply the preset to create a nice-looking button in just a few clicks. Just set up your text and link and publish to get started.

Step 1: Insert the block

  1. Open the post or page edit screen
  2. Click the + button at the position where you want to add a block.
  3. Enter "Button Basic" in the search field
  4. Click on the displayed Button Basic block to insert it

Point: You can also find it by searching for "zen" or "button".

Step 2: Apply the design preset

  1. Select the inserted block
  2. Click the Preset icon in the toolbar at the top of the block
  3. Select your favorite design from the displayed preset list

Adjustment tips: Use the presets as a base, and feel free to adjust the color and size later. We recommend first choosing a preset that is close to your overall direction.

Step 3: Edit the text

  1. Click directly on the text within the block
  2. Enter the button text you want to display (e.g. "Contact us", "Start for free")

Point: Text can be edited directly in the editor. Font size and weight can be adjusted from the "Text Settings" panel in the sidebar.

Step 4: Set up the link

  1. With the block selected, click the link icon on the toolbar
  2. Enter the link destination URL
  3. Enable "Open in new tab" if necessary
  4. Confirm with Enter key

Note: You can switch between a (link)/button (button element)/div (block element) by selecting the tag on the toolbar. There is no problem with normal link buttons as they are with the a tag.

Step 5: Adjust colors

  1. Open each settings panel in the sidebar
  2. To change the background color Open the Background Settings panel
  3. To change the text color Open the Text Settings panel
  4. Specify color using color picker or color code

Adjustment Tip: Ensuring a good contrast ratio between the button's background color and text color improves visibility and accessibility.

Step 6: Check with preview

  1. Click the Preview button at the top of the editor
  2. Select "Preview in new tab"
  3. Check button visibility on the front end
  4. Also check the changes when hovering and the transition to the link destination.

Point: The display on the editor and the display on the front end basically match, but the CSS theme may affect it. Please perform the final confirmation on the front end.

Step 7: Publish your page

  1. Once you're happy with the button's appearance and link, click Publish or Update at the top of the editor.
  2. Access the front end page for final confirmation

If you want to make more detailed settings

Button Basic has 18 types of setting panels. For detailed setting method, please refer to buttonBasic Setting Guide.

Main settings panel:

panelWhat you can do
text settingsAdjust font size, thickness, line spacing, and character spacing
Layout settingsAdjusting width, height, and margins (margins and padding)
background settingsColor/gradation/image/pattern settings
Border settingsAdjust line width, style, color, and rounded corners
icon settingsAdding icons, setting size and color
Animation settingsAnimation when hovering or displaying (Pro function)

next step

If you are interested in the Pro version, you can check the activation method at [Pro version activation] (../pro-activation/).