Important Block Information

Every block on the homepage for the Hallie Pro theme uses default WordPress Gutenberg blocks, with the exception of Atomic Blocks Blog Posts. We worked hard to support almost every feature and option that Gutenberg blocks currently allows.

However, to achieve some custom styling, we did also enter some custom class names over the block container, which can easily be configured.

While editing a page, go to the advanced tab under block, and enter a class name into the Additional CSS Class input.

We will be adding class predetermined class names to modify the following:

  • Button Attributes
  • Ionicons

You can also use multiple classes by separating class names using a space (as seen in the styling demonstration).

Button Attributes

Size:
You are able to change the size of your buttons by using small, large, or Text (or use nothing if you want the default size).

Button Style:

is-style-outline: adds an outlined look to the button this class is attached to

is-style-boxed:

Ionicons

Icons are useful for using scalable images for links, instead of text. Our theme implements Ion-Icons, built by the Ionic Team. View their documentation at https://ionicons.com/ for reference of different icons.

These icons will default to their large size, unless specified otherwise.

An example of an icon you can use, is as follows:
for example, if you want a shopping cart icon, use

<i class="ion-checkmark"></i>

For:

You can insert these into any text area in custom HTML areas:

Which will render out as a link with the corresponding class icon:

To choose your own icons, simply browse the icons here: https://ionicons.com/v2/

This image has an empty alt attribute; its file name is Screen-Shot-2019-02-16-at-4.50.48-PM-1024x409.jpg

Was this article helpful to you? Yes No

How can we help?