Aparte del elemento de encabezado, todo el contenido de la p\u00e1gina de inicio se crea con el editor de bloques (tambi\u00e9n conocido como Gutenberg). Combinado con los estilos del editor de GeneratePress, ahora tenemos una representaci\u00f3n frontal mucho mejor mientras estamos editando. Permitir que a cada elemento se le den estilos espec\u00edficos y clases CSS adicionales significa que no tenemos que desviarnos en HTML muy a menudo. De hecho, en este Sitio nunca lo hacemos.<\/p>
Comencemos mirando la jerarqu\u00eda.<\/p>
Para nuestra p\u00e1gina de destino quer\u00eda algunos encabezados H2 grandes y en negrita. M\u00e1s grande de lo que hemos especificado en nuestro Personalizador. Pero tambi\u00e9n hazlos s\u00faper receptivos. Para que esto suceda, cre\u00e9 un CSS personalizado usando una Clase CSS adicional de: Esto parece complicado, pero es lo que proporciona los controles de respuesta. Si desea obtener m\u00e1s informaci\u00f3n sobre lo que significa todo esto, consulte Tipograf\u00eda receptiva y fluida con unidades vh y vw<\/a><\/p> 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\u00f3n de columnas. Crear filas adicionales es simplemente un caso de duplicar la existente.<\/p> La configuraci\u00f3n de im\u00e1genes tiene un enlace a la opci\u00f3n. Simplemente configure el enlace a: URL personalizada y agregue el enlace de su categor\u00eda<\/p> 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<\/strong><\/p> Despu\u00e9s de nuestro bloque de t\u00edtulo, simplemente agregamos un c\u00f3digo corto de Woocommerce: Recent Products.<\/p> Una vez m\u00e1s 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\u00e1s atascado con columnas de igual tama\u00f1o. Para evitar esto y mostrar columnas de tama\u00f1o desigual, agregamos algunas clases CSS simples.<\/p>
encabezado grande<\/strong>. Simplemente seleccione su Bloque de encabezado, aseg\u00farese de que sea un H2, abra el men\u00fa desplegable avanzado en la barra lateral de configuraci\u00f3n y agregue la clase al campo Clase CSS adicional. Tenga en cuenta: no ver\u00e1 el cambio de estilo en el editor. Como todo CSS, lo encontrar\u00e1 en Personalizador> CSS adicional. Se parece a esto<\/strong><\/p>h2.large-heading {\n font-size: calc(28px + (86 - 28)*(100vw - 400px)\/(1600 - 400));\n line-height: 1.1em;\n}<\/code><\/pre>Categor\u00edas de la tienda<\/h2>
Hacer el enlace de la imagen a la categor\u00eda<\/h3>
Estilo de enlace personalizado<\/h3>
\u00daltimos productos<\/h2>
Filas de llamada a la acci\u00f3n (CTA)<\/h2>