Visual Guide | Master the BLOCK Options Tabcustomize & stylize using Block Settings Editor
The block editor provides intuitive icons to manage, customize, and organize content blocks efficiently. Here's an overview of what each icon represents and its functionality:
What is the Block settings editor
The Block Settings feature plays a vital role in customizing and controlling the functionality, appearance, and behavior of individual content blocks.
Features include
- Heart Icon (Favourites/Anchor): Add buttons or prompts encouraging user actioUsed to mark specific blocks as "Favourites" for quick access in future projects.
- Cog Icon (Block Settings): Opens the settings menu for the selected block. This allows customization of styles, alignment, functionality, or advanced options for fine-tuning the block's appearance and behavior.
- Duplicate Icon: Creates a copy of the selected block. This is useful for replicating layouts or repeating content elements quickly and consistently.
- Eye Icon (Visibility): Include headings, paragraphs, or list-style content.
- Reorder Icon (Drag and Confirm): Enables the user to rearrange blocks by dragging into the desired position. This helps create a well-organized and visually appealing page layout.
- Trash Bin Icon (Delete): Permanently removes the selected block from the page. Often, a confirmation prompt is shown to avoid accidental deletions.
Why It Matters
The Block Settings feature in a content management system plays a vital role in customizing and controlling the functionality, appearance, and behavior of individual content blocks.
- Tailored Design: Block settings allow users to adjust media styles, colors, backgrounds, ensuring each block aligns with the brand’s aesthetic.
- Improved User Experience: Settings like the visibility toggle (e.g., the Eye Icon) ensure that only relevant content is shown to users.
Pro Tip: Save frequently used blocks in the "Favourites" section to speed up future projects.
Heart IconFavourites/Anchor
Enables users to save commonly used blocks as “Favourites” or set anchors for navigation within long pages.
Pro Tip: Use high-contrast colors to mName anchors descriptively to simplify linking and enhance user navigation.ake CTAs stand out.
Cog Icon Block Colours
Provides control over text color, heading color, and overlay background colors to ensure optimal contrast and readability. Background images are also added here.
Pro Tip: Test different overlay colors with your images to maintain legibility, especially for text over photos.
Cog IconBlock Colour Selection
Insert standalone images, videos, Allows users to select or customize background colors for blocks, using either predefined brand colors, popular colors, or a custom color code.r galleries to enhance visual appeal.
Pro Tip: Stick to brand colors for a consistent design that aligns with your organization’s identity.
Cog IconBlock Layout Settings
This layout settings screen allows users to customize the appearance and structure of their content blocks, including image styles, shapes, formats, and block formats.
Pro Tip: Suggested media sizes are on the Block Options Page
Block Layout SettingsImage Style
Choose how the image will look, such as rounded corners, circles, bordered, or no style.
Pro Tip: Use "Rounded Corners" or "Bordered" styles for softer, more professional visuals.
Block Layout Settings
Image Shape
Image Shape
Select the image's aspect ratio, such as rectangle (16:9), vertical (9:16), square, or none for its original dimensions.
Pro Tip: For a consistent design, use a uniform shape across the page, like "Rectangle" for widescreen images.
Block Layout Settings
Image Format
Image Format
Determine how the image fits within its container: "Fill" to cover the area completely or "Fit" to preserve the original proportions.
Pro Tip: Use "Fit" for images where the entire content needs to remain visible without cropping.
Block Layout Settings
Block Format & Width
Block Format & Width
Set the block's layout to either "Column" for a contained section or "Full Width" to span the entire page width.
Pro Tip: Use "Full Width" for banners or visually impactful sections and "Column" for text-heavy content.
Copy IconDuplicate Block
Integrate advanced functionality like forms, event registrations, or job boards.
Pro Tip: After duplicating a block, remember it will appear at the bottom of the screen. Use the drag-and-confirm feature to quickly reposition it where needed for seamless page organization.
Eye IconVisibility
Controls who can view a block (e.g., logged-in users, all visitors) and specifies on which devices it will appear.
Pro Tip: Use device-specific visibility settings to deliver a tailored experience for mobile and desktop users.
Reorder IconDrag and Confirm
Quickly access saved blocks for reuse across multiple pages.
Pro Tip: Include target keywords naturally in the meta description.
Trash Bin IconDelete
Permanently removes the selected block from the page. Often, a confirmation prompt is shown to avoid accidental deletions.
Block settings are critical for creating a customized, user-friendly, and functional website.
They empower users to design pages that not only look great but also perform effectively. By offering flexibility and control, block settings make content management systems adaptable for a variety of projects and skill levels.