The Page Title Block displays the current page or post title with extensive customization options. This Pro block automatically pulls the title from WordPress and presents it in a beautifully styled, responsive format that adapts to your design needs.
Adding the Page Title Block
Navigate to the post or page where you want to display the title. Click the block inserter (+) and search for “Page Title” in the DigiBlocks Theme category. The block will be added with placeholder text showing “Page Title” in the editor, while the actual page or post title will appear on the frontend.
Content Configuration
Heading Tag Selection
Choose the appropriate HTML tag for your title in the General section:
Available Tags:
- H1 through H6 – Standard heading tags for proper SEO hierarchy
- p – Paragraph tag for non-heading titles
- div – Generic container for custom styling
- span – Inline element for specialized layouts
Select the tag that best fits your content structure and SEO requirements. H1 is typically used for main page titles, while H2-H6 provide hierarchical organization.
Text Alignment
Control title positioning using the responsive alignment options:
Desktop Alignment – Set alignment for screens 992px and wider
Tablet Alignment – Configure alignment for screens 768px to 991px
Mobile Alignment – Adjust alignment for screens 767px and below
Choose from left, center, or right alignment for each device size to ensure optimal display across all screen sizes.
Visual Styling
Color Customization
Configure title colors in the Colors style panel:
Color – Set the default text color for the page title
Hover Color – Define the color when users hover over the title
Colors support full alpha transparency, allowing for subtle opacity effects and layered design elements.
Typography Controls
Customize text appearance with comprehensive typography options:
Font Family – Choose from Google Fonts or system fonts
Font Size – Set responsive sizes for desktop, tablet, and mobile
Font Weight – Select from 100 (thin) to 900 (black)
Font Style – Choose normal or italic text styling
Text Transform – Apply uppercase, lowercase, or capitalize transformations
Text Decoration – Add underline, overline, or strikethrough effects
Line Height – Control spacing between lines of text
Letter Spacing – Adjust character spacing for improved readability
All typography settings include responsive controls for precise customization across different screen sizes.
Spacing Controls
Fine-tune spacing using the Spacing style panel:
Padding – Set internal spacing around the title text
Margin – Control external spacing around the entire block
Both padding and margin support individual control for top, right, bottom, and left sides, with responsive settings for each device size.
Advanced Features
Animation Effects
Add entrance animations to make the page title more engaging:
Animation Options:
- None – No animation effect
- Fade effects – Subtle appearance animations
- Slide effects – Directional entrance animations
- Zoom effects – Scale-based animations
- Bounce effects – Playful entrance animations
Use the Preview Animation button to test effects before publishing. Animations trigger when users scroll the title into view.
Visibility Controls
Control when the page title appears using device-specific visibility settings:
Hide on Desktop – Hide the title on screens 992px and wider
Hide on Tablet – Hide the title on screens 768px to 991px
Hide on Mobile – Hide the title on screens 767px and below
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
HTML Anchor
Add a custom HTML anchor to create direct links to the page title:
Enter a unique identifier without spaces to generate a web address fragment (e.g., “main-title” creates #main-title). This allows direct linking to specific sections of your page and improves navigation for users and search engines.
Additional CSS Classes
Add custom CSS classes for advanced styling and integration with theme or plugin styles. Separate multiple classes with spaces to apply multiple style sets simultaneously.
Responsive Design
The Page Title Block includes comprehensive responsive controls:
Typography Responsiveness – Adjust font sizes, line heights, and letter spacing independently for each device size
Alignment Responsiveness – Set different text alignments for desktop, tablet, and mobile
Spacing Responsiveness – Configure unique padding and margin values for each screen size
SEO Considerations
Proper heading tag selection improves search engine optimization:
H1 Tags – Use for main page titles and primary content headings
H2-H6 Tags – Create hierarchical content structure for better SEO
Semantic HTML – Choose tags that accurately represent content importance
The Page Title Block automatically uses the actual page or post title, ensuring consistency between your content and what search engines index.
Frontend Display
While the editor shows placeholder text, the frontend automatically displays:
Page Titles – For static pages, the page title from WordPress
Post Titles – For blog posts, the post title from WordPress
Custom Post Types – Titles from custom post type entries
Archive Pages – Appropriate titles for category, tag, and custom taxonomy pages
The block maintains all styling and customization while displaying the correct contextual title for each page type.