WordPress con Divi: guida completa per siti web professionali

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

// wp-config.php - Configurazioni enterprise per Divi
<?php
/**
 * WordPress Configuration - Optimized for Divi
 * Performance & Security Enhanced Setup
 */

// ** Database settings ** //
define( 'DB_NAME', 'your_database_name' );
define( 'DB_USER', 'your_username' );
define( 'DB_PASSWORD', 'your_password' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );
define( 'DB_COLLATE', '' );

// ** Security enhancements ** //
define( 'AUTH_KEY',         'your-unique-phrase' );
define( 'SECURE_AUTH_KEY',  'your-unique-phrase' );
define( 'LOGGED_IN_KEY',    'your-unique-phrase' );
define( 'NONCE_KEY',        'your-unique-phrase' );
define( 'AUTH_SALT',        'your-unique-phrase' );
define( 'SECURE_AUTH_SALT', 'your-unique-phrase' );
define( 'LOGGED_IN_SALT',   'your-unique-phrase' );
define( 'NONCE_SALT',       'your-unique-phrase' );

// ** Performance optimizations for Divi ** //
define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '768M' );
define( 'COMPRESS_CSS', true );
define( 'COMPRESS_SCRIPTS', true );
define( 'CONCATENATE_SCRIPTS', true );
define( 'ENFORCE_GZIP', true );

// ** Divi-specific optimizations ** //
define( 'WP_POST_REVISIONS', 5 );
define( 'AUTOSAVE_INTERVAL', 300 );
define( 'EMPTY_TRASH_DAYS', 7 );

// ** Security hardening ** //
define( 'DISALLOW_FILE_EDIT', true );
define( 'DISALLOW_FILE_MODS', false ); // Allow for Divi updates
define( 'FORCE_SSL_ADMIN', true );
define( 'WP_AUTO_UPDATE_CORE', 'minor' );

// ** Debug (disable in production) ** //
define( 'WP_DEBUG', false );
define( 'WP_DEBUG_LOG', false );
define( 'WP_DEBUG_DISPLAY', false );

// ** Cookie settings ** //
define( 'COOKIE_DOMAIN', '.yourdomain.com' );

$table_prefix = 'wp_';

/* That's all, stop editing! Happy publishing. */

if ( ! defined( 'ABSPATH' ) ) {
    define( 'ABSPATH', __DIR__ . '/' );
}

require_once ABSPATH . 'wp-settings.php';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

# .htaccess - Enterprise configuration for Divi WordPress sites

# Security Headers
<IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
    Header always set X-Content-Type-Options "nosniff"
    Header always set X-XSS-Protection "1; mode=block"
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()"
</IfModule>

# Gzip Compression for Divi Assets
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/opentype
</IfModule>

# Browser Caching for Divi Assets
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"
</IfModule>

# Protect sensitive files
<Files wp-config.php>
    order allow,deny
    deny from all
</Files>

<Files .htaccess>
    order allow,deny
    deny from all
</Files>

# Prevent directory browsing
Options -Indexes

# Block access to sensitive directories
RedirectMatch 403 ^.*/wp-content/uploads/.*\.php.*$
RedirectMatch 403 ^.*/wp-includes/.*$

# WordPress Security Rules
RewriteEngine On
RewriteBase /

# Block suspicious request methods
RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK) [NC]
RewriteRule ^(.*)$ - [F,L]

