Curso Wordpress + Divi para diseñadores
5 – Cabecera y navegación
Tu progreso en este curso...
Empezamos a definir el diseño de apartados concretos de nuestra web empezando por su cabecera y menús. Las opciones estándar de Divi nos dan un buen abanico de opciones para personalizar esta sección que debemos cuidar especialmente para facilitar el acceso de los visitantes a las páginas principales de nuestra web.
Como siempre te animo a jugar sin miedo con todas las opciones para buscar tus propios efectos y descubrir todas las posibilidades.
Apúntate al CURSO DE WORDPRESS + DIVI para acceder a los contenidos completos de esta lección y del resto de lecciones del curso.
SI ya estás apuntado accede AQUÍ con tu usuario y contraseña
ENLACES
En esta lección usamos por primera vez los diseños predefinidos de Divi. En este enlace puedes ver un ejemplo de todos los disponibles.
Demo de los diseños predefinidos de Divi
(pulsa en el menú sobre «Page Layouts» para ver todas las opciones)
Índice
Curso Contenido
9 Comentarios
Enviar comentario
Lo siento, debes estar conectado para publicar un comentario.
Jaume como puedo ver las medidas de cada elemento por ejemplo mi slide es de 1080 de ancho pero de alto no se cual es tengo fotos unas cortadas x la mitad en fin un caos, a la hora de diseñar un logo x ejemplo, trasteando también cambie el diseño en vertical pero ya no se como buscar las medidas. saludos
No hay unas medidas fijas para cada elemento. El logo debe tener unas medidas acordes al tamaño máximo que quieres mostrar en pantalla y su proporción depende también del diseño: en un menú horizontal se suele optar por logos cuadrados o apaisados mientras que con el menú en vertical se puede jugar más con logos más alargados. Un buen tamaño de referencia suele ser unos 300px de ancho para el menú en horizontal. Normalmente un logo no pasa de ese tamaño.
En sliders tampoco hay un tamaño fijo pero si es muy importante que todas las fotos de fondo tengan el mismo tamaño para evitar efectos raros. En un par de capítulos hablaremos de sliders en más detalle pero lo básico es eso: todas las fotos de fondo con el mismo tamaño o al menos la misma proporcion horizontal/vertical.
Hola Jaume, tengo una pregunta, debajo del menú aparece una raya fina que divide el menú del resto de la web, me gustaría quitarla pero no sé cómo hacerlo. No sé si me explico bien 🙂
Sí, perfectamente explicado :). Es una pequeña sombra que Divi pone por defecto en el menú para separarlo un poco del resto de la web. Si no quieres que aparezca se hace desaparecer con un poco de css que indica que no queremos sombra en la cabecera. Simplemente ve a Divi->Opciones del tema y desplázate hasta el final, donde verás un apartado llamado «CSS Personalizado». Dentro de ese recuadro pega el siguiente código y guarda los cambios:
#main-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
En realidad debería ser suficiente con la tercera línea pero para garantizar que se ve bien en cualquier navegador ponemos las tres. Eso quitará la sombra cuando la cabecera está en tamaño grande al entrar a la página. Cuando haces scroll y se hace pequeña volverá a aparecer. Si quieres quitarla también cuando la cabecera esté pequeña en lugar de lo anterior pega esto:
#main-header, #main-header.et-fixed-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
De esta manera indicamos que quite la sombra a la cabecera también cuando tiene la clase .et-fixed-header que indica que está fija arriba. Dedicaremos unos capítulos a ver lo esencial del css de Divi para que podáis usar algunos trucos sencillos vosotros mismos aunque no seáis expertos en css.
Muchas gracias, genial!!
Jaume, tengo otra pregunta, ¿es posible hacer que el logo no disminuya de tamaño al hacer scroll? Es decir que tenga un tamaño fijo siempre.
Gracias!!
Ya lo he averiguado Jaume, gracias!!
Me gustaria que el menu secundario no tuviera links a paginas dentro de la web sino el telefono y el correo electronico. Es posibeagregar solo una linea de informacion en lugar de links a paginas internas?
Gracias
Uyy… debo estar muy cansado. Se me habia pasado la parte del video donde lo mostrabas. No le hagas caso al comentario anterior.