nuxpresso

# Block Editor Customizer

The Customizer is the panel that gives you access to the design settings of the current element. It is a powerful panel that converts your settings to TailwindCSS classes.

It reflects almost all the TailwindCSS utility classes with some extended values

To open the Customizer clicking on the brush located:

  • selected block/element floating bar
  • editor toolbar

or press Alt + z

# Settings

The Customizer is designed to be a tool in order to control the design of a block and all elements. In other words is the layout control panel of your blocks/elements where you can control:

  • containers settings
  • elements position
  • alignment and justify
  • typography
  • color and background
  • padding, spacing and margins
  • border
  • border radius and shadow
  • transform (skew, rotate)
  • CSS animations

Other settings are:

  • HTML Semantic (for containers)
  • Media assignment (background and images)
  • Link / Anchor assignment
  • Input field attributes (for input fields)
  • Popup/Modal for popup elements

# Grid

  • Grip gap

# Flex

  • Grid Column Span
  • Direction (flex direction)
  • Wrap (flex wrap)
  • Grow (flex grow)
  • Shrink (flex shrink)
  • Flex order

# Box Align

  • Align Items
  • Align Content
  • Align Self

# Box Justify

  • Justify Content
  • Justify Items
  • Justify Self

# Position

  • Position (static,fixed,absolute,relative,sticky,modal)
  • Top, Left, Bottom, Right
  • Translate: you can translate any element on both axis with negative/positive values
  • Z Index
  • Object Fit

# Dimension

  • Width
  • Height

# Text

  • Color / Over Color
  • Size
  • Align
  • Weight
  • Decoration (5 icons for italic, underline, lowercase, uppercase, capitalize)
  • Letter Spacing
  • Line Height
  • Font
  • Opacity

# Background

  • Color / Over Color
  • Gradient color (from, via, to)
  • Gradient direction
  • Size (for background images)
  • Position
  • Repeat
  • Attachment
  • Clip
  • Opacity

# Padding

  • All sides
  • Top
  • Bottom
  • Left
  • Right

# Margin

  • All sides
  • Top
  • Bottom
  • Left
  • Right

Supports negative values

# Spacing

  • All sides
  • Top
  • Bottom
  • Left
  • Right

# Border

  • All sides
  • Top
  • Bottom
  • Left
  • Right
  • Color / Over color
  • Border type
  • Opacity

# Rounded / Shadow

  • Rounded (border-radius)
  • Shadow

# CSS Animations

  • Animation (ping, bounce, spin, pulse)

# Transform

  • SkewX
  • SkewY
  • Rotate
  • Clip Path (experimental with predefined clip path classes)

# HTML Semantic

  • Semantic (most common semantic tags)

This option is available only for containers

# Media

  • Link any media to the current element

This option is available for :

  • containers as background image selection
  • image element
  • create a link on any element
    • external link / anchor link (#link)
    • article link
  • add an anchor to any element

← Extend Customizer Controls →