Hola, y bienvenidos a Aprende WordPress. Hoy vamos a crear una página de inicio con un
tema de bloques. La página de inicio es el eje principal de tu sitio y es la cara
de una marca. Debe empujar a los visitantes a explorar más tu sitio, y
por supuesto captar su atención. En la sesión de hoy, vamos a crear una página de inicio estática,
crear una plantilla de encabezado y pie de página, eliminar el título del sitio y
construir la página de inicio usando el editor de bloques. El plan es recrear esta
página de inicio que ya he creado. Solo he utilizado bloques para crear esta página de inicio
de viajes, y he intentado crear oportunidades para atraer al lector
a profundizar en el sitio. Primero, he creado tres entradas. He añadido todos
los medios que utilizaré en mi sitio web. He creado páginas para mi menú de navegación,
He instalado el tema de bloques Twenty Twenty-Two, y ahora vamos a
los ajustes y hacemos clic en Lectura. El siguiente paso es establecer una página de inicio estática,
selecciona una página estática y establece tu Página de Inicio y tu página de Entradas, y luego haz clic en
Guardar cambios. Cuando volvamos a las páginas verás que ahora dice
Página de Entradas junto a El blog y Página de Inicio junto a la Página de Inicio. Cuando abramos nuestra página de inicio
veremos que tiene asignada la plantilla por defecto que
es la plantilla de página, y eso implica que compartirá la misma cabecera y pie de página que
otras páginas. Si quieres, puedes crear una plantilla única personalizada que sea
específica para la página de inicio haciendo clic en Nueva plantilla. Una vez que hayas establecido tu página de inicio estática,
ve a Apariencia y haz clic en el Editor. Se te abrirá
el Editor del sitio. Haz clic en Vista de Lista para visualizar la
estructura de la página, y a continuación vamos primero a
borrar el título de la página. Y luego hacemos clic en Contenido, recuerda que
aquí es donde se muestra el contenido de tu página. Voy a usar
patrones para reemplazar la cabecera actual. Una vez seleccionado el bloque padre,
haz clic en Reemplazar y luego busca el patrón que mejor se ajuste a tus
necesidades. Busco el patrón de cabecera con el logotipo del sitio en el centro
y los elementos de navegación a los lados. Luego añadiré los enlaces a mis páginas
así como el logo del sitio. Por último, quiero cambiar el color de fondo a blanco
y el color del texto y de los enlaces a negro. Ahora podemos seguir el mismo
proceso para el pie de página, selecciona el bloque Pie de página, haz clic en Reemplazar y busca
el patrón de pie de página correspondiente. Ya está. Ya hemos terminado de configurar nuestra plantilla, ahora podemos añadir
contenido a nuestro sitio. Así que haz clic en el icono de WordPress o en el icono del sitio
para volver al Escritorio. Abre la página de inicio y ya podemos empezar a
crear. Primero quiero añadir una imagen destacada así que voy a añadir
un patrón. Voy al directorio de patrones y escribo Hero banner. Una vez
encontrado el patrón que buscas, sólo tienes que copiarlo y pegar
en tu página, y luego empezar a modificarlo. Primero, sustituriré la
imagen de fondo, cambiaré la opacidad y luego empezaré a personalizar el contenido,
y en un santiamén, ya tendrás la imagen hero junto con su texto. A continuación,
insertaré un bloque de Galería y seleccionaré tres imágenes de mi Biblioteca de Medios.
Luego hago clic en Vista de Lista, selecciono el bloque de Galería, cambio
la alineación a ancho completo y el espaciado entre bloques a cero. Después del bloque de Galería
quiero añadir una oferta especial y para ello utilizaré un encabezado y un bloque Columnas.
Escribo la oferta especial, cambio la alienación a
centrada y pulso intro. Luego voy a añadir el bloque de Columnas con dos columnas.
Abriré la Vista de Lista para asegurarme que he selecconado el bloque padre. Cambiaré
la alienación del bloque a ancho completo. En la columna izquierda añadiré una
imagen, cambiaré el estilo para que sea redondeado, añadiré un pie de imagen, añadiré un
bloque de Botones que diga que obtendrás un 15% de descuento con esta oferta especial. Cambiaré
la alienación al centro, el radio a 100, añadiré un enlace y cambiaré el
fondo a negro; y luego haré exactamente lo mismo en la columna derecha. Antes de
continuar, me gustaría añadir algo de espacio con el bloque Espaciador.
Ahora voy a insertar un bloque de Bucle de Consulta para mostrar algunas de mis últimas
entradas. Así que vamos a añadir un encabezado y lo nombro Dónde ir a continuación, cambiaré
la alineación a ancho completo y la alienación del texto centrada. Después de pulsar
Intro, insertaré el bloque de Bucle de Consulta y haré clic en Iniciar en blanco. A continuación,
seleccionaré la opción de fecha y título de la imagen así como la vista de cuadrícula. Luego
cambiaré la alineación a ancho completo. Selecciona una de las imágenes y en tus
ajustes de la barra lateral, cambia la altura para asegurarte de que todas las imágenes son
del mismo tamaño y se ajustan a tus necesidades. Por último, haz clic en Vista de Lista
borra aquellos bloques que no consideres importantes. Por ejemplo,
el bloque de Paginación, el bloque de Sin resultados y el bloque de Fecha de publicación. Tras añadir
otro bloque Espaciador, continúo e inserto un bloque Fondo. Escogeré
una de las imágenes de mi Biblioteca de Medios, cambio la alienación a ancho completo y
a continuación la amplío,
y ajusto el selector de punto focal como corresponda. También cambiaré la
opacidad para que sea ligeramente más oscura. Y una vez hecho esto, podemos empezar a añadir
nuestro contenido. En este caso, voy a presentar a la gente algunos de los principales
destinos de viaje en 2022. Como habrás observado, puedes cambiar el tamaño de tu
texto en los ajustes de la barra lateral. A continuación añadiré un bloque de Botones. Cambiaré
el texto a negrita, el color del texto a negro y el color de fondo
a blanco. Luego haré que el radio sea 100 y añadiré un enlace. A continuación queremos
presentar a los visitantes a nuestro equipo, así que voy a añadir un bloque de Medios y Texto.
Después de cambiar la alineación a ancho completo, añadiremos una imagen en el
lado izquierdo y el texto y el botón adecuados a la derecha. Seguiremos
los mismos pasos o proceso que en anteriores ejemplos.
A continuación, me gustaría insertar un patrón de llamada a la acción así que haz clic en
Busca todo y luego ve a patrones. Voy a buscar un patrón de
botones y una vez que hagas clic en el patrón, se insertará en tu
página inmediatamente. Y ahora seguiré adelante y modificaré el contenido. Configurar
una subcripión a tu boletín de noticias es otra forma de relacionarte con tus
visitantes y contactar con ellos. Yo, literalmente sólo cambié el texto y
recuerda añadir un enlace URL a tu botón. Por último, voy a añadir un
bloque de Galería con seis imágenes.
Asegúrate de seleccionar el bloque padre en la Vista de Lista y cambia tu galería para
mostrar seis columnas. Luego, ve hacia abajo y establece el espaciado entre bloques en cero
y una vez que hayas cambiado la alineación a ancho completo, ya puedes empezar. Al
hacer clic en Vista previa en una pestaña nueva, podré ver mi página de inicio completada
que se ha creado sin plugins ni código.
Te deseo lo mejor cuando utilices un tema de bloques para crear tu propia página de inicio y tu sitio web.