Cómo agregar una imagen de portada o una imagen destacada en WordPress Gutenberg Block Editor










  • Se han introducido muchas funciones nuevas e interesantes con WordPress 5.0, la actualización del Editor de bloques de Gutenberg . Incluyendo la integración de la imagen destacada en WordPress en el editor de Gutenberg. También puede hacer cosas como construir bloques de contenido y exportarlos e importarlos para usarlos en otros sitios web .

    La característica de la que vamos a hablar hoy es el bloque "Cubierta" del editor de bloques de Gutenberg. Este bloque le permite agregar imágenes de portada a una publicación o página de WordPress.

    La característica de la imagen de portada ha causado cierta confusión. Se parece mucho a la imagen destacada que ha sido parte de WordPress desde la versión 2.9.

    En este tutorial, explicaré la diferencia entre la imagen de portada y la imagen destacada en el Editor de bloques. También le mostraré cómo agregar una imagen de portada de WordPress y agregar una imagen destacada de WordPress usando el Editor de bloques de Gutenberg .

    ¿Qué es una imagen de portada?

    Una imagen de portada es una imagen ancha que usas para una nueva sección en una publicación de blog o en una página. La imagen de portada de WordPress es parte del artículo. Puede agregar una imagen de portada de WordPress cuando esté comenzando una nueva sección de su artículo dentro del editor de bloques.

    La opción de bloque de portada en el editor de bloques de Gutenberg también le permite agregar texto y superposición de color a la imagen de portada.

    Muestra de bloque de cubierta

    Al agregar el texto y la superposición de colores apropiados para que coincidan con su tema o para mejorar el mensaje que está tratando de transmitir, puede hacer que su artículo sea más atractivo.

    En el pasado, los blogueros han usado encabezados, texto de encabezado o subtítulos para separar secciones en una publicación de blog. A veces agregando una imagen debajo del encabezado, a veces no.

    La opción de bloque de portada ahora le brinda una forma más atractiva visualmente de dividir su publicación de blog en secciones.

    ¿Qué es una imagen destacada?

    La imagen destacada en WordPress, también conocida como miniatura de publicación, es la imagen principal del artículo que representa todo el contenido. La imagen destacada es la imagen que ve cuando se desplaza por los archivos del blog y trata de elegir una historia para leer.

    También se muestra comúnmente en su sitio web en publicaciones individuales. Así como en la página de inicio de sitios web de noticias, revistas y blogs.

    La imagen destacada también se muestra en sus feeds de redes sociales cuando comparte un artículo en sus plataformas sociales.

    Las imágenes destacadas generalmente se diseñan o eligen para representar mejor el contenido. La mayoría de las veces, son visualmente atractivos y les dan a los usuarios un vistazo rápido de su contenido y les piden que lean el artículo completo.

    Encontrará un cuadro meta en la pantalla de edición de publicaciones para agregar una imagen destacada porque casi todos los temas de WordPress admiten imágenes destacadas.

    Muestra de imagen destacada

    Dónde y cómo se muestran sus imágenes destacadas está controlado por el tema de WordPress que ha elegido usar. También puede vincular las publicaciones de WordPress con imágenes destacadas automáticamente .

    Cómo agregar una imagen de portada en el editor de bloques de WordPress

    El nuevo editor de bloques de WordPress viene con una opción de bloque de portada que le permite agregar una imagen de portada en su artículo de WordPress.

    Primero, crea una nueva publicación o edita una existente. En la pantalla de edición de publicaciones, haga clic en el botón "Agregar nuevo bloque" y luego elija "Cubrir bloque".

    Agregar el bloque de portada

    Encontrará la opción de Bloque de cobertura en las secciones "Bloques comunes" o "Más utilizados". Cuando haga clic en el bloque, verá el bloque de portada agregado a su editor de contenido con opciones para agregar su nueva imagen de portada.

    Arrastra y suelta una imagen o video en el área de bloques para cargar una nueva imagen de portada. También puede seleccionar entre sus archivos multimedia haciendo clic en el botón "Biblioteca multimedia". O puede hacer clic en el botón "Cargar" para elegir una imagen en su computadora.

    opciones de carga de imagen de portada

    Una vez que haya agregado una imagen de portada de WordPress, puede personalizarla fácilmente haciendo clic en la imagen de portada.

    A continuación, se le mostrará una barra de herramientas con opciones de personalización sobre el campo "Escribir título..." de la imagen en el centro de la configuración de Imagen y Bloque, incluida la superposición de colores en el panel de la derecha.

    Opciones en pantalla para la imagen de portada

    Trabajar con anchos de imagen

    Además de la opción de alineación, el bloque de la imagen de la portada te ofrece dos opciones de ancho: "Ancho ancho" y "Ancho completo".

    La opción "Ancho ancho" hace que la imagen se vea tan ancha como su contenido. La opción "Ancho completo" hace que su imagen cubra toda la ventana del navegador.

    La opción de imagen de ancho completo

    También puede agregar un título para su imagen de portada. Cuando haga clic en la imagen de portada, verá el campo "Escribir título..." en el centro de su imagen de portada.

    Opción de superposición de texto en el bloque de imagen de portada

    Finalmente, en el lado derecho de su imagen de portada, encontrará algunas configuraciones más. Puede habilitar "Fondo fijo" para crear un efecto de paralaje cuando los usuarios se desplazan hacia abajo en la página.

    Debajo de eso, encontrará la configuración de "Color de superposición". Desde aquí, podrá cambiar la superposición de colores y la opacidad.

    Y por último, pero no menos importante, puede agregar código CSS y agregar más estilos a su imagen de portada haciendo clic en la opción "Avanzado".

    Configuración de la barra lateral derecha para el bloque de imagen de portada

    Recuerde, puede repetir los pasos anteriores y agregar tantas imágenes de portada a su artículo como desee.

    Cómo agregar una imagen destacada en el editor de bloques de WordPress

    Cuando agrega una imagen destacada a una publicación usando el editor de bloques de WordPress, encontrará que el proceso sigue siendo el mismo. Si tiene un blog de WordPress por un tiempo, ya sabe cómo se agrega una imagen destacada.

    Para agregar una imagen destacada a una publicación de WordPress, cree una nueva publicación o edite una existente.

    Cuando abra la pantalla de edición de publicaciones, navegue hacia abajo hasta el cuadro meta "Imagen destacada" ubicado en el panel de la derecha.

    Cuadro meta de la imagen destacada

    Puede cargar una nueva imagen usando el cargador de arrastrar y soltar o seleccionando una imagen de su biblioteca de medios. Luego, puede agregar un título, una leyenda, un texto alternativo y una descripción para su imagen destacada. Luego haga clic en la opción "Seleccionar".

    Agregar título, subtítulo, texto alternativo y descripción

    Eso es todo. Ha agregado una imagen destacada en el editor de bloques de WordPress.

    Ahora, si está utilizando el tema predeterminado de WordPress más nuevo o cualquier tema moderno, puede editar el color de superposición de su imagen destacada, hasta cierto punto.

    En la columna de navegación de la izquierda, pase el mouse sobre el enlace "Apariencia" y haga clic en el enlace "Personalizar". Eso lo llevará al personalizador de WordPress en vivo.

    Haga clic en apariencia y luego personalice

    Haga clic en la pestaña "Colores" y cambie los colores predeterminados de su tema.

    Haga clic en la pestaña de colores

    Nota: los temas de WordPress administran imágenes destacadas, por lo que es posible que no encuentre esta opción si su tema no admite filtros de imágenes.

    Prácticas recomendadas para la imagen de portada y la imagen destacada

    Ahora que comprende cómo agregar una imagen de portada y cómo agregar una imagen destacada en el editor de bloques de WordPress Gutenberg, echemos un vistazo a algunas de las mejores prácticas.

    Imágenes destacadas

    Las imágenes destacadas son populares cuando las usan uno o más de los siguientes como miniaturas de publicaciones o imágenes de artículos principales:

    • Blogs de WordPress
    • Revistas en línea
    • Sitios web de noticias
    • Sitios web de entretenimiento

    Las imágenes destacadas bien diseñadas y atractivas ayudarán a los lectores a abrir el artículo completo. También funcionan bien para hacer que su sitio web de WordPress se vea más hermoso e interactivo.

    Imágenes de portada

    Las imágenes de portada son parte de su artículo. Se utilizan para separar secciones y crear encabezados. Agregar imágenes de portada puede hacer que su artículo sea visualmente más entretenido e interactivo.

    La mejor manera de usar imágenes de portada en el editor de bloques de WordPress es como una transición gráfica entre secciones dentro de un artículo largo.

    Las imágenes de portada también son más únicas que las imágenes destacadas en el hecho de que hay una opción de ancho completo disponible y puede agregar texto y superposición de color a la imagen.

    Cuando usa la función de imagen de portada correctamente, puede aumentar y mejorar la participación del usuario en sus publicaciones y páginas en WordPress .

    Espero que este artículo te haya sido útil. Ahora debería tener una mejor idea de las diferencias entre las imágenes de portada y las imágenes destacadas en el editor de bloques de WordPress. También debe comprender cómo agregar ambos fácilmente.

    ¿Ya empezaste a usar el nuevo bloque Cover en Gutenberg? ¿Ha encontrado que cuando se usan, sus artículos obtienen más participación?










  • Subir