{"id":132,"date":"2020-01-26T19:47:01","date_gmt":"2020-01-26T18:47:01","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/?p=132"},"modified":"2020-03-28T11:34:19","modified_gmt":"2020-03-28T10:34:19","slug":"bloques-mas-adecuados-para-el-diseno-visual","status":"publish","type":"post","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/","title":{"rendered":"Bloques m\u00e1s adecuados para el dise\u00f1o visual"},"content":{"rendered":"\n<p>En este art\u00edculo vamos a pasar revista a aquellos bloques que presentan un mayor potencial en relaci\u00f3n con el dise\u00f1o visual. Debe entenderse, por tanto, que no vamos a considerar todos los bloques del editor de WordPress, sino solo algunos muy concretos. El orden en que vamos a presentarlos y trabajar con ellos ser\u00e1 el mismo con el que se han utilizado en la p\u00e1gina web que propondremos como <a rel=\"noreferrer noopener\" aria-label=\"modelo de practicas (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/blogsfad.educacion.navarra.es\/modelos\/pagina-de-bloques-1\/\" target=\"_blank\">modelo de pr\u00e1cticas<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 hago si no s\u00e9 utilizar el editor de WordPress?<\/h2>\n\n\n\n<p>El manejo b\u00e1sico de las t\u00e9cnicas y procedimientos de uso del editor de WordPress es un contenido que se da por supuesto en este curso avanzado. No obstante, como es probable que los alumnos y alumnas alberguen dudas sobre alg\u00fan punto concreto, les aconsejamos que tengan a su alcance los recursos y materiales del <a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/\" target=\"_blank\">Curso de WordPress 2019<\/a>, en el que se tratan por extenso casi todos los aspectos relacionados con el manejo del editor. Tambi\u00e9n aconsejamos que consulten las p\u00e1ginas que la ayuda de WordPress.com dedica al <a rel=\"noreferrer noopener\" aria-label=\"editor de WordPress (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/\" target=\"_blank\">editor de WordPress<\/a> y sus <a href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"bloques (se abre en una nueva pesta\u00f1a)\">bloques<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bloques para dise\u00f1o visual<\/h2>\n\n\n\n<p>Los bloques para dise\u00f1o visual con los que vamos a trabajar en esta primera sesi\u00f3n del curso son los siguientes:<\/p>\n\n\n\n<ol><li>Fondo.<\/li><li>Espaciador.<\/li><li>Medios y texto.<\/li><li>Grupo.<\/li><li>Columnas.<\/li><li>Galer\u00eda de im\u00e1genes.<\/li><li>Bot\u00f3n.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de fondo<\/h3>\n\n\n\n<p>El <a rel=\"noreferrer noopener\" aria-label=\"bloque de fondo (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-de-fondo\/\" target=\"_blank\">bloque de fondo<\/a> (\u201dcover\u201d, en ingl\u00e9s, que significa \u2018portada\u2019) pertenece al grupo de bloques comunes. Consiste en una imagen sobre la cual se pueden superponer otros bloques, como por ejemplo titulares, texto, botones, etc. Este bloque permite personalizar la altura m\u00ednima de la imagen y hacer que esta sobrepase los l\u00edmites de la caja de texto, de modo que la imagen pueda llegar a ocupar toda la anchura de la p\u00e1gina (esto solo ocurrir\u00e1 si el tema es compatible con este tipo de dise\u00f1o). Por \u00faltimo, el bloque de fondo permite utilizar un color de superposici\u00f3n, lo cual hace posible atenuar la opacidad de la imagen y destacar as\u00ed los textos y titulares.<\/p>\n\n\n\n<p>Todas estas caracter\u00edsticas hacen que el bloque de fondo sea id\u00f3neo para crear ciertos dise\u00f1os muy habituales en las p\u00e1ginas web modernas:<\/p>\n\n\n\n<ul><li>Cabeceras de p\u00e1gina que ocupan toda la anchura de la pantalla.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/envato.com\/blog\/exploring-hero-image-trend-web-design\/\" target=\"_blank\">Im\u00e1genes \u201chero\u201d<\/a>, que ocupan gran parte de la zona visible de la parte superior de la p\u00e1gina, o incluso la pantalla completa. Estas im\u00e1genes, destinadas a crear el tono y estilo propios de un sitio web, deben dise\u00f1arse para crear un fuerte impacto visual.<\/li><li>Fondos que identifican o distinguen las secciones de contenido de un sitio web. A menudo se suelen encadenar varias im\u00e1genes de fondo para crear distintos efectos.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Fondos con efecto \u201cparallax\u201d (se abre en una nueva pesta\u00f1a)\" href=\"http:\/\/www.paellacreativa.com.ar\/2012\/05\/24\/efecto-parallax-diseno-web\/\" target=\"_blank\">Fondos con efecto \u201cparallax\u201d<\/a>. Para lograr este efecto, el bloque dispone de una opci\u00f3n (\u201cfondo fijo\u201d) que permite que la imagen aparezca fija, mientras que los dem\u00e1s elementos de la p\u00e1gina se desplazan sobre ella.<\/li><li>Mecanismos de <a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/asithemes.com\/la-importancia-del-cta-en-el-diseno-web\/\" target=\"_blank\">llamada a la acci\u00f3n<\/a> (<em>call to action<\/em> o CTA), destinados a captar la atenci\u00f3n del visitante y animarle a realizar alg\u00fan tipo de interacci\u00f3n con el sitio web. En este caso, es muy habitual que el bloque de fondo vaya acompa\u00f1ado de enlaces o botones.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cover alignfull has-background-dim-70 has-background-dim\" style=\"background-image:url(https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion.jpg);background-color:#13aa4a;min-height:500px\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\">Ejemplo de bloque de fondo<\/p>\n\n\n\n<p class=\"has-text-align-center\">A este bloque de fondo, compuesto por imagen, titular y texto, se le ha aplicado una capa de superposici\u00f3n en color verde, con una opacidad del 70%. El conjunto se completa con un bot\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" href=\"#\" style=\"background-color:#dcd50b;color:#000000;border-radius:10px\"><strong>Haz clic aqu\u00cd<\/strong><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque espaciador<\/h3>\n\n\n\n<p>El <a rel=\"noreferrer noopener\" aria-label=\"bloque espaciador (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-de-espaciador\/\" target=\"_blank\">bloque espaciador<\/a>, que forma parte de los bloques de dise\u00f1o, tiene un prop\u00f3sito muy simple: definir una zona de separaci\u00f3n entre bloques, cuya altura se puede precisar a voluntad. Este bloque solo permite utilizar un par\u00e1metro: la altura del espacio entre bloques, medida en p\u00edxeles.<\/p>\n\n\n\n<p>Pudiera parecer que, con tan escasas opciones, el espaciador es un elemento poco aprovechable, peo en realidad ocurre al contrario, ya que este bloque garantiza que el espacio entre las diferentes secciones de una p\u00e1gina sea perfectamente controlable. Por supuesto, el espaciador debe ser utilizado de forma coherente, organizada y planificada.<\/p>\n\n\n\n<p>El bloque espaciador no debe confundirse con otro bloque parecido, que es el separador, mediante el cual se puede trazar una l\u00ednea de separaci\u00f3n horizontal entre bloques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de medios y texto<\/h3>\n\n\n\n<p>Como su propio nombre indica, el <a rel=\"noreferrer noopener\" aria-label=\"bloque de medios y texto (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-medios-y-texto\/\" target=\"_blank\">bloque de medios y texto<\/a>, que forma parte de los bloques de dise\u00f1o, hace posible la creaci\u00f3n de combinaciones de imagen y texto, formadas por un bloque de imagen y otro de p\u00e1rrafo. Ambos elementos aparecen dispuestos lado a lado, formando una unidad de elementos inseparables.<\/p>\n\n\n\n<div class=\"wp-block-media-text has-background has-vivid-red-background-color is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1024x683.jpg);background-position:50% 50%\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1024x683.jpg\" alt=\"Trabajando con port\u00e1til\" class=\"wp-image-588\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-text-color has-drop-cap has-normal-font-size has-very-light-gray-color\">Esto es un bloque de medios y texto, en este caso con la imagen en el  lado izquierdo. Se puede \u201crecortar\u201d la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente m\u00ednimo. Tambi\u00e9n se puede arrastrar el borde de la imagen para modificar la proporci\u00f3n de anchura de ambos elementos. Por \u00faltimo, tambi\u00e9n es posible determinar la alineaci\u00f3n vertical de la imagen.<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right has-background has-vivid-red-background-color is-vertically-aligned-center is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-683x1024.jpg);background-position:50% 50%\"><img decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-683x1024.jpg\" alt=\"Escalera\" class=\"wp-image-566\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-683x1024.jpg 683w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-200x300.jpg 200w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-768x1152.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera.jpg 800w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-text-color has-drop-cap has-normal-font-size has-very-light-gray-color\">Esto es un bloque de medios y texto, en este caso con la imagen en el  lado derecho. Se puede \u201crecortar\u201d la imagen verticalmente, para que abarque toda la altura ocupada por el texto. De esta manera, se consigue un efecto muy elegante y vistoso, con un esfuerzo realmente m\u00ednimo. Tambi\u00e9n se puede arrastrar el borde de la imagen para modificar la proporci\u00f3n de anchura de ambos elementos. Por \u00faltimo, tambi\u00e9n es posible determinar la alineaci\u00f3n vertical de la imagen.<\/p>\n<\/div><\/div>\n\n\n\n<p>El bloque de medios y texto dispone de opciones muy interesantes, que permiten modificar el color de fondo de todo el bloque, o solo del bloque de p\u00e1rrafo. Con un uso juicioso de los colores, la posici\u00f3n y proporci\u00f3n de la imagen con respecto al texto, y la alternancia o sucesi\u00f3n de bloques, se pueden lograr efectos muy elegantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de grupo<\/h3>\n\n\n\n<p>El <a rel=\"noreferrer noopener\" aria-label=\"bloque de grupo (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/ayudawp.com\/bloque-de-grupo\/\" target=\"_blank\">bloque de grupo<\/a>, que portenece a la secci\u00f3n de elementos de dise\u00f1o, sirve para agrupar varios bloques en un conjunto \u00fanico. Este bloque permite elaborar dise\u00f1os complejos formados por otros bloques; adem\u00e1s, la agrupaci\u00f3n de varios bloques en una unidad Facilita su gesti\u00f3n y manejo.<\/p>\n\n\n\n<p>Por el momento, el editor solo permite aplicar al bloque de grupo un color de fondo y opciones de anchura ampliada o anchura completa, pero seguramente las futuras versiones del editor de WordPress incorporar\u00e1n muchas m\u00e1s opciones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de columnas<\/h3>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Este bloque (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-de-columnas\/\" target=\"_blank\">Este bloque<\/a>, que forma parte de los elementos de dise\u00f1o, permite crear columnas en las que posteriormente se pueden insertar otros bloques, lo cual hace posible elaborar dise\u00f1os avanzados, como por ejemplo el que ofrecemos a continuaci\u00f3n, formado por un bloque de tres columnas de igual anchura, en cada una de las cuales se ha insertado una tabla see tres filas.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-subtle-pale-green-background-color has-background\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Producto<\/strong> A<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Descripci\u00f3n<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Precio<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-subtle-pale-green-background-color has-background\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Producto<\/strong> B<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Descripci\u00f3n<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Precio<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-subtle-pale-green-background-color has-background\"><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Producto<\/strong> C<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Descripci\u00f3n<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Precio<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de galer\u00eda<\/h3>\n\n\n\n<p>El <a href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-de-galeria\/\">bloque de galer\u00eda de im\u00e1genes<\/a>, que forma parte de la secci\u00f3n de bloques comunes, permite crear conjuntos de im\u00e1genes muy vistosos y elegantes con poqu\u00edsimo esfuerzo. Veamos dos ejemplos con diferente n\u00famero y disposici\u00f3n de las im\u00e1genes:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Galer\u00eda 1<\/h4>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa.jpg\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa-1024x683.jpg\" alt=\"Leyendo un mapa\" data-id=\"1135\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/leyendo-un-mapa\/\" class=\"wp-image-1135\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/leyendo-mapa.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Leyendo un mapa<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos-1024x683.jpg\" alt=\"Buz\u00f3n de Correos\" data-id=\"1106\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/buzon-de-correos\/\" class=\"wp-image-1106\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/buzon-de-correos.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Buz\u00f3n de Correos<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"680\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto-1024x680.jpg\" alt=\"Contacto\" data-id=\"1122\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/contacto-2\/\" class=\"wp-image-1122\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto-1024x680.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto-300x199.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto-768x510.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto-1536x1020.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/contacto.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Contacto<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales-1024x683.jpg\" alt=\"Fuegos artificiales\" data-id=\"1082\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/fuegos-artificiales\/\" class=\"wp-image-1082\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/fuegos-artificiales.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Fuegos artificiales<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores-1024x683.jpg\" alt=\"Trabajo con ordenadores\" data-id=\"1018\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/trabajo-con-ordenadores\/\" class=\"wp-image-1018\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajo-con-ordenadores.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Trabajo con ordenadores<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Galer\u00eda 2<\/h4>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1024x683.jpg\" alt=\"Trabajando con port\u00e1til\" data-id=\"588\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/trabajando-con-portatil\/\" class=\"wp-image-588\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-portatil.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Trabajando con port\u00e1til<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion-1024x683.jpg\" alt=\"Presentaci\u00f3n\" data-id=\"569\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/presentacion\/\" class=\"wp-image-569\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/presentacion.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Presentaci\u00f3n<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress-1024x683.jpg\" alt=\"Trabajando con WordPress\" data-id=\"582\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/trabajando-con-wordpress\/\" class=\"wp-image-582\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress-1024x683.jpg 1024w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress-300x200.jpg 300w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress-768x512.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress-1536x1024.jpg 1536w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/trabajando-con-wordpress.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Trabajando con WordPress<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-683x1024.jpg\" alt=\"Escalera\" data-id=\"566\" data-full-url=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera.jpg\" data-link=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/escalera\/\" class=\"wp-image-566\" srcset=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-683x1024.jpg 683w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-200x300.jpg 200w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera-768x1152.jpg 768w, https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/02\/escalera.jpg 800w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Escalera<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bloque de bot\u00f3n<\/h3>\n\n\n\n<p>El <a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/es.support.wordpress.com\/editor-wordpress\/bloques\/bloque-de-boton\/\" target=\"_blank\">bloque de bot\u00f3n<\/a> pertenece al grupo de bloques de dise\u00f1o, y es uno de los elementos m\u00e1s importantes a la hora de crear los dispositivos de interacci\u00f3n con los,usuarios t\u00edpicos de los sitios web modernos.<\/p>\n\n\n\n<p>Gracias a las opciones de color de fondo, color del texto y radio del borde, el editor de WordPress permite dise\u00f1ar en muy poco tiempo botones muy vistosos, como los que mostramos a continuaci\u00f3n:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-background has-vivid-red-background-color no-border-radius\" href=\"\">Bot\u00f3n 1<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Bot\u00f3n cuadrado, de estilo por defecto, con fondo de color rojo oscuro y texto de color blanco.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color has-background has-luminous-vivid-amber-background-color no-border-radius\" href=\"\">Bot\u00f3n 2<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Bot\u00f3n cuadrado, de estilo contorneado, con fondo de color amarillo y borde y texto de color negro.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-background has-vivid-cyan-blue-background-color\" href=\"\" style=\"border-radius:10px\">Bot\u00f3n 1<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Bot\u00f3n con esquinas redondeadas, de estilo por defecto, con fondo de color azul y texto de color blanco.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-background has-vivid-green-cyan-background-color\" href=\"\" style=\"border-radius:10px\">Bot\u00f3n 2<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Bot\u00f3n con esquinas redondeadas, de estilo contorneado, con fondo de color verde y borde y texto de color negro.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Ninguno de los botones anteriores contiene enlaces funcionales, pero lo cierto es que estos son un aspecto fundamental del bloque de bot\u00f3n.En efecto, los botones normalmente enlazan con un parte importante del contenido del sitio, o forman parte de un mecanismo de interacci\u00f3n: una llamada a la acci\u00f3n, un formulario, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como utilizar estos bloques para dise\u00f1o visual<\/h2>\n\n\n\n<p>A lo largo de la primera sesi\u00f3n del curso se har\u00e1n continuas demostraciones de uso de los bloques antedichos, teniendo a la vista diversos modelos y p\u00e1ginas de ejemplo. El objetivo es que los alumnos y alumnas aprendan a elaborar por sus propios medios una p\u00e1gina semejante a <a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/blogsfad.educacion.navarra.es\/modelos\/pagina-de-bloques-1\/\" target=\"_blank\">esta<\/a>, que posteriormente puedan utilizar como p\u00e1gina de inicio de sus sitios web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ejemplos de dise\u00f1os<\/h3>\n\n\n\n<p>A continuaci\u00f3n incluimos diversos ejemplos de dise\u00f1os que pueden servir de modelo para las tareas solicitadas en esta primera sesi\u00f3n del curso. Conviene tener en cuenta que muchos dise\u00f1os son irrealizables si solo se cuenta con los bloques nativos del editor de WordPress, pero siempre pueden ofrecer ideas e inspiraci\u00f3n.<\/p>\n\n\n\n<ul><li><a aria-label=\" (se abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\" href=\"https:\/\/wpdesignhub.com\/design-library\/\" target=\"_blank\" class=\"ek-link\">Biblioteca de dise\u00f1os de DesignHub<\/a>.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Elementor Template Library (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/library.elementor.com\/\" target=\"_blank\">Elementor Template Library<\/a>.<\/li><li><a aria-label=\"Gutenberg Template Library (opens in a new tab)\" href=\"https:\/\/templates.gutenberghub.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">Gutenberg Template Library<\/a>. Es un excelente repositorio de plantillas, cuyo c\u00f3digo se puede copiar y pegar, lo cual permite reproducir los dise\u00f1os en cualquier instalaci\u00f3n de WordPress.<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/wpastra.com\/ready-websites\/?category=free&amp;page-builder=gutenberg\" target=\"_blank\">Plantillas de ejemplo del tema Astra<\/a>.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Secciones predise\u00f1adas de Stackable (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/wpstackable.com\/block-designs\/\" target=\"_blank\">Secciones predise\u00f1adas de Stackable<\/a>.<\/li><li><a aria-label=\"ShareABlock (se abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\" href=\"https:\/\/shareablock.com\/\" target=\"_blank\" class=\"ek-link\">ShareABlock<\/a>. Para m\u00e1s informaci\u00f3n sobre este repositorio de bloques, v\u00e9ase el art\u00edculo <a href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/recursos-sobre-el-plugin-editorkits\/\" class=\"ek-link\">Recursos sobre el plugin EditorsKit<\/a>.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.<\/p>\n","protected":false},"author":1,"featured_media":253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":6,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[1],"tags":[40,38,34,39,37,36,35,14,12],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020<\/title>\n<meta name=\"description\" content=\"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020\" \/>\n<meta property=\"og:description\" content=\"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\" \/>\n<meta property=\"og:site_name\" content=\"Curso de WordPress 2020\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-26T18:47:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-03-28T10:34:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Administrador\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrador\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\"},\"author\":{\"name\":\"Administrador\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/066ad5d4ca2974ba3ee57bd6f41ef735\"},\"headline\":\"Bloques m\u00e1s adecuados para el dise\u00f1o visual\",\"datePublished\":\"2020-01-26T18:47:01+00:00\",\"dateModified\":\"2020-03-28T10:34:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\"},\"wordCount\":1709,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization\"},\"image\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg\",\"keywords\":[\"bloque de bot\u00f3n\",\"bloque de columnas\",\"bloque de fondo\",\"bloque de galer\u00eda\",\"bloque de grupo\",\"bloque de medios y texto\",\"bloque espaciador\",\"bloques\",\"editor\"],\"articleSection\":[\"Sesi\u00f3n 1\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\",\"name\":\"Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020\",\"isPartOf\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg\",\"datePublished\":\"2020-01-26T18:47:01+00:00\",\"dateModified\":\"2020-03-28T10:34:19+00:00\",\"description\":\"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.\",\"breadcrumb\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg\",\"contentUrl\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg\",\"width\":1600,\"height\":1200,\"caption\":\"Bloques para dise\u00f1ar\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sesi\u00f3n 1\",\"item\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/categoria\/sesion-1\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bloques m\u00e1s adecuados para el dise\u00f1o visual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#website\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/\",\"name\":\"Curso de WordPress 2020\",\"description\":\"Curso de dise\u00f1o web avanzado para docentes\",\"publisher\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization\",\"name\":\"Departamento de Educaci\u00f3n, Gobierno de Navarra\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Departamento de Educaci\u00f3n, Gobierno de Navarra\"},\"image\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/066ad5d4ca2974ba3ee57bd6f41ef735\",\"name\":\"Administrador\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"caption\":\"Administrador\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020","description":"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/","og_locale":"es_ES","og_type":"article","og_title":"Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020","og_description":"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.","og_url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/","og_site_name":"Curso de WordPress 2020","article_published_time":"2020-01-26T18:47:01+00:00","article_modified_time":"2020-03-28T10:34:19+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg","type":"image\/jpeg"}],"author":"Administrador","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Administrador","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#article","isPartOf":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/"},"author":{"name":"Administrador","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/066ad5d4ca2974ba3ee57bd6f41ef735"},"headline":"Bloques m\u00e1s adecuados para el dise\u00f1o visual","datePublished":"2020-01-26T18:47:01+00:00","dateModified":"2020-03-28T10:34:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/"},"wordCount":1709,"commentCount":1,"publisher":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization"},"image":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage"},"thumbnailUrl":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg","keywords":["bloque de bot\u00f3n","bloque de columnas","bloque de fondo","bloque de galer\u00eda","bloque de grupo","bloque de medios y texto","bloque espaciador","bloques","editor"],"articleSection":["Sesi\u00f3n 1"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/","name":"Bloques m\u00e1s adecuados para el dise\u00f1o visual - Curso de WordPress 2020","isPartOf":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage"},"image":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage"},"thumbnailUrl":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg","datePublished":"2020-01-26T18:47:01+00:00","dateModified":"2020-03-28T10:34:19+00:00","description":"Pr\u00e1cticas con bloques para dise\u00f1o visual: bloques del editor de WordPress m\u00e1s apropiados para crear elegantes dise\u00f1os de p\u00e1ginas.","breadcrumb":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#primaryimage","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg","contentUrl":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-content\/uploads\/2020\/01\/bloques.jpg","width":1600,"height":1200,"caption":"Bloques para dise\u00f1ar"},{"@type":"BreadcrumbList","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/bloques-mas-adecuados-para-el-diseno-visual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/"},{"@type":"ListItem","position":2,"name":"Sesi\u00f3n 1","item":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/categoria\/sesion-1\/"},{"@type":"ListItem","position":3,"name":"Bloques m\u00e1s adecuados para el dise\u00f1o visual"}]},{"@type":"WebSite","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#website","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/","name":"Curso de WordPress 2020","description":"Curso de dise\u00f1o web avanzado para docentes","publisher":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#organization","name":"Departamento de Educaci\u00f3n, Gobierno de Navarra","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Departamento de Educaci\u00f3n, Gobierno de Navarra"},"image":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/066ad5d4ca2974ba3ee57bd6f41ef735","name":"Administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","caption":"Administrador"}}]}},"_links":{"self":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/posts\/132"}],"collection":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":77,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/posts\/132\/revisions\/2519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/media\/253"}],"wp:attachment":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2020\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}