Los mejores bloques originales de WordPress [Resumen rápido]

Te traemos una guía sobre cómo usar el editor y los bloques de WordPress de Gutenberg. Lea las noticias sobre los cambios de bloques que se producirán en la próxima versión 5.4. Hemos seleccionado todos los bloques de uso más frecuente que se deben usar en cualquier sitio web. Una vez publicado, publicaremos más detalles sobre todas las funciones.

Cuando WordPress anunció el nuevo editor de Gutenberg en 2018, nos entusiasmó. Ahora, un par de años después, vemos una gran mejora. Gutenberg WordPress editor es una gran herramienta para crear un sitio web.

Todos estos bloques estándar de WordPress para el editor de Gutenberg son completamente funcionales en nuestro último proyecto Gratis Ciudadela Tema de WordPress. Puedes usarlo en cualquier sitio web, por favor. crea una cuenta y descargarlo gratis.

Con Complementos AitThemes Citadela, puede crear contenido específico para la presentación de una empresa, negocio, blog o sitio web sin fines de lucro. O incluso iniciar un nuevo negocio en línea. La velocidad del sitio web y la facilidad de edición del sitio web son los factores más importantes.

¿Qué es un bloque?

Los bloques de Gutenberg WordPress son unidades de construcción del sitio web. Cada uno de ellos tiene su propio lugar y propósito especial. Es muy importante utilizar el bloque de WordPress adecuado para un determinado tipo de contenido.

Pero, ¿cómo encuentra el bloque más adecuado que se ajuste a su intención?

Para ayudarlo a comprender mejor los bloques de WordPress, hemos preparado esta descripción general de los más populares.

Bloques de contenido de texto

Hay varios bloques que puede usar para insertar contenido de texto en su sitio web. Puedes usar varios bloques. Desde WordPress 5.4 hay una nueva configuración, puede cambiar el color del texto.

• Párrafo
• Título
• Cita
• Lista
• citar
• Mesa
• Verso
• preformateado

Excepto esto, usa el bloque clásico que puede ser más útil para un párrafo largo.

Bloque de botones

Crear un botón de llamada a la acción convincente en WordPress se ha vuelto muy fácil con el bloque Button. No necesita ingresar CSS personalizado ni entender HTML. Puede, pero no tiene que hacerlo, ingresar el código hexadecimal de su color favorito para que el botón se vea bonito y llamativo.

¿Dónde usar el bloque de botones?

Una vez que el visitante de la web llega a su sitio web, desea alentarlos a tomar medidas. Para eso están los botones CTA.

En general, hay 3 lugares donde debe usar el bloque de botones de WordPress:

• Página de inicio: para completar la acción que lo llevará a cumplir su objetivo, como suscribirse al boletín, descubrir una oferta especial o registrarse para una prueba gratuita.
• Página del producto: dependiendo de cómo se dirija la página de su producto, podría haber 1 botón CTA (COMPRAR) o más botones, por ejemplo, detalles del producto, comprar, agregar a la lista de deseos, etc.
• Blog: los botones CTA pueden hacer referencia a otro artículo útil o a la compra de su producto/servicio.

Configuración del bloque de botones

En Inspector, en el lado derecho, puede administrar fácilmente la configuración de su botón:

• Estilo
• Color de fondo
• Color de fuente
• Borde

El texto escrito en el botón CTA debe ser breve y directo, alentando la acción que desea que realicen los visitantes de su sitio web.

Novedades en la próxima versión de WordPress 5.4 (lanzamiento el 31 de marzo de 2020)

El bloque de botones se reemplazará con un nuevo botóns bloquear.
Puede suponer por el nuevo nombre que podrá crear más botones además de uno por uno en un contenedor de bloques. A menudo, es necesario crear dos CTA a la vez, por ejemplo: Comprar ahora y Leer más. Además, se avecinan nuevas configuraciones de estilo y color. Elija el estilo Relleno o Contorno y luego el color del fondo. Puede elegir un fondo sólido o degradado. Algunos ajustes preestablecidos como punto de partida estarán disponibles para un ajuste fino más sencillo. La buena noticia es que todos los bloques de botones existentes funcionarán y no será necesario migrarlos.

bloque de columnas

El bloque de columnas es un increíble bloque de WordPress que abre las puertas a nuevos diseños. Le brinda más opciones de arreglos de elementos de página, lo que resulta en más alternativas de diseño.

Trabajar con el bloque Columnas es fácil:

