With “Icon Box” element, you can add an icon box everywhere on your site. Here’s how to do it.

 

General settingsartboard-1-copy-35

General settings

  • Style: 3 styles (Note: each icon box style goes with its specific settings)
    • Character
    • Icon
    • Images
  • Box alignment: 3 alignment styles
    • Left
    • Center
    • Right
  • Content: enter content text
  • Text color
  • Enable “Read More”
    • “Read More” link

Heading settings

  • Text transform: 3 text transformation styles
  • Color
  • Font weight (px): enter only the font weight number
  • Font family
  • Heading: enter heading text
  • Text transform: 3 text transformation styles
    • None: no text transformation
    • Uppercase
    • Capitalize
  • Letter spacing (px): enter only letter spacing number
  • Font size (px): enter only font size number
  • Margin bottom (px): enter only bottom margin number

Separator

    • Enable separator: check to use separator and open settings for separator
    • Separator color

Background settings

  • Border color
  • Border style: 2 kinds of style
    • Theme defaults:no border style
    • Use custom border styles: 12 styles
      • Solid
      • Dotted
      • Dashed
      • None
      • Hidden
      • Double
      • Groove
      • Ridge
      • Inset
      • Outset
      • Initial
      • Inherit
    • Background image settings
      • Background
      • Upload image
      • Background image styles: 5 styles
        • Theme defaults: use default global settings for background. You need to go to Customizer to change settings
        • Cover
        • Contain
        • No repeat
        • Repeat
  • Box Control: change how the control box looks
    • Simplify controls: simplify box control interface
  • Hover settings
  • Border hover color
  • Text hover color
  • Background hover color

 

edit6

 

 

Settings for each icon box style

 

Character

  • Character
  • Character color
  • Font family: 2 font family options
    • Use default theme font family: use global font family settings. You need to go to Typography on Live Customizer to make font family changes
    • Use custom font family: pick up a font from the dropdown list
  • Font weight (px): enter only the font weight number
  • Font size (px): enter only the font size number
  • Margin bottom (px): enter only the bottom margin number
  • Character width (px): enter only the character width number. This option is only available if you choose box alignment as “Left”

Icon

  • Icon library
  • Icon
  • Icon color
  • Icon hover color
  • Icon size (px): enter only the icon size number
  • Margin bottom (px): enter only the bottom margin number
  • Enable “Box Wrap Icon”: when enabled, you can see the following settings
  • Icon box position: 3 positions
    • Top
    • Left
    • Right
  • Icon box width: 2 width types
    • Predefined width
      • Large (80x80px)
      • Medium (64x64px)
      • Small (48x48px)
    • Custom size (px): enter only custom size number
  • Icon box style: 2 styles
    • Circle
    • Square
  • Border color
  • Background color
  • Border hover
  • Background hover
  • Link to: enter link a hyperlink

Image

  • Upload image
  • Border radius (px): enter only border radius number
  • Margin bottom (px): enter only bottom margin number
  • Image opacity: from 0% to 100%