Cómo crear secciones de sitios web de héroes en Gutenberg con el tema Total

El tema Total WordPress viene con una gran variedad de herramientas que un sitio web comercial podría necesitar.

El tema le ofrece edición visual a través del Personalizador de WordPress y una rápida importación de datos de demostración, que son especialmente útiles para crear una página principal sobresaliente.

Como puede ver, la versión gratuita de Total no lo bloquea con ningún creador de páginas adicional de WordPress, sino que le brinda una forma nativa de WordPress para diseñar su sitio web.

Con la llegada de Gutenberg, el editor de WordPress basado en bloques, cualquier tema de WordPress, incluido Total, se puede personalizar mucho más. La elección de los elementos de contenido (bloques) nos brinda la libertad de personalización que nunca antes habíamos visto en el núcleo de WordPress, es difícil negarlo.

Sin embargo, algunas configuraciones de estilo de bloque aún están muy limitadas en el editor predeterminado. Entonces, si está en el nuevo editor de Gutenberg y Total buscando crear y diseñar mejor contenido, encontrará algunos consejos útiles en este tutorial.

Para ser más precisos, en esta publicación, nos gustaría mostrar algunos ejemplos de cómo crear y personalizar elementos de sitios web tan cruciales como secciones de héroe, subhéroe y llamada a la acción en Gutenberg. Los que suelen ayudar a las empresas:

• Crear secciones de sitio web de introducción/bienvenida
• Promocionar productos o eventos clave
• Centrarse en artículos o servicios específicos de la cartera, etc.

Para potenciar las posibilidades de personalización de Gutenberg, utilizaremos el complemento Getwid WordPress Blocks que recomendamos para los usuarios del tema Total. Estamos seguros de que algunos usuarios de Total ya han probado suerte en Getwid.

Pero para aquellos de ustedes que se preguntan qué es Getwid, la siguiente es una breve descripción.

En pocas palabras, es un complemento gratuito nativo de Gutenberg que viene con la biblioteca más grande hasta ahora de bloques premium y una colección de diseños personalizados de elegir y pegar para Gutenberg . No es la única razón por la que lo recomendamos.

Estamos especialmente interesados ​​en este complemento porque combina muy bien con el estilo Total predeterminado, le permite desactivar cualquier bloque que no necesite y es realmente rico en funciones.

El complemento aparece como recomendado cuando activa Total: es una solución temporal para ver si se adapta a nuestros clientes.

Pero bueno, debes probarlo tú mismo para ver si es tu solución. Mientras tanto, repasemos los ejemplos que logramos crear.

Ejemplos de secciones de héroes y llamados a la acción creados con Getwid en Total

Realizamos estas pruebas en una versión gratuita del tema Total y podemos decir con seguridad que casi no hubo limitaciones.

Sin embargo, las opciones de ancho del contenedor del sitio web Total son limitadas, por lo que si está buscando diseños inmersivos de pantalla completa, es posible que desee pensar en Total Plus.

En primer lugar, casi siempre necesitará usar el bloque de sección de los bloques de WordPress de Getwid. Es un contenedor que puede manejar cualquier número de cualquier otro bloque. Por lo tanto, sus secciones principales pueden mostrar cualquier tipo de contenido.

Otra cosa destacada sobre el contenedor de la sección es que le ofrece muchos tipos de fondo: una imagen, un color, un video (de su biblioteca de medios de WP o YouTube), degradado multicolor y más.

Entonces, sus tareas principales al diseñar áreas de sitios web con el bloque Sección son:

• Elija y personalice el tipo de fondo para que el contenido sobre él se mantenga legible y claro.
• Inserte los bloques necesarios en el orden preferido.
• Ajuste el espaciado (hay ángulos que se pueden arrastrar como en los constructores visuales para establecer espacios interiores y exteriores).
• Opcional: agregue animación, divisores de forma y otros elementos de decoración.

Vamos ahora con ejemplos.

Ejemplo 1. El escaparate del producto

Todos los bloques en este ejemplo se colocan dentro del bloque Sección:

1. Encabezado avanzado
2. Encabezado avanzado
3. Encabezado avanzado
4. Grupo de botones
5. Fondo de la sección: una imagen (Posicionamiento > Arriba a la derecha; Tamaño > Automático)

El bloque de encabezado le permite usar cualquier fuente de Google, tamaño de texto, peso de fuente, etc. También hay varios estilos para los botones (relleno o contorno).

El mayor desafío que puede surgir es encontrar la imagen de fondo correcta y elegir la posición adecuada de la imagen, ya que cambia de tamaño automáticamente según la ventana gráfica.

Ejemplo 2. Extracto de cartera

Todos los bloques se colocan dentro del bloque Sección:

1. Encabezado avanzado
2. Encabezado avanzado
3. Tres columnas (Párrafo, Imagen, Imagen, Imagen)
4. Fondo de la sección: degradado