# Block suspicious query strings
RewriteCond %{QUERY_STRING} \.\.\/ [NC,OR]
RewriteCond %{QUERY_STRING} boot\.ini [NC,OR]
RewriteCond %{QUERY_STRING} tag\= [NC,OR]
RewriteCond %{QUERY_STRING} ftp\: [NC,OR]
RewriteCond %{QUERY_STRING} http\: [NC,OR]
RewriteCond %{QUERY_STRING} https\: [NC,OR]
RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]
RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [NC,OR]
RewriteCond %{QUERY_STRING} base64_encode.*\(.*\) [NC,OR]
RewriteCond %{QUERY_STRING} ^.*(\[|\]|\(|\)|<|>|ê|"|;|\?|\*|=$).* [NC]
RewriteRule ^(.*)$ - [F,L]

# Standard WordPress rules
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

1
2
3
4
5
6
7
8
9

# Metodologia enterprise per gestire i download Divi
# Crea directory di staging per i temi
mkdir -p ~/divi-staging/{themes,backups,child-themes}
cd ~/divi-staging

# Organizza i file Divi scaricati
# - Divi-Theme.zip (tema principale)
# - Divi-Builder.zip (plugin standalone, se necessario)
# - Divi-child-theme.zip (child theme base)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# Connessione SFTP sicura
sftp username@your-server.com

# Navigate alla directory temi WordPress
cd /path/to/wordpress/wp-content/themes/

# Upload del tema Divi estratto
put -r Divi/ .

# Verifica upload
ls -la Divi/

# Impostazione permessi corretti
chmod -R 755 Divi/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// functions.php - Configurazione API Divi tramite codice
// Aggiungere al child theme per gestione centralizzata

/**
 * Divi API Configuration
 * Automatic license activation per deployment multipli
 */
function configure_divi_api() {
    if ( is_admin() && current_user_can( 'manage_options' ) ) {
        // Configura API Key automaticamente
        $api_key = 'YOUR_DIVI_API_KEY'; // Da variabile ambiente in produzione

        if ( !empty( $api_key ) && !get_option( 'et_automatic_updates_options' ) ) {
            $options = array(
                'api_key' => $api_key,
                'enable_automatic_updates' => 'on'
            );
            update_option( 'et_automatic_updates_options', $options );
        }
    }
}
add_action( 'admin_init', 'configure_divi_api' );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

// Configurazioni Divi via codice per deployment automatizzati
function setup_divi_enterprise_options() {
    $divi_options = array(
        // Performance Settings
        'et_pb_static_css_file' => 'on',
        'et_pb_css_syncing' => 'on',
        'et_pb_product_tour_global' => 'off',

        // Builder Settings
        'et_enable_classic_editor' => 'off',
        'et_pb_back_button' => 'on',
        'et_pb_loading_animation' => 'off', // Per performance

        // SEO Settings
        'divi_seo_home_title' => get_bloginfo('name') . ' - ' . get_bloginfo('description'),
        'divi_seo_home_description' => get_bloginfo('description'),
        'divi_seo_home_keywords' => '',
        'divi_seo_home_canonical' => home_url(),

        // Navigation Settings
        'divi_disable_toptier' => 'off',
        'divi_disable_animations' => 'off',
        'divi_back_to_top' => 'on',
        'divi_smooth_scroll' => 'off', // Può causare problemi su mobile

        // Layout Settings
        'divi_sidebar_width' => '25',
        'divi_content_width' => '1080',
        'divi_gutter_width' => '3',

        // Logo Settings
        'divi_logo' => '', // Imposta via Customizer
        'divi_logo_width' => '100',
        'divi_logo_height' => '60',

        // Footer Settings
        'divi_show_footer_info' => 'on',
        'divi_footer_info' => '© ' . date('Y') . ' ' . get_bloginfo('name') . '. Tutti i diritti riservati.',

        // Social Media Settings
        'divi_show_twitter_icon' => 'on',
        'divi_show_facebook_icon' => 'on',
        'divi_show_linkedin_icon' => 'on',
        'divi_show_instagram_icon' => 'on',

        // Blog Settings
        'divi_blog_style' => 'false',
        'divi_archive_fullwidth' => 'false',
        'divi_postinfo1' => array('author', 'date', 'categories', 'comments'),
        'divi_postinfo2' => array('date', 'categories', 'comments'),

        // Mobile Settings
        'divi_mobile_logo' => '', // Separato per mobile
        'divi_phone_number' => '',
        'divi_header_style' => 'left',
        'divi_fixed_nav' => 'on',

        // Integration Settings
        'divi_integrate_header_enable' => 'on',
        'divi_integrate_body_enable' => 'on',
        'divi_integrate_singletop_enable' => 'off',
        'divi_integrate_singlebottom_enable' => 'off',
    );

    // Salva le opzioni (solo se non già impostate)
    foreach( $divi_options as $key => $value ) {
        if( !get_option( $key ) ) {
            update_option( $key, $value );
        }
    }
}

// Esegui solo su attivazione tema o su richiesta admin
if( is_admin() && isset($_GET['setup_divi_enterprise']) && current_user_can('manage_options') ) {
    setup_divi_enterprise_options();
    wp_redirect( admin_url('admin.php?page=et_divi_options&enterprise_setup=done') );
    exit;
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

/**
 * Divi Customizer Enhancements
 * Estende le opzioni del Customizer per setup enterprise
 */
function divi_enterprise_customizer( $wp_customize ) {

    // Sezione Brand Identity
    $wp_customize->add_section( 'divi_brand_identity', array(
        'title' => 'Brand Identity',
        'description' => 'Configurazioni brand per coerenza aziendale',
        'priority' => 30,
    ));

    // Primary Brand Color
    $wp_customize->add_setting( 'divi_brand_primary_color', array(
        'default' => '#2EA3F2',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'divi_brand_primary_color', array(
        'label' => 'Colore Primario Brand',
        'section' => 'divi_brand_identity',
        'settings' => 'divi_brand_primary_color',
    )));

    // Secondary Brand Color
    $wp_customize->add_setting( 'divi_brand_secondary_color', array(
        'default' => '#f7f7f7',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'divi_brand_secondary_color', array(
        'label' => 'Colore Secondario Brand',
        'section' => 'divi_brand_identity',
        'settings' => 'divi_brand_secondary_color',
    )));

    // Font Primario
    $wp_customize->add_setting( 'divi_brand_font_primary', array(
        'default' => 'Open Sans',
        'sanitize_callback' => 'sanitize_text_field',
    ));

    $wp_customize->add_control( 'divi_brand_font_primary', array(
        'label' => 'Font Primario',
        'section' => 'divi_brand_identity',
        'type' => 'select',
        'choices' => array(
            'Open Sans' => 'Open Sans',
            'Raleway' => 'Raleway',
            'Montserrat' => 'Montserrat',
            'Poppins' => 'Poppins',
            'Roboto' => 'Roboto',
            'Lato' => 'Lato',
        ),
    ));

    // Company Tagline
    $wp_customize->add_setting( 'divi_company_tagline', array(
        'default' => '',
        'sanitize_callback' => 'sanitize_text_field',
    ));

    $wp_customize->add_control( 'divi_company_tagline', array(
        'label' => 'Tagline Aziendale',
        'section' => 'divi_brand_identity',
        'type' => 'text',
        'description' => 'Tagline che appare sotto il logo',
    ));
}
add_action( 'customize_register', 'divi_enterprise_customizer' );

/**
 * Output CSS personalizzato basato su Customizer
 */
function divi_enterprise_customizer_css() {
    $primary_color = get_theme_mod( 'divi_brand_primary_color', '#2EA3F2' );
    $secondary_color = get_theme_mod( 'divi_brand_secondary_color', '#f7f7f7' );
    $primary_font = get_theme_mod( 'divi_brand_font_primary', 'Open Sans' );

    ?>
    <style type="text/css" id="divi-enterprise-customizer-css">
        :root {
            --brand-primary: <?php echo esc_attr( $primary_color ); ?>;
            --brand-secondary: <?php echo esc_attr( $secondary_color ); ?>;
            --brand-font: '<?php echo esc_attr( $primary_font ); ?>', sans-serif;
        }

        /* Applica colori brand */
        .et_pb_button,
        .et_pb_promo_button,
        .et_pb_more_button {
            background-color: var(--brand-primary) !important;
        }

        .et_pb_button:hover,
        .et_pb_promo_button:hover,
        .et_pb_more_button:hover {
            background-color: var(--brand-secondary) !important;
            color: var(--brand-primary) !important;
        }

        /* Applica font brand */
        body,
        .et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
        .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
            font-family: var(--brand-font);
        }

        /* Accent colors */
        .et_pb_contact_submit,
        .et_pb_newsletter_button,
        .et_pb_blog_grid .et_pb_post .post-meta a,
        #main-header .nav li ul a:hover,
        .et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,
        .et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active,
        .et_pb_gallery .et_pb_gallery_pagination ul li a.active {
            background-color: var(--brand-primary);
        }

        /* Links e accenti */
        a,
        .et_pb_module a,
        .et_pb_text_align_left a,
        .et_pb_member_social_links a:hover,
        .et_pb_pricing li.et_pb_not_available_item {
            color: var(--brand-primary);
        }
    </style>
    <?php
}
add_action( 'wp_head', 'divi_enterprise_customizer_css' );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Sezione (Section)
├── Riga (Row)
│   ├── Colonna (Column)
│   │   ├── Modulo (Module)
│   │   ├── Modulo (Module)
│   │   └── Modulo (Module)
│   └── Colonna (Column)
│       └── Modulo (Module)
└── Riga (Row)
    └── Colonna (Column)
        └── Modulo (Module)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/**
 * Divi Builder Enhancement Functions
 * Estensioni per workflow professionali
 */

// Aggiungi classi CSS personalizzate automaticamente
function divi_add_custom_body_classes( $classes ) {
    global $post;

    if( is_page() && has_shortcode( $post->post_content, 'et_pb_section' ) ) {
        $classes[] = 'divi-page';
        $classes[] = 'has-divi-builder';
    }

    // Aggiungi classe per dispositivo
    $device = wp_is_mobile() ? 'mobile' : 'desktop';
    $classes[] = 'device-' . $device;

    return $classes;
}
add_filter( 'body_class', 'divi_add_custom_body_classes' );

// Shortcodes personalizzati per Divi
function divi_custom_shortcodes_init() {

    // Shortcode per inserire anno corrente
    function current_year_shortcode() {
        return date('Y');
    }
    add_shortcode( 'current_year', 'current_year_shortcode' );

    // Shortcode per nome del sito
    function site_name_shortcode() {
        return get_bloginfo('name');
    }
    add_shortcode( 'site_name', 'site_name_shortcode' );

    // Shortcode per contatore visite (esempio)
    function visit_counter_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'type' => 'total',
        ), $atts );

        $count = get_option( 'site_visit_count', 0 );

        if( $atts['type'] == 'today' ) {
            $count = get_option( 'site_visit_count_today', 0 );
        }

        return number_format( $count );
    }
    add_shortcode( 'visit_counter', 'visit_counter_shortcode' );
}
add_action( 'init', 'divi_custom_shortcodes_init' );

