Cómo crear secciones de sitios web de héroes en Gutenberg con un tema total

El tema total de WordPress viene con una gama completa de herramientas que un sitio web comercial podría necesitar. El tema le brinda edición visual a través de Customizer WordPress y una rápida importación de datos demostrativos, que son particularmente útiles para construir una página de cara notable. Como puede ver, la versión gratuita de Total no lo bloquea con páginas adicionales de WordPress, sino que ofrece una forma nativa de WordPress de diseñar su sitio. Con la llegada de Gutenberg, el editor de WordPress basado en bloques, cualquier tema de WordPress, incluido totalmente, puede ser personalizado más. Elegir los elementos de contenido (bloques) nos da la libertad de personalización que no hemos visto antes en el núcleo de WordPress, difícil de desnistar.
Sin embargo, algunas configuraciones de estilo de bloque siguen siendo muy limitadas en el editor predeterminado. Entonces, si se encuentra en el nuevo editor de Gutenberg y Total busca construir y diseñar un mejor contenido, encontrará algunos consejos útiles en este tutorial. Para ser más precisos, en esta publicación, nos gustaría mostrar algunos ejemplos sobre cómo construir y personalizar los elementos del sitio esenciales como héroes, subereo e urgencias en Gutenberg. Aquellos que generalmente ayudan a las empresas:
Crear secciones introductorias/de bienvenida para el sitio web
Promover productos o eventos clave
Concéntrese en ciertos elementos o servicios en la cartera, etc.
Para mejorar las posibilidades de personalización de Gutenberg, utilizaremos el complemento GetWid WordPress Blocks que recomendamos a los usuarios el tema total. Estamos seguros de que algunos usuarios ya han probado su mano en GetWid.
Pero para aquellos de ustedes que se preguntan qué es GetWid, el siguiente es una breve descripción. En pocas palabras, es un suplemento gratuito para Gutenberg, que viene con la biblioteca de bloques premium más grande y una colección de modelos adaptados para Gutenberg. No es la única razón por la que lo recomendamos. Estamos particularmente interesados ​​en este complemento, porque se combinan maravillosamente con el estilo predeterminado total, le permite deshabilitar cualquier bloque que no necesite y es realmente rico en funciones. El complemento aparece como recomendado cuando está activo: es una solución temporal para ver si se adapta a nuestros clientes. Pero bueno, debe intentarlo solo para ver si es su solución. Mientras tanto, revisemos los ejemplos que logramos crear.
Contenido
Ejemplos de héroes y exhortaciones creadas con GetWid en total
Ejemplo 1. Show del producto
Ejemplo 2. Extracto de cartera
Ejemplo 3. Característica o tarjeta de evento
Ejemplo 4. El impulso de la sección a la acción
Ejemplo 5. Secciones de subhéroes
Ejemplo 6. Acentos visuales
Ejemplo 7. Banners
Ejemplo 8. Secciones informativas
Ejemplos de héroes y exhortaciones creadas con GetWid en total realizamos estas pruebas en una versión gratuita del tema total y ciertamente podemos decir que casi no ha habido limitaciones.
Sin embargo, las opciones para el ancho total del contenedor del sitio web son limitadas, por lo que si está buscando cautivadoras en la pantalla completa, le recomendamos que piense en Total Plus. En primer lugar, casi siempre tendrá que usar la sección GetWid WordPress de la sección Bloque. Es un contenedor que puede administrar cualquier número de otros bloques. Por lo tanto, las secciones de tus héroes pueden mostrar cualquier tipo de contenido. Otra cosa destacada sobre el contenedor de sección es que le brinda muchos tipos de fondo: una imagen, color, video (de su biblioteca de medios WP o YouTube), gradiente multicolor y más. Como resultado, sus tareas principales al diseñar el sitio web de áreas con El bloque de sección es:
Elija y personalice el tipo de fondo para que el contenido anterior permanezca legible y claro.
Ingrese los bloques necesarios en su orden preferido.
Ajuste la distancia (hay ángulos que se pueden dibujar como en los constructores visuales para establecer los espacios interiores y exteriores).
Opcional: agregue animación, acciones con forma y otros elementos decorativos.
Vamos con ejemplos ahora. Ejemplo 1. Show del producto
Todos los bloques de este ejemplo se colocan dentro del bloque de sección:
Título avanzado

Título avanzado
Título avanzado
Grupo de botones
Fondo de la sección: una imagen (posicionamiento> a la derecha a la derecha; tamaño> automóvil)
El bloque de título le permite usar cualquier fuente de Google, tamaño de texto, peso de fuente, etc. También hay varios estilos para botones (finalización o contorno). El mayor desafío que puede suceder es encontrar la imagen de fondo correcta y elegir la posición de imagen correcta, porque se redimensiona automáticamente según la ventana de vista. Ejemplo 2. El extracto de bloques de cartera se coloca dentro del bloque de sección:
Título avanzado
Título avanzado

