Aprofitant que he estat toquetejant una mica el blog per crear un mega-menú a la secció d’Escapades, i així enllaçar la pàgina del West Highland Way i la del Camí Primitiu de Sant Jaume, us explicaré com fer-ho, i també què és Divi. Som-hi.
Divi, segons Elegant Themes, que són els seus creadors, és el tema més popular de WordPress a tot el món i el constructor de pàgines més avançat. Tot i ser una definició bastant discutible pel que fa a popularitat, sí que és cert que té dos caps: la del constructor i la del tema.
Normalment, s’utilitzen conjuntament, hom instal·la el paquet sencer, i així pot utilitzar algun dels patrons que incorpora i que ja us dic ara que no són res de l’altre món, però també el constructor de pàgines. Aquest constructor ens serveix tant per dissenyar visualment les pàgines, com també el podem emprar a l’hora d’escriure les entrades del blog, tot i que, personalment, prefereixo el constructor natiu, ja que crea un codi més net i lleuger. A no ser que necessitem algun dels mòduls que porta Divi, que llavors no tindrem cap més remei que utilitzar-lo també a les pàgines.
Un dels punts forts de Divi és que pots comprar, a un preu assequible, una actualització per tota la vida (de Divi, no teva), amb la qual cosa no et cal preocupar de futurs forats de seguretat, o d’incompatibilitat amb noves versions. I a més, pots utilitzar la teva llicència sense límit (tot i que ells afegeixen l’adjectiu “raonable”).
Què és un mega-menú
Un mega-menú és un tipus de menú desplegable que permet mostrar les seccions i categories d’una pàgina web d’una manera més ordenada i visual que els desplegables tradicionals d’una sola columna.
Per qui no sàpigui com crear menús (normals) amb el WordPress, és tan fàcil com anar a Aparença -> Menús, i anar creant caixetes a partir de pàgines, categories, o enllaços que podem personalitzar. Per crear submenús, només hem de moure una caixeta sota la caixa que farà de menú pare, i desplaçar-la lleugerament a la dreta.
Dit això, suposem que, tal com passava a aquest blog, part del menú és així:
El que volem, com ja hem dit, és crear 3 submenús a Escapades, un per la pàgina The West Highland Way, i un altre per la pàgina Camí Primitiu de Sant Jaume, i un tercer per poder accedir a totes les escapades del blog, ja que quan convertim a mega-menú l’enllaç Escapades, que com es pot veure a la imatge és de Categoria, perdrà la funcionalitat d’enllaç per passar només a desplegar el mega-menú.
Així que crearem tres enllaços personalitzats, posant la informació que toqui com a pàgina de destí, i com a títol, quedant així:
Transformant el menú estàndard
Divi té una opció per crear mega-menús de forma automàtica. Bàsicament, el que s’ha de fer és seleccionar l’opció que el menú ofereix: o bé un llistat, o bé 2 imatges de publicacions marcades com a destacades i un llistat, o bé 3 imatges de publicacions destacades. Com que aquest sistema és poc flexible, el farem manualment.
La creació del mega-menú de forma manual es fa mitjançant l’ús de classes CSS. El què farem és dir-li al menú que és un mega-menú, i a les 3 opcions, que són elements del mega-menú.
La cosa és molt fàcil: desplega el menú amb la fletxeta de la dreta (en l’exemple, és Escapades), i al camp Classes CSS hi escrius mega-menu.
Als tres submenús, la classe que hi escriurem és mega-link. A continuació podeu veure com hauria de quedar el menú (Escapades) i els submenús (la imatge de l’exemple pertany al primer):
Si quan desplegueu els elements del menú no teniu el camp Classes CSS, és perquè està ocult. Per mostrar-lo, s’ha de desplegar, de dalt de tot de la pàgina, el menú Opcions de pantalla, marcar el quadradet Classes CSS, i ja ens apareixerà.
Per fer-lo més visual, hi posarem una imatge de la mediateca del mateix blog o lloc web. Per fer-ho, anem a Mèdia -> Mediateca, seleccionem la imatge que vulguem posar, i cliquem el botó Copiar l’URL al porta-retalls. Les imatges que he utilitzat jo, tenen una mida de 375×250 píxels, és l’ample ideal per a 3 submenús (per a 2, la imatge haurà de ser més ampla, i per a més de 3, hauria de ser més petita).
Ara, tornem a desplegar els submenús, i, a Etiqueta de navegació, sense esborrar el nom que hi haguem posat anteriorment, hi enganxem el següent fragment:
<img src="<enganxar l'URL de la imatge>" alt="<text descriptiu de la imatge>" />Sobretot, substitueix <enganxar l’URL de la imatge> amb el text que el botó del pas anterior hagi copiat al porta-retalls, i <text descriptiu de la imatge> per un text que ajudi a entendre què hi ha allà als qui no puguin veure la imatge. Com que l’etiqueta anterior quedarà molt llarga i el camp d’introducció de text és curt, la millor manera de veure què hi hem posat és al títol de la caixa, que hauria de ser semblant al següent:
Arribats a aquest punt, el nostre mega-menú ja es desplegaria correctament. Ara només queden fer-hi un parell de retocs estilístics, i canviar l’esquema de 4 columnes que marca Divi per defecte.
Per fer-ho, utilitzarem la classe mega-link que hem assignat als submenús, i sobreescriurem alguna opció de la classe mega-menu. Pots copiar i enganxar el següent codi a Divi -> Theme Options -> Custom CSS (al final de tot de la pestanya General):
#et-navigation .mega-menu > ul > li {
-ms-flex-preferred-size: unset;
flex-basis: 0;
width: auto;
flex-grow: 1;
}
.mega-link > a {
text-align: center;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
}
.mega-link > a img {
margin-bottom: 8px;
margin-top: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}Amb la primera declaració, permetem que els submenús es reparteixin de forma equitativa tot l’espai horitzontal disponible. Amb la segona, centrem el text, el passem a majúscules, i li posem negreta. I amb l’última, posem les imatges amb les cantonades arrodonides.
