Nonostante l’ampia possibilità di contenuti dinamici che Elementor Pro mette a disposizione, quello dell’altezza di una sezione non rientra tra questi.

Nelle impostazioni relative, l’opzione in cui è possibile settare un’altezza fissa per la sezione è quella denominata Altezza min, che come intuitivamente si può comprendere corrisponde alla regola css min-height. Come si vede dallo screenshot, il valore non può essere settato dinamicamente, nel campo di input non c’è il classico simbolo

Lo scopo di questo tutorial è vedere come è possibile colmare questa limitazione e quindi settare dinamicamente questo valore, in un contesto di template come può essere, ad esempio, un header.

Come prima cosa ho creato dei custom field associati al post in cui sarà possibile impostare le altezze. Parlo al plurale perché ho voluto aggiungere un controllo maggiore e settare tre valori diversi per i 3 breakpoint più comuni, i classici desktop, tablet e mobile. Sia per la creazione del custom post type che dei custom field mi sono avvalso del plugin Jetengine di Crocoblock. Questo il dettaglio dei fields e dei relativi valori di default.

Come seconda cosa, assegnamo alla sezione per la quale vogliamo controllare l’altezza, una classe css specifica che sarà usata come target dello script che vedremo tra poco. Per farlo ci basta selezionare la sezione ed assegnare un nome nella tab avanzato, campo Classi CSS. Nel mio caso section-custom-height.

Fatto ciò veniamo al cuore della funzionalità, ovvero la funzione sectionCustomHeight() che può essere scritta direttamente nel file functions.php o integrata come plugin. Tale funzione non è altro che l’implementazione di un piccolo script jQuery che verifica la larghezza della finestra del browser ed in base ad essa assegna un valore alla proprietà min-height e la scrive come css inline.

Rimando ai commenti della funzione per maggiori delucidazioni.

<?php

function sectionCustomHeight(){
    
   //Dichiaro la variabile globale $post
   global $post;
   
   //Creo le variabili in cui inserisco il valore dei custom field
   
   //Mobile
   $hm = get_post_meta($post->ID,'altezza-testata-mobile',true);

   //Tablet
   $ht = get_post_meta($post->ID,'altezza-testata-tablet',true);

   //Desktop
   $h = get_post_meta($post->ID,'altezza-testata',true);
?>

   <script>
   //Al caricamento della pagina
   jQuery(document).ready(function($) {
      
      //Mobile, setto il min-height della classe .section-custom-height con il valore di $hm
      if($(window).width() < 767){
         $('.section-custom-height').css('min-height', '<?php echo $hm ?>px');
      
      //Tablet, setto il min-height della classe .section-custom-height con il valore di $ht
      } else if(($(window).width() > 767) && (($(window).width() < 1024))){
         $('.section-custom-height').css('min-height', '<?php echo $ht ?>px');
      
      //Desktop, setto il min-height della classe .section-custom-height con il valore di $h 
      } else if(($(window).width() > 1024) && (($(window).width() < 1366))){
         $('.section-custom-height').css('min-height', '<?php echo $h ?>px');
      
      //Desktop Extralarge, prevedo un valore fisso per un browser la cui larghezza è maggiore di 1366px
      }else{
         $('.section-custom-height').css('min-height', '800px');
      }
   });
   </script>
<?php
}

//Aggancio la funzione all'hook wp_head, in modo che lo script sia inserito nell'head
add_action('wp_head','sectionCustomHeight');
?>

Il codice è solo un punto di partenza, del resto non sono uno sviluppatore e sarò felice di aggiornarlo con i consigli che riceverò nei commenti.

Alla prossima.