Tres columnas (párrafo, imagen, imagen, imagen)
Los antecedentes de la sección: gradiente
También puede colocar un botón de urgencia para enviar a la página de cartera completa. Ejemplo 3. Característica o tarjeta de evento En una sección de héroe de este tipo, puede presentar un producto, evento, servicio, cosa, persona, etc.
El bloque de encabezado avanzado le permite elegir cualquier fuente:
En este ejemplo, utilicé un fondo de gradiente y un divisor en forma de fondo (ondas multicapa).
Dos títulos avanzados

Párrafo

Botón

Imagen
Sección de fondo: Gradiente + Divisores en forma
Ejemplo 4. El impulso de la sección a la acción nuevamente, debe comenzar con el bloque de sección. Para colocar los títulos como en el siguiente ejemplo, puede usar una plantilla en la biblioteca de plantillas GetWid o crear un modelo desde cero.
Es una sección muy fácil con la imagen de fondo, algunos títulos y un botón centralizado.
Tres bloques de títulos avanzados
El bloque de botones
Fondo de la sección: una imagen de opacidad (tamaño> cubierta)

También disfrutará de la facilidad con que puede ajustar el contenido con los ángulos de disparo:
También es una tendencia a crear modelos compensados ​​colocando títulos sobre las imágenes: en GetWid, puede obtener esto estableciendo una imagen de fondo apropiada con un espacio libre para la línea de texto. Ejemplo 5. Secciones de subhéroes con bastante frecuencia, las secciones Subheroi proporcionan más información sobre un proyecto o persona. Es apropiado presentar su biografía, historia o objetivos clave.
Como elemento visual, utilicé el bloque de la galería de la pila de imágenes de GetWid, que viene con varios estilos. Sin embargo, puede reemplazarlo con una imagen, un video o cualquier otro elemento de contenido.
Dos títulos avanzados

Párrafo

Botón

Galería de la pila de bloques
Fondo de sección: color sólido
Ejemplo 6. Galerías de imágenes de acentos visuales, diapositivas y videos son herramientas visuales muy comunes para crear secciones que llamen la atención.
Por ejemplo, puede usar el bloque de controleses deslizantes Media y Text desde GetWid para crear una presentación opcional de contenido de texto:
Glisor de medios y texto
Fondo de la sección: Gradiente + separadores superior e inferior con altura personalizada
También hay numerosos bloques GetWid basados ​​en la publicación que se pueden presentar en una diapositiva (se obtendrá automáticamente del contenido de su sitio). ¿Desea presentar algunas publicaciones más recientes o seleccionadas manualmente en formato deslizante o de cuadrícula/lista? Hay un bloque para él. Ejemplo 7. Getwid Banners viene con un práctico bloque de banner que ofrece contenedores predeterminados para imágenes y texto. También tiene una variedad de efectos de animación, lo que le permite hacer que las secciones de pancartas sean más dinámicas.

El bloque es una combinación perfecta tanto para ventas temporales como para momentos importantes.
Sección Bannerfud: Gradiente monocromo
Ejemplo 8. Secciones informativas Si desea mostrar más información de manera estructurada y compacta, GetWid ofrece tres bloques dedicados a este objetivo: pestañas, acordeón y alternar. Aquí hay dos columnas con el bloque de acordeón y una imagen al lado:
La característica única de estos bloques es la capacidad de contener cualquier bloque interior de widgets con filetes. Esto significa que, además del texto, puede agregar imágenes, listas, videos, galerías, diapositivas.

Hay muchos otros bloques que pueden agregar características únicas a sus secciones de marketing, por ejemplo, Hotspot de imágenes para crear secciones informativas de imágenes, icono de servicio, un flujo de galería de Instagram y más. Puede construir y diseñar secciones similares en una página vacía de Gutenberg, optando por la apariencia de página necesaria en la configuración de la página total. Para concluir, ¿sabes qué es lo mejor de usar la combinación Gutenberg y GetWid en un tema total gratuito? No, no solo el número de bloques es importante. Lo que es más importante, no tiene que tener ojos de diseñador (o habilidades de desarrollador) para crear contenido agradable. Hay tantas pieles prefabricadas, patrones de bloques y modelos listos para usar que están ahí para ayudarlo. Los bloques GetWid WordPress también son una buena alternativa a los constructores de páginas para aquellos de ustedes que se quedan con la versión gratuita de Total. Hasta que el editor de bloques no sea lo suficientemente maduro, un suplemento nativo adicional de Gutenberg puede ser un excelente punto de partida. ¿Has probado Gutenberg o GetWid? Dinos en los comentarios.