Muy bien, así que echemos un vistazo a hacer que
la página principal o responda.
Y para la mayor parte,
en realidad no es tan malo.
Esto es para la vista de la tableta.
Obviamente podemos hacer el titular un poco más pequeño.
Hacer el plátano también un poco más corto en altura.
Aquí mismo.
Por supuesto, podemos añadir algún relleno a la pelota fuera a
sección de viaje así como
enseñable para que mejor proceda sección también.
Pero creo que eso es todo lo que tenemos que hacer porque
el resto es en realidad bastante bueno.
La sección única de diseño de canales se ve bien.
La galería está bien.
Visitas, nuestra sección de blog está bien.
No empaqueta reseñas, todo bien.
No obstante, para la vista móvil,
que es lo que hemos llegado aquí, obviamente,
vamos a tener que hacer el texto mucho, mucho,
mucho más pequeño como se puede ver.
También agrega relleno aquí también para la sección de viajes.
Y tenemos que hacer algo sobre el hecho
que sí tenemos
las dos imágenes para
la segunda sección alineando
uno al lado del otro idealmente debería ser,
me encantará viajar.
Entonces esta imagen y luego nuestros hijos, los
mejores lugares, y luego la imagen de esta montaña.
Entonces vamos a tener que hacer algo al respecto también.
Aparte de eso, el resto
de la página se ve bastante bien a considerar.
La galería es ahora una sola fila, lo cual está bien.
El apartado de blog también es una sola fila también.
Quiero unas 22 filas, lo siento.
Entonces no empaqueta reseñas todo ahora y
la propia columna separada y luego también produce como
puedes ver, que en.
Todos. Correcto, así que vamos a seguir adelante y empezar
a hacer los cambios.
Entonces editemos con Elementor.
Vamos a manejar el banner primero porque ese es el
que es el principal Ese es el tema principal.
Muy bien. Tabletas responsivas.
¿ Qué tenemos aquí?
Vamos a seguir adelante ahora y editar el texto.
Y el texto era de unos 120 píxeles.
Como se puede ver.
Vamos a tener dos grandes romper esto abajo,
sólo un poco mucho más pequeño.
Entonces digamos 88 píxeles de ancho.
Pero no olvides que nos fijamos una altura para la sección.
Pasemos a esta sección ahora mismo.
Tenemos la altura mínima aquí.
Vamos a reducir esto tanto como podamos.
No te preocupes por el texto que se superpone
al encabezado por ahora.
Pero intentemos darle una altura razonable
para la mesa.
Y creo que 519, mi bebé,
demasiado pequeño, digamos setecientos.
Setecientos parece bastante bien.
Entonces a partir de aquí, no olvides que
también le damos márgenes negativos.
Ahora que hemos reducido el tamaño de cien,
diez cientos a 700 mujeres también acuden también
a Advanced invite aquí.
No se deje engañar por el hecho de que no se ve
nada dentro de las casillas de margen.
En realidad es heredar los márgenes
de la vista de escritorio.
Entonces aquí, sigamos adelante ahora y tratemos de reducir esto.
Oh, lo siento, me olvidé de desvincular.
Hagamos esto 10.
Muy bien. Voy a seguir subiendo otra vez.
Esto debería ser sobre, déjame solo darle
150 menos, vale, no puedo hacer eso.
Déjame probar esto.
Menos 150.
¿ De acuerdo? Creo que eso es un poco demasiado.
Vamos a bajar.
De acuerdo, por lo que debería ser
alrededor de 123 altavoz de ocio
uno veinticinco, veinticinco píxeles.
Ahora para el texto en sí o el encabezado,
podríamos hacer esto un poco más pequeño otra vez.
Y eso es todo.
¿ Qué opinas?
Creo que esto está bien. 80 pixeles para el encabezado.
Reduce la altura de esta sección a 700 píxeles,
reduce el margen negativo también.
Y creo que esto está bien, aunque ten cuidado,
¿ves ahora mismo que si ampliamos
la tabla al tamaño máximo de pantalla,
puedes ver que ahora tenemos el espacio en blanco apareciendo.
Entonces eso debería decirnos ahora mismo
que todo bien, espera un segundo.
Tenemos que aumentar las imaginas negativas, en realidad,
eso es otra cosa que deberías ser un acomodado.
Siempre que estés aplicando
márgenes negativos y modo de respuesta,
asegúrate de que estás aplicando márgenes negativos
al mayor tamaño de pantalla posible.
Esta es la mayor concisa posible para
la vista inclinada en 1024 por 878,
vamos a aumentar,
o más bien en este caso reducir el margen negativo.
Porque cuando eres negativo estamos
reduciendo eso. Es todo 158.
Justo sobre lo hace Es, así que ahora,
si bajamos esto al tamaño más pequeño para tablet,
aún no vamos a ver ningún espacio en blanco.
Y eso es todo.
Ok, creo que esto está bien para la tableta.
Ahora hagamos algunos cambios en la
primera o la segunda sección.
Y esto da ahora mismo, ¿qué tenemos que hacer?
Para las tabletas? Podemos añadir algún relleno.
Muy bien, vamos a entrar aquí y es sección.
Vayamos a Avanzado.
Y justo aquí, vamos a añadir un poco de relleno.
Podemos ir a los 25 pixeles habituales y
luego un efecto pixeles para la parte inferior también.
Vamos a enfriar aquí abajo.
Haremos exactamente lo mismo aquí también.
Te voy a mostrar algo realmente genial.
25 píxeles desde la parte superior y
luego 25 píxeles de la parte inferior también.
Yo, ahora, si miras esto,
te darás cuenta de que en realidad no se ve tan genial.
Quiero decir, tienes una imagen aquí mismo bola,
los textos, la columna de textos es un poco demasiado grande.
Es un poco demasiado alto.
Impresionante va con la segunda sección también.
Entonces, ¿qué podemos hacer exactamente?
Lo más simple que podríamos hacer sería simplemente hacer
que cada columna vaya un 100% de ancho.
Entonces en lugar de tener dos columnas tendrá
que venir lado a lado.
Tendremos dos columnas una encima de la otra.
Entonces como ejemplo, aquí mismo,
si le di esta primera columna aquí,
sólo vamos a darle a este cien
, cien.
Y luego vamos a dar esta columna y también 100.
Y ahí está.
En este momento, aunque nos expandamos al
tamaño más grande posible en una tableta,
creo que se ve bien.
Esto se ve bien en una punta,
pero solo asegúrate de que las imágenes sean lo suficientemente grandes.
Un cambio solo tendría que hacer
aquí sería agregar
algún relleno a este botón Saber más.
Voy a hacer click ahí, ir al
patrón avanzado y los budistas suman en la parte inferior.
Agregaremos un poco de relleno aquí.
Permítanme decir que 25 píxeles podrían ser un poco demasiado.
En este caso, tal vez 15 pixeles.
15 píxeles está bien.
Y ahí está.
De acuerdo, hagamos exactamente el mismo síntoma del tema aquí también.
Voy a hacer click en esta columna justo aquí.
El goto, el ancho de columna.
Voy a darle un 100.
Y luego la segunda columna aquí también, 100.
Vale, y luego echa un vistazo a esto.
Idealmente queremos tener esta columna justo
aquí encima de esta columna.
¿ Cómo hacemos eso?
Bueno, lo vamos a hacer es simplemente ir a esta sección,
sosteniendo estas dos columnas,
ir a sección, ir por aquí a Avanzado.
Cualquier aquí mismo en el sensible.
Vas a ver esta opción para revertir las columnas.
Vamos a hacer eso en la tableta.
Vamos a hacer eso y móvil también.
Ahora se puede ver que el niño,
el mejor versus columna está ahora en lo alto de la montaña.
Y así es exactamente cómo hacer eso.
Sólo voy a seguir adelante y añadir un poco de relleno
al botón del propietario aquí.
Acolgado en la parte inferior, 2515 pixeles.
Creo que fue un M&A está bien,
así que volvamos arriba.
Desplázate hacia abajo.
K.
Tenemos un montón de espacios.
Todo bien.
Ok, luce bien, luce bien.
Ahora vamos a tratar de reducir el tamaño al
más pequeño y ver si hay algo
que tenemos que hacer aquí. Se ve bien.
Se ve perfectamente bien.
Y ahí está. Ok.
Eso es todo para la vista de la tableta.
¿ Qué pasa con la vista móvil?
Cambiemos al móvil.
Muy bien, así que obviamente el plátano de aquí dentro,
tendremos que arreglar ese.
Bueno, sólo estoy rápidamente desplazarse hacia abajo aquí y
ver el resto de la página.
El resto de la página se ve realmente bastante bien.
Sí, esto se ve bien.
Ahora todo está en una sola columna en
que hemos usado en una columna,
y luego la página Contacto.
Entonces todo lo que tenemos que hacer ahora mismo seríamos
para manejar el estandarte.
Entonces hagamos esto. Voy a desplazarse hasta aquí.
Pasemos a la sección.
Muy bien, lo primero que vamos a hacer ahora mismo
es por las alturas.
Es una altura mínima, 700 pixeles.
Esto es por supuesto heredado de la vista de la tableta.
Veamos si en realidad podemos
aumentar un poco el tamaño.
En realidad.
Creo que 879, Tratemos de conseguir algo un poco,
incluso como 870 pixeles tal vez.
Tratemos de aumentar un poco el tamaño al
tamaño más grande para la vista móvil.
Ahora notarías que hay
un poquito demasiado de un margen negativo
porque se puede ver la línea azul y se puede
ver que el logo se muestra arriba.
Entonces lo que vamos a tener que hacer
este momento es ir a Avanzado.
Y luego para los márgenes negativos,
intentemos, en realidad,
no lo necesitamos en ningún margen negativo.
En realidad iba a hacer que sea 0.
Sí, sólo hagámoslo 0 ya que tenemos
un fondo de apagón de todos modos.
Entonces, ¿qué hace McDonald's 0?
Esto es para móvil.
Muy bien, entonces desde aquí,
vamos a reducir las alturas.
Vamos a reducir la altura de la página ahora del
banner más bien algo razonable.
Veamos. Creo que 535. ¿Qué pasa con el 530?
Creo que esto está bien.
cerro de cinco tercios se ve bien. Desplázate hacia abajo.
Ok. Sí.
Creo que estarías bien. Eso está haciendo son muy pequeños.
Y ver.
De acuerdo, entonces los textos pueden llegar a ser,
es un poco demasiado grande en realidad.
Entonces hagamos esto. Voy a
volver a editar la epigrafía de encabezamiento.
Vamos a hacer es que vamos a
tratar de hacer esto lo más pequeño que podamos.
Y ahora si ampliamos la más grande para la vista móvil,
lo que tienes aquí es, vale,
así que esto nos lleva a una nueva discusión.
El silicio está aquí mismo en el tamaño más grande para el móvil,
el Texas, sería demasiado pequeño.
Si tratamos de aumentar el tamaño aquí,
se ve bien en el tamaño de pantalla más alto
posible para el móvil.
El tema que conozco es que si reducimos el tamaño de la pantalla por lo
el tamaño más pequeño posible para móvil,
ahora que el texto es un poco demasiado grande,
lo que puedes hacer en este tipo de escenarios es cambiar
el estilo unidad de tamaño desde píxeles
hasta el puerto de vista nominal revisar el VW u opción aquí,
el VW es el ancho de la ventanilla.
Lo que intentaremos hacer es intentar ajustar el tamaño del
texto en función del ancho del tamaño de la pantalla.
Así que echa un vistazo a esto.
Voy a ir a cambiar ahora a VW.
Y tratemos de ir con una talla de diez.
Por lo más alto.
Este es el tamaño más alto,
tamaño de pantalla para móvil.
Y luego si reducimos el tamaño al más pequeño,
se puede ver que el texto en realidad también se está reduciendo.
A medida que reducimos el tamaño de la pantalla.
Ese es un consejo que te puedo dar en este momento,
simplemente cambia a VW en lugar
pixeles o K. Así que tal vez,
tal vez una pequeña cosa que podríamos hacer.
Una cosa final que podríamos volver a hacer será
reducir la altura un poco más.
Digamos 450 píxeles.
Ese debería ser el último cambio.
Tratemos de hacer que éste sea más pequeño.
Y ahí vas.
Ok, creo que esto es, esto está bien.
Esto está bien en este punto.
Muy bien.
Ahí vas.
Vamos a desplazar hacia abajo,
ver qué más podemos hacer.
Eso es más o menos.
Creo que estamos bien.
Permítanme simplemente hacer este realmente pequeño.
Evidencia, una columna.
Y ahí está,
vale, Una última cosa,
lo último que podríamos hacer es
quizás reducir el tamaño
del botón aquí solo un poquito.
Así que vamos a seguir adelante y editar el fondo
justo aquí vamos a ir al estilo.
En realidad, va a ir al estilo.
Entonces para la tipografía aquí mismo,
vamos rápido en su mezcla de tamaño.
Por supuesto, esto está configurado para móvil,
y luego simplemente vamos a seguir adelante y tal vez hacer éste.
Veamos.
Fallas y píxeles, tal vez 14 píxeles,
o ¿qué más podemos cambiar?
Por supuesto podemos cambiar también el radio fronterizo.
Bajemos este a,
digamos cinco píxeles.
Y ahí está.
Vale, ahora aquí podríamos tratar de hacer el tamaño demasiado pequeño.
En realidad no han probado esto.
No estoy seguro de si esto afectaría la vista de la tableta.
Se va a afectar la vista de la tableta e
incluso la vista de escritorio es siempre será pequeña.
Esto depende de usted podría decidir simplemente hacer,
hacer pequeño el botón.
En todos los tres son tamaños de pantalla.
O simplemente podrías ir con un medio.
Creo que el medio va a estar bien para móvil.
Muy bien.
Eso es todo.
Voy a seguir adelante ahora actualizaciones.
Y ahí está.
Hemos construido con éxito en
un sensible nuestra página de inicio.
Gracias por mirarte y por supuesto te veré
en la próxima clase.