// Gestione avanzata dei media per Divi
function divi_optimize_image_sizes() {
    // Dimensioni immagini ottimizzate per Divi
    add_image_size( 'divi-hero-desktop', 1920, 1080, true );
    add_image_size( 'divi-hero-mobile', 768, 576, true );
    add_image_size( 'divi-portfolio-thumb', 400, 300, true );
    add_image_size( 'divi-blog-featured', 1080, 675, true );
    add_image_size( 'divi-testimonial-avatar', 100, 100, true );
}
add_action( 'after_setup_theme', 'divi_optimize_image_sizes' );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* CSS per Text Module ottimizzato */
.et_pb_text {
    /* Typography scale responsive */
    font-size: clamp(16px, 2.5vw, 18px);
    line-height: 1.6;

    /* Miglior readability */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive typography per headings */
.et_pb_text h2 {
    font-size: clamp(24px, 4vw, 32px);
    margin-bottom: 1em;
}

.et_pb_text h3 {
    font-size: clamp(20px, 3.5vw, 24px);
    margin-bottom: 0.8em;
}

/* Spacing ottimizzato */
.et_pb_text p {
    margin-bottom: 1.2em;
}

.et_pb_text ul, .et_pb_text ol {
    padding-left: 1.5em;
    margin-bottom: 1.2em;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

/* Sistema pulsanti enterprise */
.et_pb_button {
    /* Reset stili base */
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    /* Dimensioni responsive */
    padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 32px);
    min-height: 48px; /* Touch-friendly */

    /* Visual design */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Varianti pulsanti */
.et_pb_button.primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, rgba(46, 163, 242, 0.8) 100%);
    color: white;
}

