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
You can also use multiple classes by separating class names using a space (as seen in the styling demonstration).
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).
is-style-outline: adds an outlined look to the button this class is attached to
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
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/