Ahora que hemos construido los encabezados y pies de página,
ahora es el momento de que construyamos nuestra página de inicio.
Y la primera sección que vamos a
estar construyendo será el estandarte que puedes ver
aquí mismo tenemos la imagen de fondo
con los árboles tropicales,
palmeras y la playa.
Y luego por supuesto, los textos,
estamos viajando con aventura y luego
el botón que dice nuestro libro, tu viaje ahora.
Además, por supuesto, habrías notado que
el fondo básicamente se mezcla en el encabezado.
¿ Cómo hacemos eso?
Bueno, vamos a seguir adelante e ir
a editar la página de inicio.
Voy a decir Editar con Elementor.
Aquí mismo.
Se puede notar que tenemos básicamente dos columnas,
una en la parte superior, la que
contiene donde viajado significa aventura.
Y luego tendremos otra columna
que contiene el libro de botones, tu viaje.
Ahora, lo que simplemente voy a hacer aquí es esto.
Tenemos un texto de encabezado aquí,
pero por si acaso no ves nada,
simplemente arrastra el elemento de encabezado
y suéltalo dentro de tu caja aquí mismo.
Y simplemente voy a decir
dónde estamos viajes con aventura.
Ese es el eslabón principal para Todos sitio web.
Y voy a hacer esto en uno.
Pero vamos a hacer algunos cambios en la
propia topografía real.
Así que vamos al estilo.
Y para la tipografía aquí adentro,
voy a cambiar la transformación a mayúsculas.
Y también vamos a hacer el peso
900 solo para que sea un muy, muy grueso.
Y entonces el estilo lo hará cursiva también.
Eso es eso para el texto por ahora.
Vamos a seguir adelante ahora y añadir
la imagen de fondo para esta sección.
Así que voy a hacer clic en el botón editar sección justo aquí.
El ancho del contenido, vamos a mantener este cuadro,
pero luego el ancho aquí vamos a hacer 1240 pixeles.
Y nuestra lista de verificación aboga por la altura,
vamos a fijar a una altura mínima de
mil píxeles porque realmente queríamos mostrar
tanto de esa imagen de fondo como sea posible.
Así que déjame hacer esto mil.
Y ahora vamos a pasar al
estilo, fondo tipo clásico.
Y voy a elegir la imagen.
Y va a ser, sí me disculpo.
En realidad sí tienen dos separados aquí por ahora.
Voy a borrar a la mujer que van a usar,
vamos a usar la versión big out.
Este tiene apenas 859 píxeles de altura,
pero éste es 1274.
Así que vamos a hacer uso de éste.
Entonces voy a insertar eso.
Y ahí vas.
Ahora, déjame mostrarte algunos trucos con respecto al
posicionamiento de tu imagen de fondo.
Tienes diferentes tipos de
posiciones en centro, centro, centro
izquierdo, centro, derecha, etcétera.
Por lo que realmente depende de ti elegir
los ángulos de posición ideales para tu imagen de fondo.
El mío aquí que he elegido va a ser de fondo centro.
Aquí se llega a ver realmente las palmeras,
la playa también.
Por lo que es familiar es la mejor posición.
Y luego por el tamaño,
sí tienes varias opciones
aquí voy a ir con cava.
La diferencia entre Kovach y contener es
el espectáculo contenible toda la imagen.
contenido no siempre es la mejor opción
porque cuando se muestra toda la imagen,
si la imagen no es lo suficientemente grande para toda la pantalla,
comenzará a repetir el estudio.
Se puede ver en el fondo aquí como que
tiene la imagen repitiéndose de nuevo.
Pero con COVID, básicamente, básicamente estás
diciendo, Hey,
intenta asegurarte de que la imagen
cubra toda la pantalla.
Por eso he elegido están cubiertos aquí,
pero también va a
agregar una superposición de fondo. Así que echa un vistazo de nuevo esto.
Voy a volver a la
superposición. Voy a hacer click ahí.
Quiero, voy a hacer es que voy a ir al
tipo de fondo como siempre,
vamos a elegir una superposición negra.
Y entonces la opacidad aquí, en
realidad me he ido con el 0.23.
Por supuesto que puedes cambiar esto
si no quieres usar Zope y 23.
Pero ahora vamos a volver a los textos reales.
Volvamos aquí.
Y por supuesto, el color del texto,
vamos a hacer este blanco.
Y ahí está, está bien.
También vamos a cambiar el tamaño también.
Entonces voy a ir todo el camino a unos 120 pixeles.
Y de nuevo, esto es un enteramente subjetivo.
Puedes hacer el tuyo un poco más grande,
un poco más pequeño.
Pero también vamos a cambiar la alineación también.
Vamos al contenido. Lo vamos a
alinear con el centro.
Y ahí está, estamos viajando cumple eventual.
Y entonces lo que vamos a hacer ahora mismo sería
agregar nuestro botón.
Voy a arrastrar el botón aquí mismo,
Element y lo saltaré justo debajo del titular.
Por supuesto aquí mismo, vamos a decir,
reserve su viaje. Ahora.
Por supuesto, aquí es donde agregarías
el enlace a tal vez una página o
un sitio web XNOR como un dorado o Booking.com.
Si fuera siete, hacer eso y sólo podríamos decir
book kin dot com.
Sólo hagamos eso. Nosotros can.com sólo por la diversión de ella.
Y por supuesto que lo vamos a alinear con el centro.
El tamaño aquí será mediano.
Agreguemos un ícono también.
De acuerdo, entonces voy a elegir la biblioteca de iconos aquí.
Busquemos avión.
Voy a elegir abundancia, mi inserto de oso.
Tiene la opción de cambiar
la posición del icono a después o antes del texto.
Queremos mantener eso encendido antes.
Y luego el espaciado ícono.
También podrías agregar algo de espaciado entre
el ícono y la imagen.
Así que voy a ir con ayudas
sólo para darle un poco de espacio.
Ahora vamos a pasar al estilo.
Aquí es donde vamos a hacer algunos cambios importantes.
Entonces el primero que vamos a hacer
aquí sería la topografía,
los pesos de los textos.
Van a haber 600 y luego transformarse en mayúsculas.
Ahora porque este es un enlace,
notarías que existe la idea subrayada,
pero no queremos esa.
Así que voy a ir a Style, me voy,
voy a ir a la declaración y luego elegir ninguno.
No queremos ninguno de los textos en
ninguno de los textos subyacentes allí.
Muy bien, tipografía, color, texto, color aquí mismo.
Vamos a ir con el blanco.
¿ Está bien?
Entonces para el botón mismo aquí mismo,
tendrás el tipo de fondo
y vamos a hacer click ahí.
Y vamos a ir con el
color clásico aquí sería naranja.
Ahora vamos a establecer una frontera así como sólida.
Entonces lo que vamos a
hacer por el borde es que vamos a cambiar
el color del borde por el color naranja también.
Y luego agregaremos un radio de borde
solo para hacer los círculos,
los bordes apenas un poco circulares.
Vamos a ir con diez,
lo siento, vamos a ir con 12 pixeles aquí mismo.
Y eso es todo.
Voy a seguir adelante ahora y actualizaciones.
Y veamos cómo se ve.
Salgamos al salpicadero.
Vamos a hacer clic aquí, ir a la página de inicio,
y ahí está.
Entonces por viajado en su eventual entonces
por supuesto tenemos el botón
aquí mismo que enlazaría a nuestro booking.com.
Pero entonces, ¿cómo logramos esto?
Donde se tiene el fondo básicamente
mezclándose con la cabeza arriba Alemania.
Muy próximo video donde te mostraré cómo hacer eso.