.et_pb_button.secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

.et_pb_button.outline {
    background: transparent;
    color: var(--text-color);
    border: 1px solid rgba(0,0,0,0.2);
}

/* Hover states */
.et_pb_button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(46, 163, 242, 0.3);
}

.et_pb_button.secondary:hover {
    background: var(--brand-primary);
    color: white;
}

/* Focus states per accessibilità */
.et_pb_button:focus {
    outline: 3px solid rgba(46, 163, 242, 0.5);
    outline-offset: 2px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* Immagini responsive ottimizzate */
.et_pb_image {
    position: relative;
    overflow: hidden;
}

.et_pb_image img {
    /* Performance ottimizzata */
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);

    /* Lazy loading optimization */
    loading: lazy;
    decoding: async;

    /* Responsive behavior */
    width: 100%;
    height: auto;

    /* Miglior rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Hover effects eleganti */
.et_pb_image:hover img {
    transform: scale(1.05);
}

/* Placeholder durante il caricamento */
.et_pb_image[data-loading="true"] {
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Aspect ratio containers */
.et_pb_image.aspect-16-9 {
    aspect-ratio: 16/9;
}

.et_pb_image.aspect-4-3 {
    aspect-ratio: 4/3;
}

.et_pb_image.aspect-1-1 {
    aspect-ratio: 1/1;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/* Hero Section Enterprise Pattern */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    /* Background ottimizzato */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Overlay per leggibilità */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.6) 100%
    );
    z-index: 1;
}

.hero-section .et_pb_row {
    position: relative;
    z-index: 2;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
        background-attachment: scroll; /* Fix mobile performance */
    }
}

/* Typography hero ottimizzata */
.hero-section .hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-section .hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
}

/* CTA buttons */
.hero-section .hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

