Buttons

You can define custom themes for buttons and create Global Buttons that are available throughout the entire Website Builder.

Button Themes

Creating a button theme involves defining the HTML template for a button. The template must start with <button> and end with </button>.
A button theme can include the following placeholders: text, description, and icon.

Example:

<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
  <div class="grid grid-cols-2">
    <div class="col-span-1">
      <p class="text-lg font-semibold">{{text}}</p>
      <p class="mt-1 text-sm">{{description}}</p>
    </div>
    <div class="col-span-1 flex items-center justify-end">
      {{icon}}
    </div> 
  </div> 
</button>

You can use a button theme directly in a block’s HTML template (see Using Button's Theme), or in the Edit Button Data panel if the button inside the block doesn’t already have a theme or template. The theme is also the only way to define a template for a Global Button.

Global Buttons

To add a Global Button, click “Add New” under the Global Buttons menu and give the button a name. Within the Button Data, you can define the theme, text, and icon (if the selected theme includes one), as well as a description, which can either be displayed as text (if supported by the theme) or used for SEO purposes.