• Sin instalación adicional de complementos.
• No se requiere codificación.
• Todo lo que necesita es un poco de sentido común para un diseño limpio.

En comparación con las molestias anteriores por las que tuvo que pasar antes del lanzamiento del editor de bloques de WordPress, es muy simple usar el bloque Columnas de WordPress.

¿Cómo usar el bloque Columnas?

Como se indicó anteriormente, hay 2 formas en que se puede usar el bloque Columnas:

• Para organizar el flujo de sus textos (en una publicación de blog o en la página normal).
• Para organizar otros bloques en columnas.

Al organizar el texto en columnas, por ejemplo, dentro de una publicación de blog, aumenta la legibilidad y hace que su sitio web sea más transparente y fácil de usar.

Sin embargo, cuando usa el bloque Columnas para anidar otros bloques, como imágenes, textos y botones, está alterando todo el diseño de la página elegida y creando nuevos diseños.

Configuración del bloque de columnas

Después de insertar un bloque de columnas en la página, elija cuántas columnas desea. Puede ser cualquier cantidad de 2 a 6 columnas. Luego puede comenzar a escribir su texto o agregar bloques en cada columna.

La alineación del contenido de su bloque de columnas se puede configurar por separado para todo el bloque, así como para columnas individuales. Incluso puede elegir la proporción del ancho de la columna. De esta manera, una columna puede ser más ancha que otra.

bloque de cubierta

Hablemos del encabezado de su sitio web. Es una sección que define la primera impresión cuando alguien llega a tu página de inicio. Algo importante, ¿no? ¿Y sabías que el bloque de portada se puede usar como encabezado en cualquiera de tus páginas?

La portada es el núcleo de los bloques de WordPress que te ayuda a impresionar a los visitantes de tu web. Especialmente cuando se usa correctamente, o mejor dicho, cuando está perfectamente integrado en su diseño web.

¿Dónde usar el bloque de cobertura?

Como se mencionó anteriormente, el bloque de portada se puede usar en cualquiera de sus páginas. Además, se puede agregar en cualquier parte de la página, a diferencia del encabezado de su sitio web que se fija en la parte superior de su sitio web.

El bloque de cubierta se puede utilizar como:

• Encabezado de cualquier página, incluida la página de inicio.
• Imagen o video sobrescrito por el texto utilizado en la página del producto.
• Separador de contenido en la publicación del blog.

Configuración del bloque de cobertura

Configurar su bloque de cobertura es muy sencillo. Primero, elige una imagen o un video como fondo. También puede usar un solo color en su lugar. Cuando haya configurado su fondo, agregue un título y un subtítulo. 

Puede elegir la alineación del bloque y, por supuesto, la alineación del texto que contiene.

La alineación del bloque de cobertura ofrece las siguientes opciones:

• Alinear a la izquierda
• Alinear al centro
• Alinear a la derecha
• Anchura amplia
• Ancho completo

Mi favorito personal es la superposición de colores que está disponible en el inspector: la imagen de fondo del bloque de portada se puede tonificar con el color que desee. Junto con el tamaño y el color de fuente personalizados, puede crear hermosos contrastes y el aspecto final de su bloque de portada será asombroso.

Desde WordPress 5.4 puedes elegir el fondo degradado en lugar de uno sólido.

Bloque de galería

Muestre imágenes en su sitio web usando el bloque Galería. Este bloque estándar de WordPress ha sido diseñado para contener sus imágenes y mostrarlas bien en cualquier página de su sitio web. De manera similar a otros bloques de WordPress, el bloque de la Galería se puede colocar en cualquier lugar del sitio web o dentro de la publicación del blog.

La carga de sus imágenes se puede realizar eligiendo archivos de la biblioteca de medios, desde su computadora o usando la función de arrastrar y soltar.

¿Dónde usar el bloque Galería?

Dependiendo del tipo de su sitio web, es posible que desee crear una galería de fotos compleja o una presentación de imágenes simple. Puede usar el bloque Galería en:

• tu página de inicio
• Subpáginas individuales creadas como álbumes de su galería de fotos
• Páginas de productos
• Entrada en el blog

Configuración del bloque de la galería

Además de las diversas opciones de alineación del propio bloque Galería, hay un par de opciones interesantes dentro de este bloque, como:

• Número de columnas en las que se alinean las imágenes.
• Recorte de imagen para que coincida con el mismo tamaño (de la imagen más pequeña).
• Hipervínculo para darle la opción de vincular a otra página o archivo multimedia.

bloque de imagen

