Curso Wordpress 2021 | 13. Como EDITAR nuestra PÁGINA PRINCIPAL con GUTENBERG 2
Transcripción e instrucciones del video
Seguimos con la página de inicio. En esta lección del curso de WordPress añadimos debajo de la cabecera las típicas secciones alternas: texto a un lado e imagen al otro, y en la siguiente al revés.
Atajo: con la sesión iniciada, en la barra negra de arriba tienes Editar página estando en la propia página.
1. Primera sección
- Debajo de la cabecera, añade un contenedor a ancho completo con dos columnas.
- Izquierda: Encabezado (H2) + Párrafo. Derecha: Imagen.
- Selecciona el contenedor entero (no una columna) y ponle fondo negro.
- Título en rojo y texto en blanco (Ajustes de color). Sube el texto a unos 18 px: se lee mucho mejor.
2. Colores personalizados
Para que las columnas destaquen sobre el negro, ponles un gris muy oscuro con Color personalizado. Copia su código (por ejemplo #1B1B1B) y pégalo en la otra columna para que sea exactamente el mismo.
3. Quitar huecos con margin negativo
Si queda una franja blanca entre dos secciones, selecciona la de abajo y ponle un margin superior negativo (por ejemplo, -26 px) hasta que desaparezca. Ve probando de píxel en píxel.
4. Duplicar e invertir
- Selecciona la sección entera → menú de tres puntos → Duplicar.
- En la copia, arrastra cada bloque (con los seis puntitos) a la otra columna: texto a la derecha, imagen a la izquierda.
- Cambia textos e imagen (Reemplazar en la barra de la imagen). Al pegar texto nuevo se pierde el formato: vuelve a ponerle color y tamaño.
- Ajusta el padding de las columnas para que el texto no quede pegado arriba ni al borde.
5. Un título de sección
Entre la cabecera y las secciones, añade un contenedor de una columna con fondo negro y un encabezado centrado (por ejemplo, Diferencia entre drones). Dale padding arriba (90 px) y a la última sección padding abajo (80 px) para que quede equilibrado.
Una nota de SEO: lo ideal es un solo H1 por página (el de la cabecera). Los títulos de sección, mejor en H2.
En la siguiente lección: galería de imágenes y separadores con forma. ¿Dudas? En los comentarios.