BlockStrap Documentation

BS > Button

Block Description

The BS > Button Block is a component of the BlockStrap Page Builder Blocks plugin designed for creating and customizing buttons within your WordPress website.

This block provides various options for styling and customizing the button’s appearance, making it an essential tool for website design and user interactions.

Block Features

The BS > Button Block offers the following features:

  • Customizable button text and link type
  • Option to add a Font Awesome icon to the button
  • Styling options for button size, color, and hover effects
  • Typography settings for the button text
  • Advanced settings for margins, padding, border color, and custom CSS classes
  • Block visibility options

Block Options

The BS > Button Block provides various options for customizing the content, style, and advanced settings of the block.

Content

  • Link
    • LINK TYPE (dropdown): Choose the type of link for the button, such as a home, none, custom URL, post, or page.
    • LINK TEXT (input field): Customize the text displayed on the button. Enter a custom text or leave it blank for dynamic text based on the link type.
    • ICON CLASS (input field): Add a Font Awesome icon class to display an icon alongside the button text

Styles

  • Button
    • LINK STYLE (dropdown): Select the button’s appearance using predefined Bootstrap styles such as Button, Icon Box, Badge or Pill.
    • SIZE (dropdown): Choose the button’s size, such as small, mediun, or large.
    • COLOR (dropdown): Select the button’s background color when not hovered.
    • TEXT COLOR (dropdown): Choose the button’s text color when not hovered.
    • COLOR (hover) (dropdown): Set the button’s background color when hovered.
    • TEXT COLOR (hover) (dropdown): Choose the button’s text color when hovered.
  • Typography
    • FONT SIZE (REM) (input field): Set the button text’s font size in REM units.
    • APPEARANCE (dropdown): Choose the button text’s appearance, such as bold, bolder, or normal.
    • LETTER CASE (dropdown): Select the button text’s letter case, such as uppercase, lowercase, or capitalize.

Advanced

  • Wrapper Styles
    • Margins (input fields): Adjust the margin values for the top, right, bottom, and left sides of the button block.
    • Padding (input fields): Modify the padding values for the top, right, bottom, and left sides of the button block.
    • BORDER COLOR (dropdown): Customize the border color of the button block.
    • SHADOW (dropdown): Apply a box-shadow to the button block.
  • Visibility Conditions
    • BLOCK VISIBILITY (modal): Set block visibility conditions based on user roles, logged in or logged out.
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (input field): Apply custom CSS classes to the button block for further customization. Enter one or more class names, separated by spaces, in the input field. These custom classes can be used to target the block with additional CSS rules defined in your theme or custom CSS file.
Feedback