HTML - Related Blocks

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here. 

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

Create the desired design of your website using Otter's global defaults blocks:

📑 Advanced Heading

Advanced Heading gives a spin to the editor's Heading block with much-needed customization options.

• Style
  • General Settings - contains the color options, font size, and text alignment. 
    
  • Typography Settings - enhance the heading using different font families, styles, and transform, as well as adjust the line height or letter spacing. From this area, you can add shadows to the text too.

📝Note: The Advanced Heading block inherits the Typographic styling defined in the Customizer.

• Advanced
  • Highlight Color - pick a suitable color for the highlight mode.
    
  • Spacing - adjust the position of the heading using padding and margin controls.

📝 Note: This block appears in the Global Defaults blocks, which means you can configure a Global Advanced Heading that will be automatically applied any time you add the block.

Designs for the Advanced Heading block

• using the section block to add a gradient background and the advanced heading

🔘 Button Group

Enhance your website's interaction, prompting visitors to take action with a button group.

The customizations of this block are different: for the button group you can configure general settings such as spacing and typography, and for the button itself, you can open multiple customizations by clicking on it.

• Spacing - adjust the padding and spacing and pick an alignment type for the button. Also, decide the behavior of the buttons for the devices.
• Typography - configure the typography settings of the button group, choosing a font family, font size, style, transform and line height.
• Styles - inherit from the predefined theme's styles ( primary / secondary ), as well as global styles ( fill / outline ).
• Color - choose text and background color for the normal and hover mode.

• Border & Box Shadow - boost the button's appearance by adding borders and shadows on both normal and hover mode.

• Icon Settings - choose to make a more descriptive button by adding an icon and adjusting its position.

Use cases for the Button group block

• create your own design of the Download PDF button

📝 Note: Unlock more features using the PRO version of the plugin.