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 cargando un Logotipo y el Menu Principal

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

img.pantalla-menu

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.

Menu logo 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

Menu logo petshop

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

El mejor tema que se ha creado para Wordpress

Divi WordPress Theme

Web Hosting

¡Si quieres puedes compartirlo!

Uso de cookies

Hola, usamos cookies y nos obligan a indicártelo. Si sigues navegando es porque estás de acuerdo con nuestra política de cookies plugin cookies

ACEPTAR
Aviso de cookies

Share This

Share this post with your friends!