The Post Content Block displays the main content of your posts or pages with extensive styling and layout customization options. This Pro block is perfect for creating custom single post templates that you can build with our DigiFusion theme and its Site Builder feature from DigiFusion Pro.
Adding the Post Content Block
Navigate to the post or page where you want to display the content. Click the block inserter (+) and search for “Post Content” in the DigiBlocks Theme category. The block will display sample content in the editor to show how your styling options will affect the appearance, while the actual post content will be shown on the frontend.
Content Options
Drop Cap Styling
Enable an elegant drop cap effect for the first letter of your content:
Enable Drop Cap – Activates the drop cap feature for the first paragraph’s initial letter
When enabled, additional controls become available:
Drop Cap Color – Choose the color for the enlarged first letter
Drop Cap Size – Adjust the size multiplier from 1x to 10x the normal text size
Drop Cap Spacing – Control the spacing between the drop cap and following text (0-50px)
Content Layout
Content Columns – Split your content into multiple columns for magazine-style layouts:
- Desktop: 1-3 columns
- Tablet: 1-2 columns
- Mobile: 1 column only
Text Alignment – Control content alignment with options for left, center, right, or justified text. All alignment options are responsive and can be set differently for each device size.
Content Spacing
Fine-tune the spacing between different content elements:
Paragraph Spacing – Set the bottom margin for paragraphs (0-60px)
Heading Spacing – Control spacing below headings (0-60px)
List Spacing – Adjust spacing below ordered and unordered lists (0-60px)
Style Customization
Color Settings
Text Color – Set the default color for all content text with full alpha transparency support
Typography Controls
Comprehensive typography settings affect all content within the block:
Font Family – Choose from Google Fonts or system fonts
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Spacing Controls
Padding – Internal spacing around the content block with individual controls for top, right, bottom, and left sides
Margin – External spacing around the entire block with responsive controls for each direction
Advanced Features
Animation Effects
Add entrance animations to make your content more engaging:
Choose from various animation types including fade, slide, zoom, and bounce effects. Use the “Preview Animation” button to test animations in the editor before publishing.
Visibility Controls
Control when the content appears across different devices:
Hide on Desktop – Hide content on screens 992px and wider
Hide on Tablet – Hide content on screens between 768px and 991px
Hide on Mobile – Hide content on screens 767px and smaller
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
HTML Anchor and CSS Classes
HTML Anchor – Create a unique identifier for direct linking to this content section
Additional CSS Classes – Add custom CSS classes for advanced styling with external stylesheets
Responsive Design
All styling options include responsive controls, allowing you to customize appearance independently for desktop, tablet, and mobile devices. The content automatically adapts to different screen sizes while maintaining your design preferences.
Content Preview
In the editor, the block displays sample content including headings, paragraphs, and lists to demonstrate how your styling choices will affect the actual content. This preview updates in real-time as you adjust settings, giving you immediate visual feedback.
The actual post or page content will replace this preview when viewed on the frontend, inheriting all the styling and layout options you’ve configured.