Guía de configuración de la página de inicio u homepage - ImmuneWP

Guía de configuración de la página de inicio u homepage

Índice

    Immune Theme® cuenta con una sección específica para la creación de páginas de inicio dentro de sus ajustes. Gracias a los ajustes específicos de página de inicio (Immune > Página de inicio) y a las Secciones Home dentro de Gutenberg, podrás crear páginas de inicio atractivas sin necesidad de sobrecargar tu web con pesados editores visuales.

    El funcionamiento es muy sencillo:

    • Personaliza todos los elementos que quieras incluir en la homepage desde Immune > Página de inicio. Los elementos son: banner con titular y botón incluidos, cuadrículas de iconos o categorías, listados de artículos o últimas entradas y una sección de equipo o sobre mi.
    • Una vez personalizadas, incluye estas secciones directamente en tu página de inicio mediante el bloque multifunción de Gutenberg Secciones Home.

    A continuación vamos a ver, paso a paso, cómo crear una página de inicio con todo el potencial que te brinda Immune Theme®.

    Videotutorial paso a paso

    Cómo crear una página y asignarla como homepage

    Comenzaremos creando una nueva página en Páginas > Añadir nueva y la titularemos: homepage, página de inicio o algo similar. Una vez esté creada, ve a Ajustes > Lectura y en la opción Tu página de inicio muestra marca una página estática. A continuación, selecciona en el desplegable (Portada) la página que has creado para asignarla como página de inicio de tu web. No olvides guardar los cambios.

    Cómo configurar los ajustes generales de página de inicio

    Nuestra recomendación es que solo personalices aquellos elementos que vayas a utilizar en tu homepage.

    Ve a Immune > Página de inicio y configura los diferentes elementos que incluirás más adelante dentro de la homepage.

    Banner

    Este primer elemento consiste en una imagen de cabecera con un título, una descripción y un botón. Muy útil para mostrar de una manera atractiva la propuesta de valor de tu web e incluso captar suscriptores, si lo deseas.

    Encontrarás al inicio una vista previa del banner, así podrás ir viendo en tiempo real cómo quedan los cambios que vas aplicando.

    Muestra del banner con título, descripción y botón en una homepage

    Para ajustarlo tendrás que definir:

    • Fondo: puedes subir una foto de fondo para el banner (el tamaño sugerido es de 1920x700px con un peso máximo de 100kb) clicando en seleccionar imagen y subirla o seleccionarla de tu biblioteca de medios. Si quieres que tenga además una capa de color u opacidad por encima, podrás ajustarla en color de fondo y marcar la intensidad de la capa en opacidad de fondo. Si no quieres que haya una capa de color, marca una opacidad valor 0 (cero). Si por el contrario quieres ocultar la imagen y que solo se vea el color marca una opacidad valor 100.
    • Título: escribe en la primera casilla el título que quieres que muestre el banner y ajusta a continuación el color del texto y su tamaño.
    • Descripción: escribe en la primera casilla la descripción que quieres que muestre el banner y ajusta a continuación el color del texto y su tamaño.
    • Botón: personaliza en este apartado el botón que aparece dentro del banner. Escribe dentro de la primera casilla la llamada a la acción, es decir, el texto que figura dentro del botón (deja en blanco esta casilla si no quieres que se muestre el botón). A continuación ajusta el color del texto, el tamaño del texto, el color de fondo del botón y el padding. Por último, indica en URL del botón a qué dirección quieres dirigir al usuario que clique en el botón.

    Recuerda que puedes previsualizar tus cambios en la Vista previa y no olvides hacer clic en el botón final de Guardar cambios. Estos ajustes son los que se mostrarán en la página cuando insertes una sección home y selecciones el Banner.

    Cuadrícula de iconos

    Este elemento consiste en una cuadrícula de iconos informativos (icono con título y un texto breve de descripción) que puedes incluir en la homepage. Encontrarás al inicio una vista previa de la cuadrícula, así podrás ir viendo en tiempo real cómo quedan los cambios que vas aplicando.

    Muestra de la cuadrícula de iconos en una homepage

    Para ajustarlo tendrás que definir primero el aspecto general de la cuadrícula y posteriormente cada elemento de la misma:

    • Selecciona, en el desplegable, qué tipo de cuadrícula quieres que se muestre (filas por columnas). A continuación determina el ajuste general del color y el tamaño que tendrán los iconos, los títulos de cada uno y el texto descriptivo.
    • En el siguiente apartado podrás ajustar individualmente cada elemento de la cuadrícula, seleccionando el icono (en el menú desplegable) e indicando su título y el texto descriptivo.

    Recuerda que puedes previsualizar tus cambios en la Vista previa y no olvides hacer clic en el botón final de Guardar cambios. Estos ajustes son los que se mostrarán en la página cuando insertes una sección home y selecciones la cuadrícula de iconos.

    Cuadrícula de categorías

    Este elemento consiste en una cuadrícula para mostrar las categorías de las entradas de tu web. En esta cuadrícula, cada categoría cuenta con un icono, el título de la categoría, sus subcategorías y un enlace de ver más. Todos los elementos de cada categoría contarán, por defecto, con su enlace pero si quieres añadir alguno más podrás hacerlo a través del enlace adicional Ver más.

    Encontrarás al inicio una vista previa de la cuadrícula, así podrás ir viendo en tiempo real cómo quedan los cambios que vas aplicando.

    Muestra de la cuadrícula de categorías en una homepage

    Para ajustarlo tendrás que definir primero el aspecto general de la cuadrícula y posteriormente cada elemento de la misma:

    • Selecciona, en el desplegable, qué tipo de cuadrícula quieres que se muestre (filas por columnas). A continuación determina el ajuste general del color y el tamaño que tendrá el icono, título de las categorías y de las subcategorías (en este último apartado puedes indicar también el número máximo de subcategorías a mostrar). Por último, ajusta también el color que tendrán los enlaces de Ver más.
    • En el siguiente apartado podrás ajustar individualmente cada categoría de la cuadrícula, seleccionando el icono (en el menú desplegable), qué categoría se muestra y definiendo el botón de Ver más, en caso de que quieras añadirlo (si no quieres añadirlo, deja esta casilla en blanco).

    Recuerda que puedes previsualizar tus cambios en la Vista previa y no olvides hacer clic en el botón final de Guardar cambios. Estos ajustes son los que se mostrarán en la página cuando insertes una sección home y selecciones la cuadrícula de categorías.

    Artículos 1, 2 y 3

    Estos tres elementos o bloques te permitirán configurar y personalizar 3 tipos diferentes de grid, post list o parrillas con los que mostrar y enlazar contenidos de tu página web en la homepage como, por ejemplo, últimas entradas o páginas. Sus ajustes son iguales, así que vamos a ver a continuación cómo personalizar uno de ellos pero recuerda que podrás crear hasta 3 tipos diferentes de parrillas de contenidos.

    Cada bloque de artículos mostrará la imagen destacada y el título de la entrada, un pequeño extracto de su contenido y un botón de ver más.

    Muestra de la sección artículos dentro de la homepage

    Para ajustarlo tendrás que definir:

    • General: qué modelo quieres que adopte el bloque. Puedes seleccionar entre tres modelos diferentes (ten en cuenta que el último modelo está definido para mostrar por defecto 4 entradas). Además podrás ir viendo la previsualización en tiempo real en la Vista previa. A continuación selecciona en el desplegable si quieres que este bloque muestre las últimas entradas de tu blog (en este caso deberás indicar de qué categoría), entradas específicas (en este caso deberás indicar qué entradas mostrar), últimas páginas de tu blog o páginas específicas (en este caso deberás indicar qué páginas mostrar),
    • Título: ajusta el color y tamaño que tendrá el título de cada entrada dentro del bloque.
    • Resumen: ajusta el color y tamaño del texto que tendrá el extracto o resumen de cada entrada dentro del bloque. Además deberás indicar su longitud (número de caracteres).
    • Botón: indica dentro de la casilla qué texto quieres que indique el botón de cada entrada, su color, su tamaño y el color de fondo del botón.
    • Imagen: por último puedes ajustar que la imagen destacada que se muestra dentro de este bloque tenga una capa de color por encima. Aquí puedes ajustar su color y opacidad. Si no quieres que haya una capa de color, marca una opacidad valor 0 (cero).

    Recuerda que puedes previsualizar tus cambios en la Vista previa y no olvides hacer clic en el botón final de Guardar cambios. Estos ajustes son los que se mostrarán en la página cuando insertes una sección home y selecciones el elemento Artículos 1, 2 o 3.

    Nuestro equipo

    Este último elemento sirve para ajustar un bloque con el que contarle al mundo quién está detrás de la página web, mostrando el nombre, una breve biografía y una fotografía, de hasta 3 miembros de equipo. Encontrarás al inicio una vista previa, así podrás ir viendo en tiempo real cómo quedan los cambios que vas aplicando.

    Muestra de la sección nuestro equipo dentro de la homepage

    Para ajustarlo tendrás que definir primero el aspecto general de este bloque y posteriormente cada elemento:

    • Primeramente ajusta qué aspecto tendrá el bloque: cuántas personas incluiría (mínimo 1, máximo 3), el color de fondo, nombre y biografía, además de sus tamaños.
    • En el siguiente apartado podrás ajustar individualmente los datos de cada persona, incluyendo una imagen, su nombre y una breve biografía.

    Recuerda que puedes previsualizar tus cambios en la Vista previa y no olvides hacer clic en el botón final de Guardar cambios. Estos ajustes son los que se mostrarán en la página cuando insertes una sección home y selecciones Nuestro Equipo.

    Cómo construir una homepage en Gutenberg con las secciones Home

    Una vez hayas ajustado el aspecto que tendrán los elementos que quieras incluir en tu homepage (en el apartado anterior se explica paso a paso), vamos a ver cómo introducirlos en la página asignada como Homepage.

    Nuestra recomendación es que construyas los contenidos de la homepage dentro de Immune Row, así podrás controlar mucho mejor la anchura y disposición de cada elemento que introduzcas. Si quieres aprender cómo utilizarlas, consulta este artículo específico.

    • Ve a Páginas > Todas las páginas y selecciona la página que hayas asignado como homepage o página de inicio para editarla.
    • Clica en Añadir un bloque y selecciona el bloque de Immune Secciones Home. Si sigues nuestra recomendación, deberás hacer este paso dentro de una Immune Row.
    • Una vez introduzcas el bloque, podrás seleccionar en el menú del bloque (lado derecho) qué elemento quieres que muestre esta sección home en particular.
    • Repite esta operación todas las veces que quieras para ir introduciendo diferentes elementos en tu homepage, pudiendo personalizar además su disposición, espaciado y anchura gracias a las Immune Row. Recuerda: podrás introducir tantas Immune Row y tantas secciones Home en la página como quieras, así que los límites para crear tu homepage los pondrán tu creatividad e imaginación 😉

    ¿Cómo ocultar el título de la homepage?

    En los ajustes de la página, dentro de Gutenberg, encontrarás las opciones Immune. Ahí deberás activar la casilla Ocultar título y listo. Si quieres saber más sobre las opciones Immune, consulta este artículo específico.

    Cómo configurar que la homepage sea un archivo de últimas entradas

    Si prefieres que tu página de inicio sea un archivo de tus últimas entradas y no una página estática, lo primero que tendrás que hacer será indicarlo en Ajustes > Lectura. En la opción Tu página de inicio muestra marca la opción últimas entradas. Puedes personalizar esta página en la sección archivos, en este artículo explicamos cómo hacerlo paso a paso.

    ¿Ha resuelto este artículo tus dudas?
    Ir arriba