@media (max-width: 480px) {
    .hero-section .hero-cta {
        flex-direction: column;
    }

    .hero-section .hero-cta .et_pb_button {
        width: 100%;
        text-align: center;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/* Features Grid Pattern */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.feature-card .feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.feature-card .feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card .feature-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/**
 * Theme Builder Enhancements
 * Estensioni per il Theme Builder di Divi
 */

// Registra template areas personalizzate
function divi_register_custom_template_areas() {
    if( function_exists('et_theme_builder_add_template_type') ) {

        // Template per Custom Post Types
        et_theme_builder_add_template_type( 'product', array(
            'label' => 'Prodotto',
            'plural_label' => 'Prodotti',
            'layout_type' => 'single',
            'post_type' => 'product',
            'priority' => 15
        ));

        // Template per Portfolio
        et_theme_builder_add_template_type( 'portfolio', array(
            'label' => 'Portfolio Item',
            'plural_label' => 'Portfolio Items',
            'layout_type' => 'single',
            'post_type' => 'project',
            'priority' => 16
        ));

        // Template per Eventi
        et_theme_builder_add_template_type( 'event', array(
            'label' => 'Evento',
            'plural_label' => 'Eventi',
            'layout_type' => 'single',
            'post_type' => 'event',
            'priority' => 17
        ));
    }
}
add_action( 'init', 'divi_register_custom_template_areas', 20 );

// Condition personalizzate per Theme Builder
function divi_add_custom_theme_builder_conditions( $conditions ) {

    // Condizione per utenti loggati
    $conditions['user_logged_in'] = array(
        'label' => 'Utente Loggato',
        'callback' => 'is_user_logged_in'
    );

    // Condizione per device mobile
    $conditions['is_mobile'] = array(
        'label' => 'Dispositivo Mobile',
        'callback' => 'wp_is_mobile'
    );

    // Condizione per WooCommerce
    if( function_exists('is_woocommerce') ) {
        $conditions['is_woocommerce'] = array(
            'label' => 'Pagina WooCommerce',
            'callback' => 'is_woocommerce'
        );
    }

    return $conditions;
}
add_filter( 'et_theme_builder_conditions', 'divi_add_custom_theme_builder_conditions' );

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

/* Global Header Styles */
.divi-global-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header scrolled state */
.divi-global-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* Logo container */
.header-logo-container {
    display: flex;
    align-items: center;
    height: 80px;
    transition: height 0.3s ease;
}

.divi-global-header.scrolled .header-logo-container {
    height: 60px;
}

.header-logo {
    max-height: 50px;
    width: auto;
    transition: max-height 0.3s ease;
}

.divi-global-header.scrolled .header-logo {
    max-height: 35px;
}

/* Navigation menu */
.header-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-nav-item {
    position: relative;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
}

.header-nav-item:hover,
.header-nav-item.active {
    color: var(--brand-primary);
}

.header-nav-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--brand-primary);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.header-nav-item:hover::after,
.header-nav-item.active::after {
    width: 80%;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 5px;
    border: none;
    background: none;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    margin: 2px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Mobile menu animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* CTA Button in header */
.header-cta-button {
    padding: 12px 24px;
    background: var(--brand-primary);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--brand-primary);
}

.header-cta-button:hover {
    background: transparent;
    color: var(--brand-primary);
}

/* Responsive behavior */
@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .header-navigation {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .header-navigation.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .header-nav-item {
        padding: 1rem 0;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .header-cta-button {
        margin-top: 1rem;
        display: inline-block;
        text-align: center;
    }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

/* Global Footer Styles */
.divi-global-footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: rgba(255,255,255,0.8);
    padding: 4rem 0 2rem;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-column h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--brand-primary);
}

.footer-column p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--brand-primary);
}

/* Social media links */
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
}

/* Newsletter signup */
.footer-newsletter {
    margin-top: 1.5rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 6px;
}

