Curso Wordpress + Divi para diseñadores
8 – Jugando con menús, títulos y sliders
Tu progreso en este curso...
En esta lección no aprendemos a manejar nuevos elementos, pero vamos a ver como jugando con las opciones de los que ya conocemos podemos conseguir resultados muy distintos: crearemos un slider en el que lo que cambia es el color de la foto y no la propia foto, usaremos el efecto de paralaje para causar la impresión de una foto que cambia progresivamente a otra al hacer scroll y jugaremos con la transparencia de los menús por si queréis dejar vuestro menú visible pero sin tapar del todo vuestra imagen o slider de inicio.
En la siguiente lección seguimos viendo nuevos módulos para nuestra página dejando ya la sección de cabecera y entrando en el contenido
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
Índice
Curso Contenido
10 Comentarios
Enviar comentario
Lo siento, debes estar conectado para publicar un comentario.
Hola de nuevo Jaume,
Estoy viendo que el menú no me aparece en móviles y tablets, también en algunos ordenadores, es decir aparecen las tres rayitas pero no el menú completo y a mí me gustaría que apareciese porque veo que despista bastante. ¿Esto es así por defecto o le he dado yo a alguna opción sin darme cuenta? ¿Y se podría modificar?
Muchas gracias.
Carla
Hola Carla!
el comportamiento del menú es lo que casi ha quedado como un estándar desde que se ha popularizado el diseño responsive. A partir de cierto ancho hacia abajo como el menú ya es fácil que se desencaje, ocupe varias líneas o ocupe buena parte de la pantalla ocultando contenido se pliega y se despliega con el icono de menú que son esas tres rayitas. Si lo pruebas en otras webs con diseño adaptado a móviles verás que en casi todas funciona así y quien suele navegar desde el móvil o tablet ya está habituado a esta forma de funcionar de loe menús.
En teoría con reglas de css y puede que algo de javascript se debe poder desactivar ese comportamiento, pero no se decirte ahora cómo porque hasta ahora no lo hemos hecho ni nos lo ha solicitado ningún cliente. Podemos consultarlo con los autores del theme si quieres pero seguramente no quedará bien el menú completo en pantallas estrechas al ocupar varias líneas, en móviles casi se comería toda la pantalla y habría que validar que google siga viendo la web como adaptada a móviles para que no te penalice por ello.
Lo que si que he visto es que debes haber puesto color blando para las rayitas del menú en tu web porque no son visibles. En breve explicaremos también cómo puedes personalizar la animación de esas rayitas al pulsar sobre ellas para desplegar el menú.
Ya me dices!!
¡¡Hola!!
La verdad es que sí que he visto lo de las tres rayitas en todas las webs y sí que creo que queda mejor así para temas de móviles y tablets, creo que lo que me despistó es que efectivamente he debido cambiar sin darme cuenta el color de las rayas y no se ven desde los móviles. ¿Dónde se cambia de color? Me imagino que en Personalizar en el menú de cabecera, ¿es así?
Y ya que estamos, para que el logo no se vea tan pequeño, no cambie de tamaño, al disminuir la ventana, y de nuevo en móviles y tablets, ¿cómo se haría? Estoy viendo vuestro logo y apenas cambia al reducir el tamaño de la ventana, en cambio a mí se me hace enano y si amplio mucho la pantalla se me ve enorme y el menú se me ve en varias líneas.
¡¡Muchas gracias por vuestra ayuda de verdad que me está viniendo genial!!
Carla
Hola de nuevo Jaume, tengo más dudas y consultas, esto es un no parar…
El problema que me estoy encontrando y que no sé cómo resolver es que el cambio de la maquetación entre ordenador y dispositivos móviles es muy grande. A parte de lo del logo y el menú que te menciono arriba, lo que no me gusta nada es que me cambia la manera en que estoy diseñando las páginas cuando se ven desde móvil o tablet. Te pongo un ejemplo, para hablar de mi trabajo he creado una página que se llama «Sesiones» y donde aparecen muchas fotografías como muestra, el problema es que lo había diseñado en columnas de 4 y tres filas y todas las fotos pegadas entre sí como formando un mural o collage, pero en dispositivos móviles pierdo totalmente ese diseño y aparecen en una sola columna, una seguida detrás de otra, y se pierde lo del mural.
También me ocurre que tengo un par de textos con un fondo de relleno personalizado que en móviles no se respeta por lo que el texto queda dentro del fondo sin aire, vamos sin margenes ninguno. Le he dado a la opción de respetar márgenes en dispositivos móviles, pero no cambia nada de nada, así que estoy un poco desesperada. La página vista en mi ordenador me gusta, pero vista en móviles y demás se transforma en otra cosa, que entiendo que se tiene que adaptar y que no es lo mismo, pero me gustaría que los cambios no fuesen tan grandes.
Muchas gracias de nuevo por todo.
Carla
¡Hola!
Por fin conseguí cambiar el color de las tres rayas y ya se ve, así que perfecto. Lo único que no consigo encontrar es el tema de que el logo no cambie tanto de tamaño de pantalla de ordenador a dispositivos móviles, o también cuando reduzco el tamaño de la ventana del navegador. Obviamente sé que debe disminuir ya que el tamaño de mi logo es grande, pero me gustaría que el tamaño al disminuir no fuese tan tan pequeño. ¿Hay manera de lograrlo?
El tema de los márgenes también he conseguido controlarlo por fin, cuando me di cuenta que había una manera de personalizar el margen ya fuese para ordenador, tablet y smartphone. La verdad que está genial esa opción.
Por otra parte, lo que sigue sin gustarme es que la manera de maquetar ciertas cosas cambie tanto en dispositivos móviles, lo que no me gusta es que lo diseño para que aparezcan filas de dos o tres columnas y en el móvil se convierte directamente en una. No sé si con CSS eso se podrá modificar…
¡Gracias!
Carla
Hola!
disculpa que no te respondiera al tema de las rayitas, tuvimos un par de problemas urgentes que resolver y no dio tiempo. Te respondo a ambas preguntas:
-Logo: Para que el logo sea más grande hay que hacer que el menú que queda fijo sea más alto. Al hacerlo el logo tiene más espacio y se adapta automáticamente a esa altura. Le puedes aumentar la altura en Cabecera y Navegación->Ajustes de navegación fija->menu fijo altura
-Columnas: Esto es parte de lo que ha quedado como un estándar del diseño responsive. Para permitir la lectura sin tener que ampliar se mantiene el tamaño de letra al disminuir el ancho de pantalla, no se hace más pequeña como ocurre cuando no es responsive, y esto implica que se reduce el número de columnas en diseños multicolumna. Si no se hiciera quedaría un diseño muy «raro» con columnas muy alargadas y solo un par de palabras por fila.
Divi permite mucho más juego que el resto de themes en este aspecto, ya que en cada apartado se puede indicar si quieres que se vea en escritorio, tablet y móvil. Esto te da opción de ocultar apartados que no sean esenciales en móviles para facilitar la lectura, cambiar unos apartados por otros si no te gusta como queda algo en móvil y quieres rediseñarlo para pantallas pequeñas, etc.
Muchas gracias, después de darle vueltas al diseño finalmente lo tengo. Gracias de nuevo por la ayuda, estoy a punto de acabar la página web, pero me gustaría poner el icono de instagram en el pie de página y creo que eso no lo puedo hacer directamente yo, ¿o tal vez sí? Si me podéis echar una mano con esto os lo agradecería mucho.
Saludos.
Carla
Lo explicaremos en una lección pronto. Implica tocar un poco del código y por eso de momento no lo hemos explicado, esperando a ver si lo hacían un poco más sencillo. Si en la versión 3 que sale en unos días aun no se puede hacer desde el panel de control publicaremos una lección con lo que se debe modificar para añadir los iconos de redes sociales que quieras. De momento si nos envías el enlace a tu instagram por email te lo añadimos nosotros sin problema.
Hola. Envie esta pregunta hace un rato, pero no la veo publicada, asi que, por si acaso, voy a hacerla de nuevo.
Tomando en cuenta que no siempre nos conviene agregar un texto a la slider pero siempre es importante tener control de lo que estamos haciendo… es posible agregar un codigo css en el que podamos facilmente indicar el alto del slider en pixels o porcentaje?
Gracias
Para controlar por completo el slider y si no vas a usar textos es más sencillo usar un plugin externo ya que este slider está pensado para optimizar la visualización del texto. En la lección sobre el Módulo de Código puedes ver como usar Master Slider que te permite hacer sliders de fotografías de muchos tipos y jugar con su altura.