Aggiungere un font personalizzato a Divi

Se cercate una soluzione per mettere offline i font di google e li volete comunque inserire all’interno del vostro tema realizzato con Divi esiste una soluzione che ho trovato su questo sito (https://divitheme.net/add-custom-font-divi/). La regola funziona anche se hai bisogno di usare un font che non è incluso in Divi.

Non so se alcuni di voi lo hanno notato ma quando si va a selezionare un font nella personalizzazione della pagina appare anche un pulsante “upload” dove potete caricare dei file ttf o woff. ATTENZIONE! Questa funzionalità non è visibile nelle personalizzazioni del tema ma se lo aggiungete all’interno di una pagina poi il font vi apparirà nell’elenco anche in personalizzazione del tema.

Prima di iniziare a caricare il file però dovete inserire nel file config.php il seguente parametro:

 

define('ALLOW_UNFILTERED_UPLOADS', true);

 

Altrimenti riceverete un errore in fase di upload.

Una volta fatta questa modifica tornate alla schermata dove selezionare i font e cliccare su “Upload”, quindi inserisci il nome del tuo font e carica il file (i formati di file supportati sono: .OTF, .TTF, .EOT, .WOFF, WOFF2).

Avrai anche la possibilità di scegliere i pesi dei caratteri, ma è consigliato tenerlo spuntato come “Tutti”. E questo è tutto. 
E’ un ottima soluzione per non appesantire il codice delle pagine web o delle chiamate esterne al sito.

Divi Mobile Menu Collapsed

Vi segnalo questo interessante articolo presente sul sito di eleganthemes dove viene spiegato come raggruppare i sottomenu nel menu mobile.

Di default Divi non prevede il raggruppamento nascosto delle voci di sottomenu (nel menu mobile) e a volte questo può essere comodo se si hanno tante voci sotto i menu principali.

Mi chiedevo anch’io se non esistesse qualche featured già predisposta e come per magia proprio di recente elegant themes ha scritto questo articolo (datato maggio 2016)

Ecco qui il link per accedere all’articolo:

Divi Mobile Menu Hack: Collapsing Nested Menu Items – Divi Nation Short

Qui invece per comodità appunto il codice da inserire nel CSS e nell’header del template:

CSS che aggiunge l’effetto collapse:
/*collapse menu*/
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }

Javascript per il funzionamento collapse:

(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);

©2021 AGANIS WEB SOFTWARE di Francesca Roccabruna P.IVA TRENTO 02183500228 - N.REA 205930 La Web Agency per la realizzazione del tuo sito web
Privacy Policy