También puede colocar un botón de llamada a la acción para vincular a la página completa del portafolio.

Ejemplo 3. Tarjeta de función o evento

En una sección de héroes de este tipo, puede exhibir un producto, evento, servicio, cosa, persona, etc.

El bloque de encabezado avanzado le permite elegir cualquier fuente:

En este ejemplo, usamos un fondo degradado y un divisor de forma de fondo de fondo (Ondas multicapa).

1. Dos encabezados avanzados
2. Párrafo
3. Botón
4. Imagen
5. Fondo de la sección: degradado + divisores de forma

Ejemplo 4. Sección de llamada a la acción

Nuevamente, debe comenzar con el bloque Sección. Para colocar encabezados como en el ejemplo a continuación, puede usar una plantilla de la biblioteca de plantillas de Getwid o crear un patrón desde cero.

Es una sección muy fácil con la imagen de fondo, unos encabezados y un botón centralizado.

1. Tres bloques de encabezado avanzados
2. El bloque de botones
3. Fondo de sección: una imagen con opacidad (Tamaño > portada)

También disfrutará de lo fácil que puede ajustar la alineación del contenido con los ángulos que se pueden arrastrar:

También es una tendencia crear diseños desplazados colocando encabezados sobre las imágenes:

En Getwid, puede lograrlo configurando una imagen de fondo apropiada con un espacio en blanco para la línea de texto.

Ejemplo 5. Secciones de sub-héroes

Muy a menudo, las secciones de subhéroes brindan más información sobre un proyecto o una persona. Es adecuado para presentar su biografía, historia u objetivos clave.

Como elemento visual, utilizamos el bloque Image Stack Gallery de Getwid, que viene con varios estilos. Sin embargo, puede reemplazarlo con una imagen, video o cualquier otro elemento de contenido.

1. Dos encabezados avanzados
2. Párrafo
3. Botón
4. El bloque Galería de pilas de imágenes
5. Fondo de la sección: color sólido

Ejemplo 6. Acentos visuales

Las galerías de imágenes, los controles deslizantes y los videos son herramientas visuales muy comunes para crear secciones que llamen la atención.

Por ejemplo, puede usar el bloque Control deslizante de medios y texto de Getwid para crear una presentación de diapositivas con contenido de texto opcional:

1. Control deslizante de medios y texto
2. Fondo de sección: degradado + divisores superior e inferior con altura personalizada

También hay numerosos bloques Getwid basados ​​en publicaciones que se pueden presentar en un control deslizante (se obtendrán automáticamente del contenido de su sitio web). ¿Quiere presentar algunas de las publicaciones más recientes o seleccionadas manualmente en un formato deslizante o de cuadrícula/lista? Hay un bloque para ello.

Ejemplo 7. Pancartas

Getwid viene con un práctico bloque Banner que ofrece contenedores predeterminados de imagen y texto. También tiene una selección de efectos de animación que le permiten hacer que las secciones con banners sean más dinámicas.

El bloque es una combinación perfecta tanto para las ventas temporales como para los puntos destacados constantes.

1. Bandera
2. Fondo de la sección: degradado monocromático

Ejemplo 8. Apartados informativos

Si desea mostrar más información de forma estructurada y compacta, Getwid ofrece tres bloques dedicados para este propósito: Pestañas, Acordeón y Alternar.

Aquí hay un diseño de dos columnas con el bloque Acordeón y una imagen al lado:

La característica única de estos bloques es la capacidad de contener cualquier bloque dentro de los widgets con pestañas. Eso significa que, además del texto, puede agregar imágenes, listas, videos, galerías, controles deslizantes a las pestañas.

Hay muchos más bloques que pueden agregar una funcionalidad única a sus secciones de marketing, por ejemplo, Image Hotspot para crear secciones de imágenes informativas, Icon Box para servicios, una fuente de galería de Instagram en tiempo real y más.

Puede crear y diseñar secciones similares a partir de una página de Gutenberg en blanco, optando por el diseño de página necesario en la configuración de la página Total.

Para concluir

¿Sabes qué es lo mejor de usar el combo Gutenberg y Getwid en el tema Total gratuito? No, no es solo el número de bloques lo que importa.

Lo que es más importante, no necesita tener ojo de diseñador (o habilidades de desarrollador) para crear contenido atractivo. Hay tantas máscaras prefabricadas, patrones de bloques y diseños listos para usar que están ahí para ayudarlo. Los bloques de WordPress de Getwid también son una buena alternativa a los creadores de páginas para aquellos que se quedan con la versión gratuita de Total.

Hasta que el editor de bloques no esté lo suficientemente maduro, un complemento adicional nativo de Gutenberg puede ser un excelente punto de partida.

¿Has probado Gutenberg o Getwid? Háganos saber en los comentarios.