Aparte del elemento de encabezado, todo el contenido de la página de inicio se crea con el editor de bloques (también conocido como Gutenberg). Combinado con los estilos del editor de GeneratePress, ahora tenemos una representación frontal mucho mejor mientras estamos editando. Permitir que a cada elemento se le den estilos específicos y clases CSS adicionales significa que no tenemos que desviarnos en HTML muy a menudo. De hecho, en este Sitio nunca lo hacemos.

Estructura de la página

Comencemos mirando la jerarquía.

• Elemento de encabezado: esto se trata en este artículo
• Encabezados H2
• Categorías de la tienda
• últimos productos
• Fila de llamada a la acción – división cuarenta / sesenta
• Fila de llamada a la acción – división sesenta / cuarenta
• Productos de venta
• Inscribirse
• GP Footer: los widgets de tema predeterminados

Encabezados H2

Para nuestra página de destino quería algunos encabezados H2 grandes y en negrita. Más grande de lo que hemos especificado en nuestro Personalizador. Pero también hazlos súper receptivos. Para que esto suceda, creé un CSS personalizado usando una Clase CSS adicional de:

encabezado grande. Simplemente seleccione su Bloque de encabezado, asegúrese de que sea un H2, abra el menú desplegable avanzado en la barra lateral de configuración y agregue la clase al campo Clase CSS adicional. Tenga en cuenta: no verá el cambio de estilo en el editor. Como todo CSS, lo encontrará en Personalizador> CSS adicional. Se parece a esto

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Esto parece complicado, pero es lo que proporciona los controles de respuesta. Si desea obtener más información sobre lo que significa todo esto, consulte Tipografía receptiva y fluida con unidades vh y vw

Categorías de la tienda

Construido usando un bloque de columnas configurado en dos columnas. Cada columna contiene un bloque de imagen, encabezado, texto y enlace. Nada sofisticado y realmente simple de editar. Se pueden agregar columnas adicionales desde la Configuración de columnas. Crear filas adicionales es simplemente un caso de duplicar la existente.

Hacer el enlace de la imagen a la categoría

La configuración de imágenes tiene un enlace a la opción. Simplemente configure el enlace a: URL personalizada y agregue el enlace de su categoría

Estilo de enlace personalizado

Esperamos que hayas notado el enlace de estilo personalizado. Esto se logra utilizando CSS personalizado. Para agregar este estilo a cualquiera de sus enlaces de contenido, simplemente asigne al bloque una Clase CSS adicional de: loud-link

Últimos productos

Después de nuestro bloque de título, simplemente agregamos un código corto de Woocommerce: Recent Products.

Filas de llamada a la acción (CTA)

Una vez más entra en juego el Bloque de Columnas. Fuera de la caja, no hay forma de ajustar el ancho de las columnas. Entonces, dentro del editor, estás atascado con columnas de igual tamaño. Para evitar esto y mostrar columnas de tamaño desigual, agregamos algunas clases CSS simples.

Tenga en cuenta: estas clases no aplican los estilos dentro del editor

Inscribirse

En primer lugar, debemos hacer que esta fila se extienda hasta el borde del contenedor (fuera del relleno de contenido). Esto se hace simplemente seleccionando la opción Alinear ancho de la barra de herramientas Bloque. El resto requiere algo de CSS familiar de nuestras filas de CTA y un poco más. aquí están las clases que usa:

• sesenta y cuarenta columnas
  un 60% / 40% fila de dos columnas
• banner de columna
  esto hace los ajustes de relleno necesarios
• centro-vertical
  centrando verticalmente cualquier contenido colocado dentro de una de las columnas de CTA
• bg-gray
  Aplica el color de fondo gris

Cambiar el color de fondo de las filas

Vaya al Personalizador> CSS adicional (o a la hoja de estilo del tema secundario si la ha movido). Y edita este CSS:

.bg-grey {
    background-color: #f2f3f4;
}

Por supuesto, puede simplemente crear sus propias clases con nombres más relevantes para los colores que elija.