The Author Box Block displays comprehensive author information including avatar, name, biography, and social media links. This Pro block automatically pulls author data from WordPress user profiles and presents it in a beautifully designed, customizable format.
Adding the Author Box Block
Navigate to the post or page where you want to display author information. Click the block inserter (+) and search for “Author Box” in the DigiBlocks Theme category. The block will be added with default placeholder content that shows how the author information will appear on the frontend.
Layout Configuration
Display Options
Control which author elements to show using the toggle switches in the Options panel:
Display Avatar – Shows the author’s profile picture from their WordPress user account
Display Name – Shows the author’s display name
Display Bio – Shows the biographical information from the user profile
Display Social Icons – Shows social media links configured in the user profile
Layout Styles
Choose between two layout orientations:
Horizontal Layout – Places the avatar on the left with content flowing to the right
Vertical Layout – Stacks the avatar above the content with center alignment
Social Media Integration
Enabling Social Platforms
In the Social Media section, select which social networks to display by enabling the corresponding toggles:
- Website
- Twitter/X
- YouTube
- GitHub
Social media URLs must be added to individual user profiles under Users > Your Profile in the WordPress admin. The block will automatically display icons for platforms that have URLs configured.
Social Icon Styling
Customize the appearance of social icons through the Social Icons style panel:
Button Size – Adjust the overall size of social media buttons
Icon Size – Control the size of icons within the buttons
Icon Spacing – Set the gap between social media icons
Border Radius – Make icons circular, rounded, or square
Color Customization
Normal State Colors
Configure default colors in the Colors style panel:
Name Color – Set the color for the author’s display name
Bio Color – Choose the color for the biographical text
Background Color – Set a background color for the entire author box
Hover Effects
Use the Hover tab to define color changes when users interact with the author box:
Name Color – Color the name changes to on hover
Background Color – Background color during hover state
Border Color – Border color change on hover
Avatar Styling
Control avatar appearance in the Avatar style panel:
Avatar Size – Adjust the dimensions of the profile picture
Border Width – Add borders around the avatar image
Border Radius – Make the avatar circular or set custom corner rounding
Border Color – Choose the avatar border color
Typography Settings
Name Typography
Configure how the author name appears:
- Font family selection from Google Fonts
- Font size with responsive controls
- Font weight options
- Line height adjustment
- Letter spacing customization
Bio Typography
Style the biographical text independently:
- Separate font family for bio content
- Different font sizes across devices
- Independent typography controls from the name
Advanced Styling
Spacing Controls
Set precise spacing using the Spacing style panel:
Element Spacing – Gap between avatar and content
Padding – Internal spacing around the author box content
Margin – External spacing around the entire author box
Border and Shadow Effects
Add visual depth with border and shadow options:
Border Style – Choose from solid, dotted, dashed, or double borders
Border Width – Set thickness for each border side
Border Radius – Round the corners of the author box
Box Shadow – Add drop shadows with customizable blur, spread, and offset
Animation Effects
Add entrance animations to make the author box more engaging when users scroll to it. Choose from fade, slide, zoom, and bounce animations with preview functionality to test effects before publishing.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust typography sizes, spacing, and layout elements independently for each screen size to ensure optimal display across all devices.
User Profile Requirements
For the Author Box to display complete information, ensure user profiles include:
- Display name in the user account settings
- Biographical information in the profile description field
- Profile picture uploaded to WordPress or Gravatar
- Social media URLs in the appropriate profile fields
The block serves as a template in the editor, with actual content populated from the logged-in user’s profile or the post author’s profile on the frontend.