El bloque de imagen no es más que el bloque para mostrar una imagen en su sitio web.

Así es. Si solo desea agregar una imagen a cualquiera de sus páginas, debe usar el bloque Image WordPress. Puede ser similar a otros bloques presentados, pero hay diferencias significativas que lo hacen perfecto para imágenes individuales.

¿Cuándo usar Bloque de imagen?

El bloque de imagen debe usarse especialmente cuando el objeto que se muestra en la imagen es particularmente importante para su visitante web y desea:

• Atrae la atención de los visitantes de la web con una imagen específica.
• Mostrar imagen con título.
• Muestre infografías que ayuden a los visitantes a comprender mejor el tema tratado.

Configuración de bloque de imagen

Una de las mayores ventajas del bloque Image WordPress son sus opciones de tamaño de imagen. Puede cambiar fácilmente el tamaño de una imagen tirando de la esquina, elegir un tamaño fijo en píxeles o definir el tamaño en porcentaje.

Otra opción importante son los campos de entrada para texto alternativo, título y enlace. Recomiendo encarecidamente usar estos campos, ya que juegan un papel importante en el SEO de la página.

Bloque de medios y texto

Pasemos a diseños de página más avanzados que puede crear usando el Bloque de texto y multimedia. Este bloque central de WordPress le permite combinar medios y texto uno al lado del otro, de una manera estética y contextual.

¿Dónde usar Bloque de medios y texto?

Aunque el bloque de medios y texto es más adecuado para su uso en publicaciones de blog, con un poco de imaginación, también puede usarlo en otros lugares. Por ejemplo, puede crear una buena descripción general de un producto o servicio utilizando una imagen y un texto uno al lado del otro.

No olvide agregar un bloque de botón a la sección de texto del bloque de medios y texto, si se usa como descripción general del producto/servicio. De esta manera, puedes diseñar una buena sección de CTA en cualquier página.

Ventajas de los medios y el bloque de texto

• Reunir imagen y texto que contextualmente encajan entre sí.
• Evitar el extravío de la imagen dentro de la entrada del blog.
• Ayudar con la capacidad de respuesta del sitio (use la función "Apilar en el móvil").

Configuración de bloque de medios y texto

Al mirar la configuración del bloque de medios y texto, notará bastantes opciones de alineación, algunas de ellas son únicas, en comparación con la mayoría de los otros bloques.

La configuración interesante y útil de este bloque es el color de fondo. Al colorear el área alrededor de la imagen y el texto que encajan, puede resaltar visualmente su conexión.

Insertar un enlace desde WordPress versión 5.4 (31.3.2020). Puede elegir entre un enlace, un archivo multimedia o una página de archivos adjuntos.

Bloque de mesa

Table block es uno de los ejemplos de cómo WordPress mejoró después de la introducción del editor de bloques de WordPress en la versión 5.0 y posteriores. Mientras que antes necesitaba un complemento para insertar una tabla en su sitio web de WordPress, ahora puede simplemente usar el bloque Tabla.

¿Dónde usar el bloque de mesa?

Las tablas juegan un papel muy importante al proporcionar contenido útil de una manera bien organizada y transparente. Seguramente, la mayoría de los sitios web han usado tablas. Estos son solo algunos ejemplos del uso de tablas en diferentes sitios web:

• Comparación de datos
• Tablas de precios
• Detalles técnicos del producto
• Recetas
• Descripción general de los paquetes de membresía

Tener Table block como parte del núcleo gratuito de WordPress es realmente asombroso.

Configuración de bloque de tabla

Cuando inserta un bloque de tabla en la página, debe definir una cantidad de columnas y filas de su tabla. No te preocupes, este número no es fijo. Puede agregar más filas y columnas (o eliminarlas) en cualquier momento.

Luego, elige un estilo de tu mesa: por defecto o rayas. Pase a la alineación y el estilo de fuente y, finalmente, complete su tabla antes de agregarle un toque final.

Más opciones incluyen:

• Color de fondo
• Celdas de ancho fijo
• Encabezamiento
• Pie de página
• Enlace (la entrada de texto en una tabla puede vincular a otras páginas)

¿Qué bloque te gustaría ver a continuación?

Espero que hayas disfrutado leyendo sobre nuestra selección de bloques centrales de WordPress muy útiles, disponibles de forma gratuita para todos. Por favor, háganos saber sobre qué bloques le gustaría leer a continuación o qué funcionalidades aún le faltan en el núcleo de WordPress. ¡Gracias por leer!