Hello Elementor Child Theme

A child theme for the Hello Elementor WordPress theme, customized for Jochen Schweizer Corporate with performance optimizations.

Description

This child theme extends the Hello Elementor theme with custom functionality and performance enhancements specifically tailored for the Jochen Schweizer Corporate website. It maintains the lightweight and minimalist approach of the parent theme while adding optimizations for improved Core Web Vitals scores.

Features

Performance Optimizations

• Font Display Swap: Text fonts (Google Fonts and Elementor Pro custom fonts) use font-display: swap to prevent invisible text during font loading
• Icon Font Handling: Icon fonts (Font Awesome) intentionally use font-display: block per Elementor's official guidance to prevent visual glitches
• YouTube Optimization: DNS prefetch hints for video backgrounds to reduce loading delays
• Optimized Font Loading: Reduces Cumulative Layout Shift (CLS) and improves First Contentful Paint (FCP)
• Clean Preconnect Strategy: Zero unnecessary preconnects (Google Fonts load locally via Elementor)

Custom Enhancements

• Font loading optimizations for Elementor Google Fonts
• Font display configuration for Elementor Pro custom fonts (MyriadPro)
• Automatic display=swap parameter injection for Google Fonts URLs
• Clean, minimal implementation following Elementor best practices

Requirements

• WordPress: 5.9 or higher
• PHP: 5.6 or higher
• Parent Theme: Hello Elementor
• Recommended: Elementor Page Builder

Installation

1. Ensure the Hello Elementor parent theme is installed and activated in your WordPress installation
2. Upload the hello-theme-child folder to /wp-content/themes/
3. Activate the child theme through the WordPress admin panel:
   • Navigate to Appearance > Themes
   • Click Activate on the Hello Elementor Child theme

File Structure

hello-theme-child/
├── functions.php       # Theme functions and customizations
├── style.css          # Child theme stylesheet
├── screenshot.png     # Theme screenshot
├── readme.txt         # WordPress theme readme
├── README.md          # This file
└── LICENSE.md         # License information

Customization

Adding Custom Styles

Add your custom CSS styles to style.css after line 15.

Adding Custom Functions

Add your custom PHP functions to functions.php. The theme already includes performance optimization hooks that you can extend or modify.

Performance Optimization Hooks

The theme includes several filters and actions for performance optimization:

• elementor/frontend/print_google_fonts/font_display - Google Fonts display mode
• elementor_pro/custom_fonts/font_display - Custom fonts display mode
• elementor_icons_font_display - Icon fonts display mode (commented out per Elementor guidance)
• wp_head (priority 1) - DNS prefetch hints for YouTube domains

Performance Impact

The optimizations in this child theme provide:

• Reduced Font Loading Delay: ~200-500ms improvement for text fonts
• Reduced Video Loading Delay: DNS prefetch provides DNS resolution benefit for YouTube embeds
• Improved CLS: Text is visible immediately using fallback fonts
• Better FCP: Faster initial content rendering
• Clean Resource Loading: Zero unnecessary preconnects (v2.1.7 removed Google Fonts preconnects as fonts load locally)
• Note: PageSpeed Insights may warn about icon fonts not using font-display: swap. This is expected and acceptable per Elementor's official guidance. See docs/FONT-FACTS.md for details.

Development

Version Management

The theme version is defined in functions.php:17:

define( 'HELLO_ELEMENTOR_CHILD_VERSION', '2.1.7' );

Update this constant when making changes to ensure proper cache busting.

Documentation

Theme Documentation

• docs/FONT-FACTS.md: Comprehensive guide explaining the difference between text fonts and icon fonts, and why icon fonts intentionally use font-display: block
• docs/inline-font-icons-test.md: Step-by-step guide to test Elementor's "Inline Font Icons" feature for eliminating PageSpeed warnings
• docs/performance-optimizations.md: Detailed performance optimization strategies and testing procedures
• docs/font-display-optimization.md: Font display optimization architecture and implementation details

External Resources

• Hello Elementor Documentation
• Elementor Developers Documentation

License

This theme is licensed under the GNU General Public License v3.0 or later. See LICENSE.md for details.

Credits

• Based on: Hello Elementor Theme by Elementor Team
• Child Theme Customization: Jochen Schweizer Corporate
• Parent Theme Author: Elementor

Support

For issues related to:

• Parent theme: Visit Hello Elementor support
• Elementor plugin: Visit Elementor support
• Custom modifications: Contact your development team

Changelog

See CHANGELOG.md for detailed version history and technical documentation.

---

Note: This child theme is specifically customized for Jochen Schweizer Corporate. The performance optimizations are designed to improve Core Web Vitals and page load performance for sites using Elementor with Google Fonts and YouTube video backgrounds.