Every block on the homepage for the Seller 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.
In the top heading text, you need to add the class name hero-title to get the proper display on the homepage.
For the homepage button, we use Gutenberg buttons. But you need to add the class name hero-button for it to display in a large size.
Note: whenever a hero button and a full width image are next to each other, the button will automatically overlap the image on the display side.
Hero Text & Button
The content blocks below are simply wrapped in a column block with 2 columns set. But you need to add the class hero-text-button to the column block in order for the spacing to match the demo site.
Whenever you insert a font icon inside a column block, the theme will automatically assume you want to display the icon in a large size like so:
To choose your own icons, simply browse the icons here: https://ionicons.com/v2/
Click on an icon, and it will reveal the icon class name. Enter the following HTML into an HTML Block:
In this heading block, it is selected as an H3 heading for proper HTML structure. But it has a class name of h4 indicating we want it to look like an H4 heading. Also, it has a class name alignwide because we want it to break out of the default content width space.
In the paragraph block, Seller Pro theme adds a font size labeled Huge that looks like a heading font, but is actually paragraph text. Also, it has a class name alignwide because we want it to break out of the default content width space.