.newsletter-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-button {
    padding: 12px 20px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.newsletter-button:hover {
    background: var(--brand-secondary);
}

/* Footer bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--brand-primary);
}

/* Responsive footer */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 576px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-bottom-links {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/**
 * Dynamic Content Extensions per Divi
 */

// Aggiungi custom dynamic content
function divi_add_custom_dynamic_content( $fields ) {

    // Campo per data personalizzata
    $fields['custom_date'] = array(
        'label' => 'Data Personalizzata',
        'type' => 'text',
        'callback' => function( $args ) {
            $format = $args['format'] ?? 'F j, Y';
            return date( $format );
        }
    );

    // Campo per contatore visualizzazioni
    $fields['post_views'] = array(
        'label' => 'Visualizzazioni Post',
        'type' => 'text',
        'callback' => function( $args ) {
            global $post;
            $views = get_post_meta( $post->ID, 'post_views', true );
            return $views ? number_format( $views ) : '0';
        }
    );

    // Campo per tempo di lettura
    $fields['reading_time'] = array(
        'label' => 'Tempo di Lettura',
        'type' => 'text',
        'callback' => function( $args ) {
            global $post;
            $content = get_post_field( 'post_content', $post->ID );
            $word_count = str_word_count( strip_tags( $content ) );
            $reading_time = ceil( $word_count / 200 ); // 200 words per minute
            return $reading_time . ' min di lettura';
        }
    );

    // Campo per autore con link
    $fields['author_link'] = array(
        'label' => 'Link Autore',
        'type' => 'url',
        'callback' => function( $args ) {
            global $post;
            return get_author_posts_url( $post->post_author );
        }
    );

    return $fields;
}
add_filter( 'et_builder_dynamic_content_fields', 'divi_add_custom_dynamic_content' );

// Sistema di conteggio visualizzazioni
function track_post_views() {
    if( is_single() && !is_preview() ) {
        global $post;
        $views = get_post_meta( $post->ID, 'post_views', true );
        $views = $views ? $views + 1 : 1;
        update_post_meta( $post->ID, 'post_views', $views );
    }
}
add_action( 'wp_head', 'track_post_views' );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

/**
 * Divi Performance Optimization Suite
 * Ottimizzazioni complete per Core Web Vitals
 */

// Ottimizzazioni CSS e JavaScript
function divi_performance_optimizations() {

    // Rimuovi CSS non utilizzati sulla homepage
    if( is_front_page() && !is_admin() ) {
        // Deferisce CSS non critici
        add_filter( 'style_loader_tag', function( $html, $handle ) {
            if( in_array( $handle, ['divi-style', 'et-builder-modules-style'] ) ) {
                return str_replace( 'rel="stylesheet"', 'rel="preload" as="style" onload="this.onload=null;this.rel=\'stylesheet\'"', $html );
            }
            return $html;
        }, 10, 2 );
    }

    // Ottimizza caricamento JavaScript
    add_filter( 'script_loader_tag', function( $tag, $handle ) {
        // Scripts non critici
        $defer_scripts = [
            'divi-custom-script',
            'et_pb_custom_modules_script',
            'et-builder-modules-global-functions-script'
        ];

        if( in_array( $handle, $defer_scripts ) ) {
            return str_replace( ' src', ' defer src', $tag );
        }

        return $tag;
    }, 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'divi_performance_optimizations' );

// Preload risorse critiche
function divi_add_resource_hints() {
    // Preload font critici
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/core/admin/fonts/modules.ttf" as="font" type="font/ttf" crossorigin>';

    // Preconnect a servizi esterni
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';

    // DNS-prefetch per risorse esterne
    echo '<link rel="dns-prefetch" href="//www.google-analytics.com">';
    echo '<link rel="dns-prefetch" href="//www.googletagmanager.com">';
}
add_action( 'wp_head', 'divi_add_resource_hints', 1 );

// Critical CSS inlining
function divi_inline_critical_css() {
    if( is_front_page() ) {
        ?>
        <style id="divi-critical-css">
            /* Critical Above-the-fold CSS */
            body { margin: 0; font-family: 'Open Sans', sans-serif; }
            .et_pb_section { position: relative; }
            .et_pb_row { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
            .et_pb_column { position: relative; }

            /* Hero section critical styles */
            .hero-section {
                min-height: 100vh;
                display: flex;
                align-items: center;
                background-size: cover;
                background-position: center;
            }

            /* Header critical styles */
            #main-header {
                position: sticky;
                top: 0;
                z-index: 99999;
                background: rgba(255,255,255,0.95);
            }

            /* Typography crítico */
            h1, h2, h3 { line-height: 1.2; margin-bottom: 1rem; }
            p { line-height: 1.6; margin-bottom: 1rem; }

            /* Button crítico */
            .et_pb_button {
                display: inline-block;
                padding: 12px 24px;
                background: #2ea3f2;
                color: white;
                text-decoration: none;
                border-radius: 6px;
                transition: all 0.3s ease;
            }
        </style>
        <?php
    }
}
add_action( 'wp_head', 'divi_inline_critical_css', 2 );

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

// Lazy loading ottimizzato per Divi
class DiviLazyLoader {
    constructor() {
        this.imageObserver = null;
        this.backgroundObserver = null;
        this.init();
    }

    init() {
        // Intersection Observer per immagini
        if ('IntersectionObserver' in window) {
            this.setupImageObserver();
            this.setupBackgroundObserver();
            this.observeElements();
        } else {
            // Fallback per browser non supportati
            this.loadAllImages();
        }
    }

    setupImageObserver() {
        this.imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.loadImage(entry.target);
                    this.imageObserver.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '50px 0px',
            threshold: 0.01
        });
    }

    setupBackgroundObserver() {
        this.backgroundObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.loadBackground(entry.target);
                    this.backgroundObserver.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '100px 0px',
            threshold: 0.01
        });
    }

    observeElements() {
        // Observe images
        document.querySelectorAll('img[data-src]').forEach(img => {
            this.imageObserver.observe(img);
        });

        // Observe background images
        document.querySelectorAll('[data-background-image]').forEach(el => {
            this.backgroundObserver.observe(el);
        });

        // Observe Divi modules
        document.querySelectorAll('.et_pb_module[data-lazy]').forEach(module => {
            this.imageObserver.observe(module);
        });
    }

    loadImage(img) {
        // Preload image
        const imageLoader = new Image();
        imageLoader.onload = () => {
            img.src = img.dataset.src;
            img.classList.add('loaded');

            // Remove data attribute
            delete img.dataset.src;

            // Trigger custom event
            img.dispatchEvent(new CustomEvent('imageLoaded'));
        };

        imageLoader.onerror = () => {
            img.classList.add('error');
        };

        imageLoader.src = img.dataset.src;
    }

    loadBackground(element) {
        const bgImage = element.dataset.backgroundImage;

        // Preload background image
        const imageLoader = new Image();
        imageLoader.onload = () => {
            element.style.backgroundImage = `url(${bgImage})`;
            element.classList.add('bg-loaded');
            delete element.dataset.backgroundImage;
        };

        imageLoader.src = bgImage;
    }

    loadAllImages() {
        // Fallback: load all images immediately
        document.querySelectorAll('img[data-src]').forEach(img => {
            img.src = img.dataset.src;
            delete img.dataset.src;
        });

        document.querySelectorAll('[data-background-image]').forEach(el => {
            el.style.backgroundImage = `url(${el.dataset.backgroundImage})`;
            delete el.dataset.backgroundImage;
        });
    }
}

