DigiFlash includes comprehensive spacing and layout controls through the Site Editor that allow you to manage padding, margins, gaps, and content width across your entire website.
Accessing Spacing Settings
Navigate to Appearance → Editor and click the Styles icon in the top-right corner. In the Styles panel, click on Layout to access spacing and layout customization options.
Understanding the Spacing System
DigiFlash uses a predefined spacing scale with consistent values:
20 – Extra small spacing for tight layouts
30 – Small spacing for compact designs
40 – Medium spacing for standard content
50 – Large spacing for breathing room
60 – Extra large spacing for prominent sections
70 – Huge spacing for maximum visual separation
These values represent pixels and ensure consistent spacing throughout your website. Using the spacing scale maintains visual harmony across all pages and templates.
Adjusting Global Padding
In the Layout panel, you’ll find Padding controls that set the internal spacing within containers and blocks. Padding adds space between the content and the edges of its container.
Click on Padding to expand the padding controls. You’ll see options for:
All sides – Applies equal padding to top, right, bottom, and left
Individual sides – Sets different padding values for each side independently
To set equal padding on all sides, use the main padding input field. Enter a value from the spacing scale or type a custom value with units (px, rem, em).
For individual side control, click the Individual sides toggle. Separate input fields appear for Top, Right, Bottom, and Left padding. This allows precise control over spacing in specific directions.
Configuring Block Spacing
The Block Spacing setting controls the vertical gap between consecutive blocks in your content. This setting affects the space between paragraphs, headings, images, and other blocks when they’re stacked vertically.
In the Layout panel, locate the Block Spacing option. The default value creates comfortable reading space between content blocks. Increase the value for more separated, spacious layouts, or decrease it for tighter, more compact designs.
Block spacing applies globally but can be overridden at the template or block level when specific sections need different spacing.
Adjusting Content Width
The Content Width setting determines the maximum width of your content area. This ensures text lines don’t become too long on large screens, maintaining optimal readability.
In the Layout panel, find the Content Width input field. Enter a value in pixels or other units. Common content widths range from 640px for narrow, focused content to 1200px for wider layouts.
DigiFlash also includes a Wide Width setting for content that needs more space than the standard content width but shouldn’t extend to full screen width. Wide width is typically 200-400px larger than content width.
Configuring Block-Level Spacing
When editing individual blocks, select any block and open its settings panel. The Dimensions or Layout section within block settings provides spacing controls specific to that block.
Block-level spacing includes:
Padding – Internal spacing within the block
Margin – External spacing around the block
Gap – Spacing between child elements (for container blocks)
These controls override global spacing settings, allowing you to create unique spacing for specific design elements without affecting the rest of your website.
Resetting Spacing Values
To restore default spacing settings, click the three-dot menu next to any spacing control and select Reset. This removes custom values and returns to the theme’s original spacing configuration.