Home »
Como crear Logotipo y el Menú Principal con DIVI
En la entrada anterior Primer contacto con DIVI hemos visto como el tema DIVI ya trae una galería de diseños precargada con la que podemos empezar a trabajar. Comenzaremos viendo como crear un Logotipo y el Menu Principal en DIVI
Crearemos como ejemplo una web para una tienda de mascotas del tipo sitio web de una sola página, e iremos utilizando y adaptando los módulos a nuestras necesidades. Yo me he buscado unas imágenes en un banco de fotos gratuitas, como Pixabay, una la he adaptado como logotipo, y otra la pondré como fondo en el primer módulo.
Para el menú principal de este sitio web crearemos 4 secciones, Inicio, Quienes somos, Servicios y Contacto.
Lo primero que haremos será crear el menú después veremos las distintas posibilidades de visualizacion del mismo.
Como la web es del tipo una sola página, lo que hará nuestro menú será recorrer las distintas secciones de la misma. Cada módulo de DIVI tendrá un identificador y el enlace del menú nos llevará hasta esa ID.
Dentro del menú de WordPress, seleccionamos Apariencia -> Menús
Creamos un menú nuevo, por ejemplo MenuPrincipal
Vamos a crear los enlaces en la pestaña, Enlaces personalizados.
Como vemos en la imagen, en la posición URL (1) pondremos lo el nombre del identificador del módulo al que queremos ir, precedido de (/#), en este caso (/#Contacto), donde Contacto será el nombre del Identificador del módulo de DIVI correspondiente (lo veremos más adelante)
En el campo Texto del enlace (2) pondremos el texto que queremos que aparezca en el menú, en este caso Contacto.
Pulsamos en Añadir al menú (3) y nos aparecerá en la estructura del menú. Esto lo hacemos con los 4 enlaces.
Inicio ->/#Inicio – Quienes Somos->/#Quienes – Servicios->/#Servicios y Contacto->/#Contacto
Si estamos utilizando un servidor local, tendremos que especificarle también el nombre de la carpeta donde tenemos guardado el proyecto (Inicio -> /nombre-carpeta-proyecto/#inicio)
Una vez hecho esto podemos pulsar en Guardar Menú (4). No nos olvidemos de seleccionar el check Menú Principal en Ubicaciones del Tema.
Ahora si actualizamos nuestra web tenemos un nuevo menú, aunque todavía con el logo de DIVI.
Procedemos a cambiar el Logotipo
En el menú de WordPress accedemos a DIVI -> Opciones del tema y en el apartado Logo, pulsamos en el botón subir e introducimos el archivo que contiene nuestro Logotipo. Una vez seleccionado, nos desplazamos hasta la parte inferior de la página y pulsamos en Guardar cambios.
Actualizamos nuestra página y vemos ya como nuestro logotipo aparece en la barra del Menú.
En mi caso y para el ejemplo, he decidido poner un logotipo solo con el nombre de la tienda, ya que en mi opinión quedan bastante elegantes
En la próxima entrada veremos las distintas opciones que tenemos para esta barra de menú o navegación (Vertical, horizontal, a pantalla completa, etc.)