// CSS per animazioni lazy loading
const lazyLoadCSS = `
<style>
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.loaded {
    opacity: 1;
}

img.error {
    opacity: 0.5;
    background: #f0f0f0 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ccc" d="M12 2L2 7l10 5 10-5-10-5z"/></svg>') no-repeat center;
    background-size: 24px;
}

[data-background-image] {
    background-image: none !important;
    transition: opacity 0.5s ease;
}

[data-background-image].bg-loaded {
    opacity: 1;
}

/* Skeleton loader */
.et_pb_image[data-lazy]::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.et_pb_image[data-lazy].loaded::before {
    display: none;
}
</style>`;

// Initialize quando DOM è pronto
document.addEventListener('DOMContentLoaded', () => {
    // Inject CSS
    document.head.insertAdjacentHTML('beforeend', lazyLoadCSS);

    // Initialize lazy loader
    new DiviLazyLoader();
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* Font Loading Strategy per Divi */

/* Font Display Optimization */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
         url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Migliora CLS */
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
         url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fallback font system */
body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

/* Subset loading per lingue specifiche */
/* Latino base per italiano */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&subset=latin&display=swap');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

// PHP per font optimization
function divi_optimize_font_loading() {
    // Remove default Google Fonts loading
    add_filter( 'et_gf_enqueue_fonts', '__return_empty_array' );

    // Add optimized font loading
    add_action( 'wp_head', function() {
        ?>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

        <!-- Preload critical font -->
        <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" media="print" onload="this.media='all'">

        <noscript>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
        </noscript>

        <script>
        // Font loading detection
        (function() {
            if ('fonts' in document) {
                Promise.all([
                    document.fonts.load('400 16px Open Sans'),
                    document.fonts.load('600 16px Open Sans'),
                    document.fonts.load('700 16px Open Sans')
                ]).then(() => {
                    document.documentElement.classList.add('fonts-loaded');
                });
            }
        })();
        </script>

        <style>
        /* FOUT prevention */
        .fonts-loading body {
            visibility: hidden;
        }

        .fonts-loaded body,
        .no-js body {
            visibility: visible;
        }

        /* Fallback durante il caricamento */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .fonts-loaded body {
            font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        </style>
        <?php
    }, 1 );
}
add_action( 'init', 'divi_optimize_font_loading' );

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

// Core Web Vitals Monitoring per Divi
class DiviWebVitalsMonitor {
    constructor() {
        this.metrics = {};
        this.init();
    }

    init() {
        // Largest Contentful Paint (LCP)
        this.measureLCP();

        // First Input Delay (FID)
        this.measureFID();

        // Cumulative Layout Shift (CLS)
        this.measureCLS();

        // Custom Divi metrics
        this.measureCustomMetrics();
    }

    measureLCP() {
        if ('PerformanceObserver' in window) {
            const observer = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                const lastEntry = entries[entries.length - 1];

                this.metrics.LCP = lastEntry.startTime;

                // Send to analytics
                this.sendMetric('LCP', lastEntry.startTime);

                // Divi-specific LCP optimization
                if (lastEntry.startTime > 2500) {
                    console.warn('LCP is slow:', lastEntry.startTime);
                    this.optimizeLCP();
                }
            });

            observer.observe({ entryTypes: ['largest-contentful-paint'] });
        }
    }

    measureFID() {
        if ('PerformanceObserver' in window) {
            const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    this.metrics.FID = entry.processingStart - entry.startTime;

                    // Send to analytics
                    this.sendMetric('FID', this.metrics.FID);

                    if (this.metrics.FID > 100) {
                        console.warn('FID is slow:', this.metrics.FID);
                    }
                }
            });

            observer.observe({ entryTypes: ['first-input'] });
        }
    }

    measureCLS() {
        let clsValue = 0;
        let clsEntries = [];
        let sessionValue = 0;
        let sessionEntries = [];

        if ('PerformanceObserver' in window) {
            const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                    if (!entry.hadRecentInput) {
                        const firstSessionEntry = sessionEntries[0];
                        const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

                        if (sessionValue &&
                            entry.startTime - lastSessionEntry.startTime < 1000 &&
                            entry.startTime - firstSessionEntry.startTime < 5000) {
                            sessionValue += entry.value;
                            sessionEntries.push(entry);
                        } else {
                            sessionValue = entry.value;
                            sessionEntries = [entry];
                        }

                        if (sessionValue > clsValue) {
                            clsValue = sessionValue;
                            clsEntries = [...sessionEntries];

                            this.metrics.CLS = clsValue;
                            this.sendMetric('CLS', clsValue);

                            if (clsValue > 0.1) {
                                console.warn('CLS is high:', clsValue, clsEntries);
                                this.analyzeCLSElements(clsEntries);
                            }
                        }
                    }
                }
            });

            observer.observe({ entryTypes: ['layout-shift'] });
        }
    }

    measureCustomMetrics() {
        // Time to Interactive (TTI) approximation
        window.addEventListener('load', () => {
            setTimeout(() => {
                const tti = performance.now();
                this.metrics.TTI = tti;
                this.sendMetric('TTI', tti);
            }, 5000);
        });

        // Divi Builder load time
        if (document.querySelector('.et_pb_section')) {
            const diviLoadStart = performance.now();

            const checkDiviLoad = () => {
                const allModules = document.querySelectorAll('.et_pb_module');
                const loadedModules = document.querySelectorAll('.et_pb_module:not([data-lazy])');

                if (allModules.length === loadedModules.length) {
                    const diviLoadTime = performance.now() - diviLoadStart;
                    this.metrics.DiviLoad = diviLoadTime;
                    this.sendMetric('DiviLoad', diviLoadTime);
                } else {
                    requestAnimationFrame(checkDiviLoad);
                }
            };

            requestAnimationFrame(checkDiviLoad);
        }
    }

    optimizeLCP() {
        // Identifica e ottimizza l'elemento LCP
        const lcpCandidates = [
            'img[src*="hero"]',
            '.et_pb_section:first-child img',
            '.hero-section img',
            'h1',
            '.et_pb_text_0'
        ];

        lcpCandidates.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => {
                if (el.tagName === 'IMG') {
                    // Preload LCP image
                    const link = document.createElement('link');
                    link.rel = 'preload';
                    link.as = 'image';
                    link.href = el.src;
                    document.head.appendChild(link);
                }
            });
        });
    }

    analyzeCLSElements(entries) {
        entries.forEach(entry => {
            entry.sources?.forEach(source => {
                const element = source.node;
                console.log('CLS caused by:', element, 'Value:', entry.value);

                // Auto-fix common Divi CLS issues
                if (element.tagName === 'IMG' && !element.style.aspectRatio) {
                    // Add aspect ratio to prevent CLS
                    const rect = element.getBoundingClientRect();
                    if (rect.width && rect.height) {
                        element.style.aspectRatio = `${rect.width}/${rect.height}`;
                    }
                }
            });
        });
    }

    sendMetric(name, value) {
        // Send to Google Analytics 4
        if (typeof gtag !== 'undefined') {
            gtag('event', name, {
                event_category: 'Web Vitals',
                event_label: name,
                value: Math.round(name === 'CLS' ? value * 1000 : value),
                non_interaction: true,
            });
        }

        // Send to custom analytics endpoint
        if (navigator.sendBeacon) {
            const data = JSON.stringify({
                metric: name,
                value: value,
                url: window.location.href,
                timestamp: Date.now(),
                userAgent: navigator.userAgent,
                connection: navigator.connection?.effectiveType || 'unknown'
            });

            navigator.sendBeacon('/api/web-vitals', data);
        }
    }

    getReport() {
        return this.metrics;
    }
}

// Initialize monitoring
document.addEventListener('DOMContentLoaded', () => {
    window.diviWebVitals = new DiviWebVitalsMonitor();

    // Report metrics before page unload
    window.addEventListener('beforeunload', () => {
        const report = window.diviWebVitals.getReport();
        console.log('Web Vitals Report:', report);
    });
});