{"id":367007,"date":"2023-02-04T12:42:00","date_gmt":"2023-02-04T09:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367007"},"modified":"2023-03-31T19:33:09","modified_gmt":"2023-03-31T16:33:09","slug":"una-guia-para-el-bloque-de-imagen-gutenberg-de-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/una-guia-para-el-bloque-de-imagen-gutenberg-de-wordpress\/","title":{"rendered":"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress"},"content":{"rendered":"\n<p>Gutenberg, uno de los creadores de p\u00e1ginas para WordPress m\u00e1s populares, viene con una biblioteca de elementos listos para usar, <a href=\"https:\/\/themewp.inform.click\/es\/explicacion-de-los-nuevos-bloques-de-wordpress-gutenberg\/\" title=\"tambi\u00e9n conocidos como bloques de Gutenberg\">tambi\u00e9n conocidos como bloques de Gutenberg<\/a>. Los bloques permiten una experiencia de creaci\u00f3n de p\u00e1ginas fluida, optimizada y f\u00e1cil, ya que son incre\u00edblemente intuitivos y pr\u00e1cticos. En esta gu\u00eda, haremos una descripci\u00f3n general del bloque de imagen de Gutenberg y todo lo que puede hacer con \u00e9l.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>El bloque de imagen predeterminado y c\u00f3mo agregarlo<\/h2>\n<p>En pocas palabras, Gutenberg Image Block le permite <strong>agregar una imagen en cualquier lugar que desee en su p\u00e1gina o publicaci\u00f3n<\/strong>. Si hace clic en un bot\u00f3n m\u00e1s en su editor, se abrir\u00e1 un nuevo campo. Aqu\u00ed puede acceder a la opci\u00f3n Imagen. Como puede ver a continuaci\u00f3n, en este editor, tiene opciones separadas para agregar el bloque de imagen de <a href=\"https:\/\/themewp.inform.click\/es\/introduccion-a-las-caracteristicas-del-bloque-de-galeria-de-gutenberg\/\" title=\"Gutenberg y el bloque de galer\u00eda\">Gutenberg y el bloque de galer\u00eda<\/a> de Gutenberg tambi\u00e9n.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress\"><\/a><\/p>\n<p>En Gutenberg, hay tres formas diferentes de agregar im\u00e1genes. Puede <strong>cargar una imagen desde su computadora, elegir una imagen ya existente de su biblioteca de medios o insertarla desde la URL<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress\"><\/a><\/p>\n<p>A primera vista, el bloque de im\u00e1genes contiene las mismas opciones que el bot\u00f3n Agregar medios del editor cl\u00e1sico. Sin embargo, tras una inspecci\u00f3n m\u00e1s cercana, es evidente que esto es solo parcialmente cierto. Hay algunas nuevas opciones \u00fatiles que vienen con Gutenberg que facilitar\u00e1n a\u00fan m\u00e1s su experiencia de edici\u00f3n de im\u00e1genes.<\/p>\n<p>El primero es una adici\u00f3n de peque\u00f1os puntos azules en su imagen. Gracias a estos puntos, puedes <strong>estirar la imagen y aumentar o disminuir su tama\u00f1o de la forma que prefieras<\/strong>. Otra nueva opci\u00f3n es la posibilidad de escribir leyenda en la parte inferior de la imagen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress\"><\/a><\/p>\n<p>Puede encontrar todas las configuraciones b\u00e1sicas justo encima del bloque de imagen. Por otro lado, las configuraciones de imagen m\u00e1s avanzadas se encuentran en la pesta\u00f1a Bloquear. Estos incluyen Texto alternativo, Tama\u00f1o de imagen, Configuraci\u00f3n de enlace y Avanzado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress\"><\/a><\/p>\n<ul>\n<li><strong>Texto alternativo<\/strong>: aqu\u00ed puede agregar una breve descripci\u00f3n de su imagen. Sin embargo, puede dejar este campo en blanco si su imagen no es un elemento central de su contenido.<\/li>\n<li><strong>Tama\u00f1o de imagen<\/strong>: hay posibilidades de cambiar el tama\u00f1o de su imagen a tama\u00f1os predeterminados, como Miniatura, Mediano, Grande y Tama\u00f1o completo. Otra alternativa es agregar las dimensiones exactas de la imagen en p\u00edxeles o determinar el tama\u00f1o deseado en porcentaje con respecto al tama\u00f1o original. Si comete alg\u00fan error, siempre puede hacer clic en el bot\u00f3n Restablecer.<\/li>\n<li><strong>Configuraci\u00f3n<\/strong> de enlaces: aqu\u00ed tiene cuatro opciones diferentes: Ninguno, p\u00e1gina de archivos adjuntos, archivo multimedia y URL personalizada. Ninguna opci\u00f3n le permite mostrar la imagen sin un enlace, mientras que la p\u00e1gina Adjunto se vincula a una p\u00e1gina espec\u00edfica en su sitio que tiene el prop\u00f3sito de proporcionar informaci\u00f3n sobre la imagen en cuesti\u00f3n. En cuanto a Media File, abre la imagen por s\u00ed mismo. La \u00faltima opci\u00f3n le permite agregar una URL personalizada para su imagen.<\/li>\n<li><strong>Avanzado<\/strong>: en este campo puede agregar una clase CSS adicional y escribir sus propios estilos personalizados.<\/li>\n<\/ul>\n<p>Las opciones adicionales de la barra de im\u00e1genes incluyen la alineaci\u00f3n de la imagen (alinearla a la izquierda, a la derecha o al centro) y cambiar el tipo de bloque. Elegir esta opci\u00f3n le da la posibilidad de <strong>transformar su bloque en otro bloque compatible con un solo clic del rat\u00f3n<\/strong>. Por ejemplo, puede cambiar su tipo de bloque a galer\u00eda, medios y texto, portada y archivo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"Una gu\u00eda para el bloque de imagen Gutenberg de WordPress\"><\/a><\/p>\n<p>Si desea editar su imagen de la misma manera que lo hizo en el editor cl\u00e1sico de WordPress, puede hacerlo f\u00e1cilmente haciendo clic en el icono del l\u00e1piz para abrir la imagen en la biblioteca de medios de WordPress.<\/p>\n<p>Ahora eso es todo lo que hay sobre el bloque de imagen predeterminado, pero debe saber que tambi\u00e9n hay algunas opciones m\u00e1s avanzadas.<\/p>\n<h2>Agregar im\u00e1genes usando Qi Blocks para Gutenberg<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> es una rica colecci\u00f3n de bloques personalizados de Gutenberg que le permiten hacer mucho m\u00e1s (y obtener mejores resultados est\u00e9ticos) de lo que normalmente har\u00eda con los bloques predeterminados. La <strong>colecci\u00f3n se puede descargar de forma gratuita desde el repositorio oficial de WordPress, lo que le brinda un maravilloso conjunto de 48 bloques para todo, desde elementos creativos y de exhibici\u00f3n hasta negocios y SEO<\/strong>. Para aquellos que desean opciones a\u00fan mejores y funciones m\u00e1s avanzadas, tambi\u00e9n existe el <strong>paquete Qi Blocks Premium con 33 bloques adicionales<\/strong>.<\/p>\n<p>En esta ocasi\u00f3n, el bloque que nos interesa aqu\u00ed es el <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloque Imagen \u00danica<\/a>. Uno pensar\u00eda que agregar im\u00e1genes a p\u00e1ginas y publicaciones es lo m\u00e1s simple que existe, pero el bloque de imagen \u00fanica para Gutenberg le permite no solo hacerlo con la mayor facilidad, en cualquier lugar de su sitio, sino que tambi\u00e9n <strong>viene con una variedad de funciones exclusivas. opciones<\/strong> _ Por ejemplo, puede elegir varias acciones de imagen, ajustar el ancho, la altura, los bordes, la alineaci\u00f3n, establecer el comportamiento de desplazamiento, habilitar la caja de luz y mucho m\u00e1s.<\/p>\n<p>Otro bloque sorprendente que merece nuestra atenci\u00f3n aqu\u00ed es <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, que le permite crear secciones de im\u00e1genes duales con im\u00e1genes que se mueven a diferentes velocidades en el desplazamiento, creando una emocionante ilusi\u00f3n de profundidad.<\/p>\n<p>Luego est\u00e1 el <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloque Image Hotspots<\/a>, con \u00edconos u otros s\u00edmbolos colocados en las im\u00e1genes, que revelan informaci\u00f3n cuando el usuario se desplaza sobre ellos.<\/p>\n<p>Finalmente, el <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloque Control deslizante de im\u00e1genes<\/a> puede ayudarlo a crear controles deslizantes impresionantes y atractivos con sus im\u00e1genes seleccionadas, agregando un toque de dinamismo a sus p\u00e1ginas. Con este bloque, ya no necesita complementos deslizantes complicados y dif\u00edciles de personalizar. Obtienes todo lo que necesitas en un bloque \u00fanico, intuitivo y completamente personalizable.<\/p>\n<p>Como vimos, hay muchas cosas que puede hacer con Image Block, ya sea que use el predeterminado que viene con Gutenberg u opte por una soluci\u00f3n de terceros, como en el caso de Qi Blocks para Gutenberg. Las im\u00e1genes son muy importantes para cualquier sitio web, ya que a menudo pueden decir y hacer mucho m\u00e1s que las palabras. Gracias a Gutenberg, agregarlos a tus publicaciones y p\u00e1ginas nunca ha sido tan f\u00e1cil.<\/p>\n<p>Esperamos que este art\u00edculo le haya resultado \u00fatil. Si te ha gustado, \u00a1no dudes en consultar algunos de estos art\u00edculos tambi\u00e9n!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta breve gu\u00eda, haremos una descripci\u00f3n general de Gutenberg Image Block y le mostraremos todo lo que puede hacer con esta \u00fatil opci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[566],"tags":[849],"class_list":["post-367007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=367007"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/367007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=367007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=367007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=367007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}