{"id":1152,"date":"2019-03-21T14:29:31","date_gmt":"2019-03-21T13:29:31","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/?page_id=1152"},"modified":"2020-11-02T10:00:53","modified_gmt":"2020-11-02T09:00:53","slug":"disenos-con-atomic-blocks","status":"publish","type":"page","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/disenos-con-atomic-blocks\/","title":{"rendered":"Dise\u00f1os con Atomic Blocks"},"content":{"rendered":"\n

Esta p\u00e1gina pretende servir como demostraci\u00f3n de las posibilidades que ofrecen los bloques del plugin Atomic Blocks<\/a>, uno de entre los muchos plugins de bloques que a\u00f1aden m\u00faltiples funcionalidades al editor de WordPres. Para ver una descripci\u00f3n completa de los bloques que forman parte de este plugin, sus opciones, configuraci\u00f3n y ejemplos de uso, aconsejamos la consulta del sitio web Atomic Blocks<\/a>.<\/p>\n\n\n\n

Atomic Blocks es un plugin muy bien valorado por los usuarios. Adem\u00e1s, ha sido creado por WP Engine<\/a>, la misma empresa que est\u00e1 detr\u00e1s del desarrollo de los temas de la familia Genesis, lo cual es garant\u00eda de una perfecta integraci\u00f3n entre los temas y este conjunto de bloques.<\/p>\n\n\n\n

De los quince nuevos bloques que proporciona el plugin, en esta p\u00e1gina hemos utilizado diez. A continuaci\u00f3n mostramos lo que hemos hecho con ellos. Tras cada titular, aparece un ejemplo del bloque utilizado; por otro lado, cada uno de los titulares est\u00e1 enmarcado por un par de bloques de Espaciador\/Divisor.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Dise\u00f1o predefinido: imagen \u00abh\u00e9roe\u00bb<\/h2>\n\n\n\n
\"hero<\/div>
\n

El futuro del dise\u00f1o web est\u00e1 aqu\u00ed.<\/h2>\n\n\n\n

Con Genesis y el plugin Atomic, puedes crear sitios web hermosos y potentes en pocos minutos, con secciones y dise\u00f1os creados por profesionales<\/p>\n\n\n\n

\u00a1Lanza tu nuevo sitio!<\/a><\/div>\n<\/div><\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n

2. Bloque de cuadr\u00edcula de entradas<\/h2>\n\n\n\n
<\/div>\n\n\n
\"Bloques<\/a><\/div>

Los bloques nativos de WordPress 1<\/a><\/h3>
<\/div><\/header>

Bloques nativos de WordPress correspondientes a los siguientes tipos: bloques comunes, elementos integrados, y bloques de formato. El bloque cl\u00e1sico.<\/p>\n<\/div><\/div><\/article>\n

\"Cubos<\/a><\/div>

Los bloques nativos de WordPress 2<\/a><\/h3>
<\/div><\/header>

Bloques nativos de WordPress correspondientes a los siguientes tipos: elementos de dise\u00f1o, widgets, y elementos incrustados.<\/p>\n<\/div><\/div><\/article>\n

\"Piezas<\/a><\/div>

Los bloques nativos de WordPress 3<\/a><\/h3>
<\/div><\/header>

Bloques nativos de WordPress correspondientes a los siguientes tipos: bloques m\u00e1s utilizados, bloques reutilizables y bloques creados por plugins o temas.<\/p>\n<\/div><\/div><\/article>\n

\"Fotograf\u00edas\"<\/a><\/div>

Bloques de imagen<\/a><\/h3>
<\/div><\/header>

Uso de los bloques de im\u00e1genes, de galer\u00eda de im\u00e1genes y de imagen de fondo. Galer\u00edas de im\u00e1genes especiales mediante plugins.<\/p>\n<\/div><\/div><\/article>\n

\"Columnas<\/a><\/div>

El bloque cl\u00e1sico<\/a><\/h3>
<\/div><\/header>

El bloque cl\u00e1sico en el nuevo editor de WordPress: an\u00e1lisis de su funcionamiento, usos m\u00e1s frecuentes y particularidades de este bloque.<\/p>\n<\/div><\/div><\/article>\n

\"Edificio<\/a><\/div>

Otros bloques<\/a><\/h3>
<\/div><\/header>

Algunos ejemplos de bloques, como demostraci\u00f3n de las t\u00e9cnicas de edici\u00f3n de WordPress y de las posibilidades que ofrece su nuevo editor.<\/p>\n<\/div><\/div><\/article>\n<\/div><\/section>\n\n\n

<\/div>\n\n\n\n

3. Bloque contenedor<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\n

Este es el bloque de contenedor, que sirve para crear secciones o \u00e1reas de p\u00e1gina en las que, a su vez, se pueden incluir otros bloques. <\/p>\n\n\n\n

Este bloque facilita en gran medida el dise\u00f1o de elementos de contenido personalizables, agrupaciones de bloques, etc. Por ejemplo, en el contenedor se puede incluir una galer\u00eda de im\u00e1genes, tal como aparece a continuaci\u00f3nn.<\/p>\n\n\n\n