Divi | Aganis Web Software

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.

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);

Tag Divi

Aggiungere un font personalizzato a Divi

Divi Mobile Menu Collapsed