{"id":284,"date":"2019-08-26T15:08:03","date_gmt":"2019-08-26T15:08:03","guid":{"rendered":"https:\/\/blog.kenzap.com\/?p=284"},"modified":"2019-12-14T10:45:25","modified_gmt":"2019-12-14T10:45:25","slug":"c%C3%B3mo-agregar-una-hermosa-galer%C3%ADa-de-cuadr%C3%ADculas-a-su-sitio","status":"publish","type":"post","link":"https:\/\/kenzap.blog\/es\/c%C3%B3mo-agregar-una-hermosa-galer%C3%ADa-de-cuadr%C3%ADculas-a-su-sitio\/","title":{"rendered":"C\u00f3mo agregar una hermosa galer\u00eda de cuadr\u00edculas a su sitio web"},"content":{"rendered":"<p>Este art\u00edculo explica en detalle c\u00f3mo a\u00f1adir y personalizar una hermosa secci\u00f3n de galer\u00eda de cuadr\u00edcula en su sitio web utilizando el editor de Gutenberg. Para ello, usted necesita:<\/p>\n<ul>\n<li>Un sitio web de WordPress en funcionamiento<\/li>\n<li>Preferiblemente con <a href=\"https:\/\/blog.kenzap.com\/what-is-kenzap-core-theme\/\">el tema principal de Kenzap<\/a> preinstalado (opcional)<\/li>\n<li><a href=\"https:\/\/github.com\/kenzap\/gallery-gutenberg-blocks\/archive\/master.zip\">Preinstalaci\u00f3n del plugin Kenzap Gallery<\/a><\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.kenzap.com\/wp-content\/uploads\/2019\/08\/i177_search.jpeg\" alt=\"Preview of Minimalistic Gallery Grid - Kenzap Gallery plugin\" class=\"wp-image-285\"\/><\/figure>\n<p>Una vez instalados los componentes necesarios, puede a\u00f1adir el bloque Galer\u00eda tal y como se muestra en la imagen de arriba. <em>Vaya a P\u00e1ginas &gt; A\u00f1adir nuevo &gt; haga clic en el signo m\u00e1s y busque<\/em> la <strong>Galer\u00eda 2 de<\/strong> Kenzap<strong>.<\/strong> <\/p>\n<p>Por defecto, el bloque de galer\u00eda est\u00e1 precargado con 12 im\u00e1genes diferentes que puede reemplazar o eliminar por completo.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.kenzap.com\/wp-content\/uploads\/2019\/08\/gallery_grid_gutenbeg_block-1200x621.png\" alt=\"\" class=\"wp-image-293\"\/><\/figure>\n<h2>Personalizaci\u00f3n de la galer\u00eda<\/h2>\n<p>Actualmente este bloque soporta las siguientes opciones (sujetas a cambios en futuras versiones)<\/p>\n<ul>\n<li><strong>Filtros<\/strong> &#8211; enlaces de navegaci\u00f3n ubicados en la parte superior de la galer\u00eda. Los filtros se utilizan para categorizar las im\u00e1genes y ocultarlas dependiendo de la selecci\u00f3n del filtro.<\/li>\n<li><strong>Estilo de imagen<\/strong> &#8211; se utiliza como una relaci\u00f3n de aspecto de imagen para elegir entre tama\u00f1o de imagen cuadrada, tama\u00f1o de imagen vertical y tama\u00f1o de imagen horizontal.<\/li>\n<li><strong>Columnas<\/strong> &#8211; durante la vista previa del escritorio, la cuadr\u00edcula de la galer\u00eda carga tres columnas por defecto. Utilice esta configuraci\u00f3n para restringir el n\u00famero de columnas en el modo de escritorio. El n\u00famero de columnas se reduce autom\u00e1ticamente para las tabletas y los dispositivos m\u00f3viles.<\/li>\n<li><strong>Rellenos<\/strong> &#8211; agregue espacio adicional entre las im\u00e1genes.<\/li>\n<li><strong>Colores<\/strong> &#8211; acent\u00faa ciertos elementos de dise\u00f1o de la galer\u00eda como el color de la imagen que se desplaza por encima de la imagen.<\/li>\n<li><strong>Opacidad por encima de la superficie<\/strong> &#8211; a\u00f1ade transparencia al color de superposici\u00f3n.<\/li>\n<li><strong>Tipograf\u00eda<\/strong> &#8211; personalizar el tama\u00f1o de los colores de las fuentes, etc.<\/li>\n<li><strong>Fondo<\/strong> &#8211; configuraci\u00f3n de fondo de la galer\u00eda.<\/li>\n<li><strong>Contenedor<\/strong> &#8211; fijar el ancho m\u00e1ximo del contenedor o fijar rellenos que respondan a las necesidades del cliente.<\/li>\n<li><strong>Avanzado<\/strong> &#8211; a\u00f1ade una clase personalizada al contenedor de la galer\u00eda.<\/li>\n<\/ul>\n<h2>\u00bfC\u00f3mo Agregar o Cambiar la Imagen?<\/h2>\n<p><strong>Cambio de imagen<\/strong>. Para cambiar la imagen, primero aseg\u00farese de que el bloque Galer\u00eda est\u00e9 enfocado, luego haga clic en la imagen que desea reemplazar y luego haga clic en el bot\u00f3n <strong>Cambiar<\/strong>. Recoge la imagen de tu Galer\u00eda o sube una nueva.\n<\/p>\n<p><strong>Agregar imagen<\/strong>. Para a\u00f1adir una nueva imagen pulse el bot\u00f3n <strong>A\u00f1adir nueva imagen<\/strong> que se encuentra debajo de las im\u00e1genes de la galer\u00eda como se muestra en la imagen de arriba. Aseg\u00farese de que el bloque Galer\u00eda est\u00e9 enfocado.<\/p>\n<p><strong>Eliminar imagen<\/strong>. Para eliminar la imagen, pase el rat\u00f3n por encima de la imagen y haga clic en la cruz negra en la esquina superior izquierda o derecha de la imagen.<\/p>\n<h2>Galer\u00eda de resoluci\u00f3n de problemas<\/h2>\n<p>Si utiliza la galer\u00eda en combinaci\u00f3n con otros temas en lugar de con el <strong>tema principal de Kenzap<\/strong>, es posible que experimente algunos problemas visuales. Esto sucede muy probablemente porque cada tema tiene su propia estructura \u00fanica y reglas de estilo CSS personalizadas.<\/p>\n<p>El problema m\u00e1s com\u00fan est\u00e1 relacionado con el ancho del contenedor, especialmente cuando el tema tiene una barra lateral. Si este es su caso, entonces no puede utilizar dise\u00f1os de contenedores anchos y de ancho completo. Adem\u00e1s de eso, usted necesita reducir la <em>configuraci\u00f3n de ancho m\u00e1ximo de Contenedor &gt; M\u00e1ximo<\/em> a 600px o menos. Esto forzar\u00e1 a la galer\u00eda a cargar el modo tableta o m\u00f3vil incluso cuando est\u00e9 en modo escritorio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este art\u00edculo explica en detalle c\u00f3mo a\u00f1adir y personalizar una hermosa secci\u00f3n de galer\u00eda de cuadr\u00edcula en su sitio web utilizando el editor de Gutenberg. Para ello, usted necesita: Un sitio web de WordPress en funcionamiento Preferiblemente con el tema principal de Kenzap preinstalado (opcional) Preinstalaci\u00f3n del plugin Kenzap Gallery Una vez instalados los componentes &hellip; <a href=\"https:\/\/kenzap.blog\/es\/c%C3%B3mo-agregar-una-hermosa-galer%C3%ADa-de-cuadr%C3%ADculas-a-su-sitio\/\" class=\"more-link\">Continue reading <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,13,14],"tags":[],"_links":{"self":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts\/284"}],"collection":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":0,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"wp:attachment":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}