Links

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

Link Themes

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

Example:

<a class="cursor-pointer 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> 
</a>

You can use a link theme directly in a block’s HTML template (see Using Link's Theme), or in the Edit link Data panel if the link 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 Link.

Global Links

To add a Global link, click “Add New” under the Global Links menu and give the link a name. Within the Link 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.