Button

Description

The Button blocks is for adding fancy links and buttons to your content.

Toolbar

The Button block has the following toolbar options.

Add to Container

Add the selected blocks inside a new Container Block

Open Dynamic Tags

This action opens the Dynamic Tags settings for the currently selected block. The resulting Dynamic Tag will be inserted where the current cursor position or highlight text is when the panel was first opened. Preview and Edit Toggle If a Block has a Dynamic Tag or Tags inserted then the toolbar will display a Preview … Read more

Link

Add a Link to a Button blocks, or insert a Link within the Text block in the current cursor position or wrapping the selected text.

Block Settings

Link Destination

The following options are available if the HTML Tag is set to <a> only. The options will be removed if a <button> Tag has been selected.

Link Field

Add a static link or dynamic tag to the button.
Once a link has been set the following target and rel attribute options are made available.

Open Link in a New Tab

This will force the link to open a new tab in the browser. The option sets the target="_blank" attribute for the link.

Add rel=”nofollow”

Indicates that the current document’s original author or publisher does not endorse the referenced document. The option sets the rel="nofollow" attribute for the link.

Add rel=”sponsered”

Mark links that are advertisements or paid placements (commonly called paid links). The option sets the rel="sponsored" attribute for the link.

Icon

Inline SVG Icons can be added to Text, Headline and Button blocks. You can choose from a list of predefined Icons or add SVG HTML for custom icons.

Icon Pro

With GenerateBlocks Pro you can create your own custom icon libraries using the Asset Library feature.

Icon settings

The Icon block settings are displayed once an icon has been selected. These settings are shortcuts for settings the relevant block Styles. More options can be found in the Styles tab.

Icon Color

A shortcut option to set SVG Icons color styles.

It should be noted that the Icon Color sets the Typography > Color style. And this requires the SVG HTML to contain a relevant fill or stroke attribute that is set to currentColor

Icon Location

Choose whether to insert the SVG Icon:

Before the text

Button Text

After the text

Button Text

Note: the position of the icon is set within the blocks HTML.

Icon Display – show the icon by itself

Selecting this will remove the text content and just display the icon.

ARIA Label

Add an aria-label attribute to the blocks HTML to provide an accessible name for the button. This is must do requirement when creating icon only buttons.

Styles for Icons

Adding Icons to Text, Button and Headline blocks inserts the SVG directly into the blocks HTML. This is one of the very few instances where the Icon is not directly selectable within the editor. That means any styling has be applied via the Text, Headline or Button block.

Starting with the defaults lets take a look at some of the commonly required styling options.

Default styles

By default the icon will look similar to this:

Button Text

The main style are the alignment and spacing of the icon and the text. This layout is achieved using Flexbox, which can be seen in the Styles > Layout panel and are as follows:

Layout

display = inline flex

Layout > Alignment

Align Items = Center

Layout > Flex Layout

Column Gap = 0.5em

Position the Icon above the text

Button Text

To position the icon above the button you can set:

Layout

display = flex

Layout > Flex Layout

Flex Direction = Column

Row Gap = 0.25rem

Layout > Alignment

Align Items = start (left )

Styling the Icon

For common styling requirements you should use the Block Settings > Icon settings see above.

For greater customization of the icons- chooise the Icon Selector in the styles tab.

Below we will cover some requirements, and you can read here for more information on Icons.

Setting the Icon Size (basic)

By default the Icon will inherit its size from the Text, Headline or Button blocks Typography > Font Size.

To change the size independently you can choose the Icon selector.

Typography

Set the Font Size

Setting the Icon Size (advanced)

In some instances the size may need finer control:

Sizing

Set the Width and Height property values

Setting the Icon Color

Some SVG Icons may have colors for their Fill and their Stroke. If those need setting you can use:

More

set fill and stroke colors