--- title: "Hestia: ¿Cómo configurar el mega menú?" url: https://caribdis.net/2018/04/22/hestia-como-configurar-el-mega-menu/ date: 2018-04-22 modified: 2019-10-11 lang: es author: "Caribdis.Net" description: "En el tutorial de hoy vamos a aprender a crear un mega menú en el tema gratuito Hestia, de ThemeIsle, con la herramienta integrada. Crear un mega menú básico en..." categories: - "Hestia" tags: - "español" - "gratuito" - "tema" - "ThemeIsle" - "tutorial" image: https://caribdis.net/wp-content/uploads/2017/07/hestia-tutoriales.jpg word_count: 789 --- # Hestia: ¿Cómo configurar el mega menú? En el tutorial de hoy vamos a aprender a crear un mega menú en el tema gratuito [**Hestia**](https://caribdis.link/Hestia), de [**ThemeIsle**](https://caribdis.link/ThemeIsle), con la herramienta integrada. ### Crear un mega menú básico en Hestia **ThemeIsle** ha facilitado el proceso de asignar un mega menú al tema con el uso de clases CSS. Ante todo, tendremos que crear un nuevo menú. Vamos a *Apariencia > Menús*, y hacemos clic en la pestaña *Opciones de pantalla* de la parte superior derecha para asegurarnos de que la opción *Clases CSS* esté activada. Si la casilla no está marcada, simplemente le damos un clic. Acto seguido, hacemos clic en el enlace *crea un nuevo menú*. ![Hestia - Mega menú - Clases](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-clases.png) #### Estructura de los elementos Se han creado clases específicas para permitir a los usuarios confeccionar muy vistosos menús desde el escritorio de WordPress, sin necesidad de plugins de terceros. Estas clases se enumeran a continuación, junto con sus correspondientes ejemplos: - `hestia-mega-menu` – Esta clase funciona como contenedor del mega menú. - `hestia-mm-col` – Esta clase es un contenedor para las columnas del menú. Los contenidos no se muestran, son simplemente el “envoltorio”. - `hestia-mm-heading` – Aplica estilo de encabezado al elemento. Los contenidos se muestran y también pueden ser un enlace. También existe un elemento llamado `divider`. Se puede insertar un separador entre los elementos del menú tan solo añadiendo un elemento de *Enlace personalizado* con un símbolo `#` en el campo *Enlace* y la etiqueta `divider` en el título. También se muestran las descripciones de los enlaces. Así que todo lo que se inserte en el campo *Descripción* aparecerá justo debajo del título. ![Hestia - Mega menú - Referencias](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-ref.jpg) #### Crear el menú Esta funcionalidad se puede extender mucho más allá, pero para propósitos de demostración vamos a reproducir el ejemplo de más arriba. #### El elemento raíz Primero vamos a añadir el elemento raíz para el menú. Le damos clic al panel *Enlaces personalizados*, y usaremos el símbolo `#` para la *URL* y `Menú` para el texto del enlace. Luego haremos clic en el botón *Añadir al menú*. Tendremos que asegurarnos de que una vez que añadimos el elemento al menú, también le agreguemos la clase `hestia-mega-menu`, tal como se muestra en la siguiente imagen: ![Hestia - Mega menú - Raíz](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-raiz.png) #### Las columnas Ahora que tenemos establecido el elemento raíz, añadiremos las cuatro columnas a nuestro menú. Vamos a agregar cuatro elementos personalizados al menú. La URL debe ser simplemente `#` y el título debe ser cualquier término identificable (no olvidemos que este título se ve en el escritorio, pero **no aparece en el menú** del sitio, porque se trata de un contenedor). Aquí los nombraremos `col-1`, `col-2`, `col-3` y `col-4`. Aquí tendremos que agregar la clase `hestia-mm-col` en los cuatro elementos, tal como lo hicimos con el elemento raíz. ![Hestia - Mega menú - Clase de columna](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-clase-columna.png) Luego, transformarlos en subelementos debajo del elemento raíz *Menú*. Si lo hemos hecho correctamente, veremos algo como lo siguiente: ![Hestia - Mega menú - Columnas](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-columnas.png) #### Encabezados (opcional) Tendremos que tener en cuenta que los encabezados también pueden contener un enlace, aunque no es obligatorio, sino que pueden usarse solo como referencia. Si no queremos que actúen como enlaces, simplemente les asignaremos un símbolo `#`. Crearemos ahora cuatro elementos más en el menú, que funcionarán como encabezados: *Asientos*, *Mesas*,** ***Alacenas *y *Espejos*.** **No queremos que enlacen a ningún lado, así que usaremos `#` en el campo *URL*. Tendremos, eso sí, que asegurarnos de que la clase CSS sea `hestia-mm-heading` en cada uno de los elementos, y colocarlos dentro de las columnas previamente creadas como subelementos. El ejemplo en esta imagen: ![Hestia - Mega menú - Encabezados](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-encabezados.png) #### Separadores (opcional) Vamos a añadir separadores debajo de cada uno de los encabezados. Para tener en cuenta: estos elementos se pueden agregar en cualquier parte del menú y no solo debajo de los encabezados. Usar un separador es tan sencillo como añadir un enlace personalizado, usar `#` como *URL* y escribir divider en el campo *Texto del enlace*. ![Hestia - Mega menú - Separador](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-separador.png) #### Elementos básicos del menú Los elementos básicos del menú se pueden agregar como en cualquier otro menú. Lo único que necesitamos aquí es que sean subelementos de las columnas. Luego de añadir algunos elementos, esto es lo que veremos en el sitio como estructura final del menú: ![Hestia - Mega menú](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu.jpg) ![Hestia - Mega menú - Elementos](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-elementos.png) #### Embellecerlo con iconos Podemos usar el módulo *Menu Icons* que incluye el plugin **Orbit Fox** para hacer nuestros menús mucho más vistosos. ![Hestia - Mega menú con iconos](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-iconos.jpg) #### Descripciones Las descripciones de los enlaces también aparecen en el menú, así que agreguemos una para el siguiente ejemplo: ![Hestia - Mega menú con descripción](https://caribdis.net/wp-content/uploads/2018/04/hestia-megamenu-descripcion.jpg) (Recordar seleccionar la casilla *Descripción* de las *Cajas*, en *Opciones de pantalla*.) #### Otros usos Podemos tener más de una clase `hestia-mega-menu` en nuestro menú. Aunque va a ser un poco más difícil de manejar, por la cantidad de elementos. Un ejemplo útil de este caso sería estructurar un menú desplegable en columnas, como se muestra a continuación: ![Hestia - Dos mega menús](/images/hestia-megamenus.gif) En la imagen anterior, se aprecian los dos elementos con la clase `hestia-mega-menu`: *Clothing* y *Music*. **Tutorial original en inglés: [Hestia Basic Mega Menu Setup](https://docs.themeisle.com/article/704-hestia-basic-mega-menu-setup).**