{"id":2863,"date":"2020-12-15T09:42:00","date_gmt":"2020-12-15T08:42:00","guid":{"rendered":"https:\/\/davidperezgar.com\/?p=2863"},"modified":"2023-09-03T16:37:58","modified_gmt":"2023-09-03T14:37:58","slug":"wpgranollers-constructores-visuales-gutenberg-elementor-divi-builder-y-wpbakery","status":"publish","type":"post","link":"https:\/\/davidperezgar.com\/en\/blog\/talks\/wpgranollers-constructores-visuales-gutenberg-elementor-divi-builder-y-wpbakery\/","title":{"rendered":"WPGranollers, Constructores visuales: Gutenberg, Elementor, Divi Builder y WPBakery"},"content":{"rendered":"\n<p>El pasado Martes 15 de diciembre, me invitaron a la charla de <a href=\"https:\/\/wpgranollers.com\/constructores-visuales\/\" class=\"rank-math-link\">WPGranollers<\/a> donde estuvimos diferentes profesionales de WordPress para maquetar una misma p\u00e1gina con diferentes maquetadores visuales. Un buen ejercicio, ya que nos permiti\u00f3 a los usuarios mostrar c\u00f3mo funcionan las diferentes herramientas que permiten editar el <strong><a href=\"https:\/\/www.closemarketing.es\/diseno-paginas-web\/\" class=\"rank-math-link\">dise\u00f1o de una p\u00e1gina web<\/a><\/strong> en WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/wpgranollers-constructores-visuales-portada.png\" alt=\"wpgranollers constructores visuales portada\" class=\"wp-image-2880\" style=\"width:600px;height:338px\" srcset=\"https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/wpgranollers-constructores-visuales-portada.png 600w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/wpgranollers-constructores-visuales-portada-596x336.png 596w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p>Los profesionales invitados fueron los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/twitter.com\/pablomoratinos\" class=\"rank-math-link\">Pablo Moratinos<\/a> con Divi.<\/li>\n\n\n\n<li><a href=\"https:\/\/twitter.com\/salonsoweb\" class=\"rank-math-link\">Santiago Alonso<\/a> con Elementor.<\/li>\n\n\n\n<li><a href=\"https:\/\/twitter.com\/nilovelez\" class=\"rank-math-link\">Nilo V\u00e9lez<\/a> con WPBakery.<\/li>\n\n\n\n<li>y David P\u00e9rez (yo) con Gutenberg.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dise\u00f1o Gr\u00e1fico para maquetar<\/h2>\n\n\n\n<p>Se nos present\u00f3 la siguiente maqueta, para realizar en directo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"565\" height=\"1280\" src=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/maquetacion-wpgranollers-gutenberg.jpg\" alt=\"maquetacion wpgranollers gutenberg\" class=\"wp-image-2910\" srcset=\"https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/maquetacion-wpgranollers-gutenberg.jpg 565w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/maquetacion-wpgranollers-gutenberg-221x500.jpg 221w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/maquetacion-wpgranollers-gutenberg-478x1082.jpg 478w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n\n\n\n<p>Te dejo con el video publicado en la meetup, desde el minuto que empez\u00f3 mi intervenci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Constructores visuales: Gutenberg, Elementor, Divi Builder y WPBakery\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/N4PhFk9u3b0?start=3388&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Gutenberg gana con diferencia en rendimiento<\/h2>\n\n\n\n<p>El resultado fue que la p\u00e1gina realizada con todos los bloques conten\u00eda <strong>49 divs, 18 peticiones y 250Kb.<\/strong> Como pod\u00e9is ver un excelente resultado comparado con los otros constructores que no bajaban de los 110 divs. Como conclusi\u00f3n, <strong>trabajar con maquetadores visuales hace que la web est\u00e9 inflada y pese mucho m\u00e1s.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Transcripci\u00f3n<\/h2>\n\n\n\n<p>Hola.<\/p>\n\n\n\n<p>Estamos en directo, \u00bfno, Adri\u00e1n?<\/p>\n\n\n\n<p>Para no hablar aqu\u00ed solo.<\/p>\n\n\n\n<p>Pues nada, bienvenidos a todos y todas.<\/p>\n\n\n\n<p>De hecho, acabo de ver que hay un mont\u00f3n de gente ya dejando comentarios, qu\u00e9 gozada.<\/p>\n\n\n\n<p>Nada, bienvenidos.<\/p>\n\n\n\n<p>Ya sab\u00e9is que esto es una meet up conjunta a la que hoy hemos<\/p>\n\n\n\n<p>a\u00f1adido m\u00e1s gente porque nos gusta juntarnos con gente y<\/p>\n\n\n\n<p>hacer cosas conjuntamente.<\/p>\n\n\n\n<p>Entonces, esta es la meet up de Granoyer Sitarraza que llevamos<\/p>\n\n\n\n<p>ya yo creo que dos o tres ediciones de forma conjunta,<\/p>\n\n\n\n<p>la versi\u00f3n online.<\/p>\n\n\n\n<p>Porque el Valle es, me imagino que ya lo sab\u00e9is, pero es el nuevo Silicon Valley de la zona de Catalu\u00f1a.<\/p>\n\n\n\n<p>Esto es una broma interna que igual fuera de aqu\u00ed no hace tanta gracia, pero por ir rompiendo un poco el hielo.<\/p>\n\n\n\n<p>Hoy me imagino que ya hab\u00e9is visto en la cartela y los anuncios que hemos hecho, vamos a hablar de constructores visuales, maquetadores visuales, visual composers, WP backerys, divis y muchas movidas de crear y maquetar p\u00e1ginas, \u00bfvale?<\/p>\n\n\n\n<p>Como somos gente que nos gusta traer lo mejor de cada casa, van a venir cuatro personas que conocen bien las distintas herramientas que vamos a mostrar que son Elementor, que os sonar\u00e1 seguramente, DIVI, WP Bakery que es la antigua Visual Composer o algo as\u00ed, luego nos lo<\/p>\n\n\n\n<p>explicar\u00e1 el invitado y tambi\u00e9n Gutenberg que es el editor de bloques<\/p>\n\n\n\n<p>que al final es el que est\u00e1 ganando terreno y es la opci\u00f3n nativa dentro de<\/p>\n\n\n\n<p>WordPress para hacer cosas de maquetaci\u00f3n relativamente apa\u00f1adas y<\/p>\n\n\n\n<p>sencillas. Vale, antes de dar paso a los invitados que<\/p>\n\n\n\n<p>lo vamos a hacer de uno en uno para darle un poco m\u00e1s de emoci\u00f3n y para que os<\/p>\n\n\n\n<p>qued\u00e9is hasta el final. Comentaros que dentro de unos d\u00edas 26, 27, 28 y 29 de<\/p>\n\n\n\n<p>diciembre tenemos la Work Am Sevilla que tendr\u00e1 un formato muy peculiar y<\/p>\n\n\n\n<p>especial que es&#8230; \u00a1hombre, ni lo! Justo como pincha Adri\u00e1n ah\u00ed&#8230;<\/p>\n\n\n\n<p>Entonces, que sep\u00e1is que pod\u00e9is apuntaros, el registro es gratuito, ser\u00e1n cuatro tardes<\/p>\n\n\n\n<p>de mesas de contribuci\u00f3n, \u00bfvale? Si todav\u00eda no hab\u00e9is metido la patita a<\/p>\n\n\n\n<p>contribuir con WordPress, creo que puede ser una muy buena opci\u00f3n para que os<\/p>\n\n\n\n<p>acerqu\u00e9is. Como siempre, recordaros que para contribuir a WordPress no<\/p>\n\n\n\n<p>necesit\u00e1is ser ni developers, ni dise\u00f1adores, ni gente que trabaja en<\/p>\n\n\n\n<p>hosting ni nada cualquiera puede contribuir.<\/p>\n\n\n\n<p>Con ser gente normal ya vale.<\/p>\n\n\n\n<p>Dejemoslo de ser gente.<\/p>\n\n\n\n<p>Valoramos mucho que sean gente educada tambi\u00e9n esto dentro de la comunidad<\/p>\n\n\n\n<p>WordPress nos gusta y bueno que os animo a que creo que ni lo comentaba antes<\/p>\n\n\n\n<p>que ya hay m\u00e1s de 300 personas que se han apuntado todos los que vais a ver<\/p>\n\n\n\n<p>Pero hoy estamos ya apuntaos y deseando que vengan.<\/p>\n\n\n\n<p>As\u00ed que, bueno, ese ser\u00eda un poco el call to action antes de<\/p>\n\n\n\n<p>empezar.<\/p>\n\n\n\n<p>Y nada, como tenemos la idea de la Meetup es muy sencilla.<\/p>\n\n\n\n<p>Les hemos pasado un PDF que ahora mostrar\u00e1 el primer<\/p>\n\n\n\n<p>invitado de una&#8211;<\/p>\n\n\n\n<p>Ni siquiera es una landing, es una p\u00e1gina bastante sencillita<\/p>\n\n\n\n<p>con 4 secciones distintas.<\/p>\n\n\n\n<p>Y la idea es que pod\u00e1is ver de forma f\u00e1cil y resumida ese es<\/p>\n\n\n\n<p>el dise\u00f1o que van a hacer, c\u00f3mo lo puedes hacer con Divi,<\/p>\n\n\n\n<p>con Elementor, con VpBickery o con Gutenberg,<\/p>\n\n\n\n<p>con el editor de bloques.<\/p>\n\n\n\n<p>Entonces, la idea es que en directo, en directo,<\/p>\n\n\n\n<p>riguroso adem\u00e1s directo, hemos calculado, ya veremos,<\/p>\n\n\n\n<p>que en 10, 15 minutos cada herramienta se puede ver al<\/p>\n\n\n\n<p>menos c\u00f3mo hacer toda la estructura y la parte,<\/p>\n\n\n\n<p>pues eso, para llegar m\u00e1s o menos a ese dise\u00f1o final.<\/p>\n\n\n\n<p>Y nada, esa es un poco la idea.<\/p>\n\n\n\n<p>vamos a empezar con atento don pablo moratinos<\/p>\n\n\n\n<p>qu\u00e9 tal chicos sepas que cada vez que digo don pablo moratinos me sale la<\/p>\n\n\n\n<p>coletilla casi seguida con la que te presenta ana en un billete<\/p>\n\n\n\n<p>estamos optimizando esa entrada y cada vez nos ponemos m\u00e1s m\u00e1s t\u00edtulos y<\/p>\n\n\n\n<p>m\u00e1s redobles de tambores. Me consta que t\u00fa ya eres em\u00e9rito. Em\u00e9rito, doctor Norris Causa por la Universidad de Misco.<\/p>\n\n\n\n<p>Muy guay, muy guay. Pues nada, mira, vamos a ser un poquito m\u00e1s parco en presentaciones para no<\/p>\n\n\n\n<p>enrollarnos mucho ahora. S\u00ed que cuando terminemos la idea es irnos todos a un Meet y ah\u00ed ya pues si<\/p>\n\n\n\n<p>quer\u00e9is preguntar cosas concretas o todos los t\u00edtulos que tiene don Pablo,<\/p>\n\n\n\n<p>pero yo creo que podemos dejarte ya la arena para ti Pablo, por supuesto<\/p>\n\n\n\n<p>agradecerte que hayas venido aqu\u00ed a compartir tu sabidur\u00eda y nada, somos<\/p>\n\n\n\n<p>todo o\u00eddos. Un placer, bueno, has estado un poquito generoso y optimista<\/p>\n\n\n\n<p>cuando has dicho que nos hab\u00e9is pasado un pdf, nos hab\u00e9is pasado un jpg lamentable,<\/p>\n\n\n\n<p>Por eso la gente lo estar\u00e1 viendo. Si lo ven ahora pantalla completa lo ver\u00e1n un<\/p>\n\n\n\n<p>poquito un poquito desenfocado, pero no importa nada simplemente es para que<\/p>\n\n\n\n<p>nos sirva un poco como referencia. Est\u00e1s hablando de que nos hab\u00e9is pasado, bueno ya veis que<\/p>\n\n\n\n<p>aqu\u00ed arriba tiene un t\u00edtulo, luego tiene una especie de hero, tres elementos aqu\u00ed<\/p>\n\n\n\n<p>en esta zona, en esta secci\u00f3n, una imagen y un par de p\u00e1rrafos y luego una zona<\/p>\n\n\n\n<p>din\u00e1mica en la que tenemos aqu\u00ed pues las tres \u00faltimas entradas que se han<\/p>\n\n\n\n<p>publicado en el blog de Mr. Wings, del chinorri de Mr. Wings.<\/p>\n\n\n\n<p>Bueno, pues la idea me hab\u00e9is propuesto replicarlo con Divi.<\/p>\n\n\n\n<p>Entonces, seguramente una p\u00e1gina como esta, yo no la<\/p>\n\n\n\n<p>habr\u00eda, por lo menos de forma aislada,<\/p>\n\n\n\n<p>no la habr\u00eda construido con Divi porque ser\u00eda seguramente<\/p>\n\n\n\n<p>demasiada parafernalia.<\/p>\n\n\n\n<p>Pero como experimento me ha parecido interesante.<\/p>\n\n\n\n<p>Y bueno, voy a compartir un poco con vosotros c\u00f3mo lo har\u00eda yo.<\/p>\n\n\n\n<p>Algo interesante y yo creo que ya sab\u00e9is que Divi tiene su<\/p>\n\n\n\n<p>opci\u00f3n en versi\u00f3n tema y la opci\u00f3n plugin,<\/p>\n\n\n\n<p>solamente el builder.<\/p>\n\n\n\n<p>A m\u00ed particularmente me gusta m\u00e1s trabajar con el tema por<\/p>\n\n\n\n<p>diferentes motivos a nivel de integraci\u00f3n.<\/p>\n\n\n\n<p>Uno de ellos es que podemos tomar decisiones que nos van<\/p>\n\n\n\n<p>a ayudar de alguna manera luego a trabajar un poco m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<p>Por ejemplo, yo un proyecto de este tipo,<\/p>\n\n\n\n<p>normalmente siempre lo empezar\u00eda con la personalizaci\u00f3n del<\/p>\n\n\n\n<p>tema.<\/p>\n\n\n\n<p>En este momento, mira, estoy comprobando que ten\u00eda 20.1<\/p>\n\n\n\n<p>activado.<\/p>\n\n\n\n<p>Voy a activar en un momento primero 2Divi.<\/p>\n\n\n\n<p>Perfecto.<\/p>\n\n\n\n<p>No lo tengo.<\/p>\n\n\n\n<p>instalado, lo instal\u00f3 en un moment\u00edn. Vamos all\u00e1.<\/p>\n\n\n\n<p>Aqu\u00ed lo tenemos.<\/p>\n\n\n\n<p>En un momentito lo tenemos y ya lo empezamos a configurar.<\/p>\n\n\n\n<p>Todo lo dem\u00e1s lo tengo listo ya. Perfecto.<\/p>\n\n\n\n<p>Activamos.<\/p>\n\n\n\n<p>Vale, yo normalmente lo que os comentaba es que siempre me voy<\/p>\n\n\n\n<p>al personalizador y lo que voy a hacer es configurar algunas<\/p>\n\n\n\n<p>cosas que luego nos van a hacer movernos un poquito m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<p>en el personalizador tal y como hemos visto un poco en la demo<\/p>\n\n\n\n<p>que nos hab\u00e9is mandado, simplemente por recordar esta.<\/p>\n\n\n\n<p>Y se ve que tenemos un dise\u00f1o en formato caja y todo esto lo<\/p>\n\n\n\n<p>podemos ir haciendo ya directamente con Divi de una<\/p>\n\n\n\n<p>parte, pues, muy en un principio.<\/p>\n\n\n\n<p>Simplemente arrancar.<\/p>\n\n\n\n<p>Los ajustes generales, pues, podemos a\u00f1adir, por ejemplo,<\/p>\n\n\n\n<p>las tipograf\u00edas que queremos utilizar.<\/p>\n\n\n\n<p>Pues, en este caso, no s\u00e9, yo creo que est\u00e1bamos antes<\/p>\n\n\n\n<p>discutiendo si es una LAT o una robot o algo as\u00ed.<\/p>\n\n\n\n<p>Yo voy a activar la robot para que lo tengamos.<\/p>\n\n\n\n<p>Pero luego lo voy a hacer solamente con los t\u00edtulos,<\/p>\n\n\n\n<p>porque luego lo vamos a poder hacer con los p\u00e1rrafos tambi\u00e9n<\/p>\n\n\n\n<p>para que ve\u00e1is otra manera de hacerlo,<\/p>\n\n\n\n<p>simplemente para que se vean las posibilidades que hay.<\/p>\n\n\n\n<p>Aqu\u00ed esto, mira, en el caso del personalizador, por ejemplo,<\/p>\n\n\n\n<p>no funciona el buscador de fuentes,<\/p>\n\n\n\n<p>que s\u00ed que funciona luego en los m\u00f3dulos,<\/p>\n\n\n\n<p>que eso, por ejemplo, es un poquito inc\u00f3modo.<\/p>\n\n\n\n<p>Y ya voy a a\u00f1adir ya de paso los colores destacados que utiliza<\/p>\n\n\n\n<p>web, los voy a a\u00f1adir a nivel de la configuraci\u00f3n. Aqu\u00ed publicamos y en el formato lo que os<\/p>\n\n\n\n<p>comentaba, habilitamos el dise\u00f1o en caja. Fijaros que aqu\u00ed, espero que lo est\u00e9is viendo<\/p>\n\n\n\n<p>porque tengo un poco ampliado la pantalla para que se vea lo mejor posible el tama\u00f1o<\/p>\n\n\n\n<p>de esto.<\/p>\n\n\n\n<p>S\u00ed, dir\u00eda que se ve bastante.<\/p>\n\n\n\n<p>Perfecto. Vale, habilitamos el dise\u00f1o en caja, que os fijar\u00e9is que ha metido aqu\u00ed<\/p>\n\n\n\n<p>unas sombras. Las voy a mantener, podr\u00eda quitarlas, pero las voy a mantener un poco<\/p>\n\n\n\n<p>para que veamos esa caja, cambiamos el color del \u00e9nfasis<\/p>\n\n\n\n<p>del tema, que tambi\u00e9n va a ser el rojo que vamos a utilizar en<\/p>\n\n\n\n<p>este dise\u00f1o.<\/p>\n\n\n\n<p>Y yo creo que con esto, bueno, algo que podr\u00edamos hacer<\/p>\n\n\n\n<p>tambi\u00e9n ser\u00eda a\u00f1adir a la paleta del propio tema el color<\/p>\n\n\n\n<p>que queremos usar.<\/p>\n\n\n\n<p>Lo mismo que lo hemos hecho para los enlaces y los acentos.<\/p>\n\n\n\n<p>Si nos vamos a divir a las opciones del tema,<\/p>\n\n\n\n<p>aqu\u00ed podemos a\u00f1adir, por ejemplo,<\/p>\n\n\n\n<p>podemos instituir el rojo que viene por defecto por el rojo<\/p>\n\n\n\n<p>que vamos a utilizar para nuestro dise\u00f1o, que es este.<\/p>\n\n\n\n<p>Esto por tener una configuraci\u00f3n muy b\u00e1sica a la hora de empezar.<\/p>\n\n\n\n<p>Y arrancamos, si quer\u00e9is, ya con lo que es el dise\u00f1o de la<\/p>\n\n\n\n<p>p\u00e1gina.<\/p>\n\n\n\n<p>La voy a trabajar como si fuera una landing,<\/p>\n\n\n\n<p>que un poco est\u00e9ticamente es un poco lo que parece, o una home.<\/p>\n\n\n\n<p>Algo que vemos, por ejemplo, es que no tiene un men\u00fa,<\/p>\n\n\n\n<p>no tiene una zona de logotipo, tiene que una zona de t\u00edtulo.<\/p>\n\n\n\n<p>Entonces, yo lo que voy a hacer es utilizar para empezar a<\/p>\n\n\n\n<p>trabajar&#8211;<\/p>\n\n\n\n<p>Vamos a llamarle el t\u00edtulo de la p\u00e1gina es Mr.<\/p>\n\n\n\n<p>WinSecretShop, pues MrWingSecretShop.<\/p>\n\n\n\n<p>Y lo que vamos a hacer es decirle a Divi que utilice una<\/p>\n\n\n\n<p>plantilla de blank page, es decir, una p\u00e1gina blanco.<\/p>\n\n\n\n<p>La diferencia es que si utilizamos la plantilla normal,<\/p>\n\n\n\n<p>tendremos aqu\u00ed el logotipo por defecto el de Divi,<\/p>\n\n\n\n<p>porque no lo hemos cambiado, y aqu\u00ed ya a\u00f1adir\u00eda en esta zona<\/p>\n\n\n\n<p>de aqu\u00ed arriba a la derecha el men\u00fa principal.<\/p>\n\n\n\n<p>Pero si utilizamos una blank page,<\/p>\n\n\n\n<p>que son las que est\u00e1n pensadas para las landing,<\/p>\n\n\n\n<p>no pintar\u00e1 nada.<\/p>\n\n\n\n<p>directamente estar\u00e1 el lienzo absolutamente en blanco,<\/p>\n\n\n\n<p>que para este caso creo que es m\u00e1s interesante.<\/p>\n\n\n\n<p>Una vez que tengo esta configuraci\u00f3n inicial,<\/p>\n\n\n\n<p>empiezo ya a utilizar el builder de Divi.<\/p>\n\n\n\n<p>A partir de aqu\u00ed, todo esto ya ser\u00eda exactamente igual a como<\/p>\n\n\n\n<p>si estuvieramos utilizando el plugin en lugar del tema.<\/p>\n\n\n\n<p>No habr\u00eda ninguna variaci\u00f3n.<\/p>\n\n\n\n<p>Entramos a editar ya directamente.<\/p>\n\n\n\n<p>Bueno, como acabamos de instalarlo,<\/p>\n\n\n\n<p>me invita a hacer el tour de visita para conocer la<\/p>\n\n\n\n<p>plataforma y me da la posibilidad de elegir un dise\u00f1o,<\/p>\n\n\n\n<p>clonar una p\u00e1gina, construir desde cero,<\/p>\n\n\n\n<p>que es lo que vamos a hacer nosotros.<\/p>\n\n\n\n<p>Entonces, los que ya hay\u00e1is trasteado con Divi,<\/p>\n\n\n\n<p>sab\u00e9is que funciona con secciones, filas.<\/p>\n\n\n\n<p>Las filas est\u00e1n compuestas por filas y columnas y los m\u00f3dulos,<\/p>\n\n\n\n<p>los bloques, por llamar alguna manera,<\/p>\n\n\n\n<p>por intentar encontrar un s\u00edmil entre el glosario de palabras<\/p>\n\n\n\n<p>que utilizamos en Gutenberg y el que se utiliza en Divi.<\/p>\n\n\n\n<p>Entonces, bueno, a\u00f1adimos una fila.<\/p>\n\n\n\n<p>Fijaros que siempre que a\u00f1adimos una secci\u00f3n nos invita a a\u00f1adir<\/p>\n\n\n\n<p>una fila.<\/p>\n\n\n\n<p>Si a\u00f1adimos una fila, nos invita a a\u00f1adir un m\u00f3dulo,<\/p>\n\n\n\n<p>pero no es necesario.<\/p>\n\n\n\n<p>Directamente podemos trabajar con el lienzo en blanco.<\/p>\n\n\n\n<p>Y lo que har\u00edamos, pues, por ir empezando,<\/p>\n\n\n\n<p>ser\u00eda vamos a a\u00f1adir un t\u00edtulo aqu\u00ed.<\/p>\n\n\n\n<p>Este tipo de m\u00f3dulos en Divi son los t\u00edtulos,<\/p>\n\n\n\n<p>son los bloques o m\u00f3dulos de tipo din\u00e1mico.<\/p>\n\n\n\n<p>T\u00edtulo de publicaci\u00f3n.<\/p>\n\n\n\n<p>El t\u00edtulo de publicaci\u00f3n lo que va a hacer siempre es coger el<\/p>\n\n\n\n<p>t\u00edtulo con el que hayamos creado la p\u00e1gina.<\/p>\n\n\n\n<p>No me va a invitar a escribirlo, sino que lo va a colocar<\/p>\n\n\n\n<p>autom\u00e1ticamente.<\/p>\n\n\n\n<p>De hecho, fijaros que ya lo ha metido aqu\u00ed.<\/p>\n\n\n\n<p>ha metido el t\u00edtulo con los metadatos.<\/p>\n\n\n\n<p>Entonces, yo ahora lo que digo es, bien, en este m\u00f3dulo yo quiero<\/p>\n\n\n\n<p>que solamente utilices determinados elementos.<\/p>\n\n\n\n<p>En este caso, el t\u00edtulo, no necesito los metadatos,<\/p>\n\n\n\n<p>no necesito la imagen destacada, adem\u00e1s de momento ya no la<\/p>\n\n\n\n<p>tenemos.<\/p>\n\n\n\n<p>Y ahora lo que vamos a hacer es empezar a trabajar un poco los<\/p>\n\n\n\n<p>estilos.<\/p>\n\n\n\n<p>A m\u00ed me suele gustar construir primero todas las secciones para<\/p>\n\n\n\n<p>tener una visi\u00f3n un poco general y luego a\u00f1adir los estilos.<\/p>\n\n\n\n<p>Pero creo que en este caso yo creo que merece m\u00e1s la pena<\/p>\n\n\n\n<p>hacerlo de una manera un poco ordenada porque lo vamos a ver<\/p>\n\n\n\n<p>mucho mejor.<\/p>\n\n\n\n<p>Entonces, directamente nos ir\u00edamos ya al elemento de la<\/p>\n\n\n\n<p>pesta\u00f1a de trabajo de dise\u00f1o.<\/p>\n\n\n\n<p>Y en este caso, pensad que aqu\u00ed estamos trabajando con un<\/p>\n\n\n\n<p>elemento que es un t\u00edtulo, no un texto, sino un t\u00edtulo.<\/p>\n\n\n\n<p>Entonces, aqu\u00ed nos vamos a la secci\u00f3n de t\u00edtulo.<\/p>\n\n\n\n<p>En este caso, tenemos seleccionado H1.<\/p>\n\n\n\n<p>Y si no fuera la fuente con la que estamos trabajando,<\/p>\n\n\n\n<p>pues habr\u00eda que seleccionarla aqu\u00ed.<\/p>\n\n\n\n<p>Esto no es lo que os comentaba antes.<\/p>\n\n\n\n<p>Aqu\u00ed s\u00ed que podr\u00eda ir a buscar la robot.<\/p>\n\n\n\n<p>Es mucho m\u00e1s c\u00f3modo en este caso.<\/p>\n\n\n\n<p>Pero no me hace falta hacerlo porque ya lo he configurado a<\/p>\n\n\n\n<p>nivel de tema.<\/p>\n\n\n\n<p>Entonces ese paso me lo salto.<\/p>\n\n\n\n<p>Si quer\u00e9is, le podemos meter un tipo de letra un poquito m\u00e1s<\/p>\n\n\n\n<p>pesado.<\/p>\n\n\n\n<p>Y ahora lo que vamos a hacer es simplemente centrarlo y darle<\/p>\n\n\n\n<p>el color rojo que tenemos en nuestro modelo.<\/p>\n\n\n\n<p>Pues para adelante.<\/p>\n\n\n\n<p>Ah\u00ed lo tendr\u00edamos.<\/p>\n\n\n\n<p>Podr\u00edamos trabajar un poquito tambi\u00e9n el tema del tama\u00f1o.<\/p>\n\n\n\n<p>Pues no s\u00e9.<\/p>\n\n\n\n<p>As\u00ed que le metemos aqu\u00ed, no s\u00e9, lo vamos a meter en rems.<\/p>\n\n\n\n<p>Ah\u00ed est\u00e1.<\/p>\n\n\n\n<p>Para que lo tengamos un poquito majo.<\/p>\n\n\n\n<p>Muy recomendable siempre trabajar los textos,<\/p>\n\n\n\n<p>los tama\u00f1os de textos y tal en unidades relativas.<\/p>\n\n\n\n<p>guarden p\u00edxeles, porque esto nos va a ayudar a que,<\/p>\n\n\n\n<p>seguramente, las versiones responsive,<\/p>\n\n\n\n<p>tengamos que trabajar un poco menos en este sentido.<\/p>\n\n\n\n<p>Entonces, bueno, ya tenemos nuestra primera secci\u00f3n.<\/p>\n\n\n\n<p>Vamos con la siguiente.<\/p>\n\n\n\n<p>Bien, una foto de Gizmo con ese texto.<\/p>\n\n\n\n<p>Pues nada, nos venimos aqu\u00ed y a\u00f1adimos una nueva secci\u00f3n.<\/p>\n\n\n\n<p>Es una secci\u00f3n regular con un elemento, una \u00fanica columna.<\/p>\n\n\n\n<p>Y esa columna, pues lo que vamos a hacer es a\u00f1adir un texto.<\/p>\n\n\n\n<p>Vamos a elegir al buscador.<\/p>\n\n\n\n<p>Texto.<\/p>\n\n\n\n<p>El texto este, lo que tiene es la palabra gremlins.<\/p>\n\n\n\n<p>Vamos a suponer que esto ser\u00eda&#8211;<\/p>\n\n\n\n<p>No s\u00e9, por ejemplo, vamos a poner que si esto de aqu\u00ed es un H1,<\/p>\n\n\n\n<p>pues vamos a poner que esto sea un H2, por ejemplo.<\/p>\n\n\n\n<p>Simplemente porque, seguramente, a nivel estructura no tiene<\/p>\n\n\n\n<p>sentido.<\/p>\n\n\n\n<p>Pero para que veamos diferentes posibilidades, le damos&#8211;<\/p>\n\n\n\n<p>Y que tampoco estamos trabajando el SEO como para ponernos&#8211;<\/p>\n\n\n\n<p>Claro.<\/p>\n\n\n\n<p>[RISAS]<\/p>\n\n\n\n<p>Claro.<\/p>\n\n\n\n<p>Bueno, es algo que no cuesta nada a nivel de estructura mental<\/p>\n\n\n\n<p>y creo que ayuda.<\/p>\n\n\n\n<p>Es algo que no cuesta demasiado y, por lo menos,<\/p>\n\n\n\n<p>bueno, yo creo que es interesante hacerlo de esa manera.<\/p>\n\n\n\n<p>Vale, lo tenemos ah\u00ed.<\/p>\n\n\n\n<p>Y ahora lo que vamos a hacer es aplicarle dise\u00f1o aqu\u00ed a esto.<\/p>\n\n\n\n<p>Ponemos el tama\u00f1o&#8211; en este caso, perd\u00f3n, no es texto,<\/p>\n\n\n\n<p>sino que es texto de subt\u00edtulo y es un H2.<\/p>\n\n\n\n<p>Le vamos a dar la fuente a la que tenemos para los t\u00edtulos,<\/p>\n\n\n\n<p>le vamos a dar un poquito de peso y lo vamos a<\/p>\n\n\n\n<p>marcar o lo vamos a alinear a la derecha como lo ten\u00edamos en el modelo original<\/p>\n\n\n\n<p>creo que el color era blanco, bueno primero voy a modificar el tama\u00f1o<\/p>\n\n\n\n<p>para que lo podamos trabajar un poquito mejor, por ejemplo as\u00ed blanco ah\u00ed est\u00e1<\/p>\n\n\n\n<p>claro ahora lo que tenemos que pensar es en la imagen que tenemos de fondo lo que<\/p>\n\n\n\n<p>vamos a hacer en este caso es cargar esa imagen como fondo de la secci\u00f3n<\/p>\n\n\n\n<p>vamos a la secci\u00f3n y escogemos la imagen de fondo con la que vamos a trabajar<\/p>\n\n\n\n<p>que es esta imagen. Vale, ah\u00ed la tenemos ya. Y ahora vamos a a\u00f1adir las siguientes filas de texto que<\/p>\n\n\n\n<p>tenemos. Venimos aqu\u00ed, a\u00f1adimos un nuevo m\u00f3dulo de texto y en este caso tengo un texto, el mejor<\/p>\n\n\n\n<p>regalo de estas navidades.<\/p>\n\n\n\n<p>Vale, lo tenemos aqu\u00ed detr\u00e1s.<\/p>\n\n\n\n<p>Texto en blanco, alineado a la derecha<\/p>\n\n\n\n<p>y vamos a trabajar un poco el tama\u00f1o tambi\u00e9n del texto por aqu\u00ed.<\/p>\n\n\n\n<p>m\u00e1s o menos. A continuaci\u00f3n tenemos otro texto, por trabajar un poquito m\u00e1s r\u00e1pido<\/p>\n\n\n\n<p>voy a duplicar este para que si os fij\u00e1is aqu\u00ed en la secci\u00f3n ten\u00edamos dos textos a<\/p>\n\n\n\n<p>diferente tama\u00f1o con un separador en medio. Entonces duplico un texto, lo que voy a hacer<\/p>\n\n\n\n<p>simplemente es modificar el tama\u00f1o de este segundo. S\u00ed, tampoco lo que dec\u00edamos, tampoco<\/p>\n\n\n\n<p>vamos a poner el piso perfecto. Claro, claro. M\u00e1s o menos. Y ahora lo que vamos a hacer es a\u00f1adir aqu\u00ed un separador.<\/p>\n\n\n\n<p>vamos aqu\u00ed, que era la l\u00ednea esa horizontal que ten\u00edamos. Vale, ya veis que nos lo muestra<\/p>\n\n\n\n<p>por defecto en rojo, vamos a decirle que la queremos en blanco, le vamos a a\u00f1adir un<\/p>\n\n\n\n<p>poquito de, no, esto es el tama\u00f1o, a ver, a ver, a ver, separaci\u00f3n, un segundo, solido<\/p>\n\n\n\n<p>superior, tama\u00f1o, tiene que estar a la derecha y le vamos a meter una anchura del separador<\/p>\n\n\n\n<p>de cuatro p\u00edxeles, por ejemplo, y la anchura m\u00e1xima, no s\u00e9, un 5% igual.<\/p>\n\n\n\n<p>Un poquito m\u00e1s. Ah\u00ed lo tendr\u00edamos, por ejemplo. Si os fij\u00e1is, evidentemente, aqu\u00ed tenemos,<\/p>\n\n\n\n<p>los elementos no tienen un poco las proporciones que tenemos aqu\u00ed, pero esto, una de las grandes<\/p>\n\n\n\n<p>ventajas que tiene Divi es que nos permite trabajar con paddings y m\u00e1rgenes de una forma<\/p>\n\n\n\n<p>muy c\u00f3moda. Por ejemplo, entre separador y la siguiente l\u00ednea de texto que tenemos,<\/p>\n\n\n\n<p>podr\u00edamos modificarlo bien desde el dise\u00f1o en la separaci\u00f3n. Por ejemplo, modificando<\/p>\n\n\n\n<p>el margen de la parte inferior, por ejemplo, lo llevamos a 0 p\u00edxeles y ah\u00ed lo tenemos.<\/p>\n\n\n\n<p>Pero tambi\u00e9n podr\u00edamos hacerlo directamente desde el propio m\u00f3dulo. Fijaros c\u00f3mo el m\u00f3dulo<\/p>\n\n\n\n<p>de texto, cuando arrastro el rat\u00f3n y sale una sombra que me indica el margen que tiene<\/p>\n\n\n\n<p>debajo, pues podr\u00eda modificarlo aqu\u00ed de esta forma si tan c\u00f3moda. A m\u00ed no me suele gustar hacerlo de<\/p>\n\n\n\n<p>esta manera porque te hace muy f\u00e1cil perder el ritmo de las proporciones. No lo ajusta num\u00e9ricamente.<\/p>\n\n\n\n<p>Si os fij\u00e1is cuando yo lo deslizo, s\u00ed que llega un momento que s\u00ed que se ve, ah\u00ed no se ve muy bien<\/p>\n\n\n\n<p>por el fondo, pero ya me indica que estoy en 90 y tantos p\u00edxeles, 100 p\u00edxeles ah\u00ed, pero cuando ya<\/p>\n\n\n\n<p>es muy estrecho y est\u00e1s trabajando por debajo de 30 p\u00edxeles ya no lo ves. Entonces, a m\u00ed me suele<\/p>\n\n\n\n<p>gustar m\u00e1s irme a la configuraci\u00f3n del propio m\u00f3dulo y ah\u00ed verlo.<\/p>\n\n\n\n<p>Si quer\u00e9is, le vamos a meter tambi\u00e9n un poquito de padding por aqu\u00ed a la<\/p>\n\n\n\n<p>secci\u00f3n para que nos quede un poquito m\u00e1s chulo.<\/p>\n\n\n\n<p>Por seguir un poco el modelo original, le metemos 100 p\u00edxeles de padding<\/p>\n\n\n\n<p>interno por arriba y por abajo y ya lo tendr\u00edamos.<\/p>\n\n\n\n<p>Tenemos la segunda secci\u00f3n, m\u00e1s o menos.<\/p>\n\n\n\n<p>Si quer\u00e9is, se podr\u00eda hacer tambi\u00e9n un poquito m\u00e1s grande.<\/p>\n\n\n\n<p>Aqu\u00ed podr\u00eda ser interesante trabajar con tantos por ciento tambi\u00e9n en este<\/p>\n\n\n\n<p>sentido.<\/p>\n\n\n\n<p>Nos vamos al dise\u00f1o, la separaci\u00f3n.<\/p>\n\n\n\n<p>Ya tenemos 100 y 100, pero podr\u00edamos estar jugando,<\/p>\n\n\n\n<p>pues no s\u00e9, con un 10%&#8211;<\/p>\n\n\n\n<p>con un 10%, por ejemplo.<\/p>\n\n\n\n<p>O los VHs que siempre casi se acomodan.<\/p>\n\n\n\n<p>Exacto.<\/p>\n\n\n\n<p>Exacto.<\/p>\n\n\n\n<p>Vale, pues ya tendr\u00edamos nuestra segunda secci\u00f3n<\/p>\n\n\n\n<p>aposiblemente.<\/p>\n\n\n\n<p>Vale, esta tercera secci\u00f3n es bastante interesante.<\/p>\n\n\n\n<p>La vamos a a\u00f1adir.<\/p>\n\n\n\n<p>Lo que vamos a hacer ahora, evidentemente,<\/p>\n\n\n\n<p>es trabajar con tres columnas porque tenemos tres elementos.<\/p>\n\n\n\n<p>Y, bueno, perd\u00f3n, primero ser\u00eda una fila, que ser\u00eda el t\u00edtulo de la secci\u00f3n.<\/p>\n\n\n\n<p>Texto, el t\u00edtulo es, solo recuerdo las tres normas b\u00e1sicas.<\/p>\n\n\n\n<p>Solo no llevo acento, pero bueno, eso se equipa hacia m\u00ed.<\/p>\n\n\n\n<p>Vamos a dejarlo as\u00ed, porque luego no digas que no se parece.<\/p>\n\n\n\n<p>Ah\u00ed lo tenemos.<\/p>\n\n\n\n<p>Y nada, aplicamos, si quer\u00e9is, podr\u00edamos aplicar incluso los propios estilos aqu\u00ed del t\u00edtulo.<\/p>\n\n\n\n<p>Podr\u00edamos hacer&#8230; Vamos a ver, podr\u00edamos venir aqu\u00ed<\/p>\n\n\n\n<p>y copiar los estilos de ese m\u00f3dulo.<\/p>\n\n\n\n<p>Nos llevamos aqu\u00ed. Ah, bueno, no va a funcionar porque eso era un H1 y esto es un p\u00e1rrafo.<\/p>\n\n\n\n<p>A ver&#8230;<\/p>\n\n\n\n<p>Claro, no me deja ni pegarlo, porque son distintos.<\/p>\n\n\n\n<p>Nada, lo tengo que hacer aqu\u00ed. Luego lo copio en el siguiente modelo para que lo ve\u00e1is.<\/p>\n\n\n\n<p>Perd\u00f3n, esto es un H2, esta secci\u00f3n.<\/p>\n\n\n\n<p>En el dise\u00f1o, centramos.<\/p>\n\n\n\n<p>Damos el color rojo.<\/p>\n\n\n\n<p>\u00bfD\u00f3nde estoy? Estoy en texto, perd\u00f3n.<\/p>\n\n\n\n<p>Texto y subt\u00edtulo. H2.<\/p>\n\n\n\n<p>Rojo.<\/p>\n\n\n\n<p>Centrado.<\/p>\n\n\n\n<p>Un poquito de peso.<\/p>\n\n\n\n<p>Y el tama\u00f1o, pues&#8230;<\/p>\n\n\n\n<p>Tenemos y ahora debajo de esta, fijaros que tenemos una secci\u00f3n con una fila dentro de la misma secci\u00f3n, vamos a a\u00f1adir tres columnas,<\/p>\n\n\n\n<p>una fila con tres columnas y aqu\u00ed<\/p>\n\n\n\n<p>este tipo de elementos, esto es lo que los m\u00f3dulos de Divi llaman un anuncio o un blurb en ingl\u00e9s,<\/p>\n\n\n\n<p>que es este tipo de elemento que al final no es m\u00e1s que como veis aqu\u00ed en la plantilla una imagen con un t\u00edtulo y<\/p>\n\n\n\n<p>una descripci\u00f3n. En algunos casos se puede a\u00f1adir tambi\u00e9n con un bot\u00f3n, tiene otro m\u00f3dulo que es lo mismo pero con un bot\u00f3n.<\/p>\n\n\n\n<p>Entonces aqu\u00ed ser\u00eda<\/p>\n\n\n\n<p>Cuidado con la luz.<\/p>\n\n\n\n<p>Cuidado con la luz.<\/p>\n\n\n\n<p>La descripci\u00f3n la voy a dejar porque yo creo que ah\u00ed no os vale,<\/p>\n\n\n\n<p>que ser\u00eda el cuerpo.<\/p>\n\n\n\n<p>Y a continuaci\u00f3n, la imagen o el icono, pues,<\/p>\n\n\n\n<p>de las im\u00e1genes que nos hab\u00e9is pasado, pues, est\u00e1 del solete este.<\/p>\n\n\n\n<p>Y ahora tendr\u00edamos.<\/p>\n\n\n\n<p>Ahora, llegar\u00eda la parte un poco de dise\u00f1o de centrar un poco los<\/p>\n\n\n\n<p>textos para que tengan esta misma estructura.<\/p>\n\n\n\n<p>Vamos al t\u00edtulo.<\/p>\n\n\n\n<p>centramos, vamos al cuerpo del texto y lo centramos tambi\u00e9n.<\/p>\n\n\n\n<p>Si quer\u00e9is porque se vea exactamente igual,<\/p>\n\n\n\n<p>voy a dejar solamente una l\u00ednea de texto.<\/p>\n\n\n\n<p>Ah\u00ed est\u00e1.<\/p>\n\n\n\n<p>Y ah\u00ed lo tendr\u00edamos.<\/p>\n\n\n\n<p>Aqu\u00ed hay una cosa interesante que es que si os fij\u00e1is en el<\/p>\n\n\n\n<p>dise\u00f1o original, el interlineado entre el t\u00edtulo y el texto es<\/p>\n\n\n\n<p>muy, muy peque\u00f1ito.<\/p>\n\n\n\n<p>Est\u00e1 muy ajustado.<\/p>\n\n\n\n<p>Entonces, aqu\u00ed hay una cosa que cuando nosotros utilizamos<\/p>\n\n\n\n<p>estos m\u00f3dulos completos, como el m\u00f3dulo de anuncio,<\/p>\n\n\n\n<p>no podemos hacer algunos&#8211; los ajustes de separaci\u00f3n entre los<\/p>\n\n\n\n<p>diferentes elementos que componen el m\u00f3dulo no se puede hacer a<\/p>\n\n\n\n<p>nivel de men\u00fas.<\/p>\n\n\n\n<p>Si nosotros nos vamos a la pesta\u00f1a de dise\u00f1o y nos vamos a<\/p>\n\n\n\n<p>la separaci\u00f3n, fijaros que es la separaci\u00f3n de todo el bloque.<\/p>\n\n\n\n<p>Es decir, podr\u00eda afectar al margen y el padding de todo el<\/p>\n\n\n\n<p>bloque, de toda la caja completa.<\/p>\n\n\n\n<p>Para hacerlo de manera interna, pues tendr\u00edamos que irnos a la<\/p>\n\n\n\n<p>pesta\u00f1a avanzado y dentro del CSS personalizado,<\/p>\n\n\n\n<p>podr\u00edamos ir al CSS, por ejemplo,<\/p>\n\n\n\n<p>de el t\u00edtulo del anuncio, que ser\u00eda este elemento,<\/p>\n\n\n\n<p>y decirle que queremos un&#8211;<\/p>\n\n\n\n<p>no s\u00e9 c\u00f3mo estar\u00e1, pero vamos por ir probando.<\/p>\n\n\n\n<p>Margin button de 0 pixeles.<\/p>\n\n\n\n<p>No, vamos a hacerlo con padding, que es lo que tiene padding.<\/p>\n\n\n\n<p>Ah\u00ed est\u00e1.<\/p>\n\n\n\n<p>Veis, nos lo llevamos ah\u00ed y ya lo tenemos.<\/p>\n\n\n\n<p>Entonces, eso s\u00ed que tenemos que medir hacerlo aqu\u00ed a nivel<\/p>\n\n\n\n<p>de c\u00f3digo.<\/p>\n\n\n\n<p>Esto tambi\u00e9n se podr\u00eda haber hecho simplemente con un m\u00f3dulo<\/p>\n\n\n\n<p>de imagen, un m\u00f3dulo de texto y otro m\u00f3dulo de texto.<\/p>\n\n\n\n<p>Y ah\u00ed lo podr\u00edamos haber hecho con los paddings estos un poco<\/p>\n\n\n\n<p>m\u00e1s visuales, \u00bfno? Pero al utilizar un m\u00f3dulo ya completo, no nos permite hacer<\/p>\n\n\n\n<p>esos ajustes tan precisos dentro. Vale. \u00bfOs o\u00eda alguien decir algo? No s\u00e9 si<\/p>\n\n\n\n<p>era que quer\u00edais preguntarme algo a esto. No, no, bien, yo creo que por aligerar un<\/p>\n\n\n\n<p>poco y no dejar sin tiempo al resto de compa\u00f1eros, igual puedes simplemente<\/p>\n\n\n\n<p>clonar esta, \u00bfno? Para que la estructura se entienda y&#8230; S\u00ed, s\u00ed, era lo que pensaba hacer con este.<\/p>\n\n\n\n<p>Vale, vale, perfecto.<\/p>\n\n\n\n<p>Adem\u00e1s, que hay todo el sentido del mundo,<\/p>\n\n\n\n<p>porque aqu\u00ed la gracia es que, adem\u00e1s,<\/p>\n\n\n\n<p>una vez que ya has ajustado el dise\u00f1o,<\/p>\n\n\n\n<p>pues simplemente replicarlo.<\/p>\n\n\n\n<p>Vamos con la siguiente secci\u00f3n.<\/p>\n\n\n\n<p>Vale, y esta es una de las m\u00e1s chulas tambi\u00e9n.<\/p>\n\n\n\n<p>Vamos a&#8211; Vale, en esta hab\u00eda que haber aplicado un color de<\/p>\n\n\n\n<p>fondo, pero lo hacemos en un momentito.<\/p>\n\n\n\n<p>Un fondo gris.<\/p>\n\n\n\n<p>Vale, ah\u00ed est\u00e1.<\/p>\n\n\n\n<p>A\u00f1adimos una secci\u00f3n nueva.<\/p>\n\n\n\n<p>Y en este caso, pues, es una secci\u00f3n, pues,<\/p>\n\n\n\n<p>m\u00e1s o menos con este formato, en la que a la izquierda tenemos<\/p>\n\n\n\n<p>una imagen de nuestro querido amigo, no s\u00e9 si creo que es&#8211;<\/p>\n\n\n\n<p>-Gizmo.<\/p>\n\n\n\n<p>-Vale, s\u00ed, Gizmo, Moui, \u00bfvale?<\/p>\n\n\n\n<p>Y aqu\u00ed a\u00f1adimos un texto, \u00bfverdad?<\/p>\n\n\n\n<p>Vale.<\/p>\n\n\n\n<p>Voy a poner dos p\u00e1rrafos tal y como viene en el ejemplo.<\/p>\n\n\n\n<p>Algo interesante aqu\u00ed en este dise\u00f1o es que, fijaros,<\/p>\n\n\n\n<p>no se aprecia totalmente, pero lo que tenemos es que el texto<\/p>\n\n\n\n<p>est\u00e1, digamos, alineado al centro.<\/p>\n\n\n\n<p>Tiene un alimento vertical, una alineaci\u00f3n vertical.<\/p>\n\n\n\n<p>Esto, por ejemplo, que hay otras herramientas que s\u00ed que lo<\/p>\n\n\n\n<p>tienen, en el caso de Divi no tiene un bot\u00f3n de alineamiento<\/p>\n\n\n\n<p>vertical.<\/p>\n\n\n\n<p>Entonces, no queda otra que utilizar las propiedades de<\/p>\n\n\n\n<p>Flex.<\/p>\n\n\n\n<p>\u00bfC\u00f3mo se hace esto?<\/p>\n\n\n\n<p>Lo hago muy r\u00e1pido, muy r\u00e1pido.<\/p>\n\n\n\n<p>Si nos vamos a la configuraci\u00f3n de las columnas,<\/p>\n\n\n\n<p>a los ajustes de la fila, lo que tenemos que hacer es decir en<\/p>\n\n\n\n<p>dise\u00f1o que en el tama\u00f1o hay que igualar las alturas de las<\/p>\n\n\n\n<p>columnas.<\/p>\n\n\n\n<p>Esto, digamos, que activa la propiedad flex de Divi.<\/p>\n\n\n\n<p>Una vez que lo tenemos, aunque nosotros ahora no lo vemos,<\/p>\n\n\n\n<p>la caja que contiene este m\u00f3dulo de texto se ha igualado en<\/p>\n\n\n\n<p>altura a la de la imagen.<\/p>\n\n\n\n<p>Aunque nosotros no lo veamos.<\/p>\n\n\n\n<p>Si aplic\u00e1ramos un fondo, s\u00ed que podr\u00edamos verlo.<\/p>\n\n\n\n<p>Y ahora, para que se centre esto respecto a la imagen,<\/p>\n\n\n\n<p>Nos ir\u00edamos a las propiedades de dise\u00f1o de la columna en cuesti\u00f3n.<\/p>\n\n\n\n<p>En avanzado, CSS personalizado y ahora elemento principal,<\/p>\n\n\n\n<p>pues le meter\u00edamos la propiedad de alguien, self, enter.<\/p>\n\n\n\n<p>Ah\u00ed estar\u00eda, \u00bfvale?<\/p>\n\n\n\n<p>Ya lo tenemos.<\/p>\n\n\n\n<p>&#8211; Muy bien.<\/p>\n\n\n\n<p>&#8211; Y ah\u00ed est\u00e1, \u00bfvale?<\/p>\n\n\n\n<p>Pues como veis, en este caso&#8211;<\/p>\n\n\n\n<p>&#8211; [INAUDIBLE]<\/p>\n\n\n\n<p>&#8211; &#8211;choquilla, \u00bfeh?<\/p>\n\n\n\n<p>&#8211; S\u00ed, este es este, porque no es que no hay una opci\u00f3n en el men\u00fa<\/p>\n\n\n\n<p>para hacerlo, \u00bfvale?<\/p>\n\n\n\n<p>Este elemento, este espacio que tenemos aqu\u00ed de separaci\u00f3n entre ambas<\/p>\n\n\n\n<p>columnas, tambi\u00e9n se puede tunear un poquito.<\/p>\n\n\n\n<p>Tambi\u00e9n en la configuraci\u00f3n de dise\u00f1o de las columnas,<\/p>\n\n\n\n<p>que es aqu\u00ed en el uso personalizado del canal de ancho.<\/p>\n\n\n\n<p>Esto, por ejemplo, es bastante pr\u00e1ctico.<\/p>\n\n\n\n<p>Como veis, podemos modificarlo de alguna manera.<\/p>\n\n\n\n<p>Esto depende de la estructura que tengamos.<\/p>\n\n\n\n<p>Se notar\u00e1 m\u00e1s o menos.<\/p>\n\n\n\n<p>Si vamos a este modelo, fijaros c\u00f3mo ah\u00ed ya se ha eliminado<\/p>\n\n\n\n<p>totalmente el padding, el padding lateral.<\/p>\n\n\n\n<p>Y podemos ajustarlo un poquito m\u00e1s.<\/p>\n\n\n\n<p>por ejemplo, por poner algo as\u00ed.<\/p>\n\n\n\n<p>Y vamos con el final, si quer\u00e9is,<\/p>\n\n\n\n<p>que como es un elemento din\u00e1mico es bastante chulo,<\/p>\n\n\n\n<p>entonces a\u00f1adimos una nueva secci\u00f3n.<\/p>\n\n\n\n<p>[INAUDIBLE]<\/p>\n\n\n\n<p>\u00bfC\u00f3mo?<\/p>\n\n\n\n<p>Que te lo puedes ahorrar el t\u00edtulo.<\/p>\n\n\n\n<p>S\u00ed, no, me lo voy a ahorrar porque lo voy a copiar de aqu\u00ed.<\/p>\n\n\n\n<p>Lo voy a duplicar.<\/p>\n\n\n\n<p>Esta es una de las gracias precisamente de utilizar estos<\/p>\n\n\n\n<p>elementos.<\/p>\n\n\n\n<p>Lo meto aqu\u00ed y ya lo tenemos.<\/p>\n\n\n\n<p>\u00bfVale?<\/p>\n\n\n\n<p>S\u00ed.<\/p>\n\n\n\n<p>el fondo que ve\u00edamos antes era el mismo.<\/p>\n\n\n\n<p>Ah\u00ed estar\u00eda m\u00e1s o menos.<\/p>\n\n\n\n<p>Y ahora s\u00ed que va aqu\u00ed un elemento din\u00e1mico,<\/p>\n\n\n\n<p>que es el elemento del blog.<\/p>\n\n\n\n<p>Pues nos vamos a a\u00f1adir un nuevo&#8211;<\/p>\n\n\n\n<p>Otra cosa que quer\u00eda comentar es que podemos trabajar bien en<\/p>\n\n\n\n<p>esta vista o bien a veces tambi\u00e9n en esta vista de bloques,<\/p>\n\n\n\n<p>que es tambi\u00e9n muy interesante en algunos casos.<\/p>\n\n\n\n<p>Ya dimos un bloque de blog.<\/p>\n\n\n\n<p>Aqu\u00ed lo tenemos.<\/p>\n\n\n\n<p>Y podr\u00edamos ir configur\u00e1ndolo desde aqu\u00ed simplemente por<\/p>\n\n\n\n<p>tener un poco las dos perspectivas.<\/p>\n\n\n\n<p>El m\u00f3dulo de blog siempre se abre con un dise\u00f1o en formato ancho<\/p>\n\n\n\n<p>completo, pero nos podemos ir a una rejilla.<\/p>\n\n\n\n<p>Ah\u00ed lo tenemos.<\/p>\n\n\n\n<p>Hay alg\u00fan elemento que no tiene la imagen destacada,<\/p>\n\n\n\n<p>pero para que os hag\u00e1is una idea simplemente.<\/p>\n\n\n\n<p>Voy a decir que quiero ver solamente tres entradas para que<\/p>\n\n\n\n<p>respetar el dise\u00f1o original.<\/p>\n\n\n\n<p>Y ahora lo que hacemos es que dentro del contenido lo que<\/p>\n\n\n\n<p>podemos hacer es decirle, aparte del extracto y tal,<\/p>\n\n\n\n<p>porque se pareza, vamos a meter un poquito m\u00e1s largo.<\/p>\n\n\n\n<p>Y los elementos que queremos que se vean.<\/p>\n\n\n\n<p>Por defecto, tenemos los elementos de imagen destacada<\/p>\n\n\n\n<p>que no aparecen en el modelo original.<\/p>\n\n\n\n<p>S\u00ed que aparece el bot\u00f3n de leer m\u00e1s.<\/p>\n\n\n\n<p>No aparece ni en los metadatos.<\/p>\n\n\n\n<p>Ah\u00ed lo tendr\u00edamos.<\/p>\n\n\n\n<p>Y m\u00e1s o menos lo tendr\u00edamos.<\/p>\n\n\n\n<p>Esto ser\u00eda un poco la idea.<\/p>\n\n\n\n<p>El fondo, en este caso, tenemos que ponerlo transparente para<\/p>\n\n\n\n<p>que nos haga ese efecto que tiene Dibi con las cajas del<\/p>\n\n\n\n<p>blog.<\/p>\n\n\n\n<p>Y yo creo que m\u00e1s o menos lo tenemos.<\/p>\n\n\n\n<p>Guay, guay, guay.<\/p>\n\n\n\n<p>En un plus plus.<\/p>\n\n\n\n<p>Creo que no me he enredado tampoco demasiado.<\/p>\n\n\n\n<p>Vamos a verlo si quer\u00e9is, si saliendo el constructor visual,<\/p>\n\n\n\n<p>porque a veces var\u00eda un poquito.<\/p>\n\n\n\n<p>Pero, bueno, no hemos entrado tampoco en el detalle de c\u00f3mo<\/p>\n\n\n\n<p>aparecen los m\u00f3dulos, porque podemos hacer que aparezcan<\/p>\n\n\n\n<p>por fundido, aparezcan de una manera din\u00e1mica y tal.<\/p>\n\n\n\n<p>Pero esta ser\u00eda un poco la idea.<\/p>\n\n\n\n<p>Creo que m\u00e1s o menos lo tendr\u00eda.<\/p>\n\n\n\n<p>S\u00ed.<\/p>\n\n\n\n<p>&#8211; Bye. &#8211; Pablo, pues&#8230;<\/p>\n\n\n\n<p>Pues muchas gracias por las compartidas.<\/p>\n\n\n\n<p>Nunca lo hab\u00eda visto por dentro.<\/p>\n\n\n\n<p>&#8211; S\u00ed, s\u00ed. &#8211; Mira.<\/p>\n\n\n\n<p>Muy interesante.<\/p>\n\n\n\n<p>Ah\u00ed lo tenemos.<\/p>\n\n\n\n<p>Ya veis que, bueno, lo he explicado muy r\u00e1pido.<\/p>\n\n\n\n<p>Seguramente se pueden hacer muchos trucos y muchas cositas,<\/p>\n\n\n\n<p>pero quer\u00eda que se vieran&#8230;<\/p>\n\n\n\n<p>Es que adem\u00e1s en DIVI lo que sucede es que hay muchas formas<\/p>\n\n\n\n<p>de hacer las mismas cosas.<\/p>\n\n\n\n<p>Entonces, simplemente porque veamos&#8230;<\/p>\n\n\n\n<p>He ido saltando un poco de diferentes posibilidades<\/p>\n\n\n\n<p>para que se vea lo que se puede hacer.<\/p>\n\n\n\n<p>No, yo creo que perfecto porque al final la idea es un poco que la gente viera la interfaz,<\/p>\n\n\n\n<p>que es importante tambi\u00e9n para ver si a nivel de usuario les entra bien o entienden los<\/p>\n\n\n\n<p>men\u00fas porque es verdad que yo de Veele lo utilic\u00e9 hace creo que cuatro a\u00f1os por primera<\/p>\n\n\n\n<p>y casi \u00faltima vez y las est\u00e9ticas se parece mucho pero var\u00eda un mont\u00f3n. Ahora hay muchos<\/p>\n\n\n\n<p>m\u00e1s sub apartados donde puedes, bueno, es m\u00e1s granular, \u00bfno? Supongo que es algo que<\/p>\n\n\n\n<p>est\u00e1 pidiendo el usuario final y la verdad es que tiene una cascada de<\/p>\n\n\n\n<p>bastantes elementos que puedes ir tocando.<\/p>\n\n\n\n<p>A ver, hay que pensar que Divi es un costutor que tiene mucho tiempo, es de los m\u00e1s antiguos,<\/p>\n\n\n\n<p>lleva mucho tiempo funcionando y claro, se han ido a\u00f1adiendo muchas cosas,<\/p>\n\n\n\n<p>de hecho algo interesante es que se han concentrado en algunas fases del proyecto,<\/p>\n\n\n\n<p>en a\u00f1adir cosas nuevas y en otras en mejorar la usabilidad y el rendimiento,<\/p>\n\n\n\n<p>porque es verdad que hubo un momento que se convirti\u00f3 en algo muy pesado<\/p>\n\n\n\n<p>Y ah\u00ed estuvieron trabajando en una versi\u00f3n solamente en mejorar la<\/p>\n\n\n\n<p>velocidad y todo eso.<\/p>\n\n\n\n<p>Y yo creo que lo hicieron bastante bien.<\/p>\n\n\n\n<p>Y veo que comenta Nuria, por ejemplo,<\/p>\n\n\n\n<p>en el chat el tema del c\u00f3digo.<\/p>\n\n\n\n<p>Hombre, pues evidentemente, pues el que da un costutor visual.<\/p>\n\n\n\n<p>Pues da el que da.<\/p>\n\n\n\n<p>Pero es que su, digamos, su opuesto no es dar un c\u00f3digo limpio,<\/p>\n\n\n\n<p>sino que sea muy f\u00e1cil.<\/p>\n\n\n\n<p>Claro, dice que el c\u00f3digo estar\u00e1 lleno de Dibs.<\/p>\n\n\n\n<p>Yo le digo, claro que est\u00e1 lleno de Dibs.<\/p>\n\n\n\n<p>Pero es que la gracia es que esto lo puede hacer alguien que<\/p>\n\n\n\n<p>sabe lo que es un div. Claro, claramente est\u00e1 enfocado para un usuario final<\/p>\n\n\n\n<p>distinto al que lo hace. Pero nada, la gracia de hoy es que ve\u00e1is los<\/p>\n\n\n\n<p>distintas opciones y vamos con la segunda opci\u00f3n. Muchas gracias Pablo,<\/p>\n\n\n\n<p>qu\u00e9date un ratito por aqu\u00ed que todav\u00eda seguro que me quedo. Me quedo a contraer a los<\/p>\n\n\n\n<p>trozos del chat.<\/p>\n\n\n\n<p>Gracias Pablo. Vamos con el segundo, que es un beach binger m\u00e1s modernito que de hecho<\/p>\n\n\n\n<p>podr\u00edamos decir que es el page builder de moda, estoy hablando de Elementor y nos hemos<\/p>\n\n\n\n<p>tra\u00eddo aqu\u00ed uno de los elementas que me consta que sabe bastante del page builder. Muchas<\/p>\n\n\n\n<p>gracias por venir Santiago Alonso.<\/p>\n\n\n\n<p>[Risas]<\/p>\n\n\n\n<p>\u00bfTe oimos?<\/p>\n\n\n\n<p>Micro. \u00bfTe oimos o no te oimos?<\/p>\n\n\n\n<p>Est\u00e1 hablando del micro.<\/p>\n\n\n\n<p>Me estaba muteando. Claro.<\/p>\n\n\n\n<p>Vale, para el tutorial mejor lo hacemos con audio,<\/p>\n\n\n\n<p>\u00bfvale? Para que la gente&#8230;<\/p>\n\n\n\n<p>Es que como es muy intuitivo el inventor,<\/p>\n\n\n\n<p>lo pod\u00eda hacer sin \u00e9l.<\/p>\n\n\n\n<p>Bien, bien jugado, bien jugado.<\/p>\n\n\n\n<p>Pues nada, vamos al l\u00edo.<\/p>\n\n\n\n<p>Bueno, Santiago Alonso<\/p>\n\n\n\n<p>tiene mucha experiencia<\/p>\n\n\n\n<p>experiencia con Elementor, as\u00ed que creo que es un buen ejemplo de una buena<\/p>\n\n\n\n<p>forma de ver por dentro c\u00f3mo funciona y vamos a ello Santi, para no<\/p>\n\n\n\n<p>enrollarnos m\u00e1s. Genial, vale, no voy a mirar para all\u00e1 porque tengo la otra<\/p>\n\n\n\n<p>pantalla por aqu\u00ed. Yo he decidido a nivel de plugins solamente vamos a<\/p>\n\n\n\n<p>trabajar con Elementor Free, vale, Elementor tiene dos versiones, tiene una Free y una<\/p>\n\n\n\n<p>Pro. Vamos a trabajar con la Free y para una cosita del dise\u00f1o que no est\u00e1 en la<\/p>\n\n\n\n<p>versi\u00f3n Free he optado por otro plugin que se llama Premiere Add-ons for Elementor<\/p>\n\n\n\n<p>que est\u00e1 libre tambi\u00e9n en el repositorio, para no tener que tirar de<\/p>\n\n\n\n<p>opci\u00f3n de pago. A nivel de tema<\/p>\n\n\n\n<p>aunque tengo instalado ahora mismo 2021, como es una landing y es s\u00faper<\/p>\n\n\n\n<p>limpio lo que queremos hacer, voy a optar por &#8220;Hello theme&#8221;, es un tema que es del<\/p>\n\n\n\n<p>propio Elementor y que no tiene absolutamente nada, vale, voy a instalarlo y<\/p>\n\n\n\n<p>activarlo ahora mismo y vemos lo que lo que hace, como vamos a<\/p>\n\n\n\n<p>hacerlo todo con Elementor, el tema no tiene nada, es una carcasa absolutamente<\/p>\n\n\n\n<p>vac\u00eda. Si cargamos la web vemos lo que tenemos que es pues nada, el color de<\/p>\n\n\n\n<p>Elementor y ya est\u00e1. Y ahora s\u00ed vamos a arrancar. Voy a crear una p\u00e1gina.<\/p>\n\n\n\n<p>Hay algunos pasos que son muy parecidos a los que ha hecho Pablo porque al<\/p>\n\n\n\n<p>final Elementor y Divi han ido de la mano. De hecho hubo un tiempo en el que<\/p>\n\n\n\n<p>parec\u00eda que se iban pisando las funcionalidades uno con el otro y se<\/p>\n\n\n\n<p>van copiando cosas. Vamos a crear una p\u00e1gina, le ponemos el t\u00edtulo, la publicamos.<\/p>\n\n\n\n<p>Hay que hacer este paso por Gutenberg Intermedio porque no nos deja saltar<\/p>\n\n\n\n<p>directamente Elementor y una vez la tenemos publicada ya s\u00ed podemos darle al<\/p>\n\n\n\n<p>bot\u00f3n de editar con Elementor.<\/p>\n\n\n\n<p>Vamos a encargar. Elementor en la \u00faltima versi\u00f3n meti\u00f3 una cosa que aunque est\u00e1<\/p>\n\n\n\n<p>todav\u00eda en desarrollo, a m\u00ed me parece bestial, que es lo que ellos llamaron<\/p>\n\n\n\n<p>sistema de dise\u00f1o. El sistema de dise\u00f1o lo que nos deja es tener tipograf\u00edas y<\/p>\n\n\n\n<p>colores a nivel global que luego vamos a poder ir utilizando y jugando con ellos<\/p>\n\n\n\n<p>en todos los elementos del dise\u00f1o y adem\u00e1s nos va a permitir luego<\/p>\n\n\n\n<p>modificarlos de manera mucho m\u00e1s r\u00e1pida. Lo vamos a ver luego.<\/p>\n\n\n\n<p>Primer paso que vamos a hacer, muy parecido al que ha hecho en Divi, Pablo, nos vamos<\/p>\n\n\n\n<p>ir a los ajustes que est\u00e1n aqu\u00ed abajo y la estructura de p\u00e1gina le vamos a<\/p>\n\n\n\n<p>decir Elementor Canvas. \u00bfPara qu\u00e9? Para que omita la cabecera y el footer que<\/p>\n\n\n\n<p>tengan el tema porque lo que estamos montando es una una alambil entonces<\/p>\n\n\n\n<p>todo va a ser lo que montemos con Elementor.<\/p>\n\n\n\n<p>Mientras carga, vale.<\/p>\n\n\n\n<p>Vamos a definir lo que os dec\u00eda del sistema de dise\u00f1o que lo tenemos en<\/p>\n\n\n\n<p>ajustes del sitio. Desde aqu\u00ed tenemos colores globales y fuentes<\/p>\n\n\n\n<p>globales y luego podemos definir tambi\u00e9n estilos gen\u00e9ricos para las principales<\/p>\n\n\n\n<p>etiquetas de tipograf\u00eda, para los botones, im\u00e1genes, campos del formulario y m\u00e1s<\/p>\n\n\n\n<p>cosas que no vamos a tocar ahora. Colores globales, vamos a definir los que<\/p>\n\n\n\n<p>ten\u00edamos en nuestro dise\u00f1o, que era como principal este color granate, como<\/p>\n\n\n\n<p>secundario para los textos, yo creo que me voy a quedar con este, bueno no era<\/p>\n\n\n\n<p>negro, m\u00e1s puro, as\u00ed que me voy a coger un color m\u00e1s negro,<\/p>\n\n\n\n<p>vale, lo copia donde no era, bueno, no igual, como color de \u00e9nfasis que ser\u00e1 el de los<\/p>\n\n\n\n<p>enlaces, tambi\u00e9n nos vamos a coger el granate y adem\u00e1s me voy a a\u00f1adir uno<\/p>\n\n\n\n<p>m\u00e1s para tenerlo a mano que es el gris de los fondos de las secciones y le<\/p>\n\n\n\n<p>vamos a llamar muy originalmente gris fondos.<\/p>\n\n\n\n<p>Y tenemos todos los colores a mano, esto ya ver\u00e9is que aunque no estamos viendo<\/p>\n\n\n\n<p>nada nos va a ser s\u00faper \u00fatil luego. A nivel de fuentes globales vamos a hacer<\/p>\n\n\n\n<p>lo mismo. Una fuente principal. \u00bfHemos dicho roboto al final? S\u00ed. Vale, hemos dicho roboto.<\/p>\n\n\n\n<p>Que ten\u00edamos a Pau ah\u00ed en el chat, dice &#8220;enhorlo&#8221;. Bien, lo voy a poner en pixels para no calcular,<\/p>\n\n\n\n<p>\u00bfvale? Pero luego lo podr\u00edamos cambiar. En elementos, una cosa que podemos hacer, todo lo<\/p>\n\n\n\n<p>que vayamos viendo a nivel de tipograf\u00edas, etc\u00e9tera, cada dos por tres nos vamos a encontrar<\/p>\n\n\n\n<p>este iconito. Este icono nos dice vamos a ir definiendo los tama\u00f1os en los tres<\/p>\n\n\n\n<p>breakpoints que tiene que tiene por defecto definidos que son para<\/p>\n\n\n\n<p>escritorio para tablet y para m\u00f3viles.<\/p>\n\n\n\n<p>Si no decimos nada lo hereda hacia abajo sin ning\u00fan tipo de problema si por<\/p>\n\n\n\n<p>ejemplo definimos una de tablet se va a heredar tambi\u00e9n para el m\u00f3vil salvo<\/p>\n\n\n\n<p>que definamos uno espec\u00edfico en m\u00f3vil. Definimos tama\u00f1o definimos peso<\/p>\n\n\n\n<p>may\u00fasculas transformaci\u00f3n etc\u00e9tera<\/p>\n\n\n\n<p>altura de l\u00ednea lo voy a dejar as\u00ed<\/p>\n\n\n\n<p>el secundario lo voy a dejar tambi\u00e9n<\/p>\n\n\n\n<p>con<\/p>\n\n\n\n<p>el robot<\/p>\n\n\n\n<p>y le voy a poner<\/p>\n\n\n\n<p>otro por ejemplo 500 de peso voy as\u00ed un<\/p>\n\n\n\n<p>poco a ojo. El texto tambi\u00e9n es Roboto y yo creo que eran 16.<\/p>\n\n\n\n<p>No vamos a definir ninguno m\u00e1s y lo vamos a ir viendo. Vale, guardamos, nos<\/p>\n\n\n\n<p>volvemos por aqu\u00ed y definimos etiquetas b\u00e1sicas.<\/p>\n\n\n\n<p>Vale, en todos los elementos de tipograf\u00edas, colores, etc\u00e9tera, nos vamos a encontrar<\/p>\n\n\n\n<p>estos globitos que nos dicen que vamos a coger estilos globales de los que hemos definido.<\/p>\n\n\n\n<p>Entonces yo ahora le voy a decir que esto coja el color de texto para los cuerpos y como tipograf\u00eda<\/p>\n\n\n\n<p>la tipograf\u00eda de textos y el espaciado de p\u00e1rrafos por defecto lo vamos a dejar en 10 p\u00edxeles.<\/p>\n\n\n\n<p>y voy a definir tambi\u00e9n el h1 que me coja este color principal y como<\/p>\n\n\n\n<p>tipograf\u00eda la principal y el h2<\/p>\n\n\n\n<p>tambi\u00e9n lo vamos a coger con este color y con esta tipograf\u00eda secundaria y no<\/p>\n\n\n\n<p>voy a definir nada m\u00e1s de momento bueno s\u00ed el h3 porque lo vamos a<\/p>\n\n\n\n<p>necesitar voy a poner en secundario y le voy a poner el mismo<\/p>\n\n\n\n<p>en la misma tipograf\u00eda. Esto es algo raro de entender, \u00bfvale? A m\u00ed me cost\u00f3<\/p>\n\n\n\n<p>bastante y es que por un lado tenemos la definici\u00f3n de estilos de colores<\/p>\n\n\n\n<p>globales y tipograf\u00edas globales y luego las asociaciones que hacemos con las<\/p>\n\n\n\n<p>etiquetas. Aqu\u00ed estamos definiendo un poco el tema y ahora ya s\u00ed nos vamos a<\/p>\n\n\n\n<p>meter en aqu\u00ed.<\/p>\n\n\n\n<p>Estructura de Elementor.<\/p>\n\n\n\n<p>En la barra izquierda tenemos los widgets. Los widgets es la unidad de medida m\u00e1s<\/p>\n\n\n\n<p>peque\u00f1a dentro de Elementor, que vendr\u00eda a ser el bloque en Gutenberg. En la parte<\/p>\n\n\n\n<p>derecha tenemos la maquetaci\u00f3n del tema. Tenemos secciones que dentro tienen<\/p>\n\n\n\n<p>columnas que dentro tienen widgets. En ese aspecto muy parecido a Divi. Vamos a<\/p>\n\n\n\n<p>empezar ya ahora s\u00ed directamente con \u00e9l con el tema. A\u00f1adimos una secci\u00f3n de una<\/p>\n\n\n\n<p>la columna y aqu\u00ed dentro le arrastramos un widget de tipo encabezado.<\/p>\n\n\n\n<p>En este texto ponemos como en el dise\u00f1o todos los widgets de elementos, bueno en<\/p>\n\n\n\n<p>realidad widgets, secciones y columnas tienen una estructura muy parecida que es<\/p>\n\n\n\n<p>contenido, estilo y avanzado. Seg\u00fan lo que estemos editando tendremos distintas<\/p>\n\n\n\n<p>opciones, pero estas pesta\u00f1as las vamos a tener siempre, \u00bfvale?<\/p>\n\n\n\n<p>Esto es un H1 que est\u00e1 alineado al centro<\/p>\n\n\n\n<p>y en avanzado le vamos a decir que tenemos pues unos 25 de margen por arriba<\/p>\n\n\n\n<p>y por abajo y vamos a ir a\u00f1adiendo la siguiente secci\u00f3n.<\/p>\n\n\n\n<p>En la siguiente secci\u00f3n lo que vamos a hacer es a\u00f1adir<\/p>\n\n\n\n<p>bueno vamos a a\u00f1adir el fondo a nivel de estilo<\/p>\n\n\n\n<p>subimos una imagen que la tenemos por aqu\u00ed<\/p>\n\n\n\n<p>Y una cosa que le podemos decir, muy \u00fatil, es decirle una altura m\u00ednima a la secci\u00f3n.<\/p>\n\n\n\n<p>Esto viene muy bien para, bueno, incluso podr\u00edamos decirle que lo ajustara a la pantalla,<\/p>\n\n\n\n<p>pero ahora mismo no tiene sentido porque como tenemos una cabecera nos va a hacer un poquito de scroll.<\/p>\n\n\n\n<p>pero podr\u00edamos decirle una altura m\u00ednima de<\/p>\n\n\n\n<p>80 vh para que sea el 80% de la pantalla<\/p>\n\n\n\n<p>vamos<\/p>\n\n\n\n<p>a ver que esto se me queda pillado, vamos a ir arrastrando m\u00e1s los<\/p>\n\n\n\n<p>encabezados, \u00bfvale? Para esta secci\u00f3n que ten\u00edamos tres, este que dec\u00eda<\/p>\n\n\n\n<p>gremlins, vamos a poner que es un h2 que est\u00e1<\/p>\n\n\n\n<p>alineado a la derecha y aqu\u00ed nos vamos a ir a estilo si le vamos a<\/p>\n\n\n\n<p>decir oye t\u00fa como color<\/p>\n\n\n\n<p>tendr\u00edamos que tener el blanco que no lo he creado me he equivocado as\u00ed que vamos a<\/p>\n\n\n\n<p>crear un nuevo color global. Nos vamos a ir a gestionar coloros globales, volvemos a<\/p>\n\n\n\n<p>donde est\u00e1bamos al principio y me creo un nuevo color.<\/p>\n\n\n\n<p>Aunque sea tentador, podemos crearlo sin pasar por los ajustes globales, ok? Pero<\/p>\n\n\n\n<p>lo quiero hacer as\u00ed para que luego veamos una cosa, si me da tiempo.<\/p>\n\n\n\n<p>Le decimos, oye este t\u00edtulo c\u00f3gelo del global y c\u00f3gelo como principal a este<\/p>\n\n\n\n<p>este tama\u00f1o que tambi\u00e9n deber\u00eda ser m\u00e1s grande pero bueno, venga.<\/p>\n\n\n\n<p>Bueno, tranquilo que no vamos al pixel perfect.<\/p>\n\n\n\n<p>Venga, as\u00ed lo voy a hacer.<\/p>\n\n\n\n<p>Bueno, as\u00ed ense\u00f1o esto.<\/p>\n\n\n\n<p>En el momento en el que ten\u00edamos un personalizado,<\/p>\n\n\n\n<p>pero lo podemos dar al lapicerito y lo que hacemos es decir, oye,<\/p>\n\n\n\n<p>vale, lo que yo te hab\u00eda dicho como personalizado, genial,<\/p>\n\n\n\n<p>pero aqu\u00ed quiero un estilo por defecto porque me da la gana,<\/p>\n\n\n\n<p>\u00bfvale?<\/p>\n\n\n\n<p>Y le vamos a decir que lo ponga en may\u00fasculas, coja un tama\u00f1o m\u00e1s<\/p>\n\n\n\n<p>grande y a correr. Vamos a duplicar, en este caso nos vamos a copiar, tengo por<\/p>\n\n\n\n<p>aqu\u00ed el texto, esto vamos a decirle que es un h3 y aqu\u00ed le decimos si espera,<\/p>\n\n\n\n<p>aqu\u00ed s\u00ed quiero el secundario<\/p>\n\n\n\n<p>y cu\u00e1l era el tercer texto, vale<\/p>\n\n\n\n<p>cogemos uno m\u00e1s con derecho duplicar ponemos el siguiente yo este lo pondr\u00eda<\/p>\n\n\n\n<p>como p\u00e1rrafo que tambi\u00e9n lo podemos lo podemos poner<\/p>\n\n\n\n<p>a nivel de estilo le decimos que esto es un tipo texto<\/p>\n\n\n\n<p>y aqu\u00ed en Elementor tiene una cosa y es que todos los elementos de una columna<\/p>\n\n\n\n<p>por defecto tienen la misma separaci\u00f3n tiene como una separaci\u00f3n<\/p>\n\n\n\n<p>para todos, un espacio entre widgets que es de 20 pixel por defecto. Lo podemos ajustar<\/p>\n\n\n\n<p>a 0 incluso para que se aparezca m\u00e1s al dise\u00f1o y luego definir en cada uno de los elementos<\/p>\n\n\n\n<p>un margen, \u00bfvale? A nivel de avanzado podemos definir su margen. Decimos que no sea global para<\/p>\n\n\n\n<p>todos porque queremos definir diferentes medidas arriba y abajo<\/p>\n\n\n\n<p>y ahora nos vamos a meter el separador<\/p>\n\n\n\n<p>que nos falta aqu\u00ed. Esta configuraci\u00f3n muy similar a la de Divi. Definimos el<\/p>\n\n\n\n<p>porcentaje del ancho 10, lo ponemos a la derecha, bueno podr\u00edamos decirle que es<\/p>\n\n\n\n<p>un separador con texto. Si lo pongo en blanco igual puede ir ver algo porque yo voy a autom\u00e1tico.<\/p>\n\n\n\n<p>Podr\u00edamos poner el separador con texto o incluso con un icono pero como no lo tenemos en el<\/p>\n\n\n\n<p>dise\u00f1o lo dejamos en blanco. En contenido hemos definido el ancho, en estilo definimos por un<\/p>\n\n\n\n<p>lado el peso que es el grosor que tenemos, me voy a copiar de Pablo que ha dicho 4 y quedaba muy bien<\/p>\n\n\n\n<p>y la brecha que ser\u00eda la separaci\u00f3n arriba y abajo que lo podemos dejar en<\/p>\n\n\n\n<p>en 10, venga, as\u00ed<\/p>\n\n\n\n<p>vale y como detalle tonto vamos a hacer que es algo que a m\u00ed me parece bastante potente en<\/p>\n\n\n\n<p>Elementor, a nivel de secci\u00f3n donde tenemos el fondo se pueden definir<\/p>\n\n\n\n<p>posici\u00f3n del fondo y podemos definir por ejemplo el formato parallax<\/p>\n\n\n\n<p>directamente en la secci\u00f3n y nos puede quedar chulo y tambi\u00e9n podr\u00edamos<\/p>\n\n\n\n<p>definir la capa de fondo en el caso de que la foto no se viera del todo bien<\/p>\n\n\n\n<p>y ponerle un<\/p>\n\n\n\n<p>un colorcito para que se leyera mejor, pero bueno, lo vamos a dejar as\u00ed y vamos a a\u00f1adir la siguiente secci\u00f3n.<\/p>\n\n\n\n<p>Esta secci\u00f3n que os recuerdo, abro aqu\u00ed el JPG<\/p>\n\n\n\n<p>como era, tendr\u00edamos hasta tres maneras diferentes, yo cuando lo he visto he pensado tres maneras diferentes con Elementor.<\/p>\n\n\n\n<p>Una ser\u00eda una secci\u00f3n, dos secciones, una que tuviera el t\u00edtulo y debajo otra que fuera tres columnas.<\/p>\n\n\n\n<p>Podr\u00edamos hacer una secci\u00f3n grande que tuviera luego una<\/p>\n\n\n\n<p>secci\u00f3n interior a tres columnas o la que m\u00e1s me gusta a m\u00ed,<\/p>\n\n\n\n<p>que es la que voy a implementar, que es una secci\u00f3n normal a una<\/p>\n\n\n\n<p>columna.<\/p>\n\n\n\n<p>Y dentro vamos a meterle un t\u00edtulo que me voy a copiar<\/p>\n\n\n\n<p>este y pegar aqu\u00ed.<\/p>\n\n\n\n<p>perdonad que me abra esto por aqu\u00ed.<\/p>\n\n\n\n<p>Le voy a decir que esto tiene un margin de 25 p\u00edxel,<\/p>\n\n\n\n<p>por ejemplo.<\/p>\n\n\n\n<p>Y ahora me voy a meter un widget que aqu\u00ed se llama cuadro de<\/p>\n\n\n\n<p>imagen.<\/p>\n\n\n\n<p>Y aqu\u00ed vamos a definir los tres cuadros.<\/p>\n\n\n\n<p>el primero que tenemos es el de la luz, vale, vamos a decirle, este es muy parecido al que<\/p>\n\n\n\n<p>ha ense\u00f1ado Pablo, vale, tenemos una imagen que tiene un encabezado encima y que tiene<\/p>\n\n\n\n<p>un texto debajo que vamos a dejar el lorem fistrum este, que madre m\u00eda, podemos definir<\/p>\n\n\n\n<p>la etiqueta del t\u00edtulo que la dejamos en h3 y aqu\u00ed es donde viene algo que a m\u00ed me gusta<\/p>\n\n\n\n<p>mucho de Elementor y es que a nivel de<\/p>\n\n\n\n<p>en la pesta\u00f1a de avanzado<\/p>\n\n\n\n<p>tenemos una opci\u00f3n que se llama colocaci\u00f3n<\/p>\n\n\n\n<p>y podemos decirle que el ancho es<\/p>\n\n\n\n<p>personalizado<\/p>\n\n\n\n<p>y decirle que ocupa un porcentaje del<\/p>\n\n\n\n<p>33%<\/p>\n\n\n\n<p>Entonces ahora podemos duplicar y duplicar y tenemos la maquetaci\u00f3n a tres<\/p>\n\n\n\n<p>columnas sin tener que meter una secci\u00f3n interior porque si ya hay<\/p>\n\n\n\n<p>elementos de por s\u00ed nos va a arrastrar ocho niveles de anidaci\u00f3n de capas<\/p>\n\n\n\n<p>aqu\u00ed por lo menos le estamos ahorrando tres o cuatro por lo menos. A nivel de<\/p>\n\n\n\n<p>estilo, bueno vamos a poder personalizar pr\u00e1cticamente todo.<\/p>\n\n\n\n<p>estoy tocando el que no era, bueno me voy a poner a tocar este.<\/p>\n\n\n\n<p>A nivel de estilo podemos tocar el estilo de la imagen, el espaciado, lo voy a<\/p>\n\n\n\n<p>poner a cero que se parece m\u00e1s a lo que lo dec\u00edamos, har\u00edamos uno bien y despu\u00e9s<\/p>\n\n\n\n<p>lo duplicar\u00edamos. Bueno si lo he hecho as\u00ed para ense\u00f1ar otra cosa tambi\u00e9n<\/p>\n\n\n\n<p>metemos un cero aqu\u00ed tambi\u00e9n, aqu\u00ed se queda bastante m\u00e1s cerca del t\u00edtulo<\/p>\n\n\n\n<p>podr\u00edamos definir\u00edamos estos estilos tambi\u00e9n con el secundario y la tipograf\u00eda, esto era el<\/p>\n\n\n\n<p>t\u00edtulo, s\u00ed, el secundario y aqu\u00ed tambi\u00e9n el texto y la tipograf\u00eda del texto.<\/p>\n\n\n\n<p>Vale, y aqu\u00ed podemos hacer bot\u00f3n derecho copiar, bot\u00f3n derecho pegar estilo,<\/p>\n\n\n\n<p>vale, para arrastrar directamente solo el estilo y no tenemos que estar copiando el elemento.<\/p>\n\n\n\n<p>esta secci\u00f3n nos vamos a ir a estilo y vamos a coger como fondo, fondo cl\u00e1sico,<\/p>\n\n\n\n<p>el color de gris de fondo y en avanzado le vamos a poner un poco de margin,<\/p>\n\n\n\n<p>calculo que unos 30 pixels arriba y abajo.<\/p>\n\n\n\n<p>Uy, este no era este texto pero bueno, lo vamos a meter tambi\u00e9n.<\/p>\n\n\n\n<p>Es lo de menos.<\/p>\n\n\n\n<p>Al final, con la estructura.<\/p>\n\n\n\n<p>A\u00f1adimos una secci\u00f3n nueva.<\/p>\n\n\n\n<p>Esta es muy sencilla.<\/p>\n\n\n\n<p>Vale, le he a\u00f1adido una columna porque he ido muy r\u00e1pido y es<\/p>\n\n\n\n<p>de 2.<\/p>\n\n\n\n<p>No hay problema porque podemos decirle aqu\u00ed,<\/p>\n\n\n\n<p>bot\u00f3n derecho, a\u00f1adir nueva columna.<\/p>\n\n\n\n<p>Aqu\u00ed podemos o bien arrastrar y ir ajustando el porcentaje a lo<\/p>\n\n\n\n<p>que nos d\u00e9 la gana o bien si hacemos clic en el iconito de la<\/p>\n\n\n\n<p>columna, en disposici\u00f3n tenemos un campo de ancho de columna.<\/p>\n\n\n\n<p>Arrastramos imagen, widget de imagen,<\/p>\n\n\n\n<p>arrastramos widget de editor de texto.<\/p>\n\n\n\n<p>Y aqu\u00ed tenemos un tiny normal y corriente donde podemos meter<\/p>\n\n\n\n<p>dos p\u00e1rrafos de nullaren y ipsun que tenemos por aqu\u00ed.<\/p>\n\n\n\n<p>en la imagen, me estoy yendo de hora, perd\u00f3n.<\/p>\n\n\n\n<p>Inserto, vale. Voy a hacerlo m\u00e1s r\u00e1pido que me he puesto a ir lentito pensando<\/p>\n\n\n\n<p>que iba bien.<\/p>\n\n\n\n<p>Vale, aqu\u00ed s\u00ed tenemos la opci\u00f3n que dec\u00eda Pablo de alineaci\u00f3n horizontal y a<\/p>\n\n\n\n<p>nivel de columna le podemos decir que esta columna, perd\u00f3n vertical en este<\/p>\n\n\n\n<p>caso, se alinea al medio para que se quede ajustado.<\/p>\n\n\n\n<p>Podr\u00edamos definir todas las propiedades de Flex,<\/p>\n\n\n\n<p>en realidad, para definir la alineaci\u00f3n tanto horizontal como<\/p>\n\n\n\n<p>vertical.<\/p>\n\n\n\n<p>Y nos quedar\u00eda la \u00faltima, que lo mismo,<\/p>\n\n\n\n<p>nos vamos a copiar este.<\/p>\n\n\n\n<p>Me lo voy a pegar aqu\u00ed.<\/p>\n\n\n\n<p>Como el estilo es gris, me lo voy a copiar tambi\u00e9n aqu\u00ed.<\/p>\n\n\n\n<p>y me lo voy a pegar el estilo y aqu\u00ed es donde s\u00ed necesitaba es lo \u00fanico que no tenemos en<\/p>\n\n\n\n<p>Elementor Free que es el widget de blog. Para el loop de entrada. Exactamente, ese est\u00e1 en<\/p>\n\n\n\n<p>Elementor Pro. Entonces me lo he tenido que coger de premium add-ons. Lo voy a arrastrar. Pero que<\/p>\n\n\n\n<p>premium add-ons est\u00e1 en el repositorio. Est\u00e1n en el repositorio gratis totalmente, la opci\u00f3n por<\/p>\n\n\n\n<p>de efecto se parece bastante.<\/p>\n\n\n\n<p>Podemos definir un mont\u00f3n de cosas.<\/p>\n\n\n\n<p>Vamos a ponerle tres columnas para que se parezca m\u00e1s.<\/p>\n\n\n\n<p>A nivel de query podemos definir de d\u00f3nde queremos sacar esta<\/p>\n\n\n\n<p>informaci\u00f3n.<\/p>\n\n\n\n<p>Si tuvi\u00e9ramos custom post types, los sacar\u00edamos aqu\u00ed.<\/p>\n\n\n\n<p>Podr\u00edamos sacar la informaci\u00f3n que quisi\u00e9ramos,<\/p>\n\n\n\n<p>hacer match por columnas, por autores, lo que nos d\u00e9 la gana.<\/p>\n\n\n\n<p>El orden por fecha, por lo que queramos.<\/p>\n\n\n\n<p>Y en las opciones de visualizaci\u00f3n,<\/p>\n\n\n\n<p>en las opciones de entrada, podemos definir este,<\/p>\n\n\n\n<p>el extracto m\u00e1s grande, quitar los detalles del autor,<\/p>\n\n\n\n<p>quitar los detalles de la fecha, de la categor\u00eda,<\/p>\n\n\n\n<p>de los comentarios.<\/p>\n\n\n\n<p>a\u00f1adirle el leer m\u00e1s<\/p>\n\n\n\n<p>por bien escrito<\/p>\n\n\n\n<p>y a nivel de estilo<\/p>\n\n\n\n<p>vamos a coger el color este<\/p>\n\n\n\n<p>al pasar por encima que se ponga este y la tipograf\u00eda<\/p>\n\n\n\n<p>venga pues no<\/p>\n\n\n\n<p>bueno se va a quedar as\u00ed<\/p>\n\n\n\n<p>vamos a dejar as\u00ed aunque no es exactamente igual la caja del contenido<\/p>\n\n\n\n<p>el color de fondo vamos a dejar el gris de los fondos<\/p>\n\n\n\n<p>y<\/p>\n\n\n\n<p>listo vale y bueno se ha quedado un poco corto pero<\/p>\n\n\n\n<p>vale lo que iba a ense\u00f1ar y lo ense\u00f1\u00e9 muy r\u00e1pido y paso al siguiente ya<\/p>\n\n\n\n<p>era lo que dec\u00eda de por qu\u00e9 la insistencia en utilizar siempre los colores globales, porque ahora nos podemos ir a ajustes del sitio<\/p>\n\n\n\n<p>y cuando el cliente se da cuenta que su color ya no es este que era otro<\/p>\n\n\n\n<p>directamente cambiamos aqu\u00ed<\/p>\n\n\n\n<p>el color que lo ha metido como una variable de CSS y todas las referencias que tenemos a ese color ya nos las est\u00e1 cambiando<\/p>\n\n\n\n<p>de golpe y lo mismo con las tipograf\u00edas<\/p>\n\n\n\n<p>entonces<\/p>\n\n\n\n<p>Para m\u00ed es un avance bestial porque creo que queda mucha potencia para a la hora de tocar esto en elemento<\/p>\n\n\n\n<p>Muy bien<\/p>\n\n\n\n<p>Dicen lo que pasa es que no s\u00e9 c\u00f3mo vamos a tiempo que ense\u00f1as el navigator no s\u00e9 muy bien si yo no s\u00e9 a qu\u00e9<\/p>\n\n\n\n<p>si puedes hacer nada un rollo esto es el navigator y ya<\/p>\n\n\n\n<p>Cuando estamos maquetando cualquier cosa<\/p>\n\n\n\n<p>Y nos queda pillado ahora<\/p>\n\n\n\n<p>bot\u00f3n derecho, navigator, tenemos una cajita y nos hace una navegaci\u00f3n para que tengamos un resumen de lo que estamos viendo.<\/p>\n\n\n\n<p>Y adem\u00e1s te deja ocultarlas, etc\u00e9tera, para ir haci\u00e9ndote un poco a la idea.<\/p>\n\n\n\n<p>Igualmente podemos maquetar en versi\u00f3n m\u00f3vil, que ahora mismo obviamente eso nos ha descuajeringado todo.<\/p>\n\n\n\n<p>Y ya est\u00e1.<\/p>\n\n\n\n<p>Vale, s\u00ed, yo creo que esta es la opci\u00f3n an\u00e1loga a lo que ha<\/p>\n\n\n\n<p>ense\u00f1ado Pablo, que tambi\u00e9n hab\u00eda una visi\u00f3n de Divi en la<\/p>\n\n\n\n<p>que se ve\u00edan los distintos m\u00f3dulos y dem\u00e1s.<\/p>\n\n\n\n<p>Vale, pues much\u00edsimas gracias, Santi.<\/p>\n\n\n\n<p>Ha estado guay.<\/p>\n\n\n\n<p>La verdad es que est\u00e1 muy bien ver por dentro un poco c\u00f3mo<\/p>\n\n\n\n<p>funcionan.<\/p>\n\n\n\n<p>Y vamos rapidito al siguiente.<\/p>\n\n\n\n<p>Luego hacemos un poco, seguro que hay dudas y dem\u00e1s,<\/p>\n\n\n\n<p>pero guay.<\/p>\n\n\n\n<p>Por cierto, lo de los estilos globales creo que en parte se<\/p>\n\n\n\n<p>va a aportar al core de WordPress dentro de poco con los&#8230; pero no me voy a liar<\/p>\n\n\n\n<p>que yo tengo mucho peligro as\u00ed que vamos con el siguiente y hablando del core de<\/p>\n\n\n\n<p>WordPress vamos a hablar de el editor de bloques tambi\u00e9n conocido como<\/p>\n\n\n\n<p>Gutenberg aunque Gutenberg es un plugin aparte, blablabla, hoy vamos rapidito<\/p>\n\n\n\n<p>as\u00ed que damos la bienvenida a David P\u00e9rez. Hola, \u00bfqu\u00e9 tal?<\/p>\n\n\n\n<p>David, muchas gracias. Muchas gracias por venir tambi\u00e9n, luego te hacemos m\u00e1s presentaci\u00f3n y cari\u00f1os, pero vamos r\u00e1pido.<\/p>\n\n\n\n<p>Venga, todo tuyo. Vale, os cuento yo mi instalaci\u00f3n. En temas de temas, yo he utilizado, bueno, de plugin como veis.<\/p>\n\n\n\n<p>Bueno, he activado Gutenberg, a m\u00ed me gusta tener Gutenberg porque as\u00ed tengo la \u00faltima versi\u00f3n, ahora mismo va por la 952<\/p>\n\n\n\n<p>y luego tengo GenericPress, aqu\u00ed en temas Generic es el que yo he instalado<\/p>\n\n\n\n<p>la versi\u00f3n premium te hace hacer cositas, que aqu\u00ed por ejemplo para el tema de deshabilitar elementos como ahora es la cabecera<\/p>\n\n\n\n<p>y el men\u00fa, me hac\u00eda falta este modelo, si lo puedo hacer por c\u00f3digo, lo puedo hacer, pero bueno como era<\/p>\n\n\n\n<p>para que no intent\u00e1ramos tocar c\u00f3digo. Tambi\u00e9n os digo mi aproximaci\u00f3n que no es del todo la que pueda ser de Gutenberg.<\/p>\n\n\n\n<p>Yo la voy a hacer con c\u00f3digo CSS, \u00bfvale? directamente porque bueno es la versi\u00f3n m\u00e1s r\u00e1pida y tampoco cuesta mucho trabajo.<\/p>\n\n\n\n<p>Si quieres hacer todo con ventanitas, con selecciones y todo esto pues hay muchos temas de Gutenberg, vamos, de bloques de Gutenberg por ejemplo.<\/p>\n\n\n\n<p>el para divisor podemos utilizar ultimate blocks para enter tambi\u00e9n decir<\/p>\n\n\n\n<p>que hay muchas muchas tensiones para guttenberg que digamos que mejoran todo<\/p>\n\n\n\n<p>esta esta bueno esta funcionalidad no digamos para ahora bueno vamos a hacer<\/p>\n\n\n\n<p>nuestro nuestro guttenberg empezamos con el t\u00edtulo de la p\u00e1gina<\/p>\n\n\n\n<p>no, Mr. Wing Secret Shop, vaya a dar nombre. Como dec\u00eda, al meter Generic Press me permite<\/p>\n\n\n\n<p>desactivar elementos, en este caso quiero quitar la cabecera y la barra superior, ahora<\/p>\n\n\n\n<p>si no iremos viendo c\u00f3mo va quedando. Bueno pues os gusta ver como sab\u00e9is, est\u00e1 compuesto<\/p>\n\n\n\n<p>por bloques, donde nosotros vamos a\u00f1adiendo bloques, aqu\u00ed nos salen los 6 \u00faltimos m\u00e1s<\/p>\n\n\n\n<p>utilizados y si le damos a ver todos podemos ver todos los bloques que podemos ir utilizando.<\/p>\n\n\n\n<p>Hay una funcionalidad muy interesante que es la de patrones que se est\u00e1 desarrollando ahora por<\/p>\n\n\n\n<p>momentos, ahora te permite incluso seleccionar y aqu\u00ed tienes como plantilla digamos de campos,<\/p>\n\n\n\n<p>con la cuarta re\u00edmos mucho menos, lo que pasa es que yo he tratado de hacerlo directamente tal<\/p>\n\n\n\n<p>cual en editor. Bueno pues vamos al ataque. Bien para el tema de Gremlin, aqu\u00ed se ha utilizado<\/p>\n\n\n\n<p>el bloque de fondo, todo esto es nativo y vamos a coger la imagen de fondo. Aqu\u00ed tenemos una<\/p>\n\n\n\n<p>selecci\u00f3n, bueno primero hay que tener cuidado con el tema de bloque en el sentido de que no<\/p>\n\n\n\n<p>sabe, por ejemplo ahora mismo estamos teniendo la selecci\u00f3n en el t\u00edtulo, tenemos que irnos a<\/p>\n\n\n\n<p>seleccionar bloque para entrar a las opciones del bloque. Aqu\u00ed tenemos un men\u00fa contextual justo al<\/p>\n\n\n\n<p>lado del bloque y luego a la derecha tenemos los ajustes de ese bloque vale<\/p>\n\n\n\n<p>aqu\u00ed en este caso pues vamos a decirle que queremos ancho completo y aqu\u00ed<\/p>\n\n\n\n<p>tenemos opciones por ejemplo yo voy a ponerle una altura m\u00ednima de 500<\/p>\n\n\n\n<p>p\u00edxeles para que me de f\u00e1cil para todo el contenido vale luego me da cuenta en<\/p>\n\n\n\n<p>el dise\u00f1o del pdf que digamos que le m\u00e1s en sobresale y despu\u00e9s el texto se<\/p>\n\n\n\n<p>se mete en un contenedor. Para eso podemos utilizar el bloque, ah bueno,<\/p>\n\n\n\n<p>otra cosa que yo utilizo mucho en Gutenberg es la barra<\/p>\n\n\n\n<p>con el may\u00fascula 7 y busco directamente, as\u00ed no tengo que ir busc\u00e1ndolo con el<\/p>\n\n\n\n<p>rat\u00f3n, tardo mucho menos con la barra, entonces por ejemplo aqu\u00ed lo que quiero<\/p>\n\n\n\n<p>poner es un grupo, este bloque grupo lo que permite es darme el ancho<\/p>\n\n\n\n<p>contenedor y a partir de ah\u00ed ya vamos introduciendo el elemento. Bien, vamos a ver, pues bueno, tenemos<\/p>\n\n\n\n<p>un encabezado en este caso que se llama &#8220;Grenlims&#8221;. Ahora que me estoy acordando se me ha ido con la<\/p>\n\n\n\n<p>prisa que me ha metido un &#8220;awai&#8221;. Perdona, si al final tenemos que ir con el tiempo. Se me ha olvidado<\/p>\n\n\n\n<p>comentar que antes de todo esto nosotros tenemos aqu\u00ed en el personalizador los ajustes de nuestro<\/p>\n\n\n\n<p>nuestro tema. En este caso tenemos el tema que est\u00e1 activo, que en este caso es<\/p>\n\n\n\n<p>Generispray, luego tenemos aqu\u00ed una parte de dise\u00f1o, el contenedor, el<\/p>\n\n\n\n<p>ancho que nosotros queremos, es decir que con este personalizado podemos<\/p>\n\n\n\n<p>cambiar casi todo. Y una cosa que nos interesa que es la tipograf\u00eda, aqu\u00ed por<\/p>\n\n\n\n<p>ejemplo, pues hemos dicho afirmamos que es el robot, aqu\u00ed si te permite buscar la<\/p>\n\n\n\n<p>tipograf\u00eda, podemos incluso definir los distintos tipos, si queramos daros<\/p>\n\n\n\n<p>cuenta que cada vez que a\u00f1adimos m\u00e1s tipograf\u00eda pues cargamos un poquito m\u00e1s la p\u00e1gina pues si<\/p>\n\n\n\n<p>vas con lo justo pues mejor. Aqu\u00ed te dice un poco el tama\u00f1o en este caso, el alto de<\/p>\n\n\n\n<p>l\u00edneas de cada uno. Son los ajustes generales de nuestro tema. Aqu\u00ed son opciones m\u00e1s avanzadas,<\/p>\n\n\n\n<p>total que en definitiva y luego el CSS adicional. Yo voy a hacer un poquito de CSS antes que utiliza<\/p>\n\n\n\n<p>blocas como he dicho para que bueno para utilizar lo m\u00ednimo vale para que sea lo<\/p>\n\n\n\n<p>m\u00e1s optimizado de hecho he hecho algunas pruebas y me sal\u00edan 18 peticiones en la<\/p>\n\n\n\n<p>p\u00e1gina web hecha y 250 kilobytes con im\u00e1genes con todo con 49 dips entonces<\/p>\n\n\n\n<p>digamos que lo gusten ver sobre todo yo lo que utilizo y a lo mejor es un<\/p>\n\n\n\n<p>poquito menos intuitivo pero sobre todo es por el rendimiento carga muy r\u00e1pido<\/p>\n\n\n\n<p>entonces bueno digamos que sacrifica un poquito m\u00e1s de conocimiento ccs y un<\/p>\n\n\n\n<p>poquito m\u00e1s de c\u00f3digo que tampoco es mucho y pero el rendimiento es excepcional la verdad entonces<\/p>\n\n\n\n<p>pues bueno aprendiendo un poquito aqu\u00ed me parece que cambiarlo del este vamos a grabar siempre<\/p>\n\n\n\n<p>grabando con publicada entonces estamos aqu\u00ed haciendo un poquito esto es lo que decimos que<\/p>\n\n\n\n<p>que vamos m\u00e1s r\u00e1pido. Vamos a hacer el t\u00edtulo. Cuando nosotros estamos situados<\/p>\n\n\n\n<p>sobre un bloque, en este caso encabezado, tenemos las opciones de<\/p>\n\n\n\n<p>coger, vamos, las distintas opciones. En este caso para llevar una jerarqu\u00eda h1<\/p>\n\n\n\n<p>ser\u00eda en la p\u00e1gina de arriba y aqu\u00ed lo hemos utilizado en h2. Le vamos a hacer<\/p>\n\n\n\n<p>en los ajustes del tama\u00f1o, pues podemos cogerle el tama\u00f1o, me parece que as\u00ed,<\/p>\n\n\n\n<p>llega a 90 p\u00edcele, con lo cual lo voy a coger aqu\u00ed en grande, como vamos r\u00e1pido, voy a coger el color,<\/p>\n\n\n\n<p>en este caso podemos definirlo. Una cosa que tiene Gutenberg, que a lo mejor, no, esto es blanco,<\/p>\n\n\n\n<p>una cosa que tiene Gutenberg es que t\u00fa puedes definir colores, esto tiene que ser a trav\u00e9s de<\/p>\n\n\n\n<p>c\u00f3digo y en el function del tema t\u00fa puedes definir los colores para que, digamos que Gutenberg<\/p>\n\n\n\n<p>solo trabaje una serie de estilos. Bueno, en este caso cogemos que est\u00e1 alineado a la derecha<\/p>\n\n\n\n<p>y luego ten\u00edamos aqu\u00ed el texto, el mejor regalo de navidades, a\u00f1adimos m\u00e1s bloques, como veis,<\/p>\n\n\n\n<p>dentro de lo que es el grupo. Aqu\u00ed siempre podemos ver para no perder la orientaci\u00f3n la<\/p>\n\n\n\n<p>vista de lista para que veamos d\u00f3nde estamos. En este caso estamos seleccionando el encabezado<\/p>\n\n\n\n<p>y a\u00f1adimos un nuevo bloque que en este caso ser\u00eda otro encabezado pero en este caso que vamos a darle<\/p>\n\n\n\n<p>un h3, vale, pegamos el texto y lo alineamos a la derecha, vale, y otro bloque que ser\u00eda el encabezado<\/p>\n\n\n\n<p>no, es un p\u00e1rrafo, aqu\u00ed, Mr. Widget Shop, vale, lo alineo a la derecha, vale, y para el tema de la l\u00ednea como<\/p>\n\n\n\n<p>he dicho podr\u00eda haber utilizado un bloque, vale, un divisor que te da muchas opciones, incluso colores,<\/p>\n\n\n\n<p>trato yo quer\u00eda utilizar css ya digo que en mi aproximaci\u00f3n no hay que ser pero si no quer\u00e9is<\/p>\n\n\n\n<p>complicaros puede utilizar un bloque de guttenberg y lo que hago es que utilizo en la parte de avanzado<\/p>\n\n\n\n<p>de ese bloque lo utilizo una clase vale en este caso voy a ponerle l\u00ednea gremlins<\/p>\n\n\n\n<p>y lo que despu\u00e9s necesitan se adiciona vamos a ver c\u00f3mo vamos a meterle esa l\u00ednea justo despu\u00e9s<\/p>\n\n\n\n<p>despu\u00e9s del t\u00edtulo, vale, ya digo que es una aproximaci\u00f3n pero bueno es la m\u00eda, vale, luego \u00bfqu\u00e9<\/p>\n\n\n\n<p>podemos hacer m\u00e1s? nos vamos al siguiente bloque que ser\u00eda bueno aqu\u00ed una especie de encabezado<\/p>\n\n\n\n<p>digamos tambi\u00e9n y est\u00e1 centrado y ponemos el mejor regalo de estas navidades, vale, en este caso es<\/p>\n\n\n\n<p>it\u00e1lica y podemos ajustar el color, en este caso s\u00ed, si yo no he definido el color pues lo puedo<\/p>\n\n\n\n<p>personalizar aqu\u00ed y utilizo el color que ya lo tengo guardado aqu\u00ed que ser\u00eda este.<\/p>\n\n\n\n<p>M\u00e1s cosas, otro fondo que hemos visto que tenemos aqu\u00ed que es con un color, ahora mismo voy a darle<\/p>\n\n\n\n<p>este color mismo y ahora lo definir\u00e9 mejor. Aqu\u00ed mismo le debe decir que es un color personalizado y<\/p>\n\n\n\n<p>es un gris<\/p>\n\n\n\n<p>aqu\u00ed perfecto y luego es un ancho completo y aqu\u00ed hemos visto que hay un<\/p>\n\n\n\n<p>t\u00edtulo vamos a hacer el t\u00edtulo un t\u00edtulo voy yo siempre utilizo much\u00edsimo<\/p>\n\n\n\n<p>el teclado tardo mucho menos en este caso encabezado<\/p>\n\n\n\n<p>y hemos dicho s\u00f3lo recuerda s\u00f3lo recuerda la norma b\u00e1sica<\/p>\n\n\n\n<p>esto es it\u00e1lica, es un color personalizado, ya digo que no tenemos el signo por c\u00f3digo, tenemos que buscarlo y lo alineamos en el centro<\/p>\n\n\n\n<p>y luego para estas tres, aqu\u00ed tenemos lo que es el bloque de columnas que es bastante completo, el nativo de WordPress<\/p>\n\n\n\n<p>y te permite aqu\u00ed una serie de estructuras que si quieres del 100% etc\u00e9tera, yo voy a coger el de 33<\/p>\n\n\n\n<p>y daros cuenta como a\u00f1ade tambi\u00e9n las distintas, el m\u00e1s para que t\u00fa puedas a\u00f1adir un bloque<\/p>\n\n\n\n<p>aqu\u00ed ser\u00eda una imagen<\/p>\n\n\n\n<p>vale la busco en mi biblioteca de medios que en este caso la tengo por aqu\u00ed y luego despu\u00e9s<\/p>\n\n\n\n<p>voy a a\u00f1adir el bloque de encabezado<\/p>\n\n\n\n<p>&#8220;Gachatriama&#8221; bien, lo puse yo antes<\/p>\n\n\n\n<p>y aqu\u00ed igual, pues el color lo hacemos negro<\/p>\n\n\n\n<p>y aqu\u00ed un p\u00e1rrafo que era&#8230;<\/p>\n\n\n\n<p>son muy sensibles a la luz<\/p>\n\n\n\n<p>aqu\u00ed un copy estupendo<\/p>\n\n\n\n<p>y nos vamos aqu\u00ed, \u00bfvale?<\/p>\n\n\n\n<p>bueno, aqu\u00ed una cosa que vamos a hacer para ahorrar es que podamos se\u00f1alar bloques<\/p>\n\n\n\n<p>control c y luego p\u00e1rrafo luego pegarlo vale podemos ir pegando y aqu\u00ed ahorramos<\/p>\n\n\n\n<p>bastante tiempo incluso podemos reemplazar las im\u00e1genes que ya hab\u00edamos<\/p>\n\n\n\n<p>utilizado en la biblioteca multimedia y cambiando y as\u00ed ya tenemos la parte de<\/p>\n\n\n\n<p>las columnas ya montadas<\/p>\n\n\n\n<p>Genial. M\u00e1s cosillas. Bueno yo utilizo mucho el tema de las clases, \u00bfvale? Y el tema de los<\/p>\n\n\n\n<p>m\u00e1rgenes y todo eso lo utilizo con clases. Entonces lo que hago es que le a\u00f1ado clases a las que yo<\/p>\n\n\n\n<p>no quiera que poner y os voy a dar un par de ejemplos de clases que he utilizado para que<\/p>\n\n\n\n<p>pod\u00e1is ver un poco c\u00f3mo quedan. Al final, \u00bfqu\u00e9 pasa? Que con el CSS adicional y con la configuraci\u00f3n<\/p>\n\n\n\n<p>que t\u00fa tengas de Gutenberg, en un momento tienes montado todo. Y el CSS es que se carga rapid\u00edsimo,<\/p>\n\n\n\n<p>o sea que en ese sentido entonces vamos a entrar a esa personalizaci\u00f3n un poco despu\u00e9s<\/p>\n\n\n\n<p>vamos a otras columnas aqu\u00ed que tenemos la de esta de imagen que era el gregley<\/p>\n\n\n\n<p>aqu\u00ed tal y el p\u00e1rrafo que cog\u00edamos de aqu\u00ed<\/p>\n\n\n\n<p>y ya me van quedando menos cosas la parte del blog como la hago yo bueno aqu\u00ed tambi\u00e9n tenemos otro<\/p>\n\n\n\n<p>fondo podr\u00eda otra cosa muy \u00fatil tambi\u00e9n lo dice utilizar este por ejemplo que<\/p>\n\n\n\n<p>tiene la misma configuraci\u00f3n lo que puede hacer es duplicar duplic\u00f3 el bloque se<\/p>\n\n\n\n<p>me justo se me a\u00f1ade despu\u00e9s y con estas flechas podemos ir bajando el bloque<\/p>\n\n\n\n<p>y lo podemos ir orientando hacia afinar con lo cual ya aqu\u00ed ser\u00eda cambiar el<\/p>\n\n\n\n<p>t\u00edtulo que es mister wings box<\/p>\n\n\n\n<p>y esto por ejemplo que yo lo que me interesa es seleccionar la columna porque no la voy a utilizar<\/p>\n\n\n\n<p>porque es un bloque lo elimino como veis el selector y los tres puntitos no ayudan much\u00edsimo<\/p>\n\n\n\n<p>y ya para terminar el tema del de blog se llama \u00faltima entrada<\/p>\n\n\n\n<p>Estas son las&#8230; no te vayas. Este bloque, aqu\u00ed entramos las opciones de blog,<\/p>\n\n\n\n<p>esto la vamos, est\u00e1 mejorando much\u00edsimo con Gutenberg, de hecho dentro poco<\/p>\n\n\n\n<p>van a dar con Custom Post Time, con lo cual aqu\u00ed podemos se\u00f1alar el<\/p>\n\n\n\n<p>contenido de la entrada, podemos decirle cu\u00e1ntos elementos no queremos<\/p>\n\n\n\n<p>y mostrar con el directo donde tengo yo las columnas aqu\u00ed<\/p>\n\n\n\n<p>y aqu\u00ed como veis hay una serie de correcciones que vamos a tener que hacer con CSS<\/p>\n\n\n\n<p>aqu\u00ed m\u00e1s o menos ha llegado todo el mundo<\/p>\n\n\n\n<p>publico. Dejamos mostrar tambi\u00e9n la imagen, \u00bfno?<\/p>\n\n\n\n<p>\u00bfC\u00f3mo? Ah, s\u00ed, s\u00ed, s\u00ed, correcto. Dejamos mostrar tambi\u00e9n la imagen, \u00bfverdad?<\/p>\n\n\n\n<p>Es que este bloque lo han mejorado bastante desde que sali\u00f3<\/p>\n\n\n\n<p>inicialmente, que al principio era m\u00e1s parco y ahora&#8230;<\/p>\n\n\n\n<p>Exactamente, la mejora much\u00edsimo, aqu\u00ed tenemos la imagen destacada, yo como lo hab\u00eda puesto como un ejemplo<\/p>\n\n\n\n<p>este caso no, pero si te deja incluso puedes coger qu\u00e9<\/p>\n\n\n\n<p>recorte tengas definido o incluso la dimensi\u00f3n de la imagen<\/p>\n\n\n\n<p>si si la verdad es que estamos bien y cuando pongan los costos post-it vas a ser una maravilla<\/p>\n\n\n\n<p>Vale, bueno yo tengo la p\u00e1gina, que pasa que los peque\u00f1os ajustes, huy<\/p>\n\n\n\n<p>ha pasado la barra lateral, la tengo aqu\u00ed<\/p>\n\n\n\n<p>aqu\u00ed como veis el dise\u00f1o de la barra lateral le voy a decir sin barra lateral<\/p>\n\n\n\n<p>y justo y miro y ya tengo la p\u00e1gina<\/p>\n\n\n\n<p>m\u00e1s o menos no me faltan algunas cositas las cosas que faltan por la mejor o con<\/p>\n\n\n\n<p>necesidad son unas cuantas l\u00edneas y al final optimizamos much\u00edsimo nuestra<\/p>\n\n\n\n<p>p\u00e1gina por ejemplo la parte que dec\u00edamos de l\u00ednea gremlins vale yo lo<\/p>\n\n\n\n<p>lo he hecho con un CSS, lo que he hecho es que le he puesto un &#8220;position relative&#8221; y le he puesto<\/p>\n\n\n\n<p>un &#8220;elemento after&#8221;, que lo que hace es que le a\u00f1ade un elemento despu\u00e9s, directamente con un<\/p>\n\n\n\n<p>ancho de 6 rem y un alto de 7 pixels, directamente lo sit\u00fao y lo pongo justo despu\u00e9s. Entonces,<\/p>\n\n\n\n<p>con ese yo poniendo el cese ya digo mi aproximaci\u00f3n poniendo ese cese adicional<\/p>\n\n\n\n<p>yo ya tengo esto puesto de esa manera luego otra cosa que nos pasaba era el<\/p>\n\n\n\n<p>tema de los de los que iba y bueno nosotros podemos digamos cambiar digamos<\/p>\n\n\n\n<p>la<\/p>\n\n\n\n<p>el tema de los aqu\u00ed tambi\u00e9n incluso poniendo una clase<\/p>\n\n\n\n<p>sale aqu\u00ed fondo poniendo una clase avanzada que le pongamos<\/p>\n\n\n\n<p>pues<\/p>\n\n\n\n<p>utilizamos la p\u00e1gina vale y con el personalizado y el css adicional aqu\u00ed<\/p>\n\n\n\n<p>podemos darle opci\u00f3n tambi\u00e9n se me ha olvidado el h1 vale que tenemos aqu\u00ed<\/p>\n\n\n\n<p>tenemos por ejemplo que era un PhoneWave o PLD900, aqu\u00ed se va apareciendo el color, que era el<\/p>\n\n\n\n<p>rugillo este que ten\u00edamos y Center.<\/p>\n\n\n\n<p>Bueno, los espacios, aunque no quiero tampoco, lo puedo mejorar con espaciadores, puedo<\/p>\n\n\n\n<p>a\u00f1adir bloques arriba y abajo de espaciadores, puedo poner los pisos que yo<\/p>\n\n\n\n<p>quiera y en ese sentido pues puedo trabajar los espacios y el tema del<\/p>\n\n\n\n<p>este de las entradas de blog aqu\u00ed lo que he hecho yo es hacer un peque\u00f1o CSS<\/p>\n\n\n\n<p>para adaptar todas las cosas que hemos visto que es el t\u00edtulo un poquito m\u00e1s<\/p>\n\n\n\n<p>grande el extracto en negro y un leer m\u00e1s con un a\u00f1adido si quer\u00e9is luego<\/p>\n\n\n\n<p>dejo el c\u00f3digo pero bueno al final en 38 l\u00edneas de CSS tengo ya todo lo que<\/p>\n\n\n\n<p>los ajustes de mi p\u00e1gina. Y bueno, eso ser\u00eda un poco mi idea de c\u00f3mo realizar el dise\u00f1o<\/p>\n\n\n\n<p>Gutenberg. Al final, trabajando con clases y haciendo un poquito de CSS, los elementos los<\/p>\n\n\n\n<p>puedes reutilizar y digamos que aunque hay que saber un poquito de CSS, pero ya es lo menos sencillo<\/p>\n\n\n\n<p>tienen de coger. No, est\u00e1 genial. Yo utilizo mucho tambi\u00e9n lo de poner una<\/p>\n\n\n\n<p>clase de CSS y luego tirar unas l\u00edneas de CSS porque te ahorran mucho HTML y<\/p>\n\n\n\n<p>muchas historias. Genial, la gente que est\u00e1is pensando en utilizar Gutenberg lo<\/p>\n\n\n\n<p>ha comentado a veces al principio, pero \u00e9l ha hecho la versi\u00f3n m\u00e1s simple, nativa y<\/p>\n\n\n\n<p>performance de s\u00faper bien, pero hay colecciones de bloques como Ultimate<\/p>\n\n\n\n<p>blocks y otras cadens y dem\u00e1s que te permiten ajustar esos paddings y esas<\/p>\n\n\n\n<p>cosas que hab\u00e9is visto en Divi y en Elementor tambi\u00e9n lo puedes llevar con<\/p>\n\n\n\n<p>una colecci\u00f3n a Gutenberg. S\u00ed, tambi\u00e9n utilizamos, vamos, s\u00ed, Gutenberg tambi\u00e9n est\u00e1 muy bien,<\/p>\n\n\n\n<p>que es Gutenberg y te permite todo eso de elementos y elementos como acordeones, pesta\u00f1as, o sea que da esa<\/p>\n\n\n\n<p>extensi\u00f3n. Yo he ido a la versi\u00f3n nativa y minimizada y super\u00f3zco. Con bloques nativos y todo, no, est\u00e1 muy bien<\/p>\n\n\n\n<p>porque as\u00ed tenemos una buena variedad y hablando de variedad, muchas gracias<\/p>\n\n\n\n<p>David, ha estado genial hablando de variedad, vamos con el \u00faltimo invitado<\/p>\n\n\n\n<p>estrella que esta vez viene desde el sur, bueno tambi\u00e9n los hemos dejado un par de<\/p>\n\n\n\n<p>buenos elementos del sur al final y b\u00e1sicamente nos va a hablar de WP<\/p>\n\n\n\n<p>Bakery que si hubiese tiempo nos explicar\u00eda toda la historia de Visual<\/p>\n\n\n\n<p>Composer que se convirti\u00f3 en Visual Bakery Page Builder Handemork, pero<\/p>\n\n\n\n<p>seguramente Nilo V\u00e9lez va a ir al turr\u00f3n y nos va a contar c\u00f3mo montar esa web.<\/p>\n\n\n\n<p>No, no hay problema.<\/p>\n\n\n\n<p>Muchas gracias Nilo y cuando quieras&#8230;<\/p>\n\n\n\n<p>Venga, probamos al l\u00edo que est\u00e1 ya un poquito cansada de maquetadores, me parece a m\u00ed.<\/p>\n\n\n\n<p>Y vamos a volver a hacer lo mismo, pero antes voy a&#8230;<\/p>\n\n\n\n<p>porque hay una cosa que s\u00ed que es importante, \u00bfvale?<\/p>\n\n\n\n<p>hay un jaleo con lo del Visual Composer y el Visual Bakery y es que Visual Composer es<\/p>\n\n\n\n<p>semejante mierda que su propio autor ha directamente ha renegado de \u00e9l y adem\u00e1s que lo dicen<\/p>\n\n\n\n<p>en la p\u00e1gina web que es antiguo, que est\u00e1 basado en short, entonces ha sacado una cosa<\/p>\n\n\n\n<p>completamente distinta que es el Visual Composer Website Editor que es otra cosa aparte y<\/p>\n\n\n\n<p>Y le han quitado el nombre a lo que antes era el Visual Composer,<\/p>\n\n\n\n<p>que es ahora el WPBaggeryPiceBuilder.<\/p>\n\n\n\n<p>Entonces, lo que vamos a&#8211;<\/p>\n\n\n\n<p>Cuando os digan una web hecha con Visual Composer,<\/p>\n\n\n\n<p>va a ser realmente una web hecha con WPBaggeryPageBuilder.<\/p>\n\n\n\n<p>Y esto, sobre todo, se hizo famoso porque ten\u00eda una licencia,<\/p>\n\n\n\n<p>que ten\u00eda dos licencias, una para usuario final y otro para<\/p>\n\n\n\n<p>desarrollador.<\/p>\n\n\n\n<p>Si t\u00fa eras un desarrollador por 70 pavos,<\/p>\n\n\n\n<p>lo met\u00edas en tu tema premium y, ala,<\/p>\n\n\n\n<p>ya ten\u00edas tu maquetador.<\/p>\n\n\n\n<p>Ahora, el problema de eso, pues que al final se ha terminado<\/p>\n\n\n\n<p>asociando con plugins de&#8211;<\/p>\n\n\n\n<p>o sea, perd\u00f3n, con temas de Team Forest que te hac\u00edan alegr\u00edas<\/p>\n\n\n\n<p>como esto.<\/p>\n\n\n\n<p>Estos son todos los temas que vienen de regalo con un tema<\/p>\n\n\n\n<p>con el que voy a utilizar para esto, que es el D7,<\/p>\n\n\n\n<p>que es uno de los t\u00edpicos del Visual Composer.<\/p>\n\n\n\n<p>Si t\u00fa instalas una demo del tema, pues ya has terminado,<\/p>\n\n\n\n<p>porque te va a instalar hasta Google Commerce.<\/p>\n\n\n\n<p>Entonces, con diferencia, Visual Composer es el maquetador m\u00e1s<\/p>\n\n\n\n<p>peligroso que existe.<\/p>\n\n\n\n<p>Yo no he visto mierdas en mi vida m\u00e1s grandes que las que he visto con VisualComposer.<\/p>\n\n\n\n<p>Ahora, si sabes hacer la cosa, pues bueno, pues un maqueteo m\u00e1s.<\/p>\n\n\n\n<p>Vale, yo voy a utilizar, como he dicho, un tema que es un tema de estos multi<\/p>\n\n\n\n<p>de prop\u00f3sito, como le gusta decir a nuestros queridos amigos de Chiclana,<\/p>\n\n\n\n<p>que lo bueno que tienes que se integra muy bien con VisualComposer,<\/p>\n\n\n\n<p>bueno, con VisualComposer, con Elementor y con 50 m\u00e1s,<\/p>\n\n\n\n<p>y te deja configurarlo todo.<\/p>\n\n\n\n<p>Entonces, por ejemplo, t\u00fa tienes una secci\u00f3n de botones y le puedes<\/p>\n\n\n\n<p>decir ya, pues que quiero que utilice el color de acento,<\/p>\n\n\n\n<p>que ya en otra p\u00e1gina he definido que el color de acento<\/p>\n\n\n\n<p>es el rojo, y que a partir de ah\u00ed lo hereden todos los<\/p>\n\n\n\n<p>componentes.<\/p>\n\n\n\n<p>Para ahorraros el tost\u00f3n, todo esto ya lo traigo hecho de<\/p>\n\n\n\n<p>casa.<\/p>\n\n\n\n<p>Y de hecho ya tengo hecha lo que ser\u00eda la estructura de la<\/p>\n\n\n\n<p>p\u00e1gina, porque esto no es del macatador,<\/p>\n\n\n\n<p>esto realmente es del tema, en el que ya tendr\u00eda la cabecera del<\/p>\n\n\n\n<p>sitio al pie y lo que vamos a hacer va a ser el contenido de<\/p>\n\n\n\n<p>esta landing, el contenido de la p\u00e1gina de los gremis.<\/p>\n\n\n\n<p>Vale, esto adem\u00e1s tiene, para tener m\u00e1s l\u00edo todav\u00eda,<\/p>\n\n\n\n<p>Visual Composer tiene 2 editores.<\/p>\n\n\n\n<p>Tiene el editor de Front, que es este, que es horrorosamente<\/p>\n\n\n\n<p>malo.<\/p>\n\n\n\n<p>Tira much\u00edsimo JavaScript, chupa el intercaseado y va fatal.<\/p>\n\n\n\n<p>O sea, no han conseguido arreglarlo.<\/p>\n\n\n\n<p>De hecho, no han conseguido arreglarlo nunca.<\/p>\n\n\n\n<p>Se supone que lo hicieron, adem\u00e1s, copiando a Divi.<\/p>\n\n\n\n<p>Entonces, pero claro, es un quiero y no puedo que de verdad va<\/p>\n\n\n\n<p>fatal de rendimiento y de todo.<\/p>\n\n\n\n<p>Entonces, vamos a cerrar esto y vamos a editar directamente la<\/p>\n\n\n\n<p>p\u00e1gina, que lo que va a sacar es el editor del back-end.<\/p>\n\n\n\n<p>El editor del back-end es muy parecido a Divi.<\/p>\n\n\n\n<p>De hecho, son de una \u00e9poca muy parecida.<\/p>\n\n\n\n<p>Cada uno tira por un lado, pero la base es pr\u00e1cticamente la<\/p>\n\n\n\n<p>misma.<\/p>\n\n\n\n<p>De hecho, las opciones que tiene, pues, al final son lo mismo.<\/p>\n\n\n\n<p>Tienen las secciones, las columnas,<\/p>\n\n\n\n<p>columnas interiores y los elementos.<\/p>\n\n\n\n<p>Tiene tambi\u00e9n la opci\u00f3n de generar plantillas,<\/p>\n\n\n\n<p>guardarlas y dem\u00e1s.<\/p>\n\n\n\n<p>Pero bueno, vamos a quedarnos con lo b\u00e1sico.<\/p>\n\n\n\n<p>Vamos a a\u00f1adir un elemento.<\/p>\n\n\n\n<p>Vamos a crear un elemento que es la fila.<\/p>\n\n\n\n<p>Vamos a hacer la cajita del gremlin.<\/p>\n\n\n\n<p>Y vamos a decirle directamente que en los ajustes de fila es una<\/p>\n\n\n\n<p>fila en la que quiero extender la fila.<\/p>\n\n\n\n<p>Y vamos a decirle que a altura completa.<\/p>\n\n\n\n<p>Posici\u00f3n de las columnas al medio y opciones de dise\u00f1o.<\/p>\n\n\n\n<p>Le vamos a meter un gris de fondo para que se vea mientras que<\/p>\n\n\n\n<p>carga la imagen.<\/p>\n\n\n\n<p>Y vamos a meterle al gizmo. \u00bfD\u00f3nde est\u00e1s? Aqu\u00ed. Establecer imagen y le decimos los<\/p>\n\n\n\n<p>ajustes de la imagen. Vamos a decir que cubrir. Una cosa muy buena que tiene<\/p>\n\n\n\n<p>Visual Composer y esa s\u00ed que deber\u00edan tener otros maquetadores, por lo menos,<\/p>\n\n\n\n<p>por mi opini\u00f3n, es que para alguien que sabe un m\u00ednimo de CSS y de HTML, las<\/p>\n\n\n\n<p>cosas son muy intuitivas. Porque, por ejemplo, si veis aqu\u00ed este dibujo del<\/p>\n\n\n\n<p>elemento es el mismo que tiene Chrome. Tienes para personalizar aqu\u00ed el<\/p>\n\n\n\n<p>pading, el borde, el pade&#8211; perd\u00f3n, el margen, el borde y el pading. Es el objeto<\/p>\n\n\n\n<p>de caja de cualquier navegador. Vale, vamos a guardar.<\/p>\n\n\n\n<p>Y ya tendr\u00edamos aqu\u00ed. La vista previa es horrorosamente mala. Tenemos que<\/p>\n\n\n\n<p>imaginarlo. Tenemos que ir haciendo vista&#8211; Tenemos que ir tirando vistas previas.<\/p>\n\n\n\n<p>Vamos a tirar de momento contenido y ahora ajustamos lo que es escacharre.<\/p>\n\n\n\n<p>Bloque de texto. Vamos a tener un bloque de texto. Lo tengo por aqu\u00ed copiado para no<\/p>\n\n\n\n<p>tener que picarlo. Vale, entonces.<\/p>\n\n\n\n<p>Bueno, una cosa que no he dicho es que esto tiene chorro cientos mil millones de bloques<\/p>\n\n\n\n<p>m\u00e1s los que mete cada tema. Vale, si t\u00fa le des aqu\u00ed a\u00f1adir esto tienes todo esto.<\/p>\n\n\n\n<p>El problema que tiene esto es que te carga todo el JavaScript y todo el CSS de<\/p>\n\n\n\n<p>todos esos elementos siempre. Y en la pr\u00e1ctica t\u00fa terminas utilizando 4 o 5 bloques.<\/p>\n\n\n\n<p>Que es el problema al final que tienen todos los maquetadores. Vamos a ver nuestra<\/p>\n\n\n\n<p>fila, un salto de l\u00ednea para que esto sea un h1 y esto sea un h2.<\/p>\n\n\n\n<p>Vale, se puede tocar aqu\u00ed los estilos, centrarlo a la derecha, centrarlo a la<\/p>\n\n\n\n<p>izquierda, se puede tocar el html porque est\u00e1 al final es editor como el que<\/p>\n\n\n\n<p>ten\u00eda WordPress antes, pero vamos a hacer una cosa un poquito m\u00e1s elegante y es<\/p>\n\n\n\n<p>que a este bloque, esta secci\u00f3n, la vamos a llamar&#8230;<\/p>\n\n\n\n<p>donde est\u00e1s que no te veo, le vamos a dar un id de fila que es hero, guardamos los cambios y con eso ya me tengo preparado por aqu\u00ed el CSS,<\/p>\n\n\n\n<p>pero que tiene una cosa que est\u00e1 graciosa y es que el CSS en vez de met\u00e9rselo a nivel de sitio se lo puede meter tambi\u00e9n a nivel de p\u00e1gina.<\/p>\n\n\n\n<p>Entonces, este CSS que solamente es para este giro se lo meto a nivel de p\u00e1gina.<\/p>\n\n\n\n<p>Bueno, vamos a actualizar ya esto y vamos a tirar una vista previa.<\/p>\n\n\n\n<p>Vale, esta previa. Bueno, no vamos muy mal, \u00bfno?<\/p>\n\n\n\n<p>M\u00e1s que un detalle gracioso es que aunque le he dicho altura completa,<\/p>\n\n\n\n<p>como est\u00e1 integrado con el tema, reconoce la altura de la cabecera y me la descuenta.<\/p>\n\n\n\n<p>As\u00ed que le he hecho altura completa menos la cabecera. No vamos mal.<\/p>\n\n\n\n<p>Venga, siguiente. Vamos a meterle aqu\u00ed un separador.<\/p>\n\n\n\n<p>Le decimos que el color de fondo es blanco, alineaci\u00f3n a la derecha,<\/p>\n\n\n\n<p>esto es pr\u00e1cticamente lo mismo en todos lados. Vamos a meterle nuestros 5<\/p>\n\n\n\n<p>pixelitos, ancho de elemento, vamos a decirle con 20% y listo.<\/p>\n\n\n\n<p>Bueno, todos los elementos tienen un margen por debajo de 35 p\u00edxeles, as\u00ed que si no<\/p>\n\n\n\n<p>queremos que lo tengas, lo tenemos que quitar aqu\u00ed. Vamos a decirle aqu\u00ed un 0.<\/p>\n\n\n\n<p>Vale. Y vamos a meter otro bloque de texto.<\/p>\n\n\n\n<p>Vale. En el que vamos a meterle el Mr. Wing Secret Shop.<\/p>\n\n\n\n<p>Me dicen por aqu\u00ed que maqueto poco. Y s\u00ed que es verdad.<\/p>\n\n\n\n<p>Porque yo normalmente lo que hago es que primero meto todo el contenido.<\/p>\n\n\n\n<p>Y de hecho toco muy poco el dise\u00f1o.<\/p>\n\n\n\n<p>Y luego voy a dos monitores y voy tocando sobre la marcha.<\/p>\n\n\n\n<p>Con eso lo voy mucho m\u00e1s a saco, copiando el contenido, copiando las im\u00e1genes<\/p>\n\n\n\n<p>es que ha pasado el cliente o lo que tenemos del trabajo y con eso ya luego se trabaja.<\/p>\n\n\n\n<p>Perd\u00f3n, como estaba hablando, se me ha pasado, he metido un h4, \u00bfverdad? S\u00ed, h4. Vale.<\/p>\n\n\n\n<p>Y con esto ya tendr\u00edamos nuestra cabecera. Se me ha ido, esto es un h4. Perd\u00f3n, es que<\/p>\n\n\n\n<p>lo hab\u00eda metido en mi CSS que esto era un h3, que es en el que le he dicho que sea blanco<\/p>\n\n\n\n<p>la l\u00ednea a la derecha.<\/p>\n\n\n\n<p>Vale, guardar, actualizar.<\/p>\n\n\n\n<p>Vale, con esto ya tendr\u00edamos nuestro&#8211;<\/p>\n\n\n\n<p>se carga nuestro giro.<\/p>\n\n\n\n<p>Vale, ve, todos los elementos le meten los 35 p\u00edxeles.<\/p>\n\n\n\n<p>Ahora, si quise ajustarlo, tendr\u00eda que quitarle el margen<\/p>\n\n\n\n<p>este inferior.<\/p>\n\n\n\n<p>Vamos a seguir con la siguiente fila y vamos a meter otro bloque.<\/p>\n\n\n\n<p>Vamos con el de&#8211;<\/p>\n\n\n\n<p>Vale, aqu\u00ed tambi\u00e9n he dado forma de hacerlo,<\/p>\n\n\n\n<p>lo mismo que en Elementor.<\/p>\n\n\n\n<p>Yo podr\u00eda crear una secci\u00f3n o directamente voy a crear una<\/p>\n\n\n\n<p>la fila, le vamos a decir que es una fila como antes, perd\u00f3n, en la fila le vamos a<\/p>\n\n\n\n<p>decir que es una fila que queremos extenderla, en opciones de dise\u00f1o vamos<\/p>\n\n\n\n<p>a decirle que de fondo me parece que esto es un E5, esto es un E5,<\/p>\n\n\n\n<p>E5, E5, E5, con eso ya tendr\u00edamos el fondo y aqu\u00ed vamos a meterle un<\/p>\n\n\n\n<p>un bloque de texto que este tenemos el de s\u00f3lo recuerda donde est\u00e1s que no te veo<\/p>\n\n\n\n<p>ah\u00ed este creo que no lo tengo copiado bueno lo picamos s\u00f3lo recuerda las tres<\/p>\n\n\n\n<p>normas b\u00e1sicas vale este s\u00ed que la vamos a centrar bueno<\/p>\n\n\n\n<p>ten\u00eda que haberle metido los estilos del sitio que estuvieran todos los h2<\/p>\n\n\n\n<p>centrado porque esto le voy a decir que es un h2 lo que s\u00ed me va a coger de los<\/p>\n\n\n\n<p>estilos del sitio.<\/p>\n\n\n\n<p>Lo que me ha cogido es el color, la fuente.<\/p>\n\n\n\n<p>Lo bueno que tiene esto es que estoy metiendo muy poquito<\/p>\n\n\n\n<p>CSS en l\u00ednea.<\/p>\n\n\n\n<p>Que realmente todo lo est\u00e1 heredando del tema.<\/p>\n\n\n\n<p>Si yo ahora cambiara los ajustes del tema, me lo heredar\u00eda.<\/p>\n\n\n\n<p>Y si yo duplico este sitio para hacer un sitio nuevo,<\/p>\n\n\n\n<p>puedo aprovechar todo el contenido.<\/p>\n\n\n\n<p>Vamos a meter otra fila.<\/p>\n\n\n\n<p>Pero como le estoy creando una fila dentro de otra,<\/p>\n\n\n\n<p>lo que me crea es una fila interior.<\/p>\n\n\n\n<p>En esta fila anterior le vamos a decir que sea de 3 columnas.<\/p>\n\n\n\n<p>Aqu\u00ed tienes los estilos b\u00e1sicos de c\u00f3mo se reparten las<\/p>\n\n\n\n<p>columnas, si las has personalizado, te deja hacer esto.<\/p>\n\n\n\n<p>Internamente, Visual Composer lo que utiliza todav\u00eda es<\/p>\n\n\n\n<p>Boostrap, es decir, utiliza un esquema de 12 columnas.<\/p>\n\n\n\n<p>Aqu\u00ed aunque est\u00e1 diciendo 1\/3, 1\/3, 1\/3, realmente son 4<\/p>\n\n\n\n<p>m\u00f3dulos, 4 m\u00f3dulos, 4 m\u00f3dulos.<\/p>\n\n\n\n<p>De hecho, si nos venimos dentro de una columna y nos venimos a las opciones responsive,<\/p>\n\n\n\n<p>aqu\u00ed las opciones son las de Bustrap.<\/p>\n\n\n\n<p>Es decir, la que tiene en el MD, en el LG, en el XS,<\/p>\n\n\n\n<p>y adem\u00e1s aqu\u00ed se te lo est\u00e1 diciendo en 1, 2, 4, 5, 6, 8, hasta 12 columnas.<\/p>\n\n\n\n<p>Vale. No nos vamos a meter con eso.<\/p>\n\n\n\n<p>Vamos a meterle aqu\u00ed directamente un bloque de imagen.<\/p>\n\n\n\n<p>Esta imagen la tenemos ya por aqu\u00ed preparadita, era la del solecito.<\/p>\n\n\n\n<p>Establecer imagen.<\/p>\n\n\n\n<p>Vamos a decirle aqu\u00ed que es full porque si no lo que hace es generar otra<\/p>\n\n\n\n<p>miniatura.<\/p>\n\n\n\n<p>Y vamos a decir que est\u00e1 alineada al centro.<\/p>\n\n\n\n<p>Vamos a meter aqu\u00ed otro bloque de texto.<\/p>\n\n\n\n<p>Lo que dec\u00eda antes que al final, esto al final lo que trabaja solamente<\/p>\n\n\n\n<p>es bloques de texto, im\u00e1genes, columnas y alguna cosita muy rara vez,<\/p>\n\n\n\n<p>en plan un acorde\u00f3n, alguna cosa as\u00ed rara.<\/p>\n\n\n\n<p>Este vamos a decirle lo mismo.<\/p>\n\n\n\n<p>Este s\u00ed que es un h4.<\/p>\n\n\n\n<p>Vamos a centrarlo.<\/p>\n\n\n\n<p>Vale.<\/p>\n\n\n\n<p>Y ahora vamos a ver c\u00f3mo vamos con esto.<\/p>\n\n\n\n<p>Tiramos una vista previa.<\/p>\n\n\n\n<p>Vale, aqu\u00ed ya estar\u00edamos.<\/p>\n\n\n\n<p>Ahora aqu\u00ed llegamos a una de las limitaciones que tiene esto,<\/p>\n\n\n\n<p>y es que no deja duplicar columnas.<\/p>\n\n\n\n<p>Y de hecho, si te pones a duplicar columnas,<\/p>\n\n\n\n<p>si se pone a duplicar elementos, la interfaz es maravillosa porque<\/p>\n\n\n\n<p>cuesta la misma.<\/p>\n\n\n\n<p>Esto es un cl\u00e1sico del Visocomposer, \u00bfvale?<\/p>\n\n\n\n<p>Entonces, si est\u00e1s medio c\u00f3modo con&#8211;<\/p>\n\n\n\n<p>Se pone en modo arcade.<\/p>\n\n\n\n<p>En modo arcade, que es un videojuego, \u00bfno?<\/p>\n\n\n\n<p>Tienes que&#8211;<\/p>\n\n\n\n<p>Est\u00e1 el modo hardcore.<\/p>\n\n\n\n<p>El modo hardcore es que te puedes venir al classic mode y<\/p>\n\n\n\n<p>entonces te hace, ostia, me est\u00e1 metiendo un mont\u00f3n de<\/p>\n\n\n\n<p>Sorkoth por detr\u00e1s.<\/p>\n\n\n\n<p>Pero es que si nos venimos aqu\u00ed, vemos que tenemos aqu\u00ed la<\/p>\n\n\n\n<p>Column Inner.<\/p>\n\n\n\n<p>Aqu\u00ed est\u00e1.<\/p>\n\n\n\n<p>Esta es la columna de un tercio hasta aqu\u00ed.<\/p>\n\n\n\n<p>Esta es la primera columna en la que tengo la imagen y el bloque<\/p>\n\n\n\n<p>de texto de debajo.<\/p>\n\n\n\n<p>La voy a copiar.<\/p>\n\n\n\n<p>Voy a borrar por toda la cara las dos siguientes.<\/p>\n\n\n\n<p>Column Inner hasta aqu\u00ed.<\/p>\n\n\n\n<p>Me parece que me voy a cargar algo.<\/p>\n\n\n\n<p>[RISA]<\/p>\n\n\n\n<p>Esta no deber\u00eda estar aqu\u00ed.<\/p>\n\n\n\n<p>2.<\/p>\n\n\n\n<p>2.<\/p>\n\n\n\n<p>Y si nos venimos al editor de backend y no explota,<\/p>\n\n\n\n<p>pues parece que s\u00ed explota.<\/p>\n\n\n\n<p>Vale.<\/p>\n\n\n\n<p>Y un deshacer muy bonito.<\/p>\n\n\n\n<p>Bueno, pillamos el concepto.<\/p>\n\n\n\n<p>Me parece que es que he borrado un elemento de m\u00e1s.<\/p>\n\n\n\n<p>Vamos al cl\u00e1sico.<\/p>\n\n\n\n<p>Vamos a ver un intento que no se diga.<\/p>\n\n\n\n<p>Efecto directo.<\/p>\n\n\n\n<p>vamos a ver venga column inner un tercio y column inner se van fuera<\/p>\n\n\n\n<p>column inner un tercio y column inner se van fuera<\/p>\n\n\n\n<p>y ahora column inner<\/p>\n\n\n\n<p>column inner wii<\/p>\n\n\n\n<p>T\u00eda, que tiene una dentro de otra. \u00bfQu\u00e9 me est\u00e1s contando, Mari Carmen?<\/p>\n\n\n\n<p>Creo que va a petar. Me parece que hecho lo mismo. Creo que el color unidas no lo<\/p>\n\n\n\n<p>tendr\u00edas que borrar. Me parece que s\u00ed, que tiene que tener uno de m\u00e1s porque hace<\/p>\n\n\n\n<p>una anidao y raro.<\/p>\n\n\n\n<p>Ahora lo dej\u00e1 todav\u00eda peor. Bueno, pues entonces vamos a intentar<\/p>\n\n\n\n<p>arrastrando. \u00a1Eeeeh! ha funcionado.<\/p>\n\n\n\n<p>Ha funcionado. \u00a1Yuuu! Venga, que s\u00ed, que no, que s\u00ed, que no, que s\u00ed, que no, que s\u00ed.<\/p>\n\n\n\n<p>Que no&#8230;<\/p>\n\n\n\n<p>Que s\u00ed&#8230;<\/p>\n\n\n\n<p>[Risas]<\/p>\n\n\n\n<p>Vale, me he pasado cuatro a\u00f1os haciendo esto. \u00a1Ay! Entr\u00f3.<\/p>\n\n\n\n<p>Vale, y luego me pregunta la gente que por qu\u00e9 le tengo tanto escostavicho.<\/p>\n\n\n\n<p>Bueno, pues con esto ya lo tender\u00edamos. Ahora lo que tenemos que hacer es editar el elemento de imagen, cambiar el texto.<\/p>\n\n\n\n<p>Vale, vamos a saltarlo. Bueno, con toda la ca\u00f1a que le he metido a este pobre hombre.<\/p>\n\n\n\n<p>Bueno, vamos a meter tambi\u00e9n la fila. Vamos a decirle aqu\u00ed que un tercio, dos tercios, le damos la vuelta.<\/p>\n\n\n\n<p>Aqu\u00ed metemos a nuestro bichito, imagen \u00fanica. Vamos a meter una imagen con el gizmo.<\/p>\n\n\n\n<p>Vamos a decirle aqu\u00ed tambi\u00e9n a full porque ya est\u00e1 su tama\u00f1o.<\/p>\n\n\n\n<p>Vamos a decirle que est\u00e1 alineada al centro, venga,<\/p>\n\n\n\n<p>para que se centre cuando luego en responsive.<\/p>\n\n\n\n<p>Y aqu\u00ed vamos a meter un bloque de texto.<\/p>\n\n\n\n<p>Un Fistroom.<\/p>\n\n\n\n<p>Y aqu\u00ed s\u00ed que podr\u00edamos hacer, aunque aqu\u00ed parece que no tiene la misma altura,<\/p>\n\n\n\n<p>s\u00ed que tiene la misma opci\u00f3n parecida a la de Elementor,<\/p>\n\n\n\n<p>porque al final por detr\u00e1s tambi\u00e9n est\u00e1 utilizando ya Flexbox,<\/p>\n\n\n\n<p>adem\u00e1s, entonces se le puede decir que las filas son de la misma altura<\/p>\n\n\n\n<p>y que la posici\u00f3n del contenido es al medio.<\/p>\n\n\n\n<p>Con eso ya, aunque aqu\u00ed no se vea bien, yo tiro la vista previa.<\/p>\n\n\n\n<p>O milagro, ha funcionado.<\/p>\n\n\n\n<p>V\u00e1monos al siguiente.<\/p>\n\n\n\n<p>V\u00e1monos a duplicarnos directamente la fila.<\/p>\n\n\n\n<p>Ahora me la he cogido.<\/p>\n\n\n\n<p>Como vemos, el rendimiento va un poco justito porque solamente<\/p>\n\n\n\n<p>tengo un Ryzen 7 con 32 gigas de RAM.<\/p>\n\n\n\n<p>A m\u00ed me cuesta moverse, al pobrecito m\u00edo.<\/p>\n\n\n\n<p>Vale, con esto ya tendr\u00edamos aqu\u00ed el blog,<\/p>\n\n\n\n<p>que ser\u00eda el blog de Mr. Wings.<\/p>\n\n\n\n<p>Que esto es Mr. Wings blog.<\/p>\n\n\n\n<p>Vale.<\/p>\n\n\n\n<p>Vale, y aqu\u00ed hay una cosa que s\u00ed que me gustar\u00eda pararme,<\/p>\n\n\n\n<p>porque esto es una de las pocas cosas que tiene bien hechas y<\/p>\n\n\n\n<p>muy bien hechas.<\/p>\n\n\n\n<p>Esto hay dos formas de hacerlo.<\/p>\n\n\n\n<p>Una es con el elemento este, el blog m\u00e1s sonreangrid,<\/p>\n\n\n\n<p>que es un elemento de tipo blog normal que te deja coger los<\/p>\n\n\n\n<p>elementos por categor\u00edas, filtrar, paginar y dem\u00e1s.<\/p>\n\n\n\n<p>Lo utilizaremos ahora.<\/p>\n\n\n\n<p>Pero antes quer\u00eda parar un momentito con este.<\/p>\n\n\n\n<p>Es de las cosas m\u00e1s bestias que tiene el Visual Composer,<\/p>\n\n\n\n<p>que es el elemento post grid.<\/p>\n\n\n\n<p>Funciona exactamente igual.<\/p>\n\n\n\n<p>La \u00fanica diferencia es que si te vas al dise\u00f1o del elemento,<\/p>\n\n\n\n<p>te deja elegir un mont\u00f3n de dise\u00f1os distintos ya<\/p>\n\n\n\n<p>predefinidos y tiene por aqu\u00ed un editor de dise\u00f1os que es el<\/p>\n\n\n\n<p>constructor de cuadr\u00edcula que lo que te deja es crearte una<\/p>\n\n\n\n<p>plantilla de c\u00f3mo quieres que se cree esa cuadr\u00edcula.<\/p>\n\n\n\n<p>Aqu\u00ed creo el t\u00edtulo, aqu\u00ed la imagen, aqu\u00ed quiero tal.<\/p>\n\n\n\n<p>Esto hay bloques de Gutenberg que lo hacen,<\/p>\n\n\n\n<p>pero lo m\u00e1s bestia que tiene esto,<\/p>\n\n\n\n<p>Y esto es una cosa que s\u00ed que deber\u00eda ir a Gutenberg,<\/p>\n\n\n\n<p>es que aqu\u00ed ahora mismo me est\u00e1 diciendo origen de los datos<\/p>\n\n\n\n<p>post.<\/p>\n\n\n\n<p>O sea, se me est\u00e1 cogiendo las entradas.<\/p>\n\n\n\n<p>Pero tiene todo esto.<\/p>\n\n\n\n<p>Primero que me coge de todos los post types,<\/p>\n\n\n\n<p>que eso ya es una barbaridad, que es lo que s\u00ed que le van a<\/p>\n\n\n\n<p>meter a Gutenberg.<\/p>\n\n\n\n<p>Pero es que adem\u00e1s tiene esta aqu\u00ed tambi\u00e9n lista de IDEs,<\/p>\n\n\n\n<p>que es que me deja buscar cualquier ID de cualquier post<\/p>\n\n\n\n<p>type.<\/p>\n\n\n\n<p>Aqu\u00ed me est\u00e1 cogiendo que tengo una p\u00e1gina que se me inicio.<\/p>\n\n\n\n<p>Es decir, puedo hacer un post grid con lo que me d\u00e9 la gana,<\/p>\n\n\n\n<p>por ejemplo, con productos de Google Commerce.<\/p>\n\n\n\n<p>Pero tiene otra cosa todav\u00eda m\u00e1s bestia,<\/p>\n\n\n\n<p>que es as\u00ed que de verdad matar\u00eda a alguien porque se lo metieran a<\/p>\n\n\n\n<p>Gutenberg, que es esto, que es la consulta personalizada.<\/p>\n\n\n\n<p>Que lo que te deja meter aqu\u00ed es una consulta de WPKery.<\/p>\n\n\n\n<p>Es decir, que yo puedo hacer una burrada como esto.<\/p>\n\n\n\n<p>Te puedo decir, s\u00e1came del post type p\u00e1gina todas las<\/p>\n\n\n\n<p>p\u00e1ginas que tenga como padre la p\u00e1gina 76 o en este caso la<\/p>\n\n\n\n<p>167, que est\u00e9n publicadas, ordenadas por men\u00fa orden,<\/p>\n\n\n\n<p>ascendente.<\/p>\n\n\n\n<p>Con esto le puedo decir, hazme una plantilla del post grid de<\/p>\n\n\n\n<p>c\u00f3mo quiero que salgan los servicios de una p\u00e1gina.<\/p>\n\n\n\n<p>Las p\u00e1ginas las creo directamente como p\u00e1ginas hijas<\/p>\n\n\n\n<p>de la p\u00e1gina servicios.<\/p>\n\n\n\n<p>Y con eso le digo, s\u00e1came todas las p\u00e1ginas hijas de la p\u00e1gina<\/p>\n\n\n\n<p>servicios.<\/p>\n\n\n\n<p>Vamos a ir terminando el RAN, vamos a terminar la p\u00e1gina,<\/p>\n\n\n\n<p>blog m\u00e1s onreangrid.<\/p>\n\n\n\n<p>Vamos a decir que queremos sacar todas las entradas.<\/p>\n\n\n\n<p>En el paginador le vamos a decir desactivado el paginador y queremos que solamente saque<\/p>\n\n\n\n<p>3, porque si no, si tenemos 3000 entradas nos va a mostrar las 3000.<\/p>\n\n\n\n<p>Vamos a decir que queremos de tipo cuadr\u00edcula, que tenga la misma altura, sin efecto de carga,<\/p>\n\n\n\n<p>estilo classic, sin fondo.<\/p>\n\n\n\n<p>Padding vamos a quitarle el padding de los lados.<\/p>\n\n\n\n<p>Vamos a decirle que las im\u00e1genes las fuerza a 3 medios, escalando las im\u00e1genes a lo que<\/p>\n\n\n\n<p>le d\u00e9 la gana.<\/p>\n\n\n\n<p>Sin animaci\u00f3n.<\/p>\n\n\n\n<p>modo adaptable le vamos a decir que es a tres columnas, tres columnas, tres columnas y a partir de aqu\u00ed ya se ponga a una columna.<\/p>\n\n\n\n<p>Espacio entre columnas, ese me vale. Y ahora de la publicaci\u00f3n, el contenido lo que tenemos aqu\u00ed es alineado a la izquierda.<\/p>\n\n\n\n<p>El resto me vale.<\/p>\n\n\n\n<p>Vamos a decirle que es sin fecha, sin categor\u00eda, sin autor, sin comentarios.<\/p>\n\n\n\n<p>Y vamos a decirle que queremos sacar el extracto.<\/p>\n\n\n\n<p>y que el bot\u00f3n del final es un &#8220;ler m\u00e1s&#8221;.<\/p>\n\n\n\n<p>Vale.<\/p>\n\n\n\n<p>Ahora creo que en alg\u00fan lado me he saltado.<\/p>\n\n\n\n<p>Bueno, s\u00ed, le he dicho, ya por inercia le he dicho que saque la<\/p>\n\n\n\n<p>imagen, se podr\u00eda quitar que no saque la imagen.<\/p>\n\n\n\n<p>Vamos a decirle que no saque tal.<\/p>\n\n\n\n<p>Y con el pasar por encima tampoco, pues ya estar\u00edamos.<\/p>\n\n\n\n<p>guardamos nos vamos a ver nuestra p\u00e1gina<\/p>\n\n\n\n<p>y tenemos una p\u00e1gina hecha<\/p>\n\n\n\n<p>qu\u00e9 bueno<\/p>\n\n\n\n<p>qu\u00e9 bueno lo hemos conseguido<\/p>\n\n\n\n<p>S\u00ed, s\u00ed. No, muy interesante sobre todo la parte del loop que es muy vers\u00e1til<\/p>\n\n\n\n<p>como has mostrado, que realmente puedes hacer queries a todos los custom<\/p>\n\n\n\n<p>post types. Eso es lo que yo creo que queremos, que salga en la parte de<\/p>\n\n\n\n<p>avanzado en el Gutenberg del rollo, oye, dame, no me pongas barreras, d\u00e9jame<\/p>\n\n\n\n<p>hacer lo que yo quiera. Eso es lo que yo le he hecho realmente un poco en cara a Gutenberg,<\/p>\n\n\n\n<p>es que el que haya empezado absolutamente de cero.<\/p>\n\n\n\n<p>Porque, a fin de cuentas, maquetadores hay desde hace un<\/p>\n\n\n\n<p>mont\u00f3n de a\u00f1os y todos han pegado sus hostias y todos han<\/p>\n\n\n\n<p>tenido millones de usuarios.<\/p>\n\n\n\n<p>Entonces, vale, s\u00ed, c\u00f3digo sea de cero, pero, co\u00f1o,<\/p>\n\n\n\n<p>aprovecha lo que han aprendido ya otros.<\/p>\n\n\n\n<p>&#8211; S\u00ed, no, a lo mejor la filosof\u00eda tal vez est\u00e1 de lo<\/p>\n\n\n\n<p>hago con React y lo guardo todo en base de datos como se va<\/p>\n\n\n\n<p>a mostrar, \u00bfsabes?<\/p>\n\n\n\n<p>Sin tener que renderizarlo a posteriori.<\/p>\n\n\n\n<p>Eso a lo mejor s\u00ed que es lo nuevo que aporta el haberle<\/p>\n\n\n\n<p>a\u00f1adido React, pero el resto.<\/p>\n\n\n\n<p>Si os parece, voy a a\u00f1adir a los que hemos quedado aqu\u00ed en el<\/p>\n\n\n\n<p>directo.<\/p>\n\n\n\n<p>Hola, Santi.<\/p>\n\n\n\n<p>Hola, David.<\/p>\n\n\n\n<p>Hola.<\/p>\n\n\n\n<p>Qu\u00e9 guay.<\/p>\n\n\n\n<p>Bueno, pues ha estado muy bien.<\/p>\n\n\n\n<p>Yo creo que m\u00e1s que sacar conclusiones,<\/p>\n\n\n\n<p>nosotros hemos ense\u00f1ado las cosas,<\/p>\n\n\n\n<p>que la gente saque las conclusiones que quieran.<\/p>\n\n\n\n<p>Yo simplemente he ido apuntando y de div y han salido 100 divs,<\/p>\n\n\n\n<p>de Elementor han salido 107 divs, de Gutenberg 49 divs,<\/p>\n\n\n\n<p>y ni los que acaba de acabar y no me lo sab\u00eda decir.<\/p>\n\n\n\n<p>Pero yo creo que estar\u00e1 m\u00e1s por los 100 que por los 49.<\/p>\n\n\n\n<p>127.<\/p>\n\n\n\n<p>127.<\/p>\n\n\n\n<p>No, ag\u00e1ndale, m*erda.<\/p>\n\n\n\n<p>Me est\u00e1 sacando tambi\u00e9n la barra del bicho este de&#8230;<\/p>\n\n\n\n<p>S\u00ed, que igual te est\u00e1 sumando alguna de m\u00e1s.<\/p>\n\n\n\n<p>Bueno, al final la idea un poco, que creo que se ha conseguido muy bien<\/p>\n\n\n\n<p>con los cuatro ejemplos que hab\u00e9is hecho,<\/p>\n\n\n\n<p>es que conocieras cuatro opciones distintas de hacerlo.<\/p>\n\n\n\n<p>Cada herramienta es mejor en distintas \u00e1reas.<\/p>\n\n\n\n<p>Claramente Gutenberg gana en rendimiento,<\/p>\n\n\n\n<p>pero es verdad que Elementor a nivel de interfaz est\u00e1 bastante<\/p>\n\n\n\n<p>pulida y resulta bastante intuitiva a mucha gente.<\/p>\n\n\n\n<p>El VP va a querer este medio troleo demo que nos ha hecho<\/p>\n\n\n\n<p>Mnilo, pues cada uno que juzgue.<\/p>\n\n\n\n<p>Y, bueno, Divi, que lleva ah\u00ed a\u00f1os,<\/p>\n\n\n\n<p>pues tambi\u00e9n a\u00f1adiendo m\u00f3dulos y granular s\u00ed que es.<\/p>\n\n\n\n<p>Entonces, bueno, ha habido mucho movimiento en el chat,<\/p>\n\n\n\n<p>que eso mola siempre un mont\u00f3n.<\/p>\n\n\n\n<p>Cada herramienta es m\u00e1s adecuada para un perfil que otro,<\/p>\n\n\n\n<p>obviamente, David ha dejado claro que no solo utiliza<\/p>\n\n\n\n<p>Gutenberg, sino que ha dado clases y ha a\u00f1adido CSS,<\/p>\n\n\n\n<p>porque tiene un perfil m\u00e1s t\u00e9cnico.<\/p>\n\n\n\n<p>Pero que, bueno, la idea es un poco,<\/p>\n\n\n\n<p>yo creo que os hab\u00e9is podido hacer una idea de c\u00f3mo funcionan<\/p>\n\n\n\n<p>estas herramientas.<\/p>\n\n\n\n<p>la idea es un poco que cada uno elija y si no le hab\u00edais dado un tiento a<\/p>\n\n\n\n<p>Gutenberg por miedo a que no se pueden hacer tantas cosas que es verdad que<\/p>\n\n\n\n<p>todav\u00eda no se pueden hacer tantas pero realmente con lo nativo ya veis que se<\/p>\n\n\n\n<p>puede hacer un dise\u00f1o bastante majo<\/p>\n\n\n\n<p>y nada yo creo que vamos a aprovechar disculpad que se haya alargado un poco<\/p>\n\n\n\n<p>m\u00e1s pero es verdad que hemos tra\u00eddo aqu\u00ed cuatro cracks que han explicado super<\/p>\n\n\n\n<p>bien su herramienta y pues que ha alargado vamos a aprovechar que tenemos<\/p>\n\n\n\n<p>a Nilo V\u00e9lez que es el Lead Organizer de la WorkCamp Sevilla para que nos venda un poquito porque<\/p>\n\n\n\n<p>debemos de estar comiendo polvorones delante del ordenador y mientras contribuimos a WordPress.<\/p>\n\n\n\n<p>As\u00ed que Nilo aprovecha. Venga, muy r\u00e1pido. Os vendo la WorkCamp Sevilla muy r\u00e1pido,<\/p>\n\n\n\n<p>muy r\u00e1pido, muy r\u00e1pido. Va a ser una WorkCamp de cuatro d\u00edas. Van a ser cuatro d\u00edas,<\/p>\n\n\n\n<p>tres horas por la tarde y no va a haber charlas. Va a ser un contributor de cuatro d\u00edas. Eso que<\/p>\n\n\n\n<p>quiere decir que realmente lo que vamos a hacer va a ser una work<\/p>\n\n\n\n<p>camp en la que lo que vamos a hacer va a ser que nos vamos a<\/p>\n\n\n\n<p>reunir toda la comunidad o todos los que podamos de la<\/p>\n\n\n\n<p>comunidad, ya haya apuntado 300 y pico.<\/p>\n\n\n\n<p>El l\u00edmite lo tenemos en 500 y tiene su explicaci\u00f3n en que<\/p>\n\n\n\n<p>sean 500 porque vamos a meter a todo el mundo en la misma sala<\/p>\n\n\n\n<p>de zoom.<\/p>\n\n\n\n<p>Esto puede parecer una locura, pero est\u00e1 pensado, \u00bfvale?<\/p>\n\n\n\n<p>Nos hemos tragado todos las work camp online y lo bueno que<\/p>\n\n\n\n<p>viene es que vamos aprendiendo de unas work-camp para otras.<\/p>\n\n\n\n<p>Y una de las cosas, voy a decir, m\u00e1s feas que han estado pasando en<\/p>\n\n\n\n<p>otras work-camp es que al final, cuando haces muchas salas,<\/p>\n\n\n\n<p>pues llega un momento en que los \u00faltimos d\u00edas que ya hay menos<\/p>\n\n\n\n<p>gente, pues terminas con 5 usuarios en una, 4 en otra,<\/p>\n\n\n\n<p>los sponsors est\u00e1n solos.<\/p>\n\n\n\n<p>Entonces, lo que vamos a intentar es todo lo contrario.<\/p>\n\n\n\n<p>Tenemos una sala principal en la que est\u00e1 metido todo el mundo y,<\/p>\n\n\n\n<p>si hace falta, sacamos una sala secundaria si alguien tiene que<\/p>\n\n\n\n<p>explicar algo, si alguien tiene que hacer una reuni\u00f3n privada,<\/p>\n\n\n\n<p>si un sponsor quiere hablar con alg\u00fan participante,<\/p>\n\n\n\n<p>tenemos la opci\u00f3n de crearse a las privadas.<\/p>\n\n\n\n<p>Pero en principio es todo el mundo juntos.<\/p>\n\n\n\n<p>Primer d\u00eda, desarrollo y marketing.<\/p>\n\n\n\n<p>Segundo d\u00eda es core, plugins, temas y hosting.<\/p>\n\n\n\n<p>Y el tercero era&#8211;<\/p>\n\n\n\n<p>No me acuerdo, la verdad.<\/p>\n\n\n\n<p>Tendr\u00eda que mirar el programa.<\/p>\n\n\n\n<p>Era documentaci\u00f3n, comunidad y WordPress TV, me parece.<\/p>\n\n\n\n<p>Perd\u00f3n, WordPress TV.<\/p>\n\n\n\n<p>No lo s\u00e9.<\/p>\n\n\n\n<p>WordPress TV, foros y comunidad.<\/p>\n\n\n\n<p>Y el \u00faltimo d\u00eda, accesibilidad, traducciones y documentaci\u00f3n.<\/p>\n\n\n\n<p>Una cosa muy interesante es que de cada uno de los equipos,<\/p>\n\n\n\n<p>de cada uno de los d\u00edas, aunque van a estar la gente junta,<\/p>\n\n\n\n<p>hemos buscado que m\u00e1s o menos sea una tem\u00e1tica parecida,<\/p>\n\n\n\n<p>por buscar que la conversaci\u00f3n vaya orientada un poco a temas<\/p>\n\n\n\n<p>parecidos.<\/p>\n\n\n\n<p>Y, sobre todo, m\u00e1s que ser un contributor al uso de currar,<\/p>\n\n\n\n<p>va a ser un contributor de divulgar,<\/p>\n\n\n\n<p>de explicar lo que hace cada equipo, de repartir trabajo,<\/p>\n\n\n\n<p>de abrir el a\u00f1o que viene, de buscar gente nueva,<\/p>\n\n\n\n<p>y sobre todo que la gente entienda lo que puede hacer en<\/p>\n\n\n\n<p>cada equipo.<\/p>\n\n\n\n<p>Porque como dec\u00edamos antes, dec\u00edas antes que lo dec\u00edas t\u00fa<\/p>\n\n\n\n<p>en Afay, que no hace falta ser un desarrollador,<\/p>\n\n\n\n<p>no hace falta ser un traductor.<\/p>\n\n\n\n<p>Simplemente con que sep\u00e1is c\u00f3mo funciona web por dentro,<\/p>\n\n\n\n<p>c\u00f3mo reportar un error, c\u00f3mo funcionan los foros,<\/p>\n\n\n\n<p>ya de verdad vais a ganar much\u00edsimo y va a ganar la<\/p>\n\n\n\n<p>comunidad much\u00edsimo.<\/p>\n\n\n\n<p>No s\u00e9 por qu\u00e9, m\u00e1s o menos tiempo.<\/p>\n\n\n\n<p>[M\u00daSICA]<\/p>\n\n\n\n<p>Para dar un toque ya navide\u00f1o finalizando todo ponemos aqu\u00ed la banda<\/p>\n\n\n\n<p>sonora de los gremlins.<\/p>\n\n\n\n<p>Hemos compartido tiempo sin aparecer una musiquita.<\/p>\n\n\n\n<p>Est\u00e1 frito ya por ponerla.<\/p>\n\n\n\n<p>Bueno estamos en un mid que nos vamos a encontrar en el mid este nada los<\/p>\n\n\n\n<p>que pod\u00e1is pasaros un ratillo pues un ratillo, no es intenci\u00f3n de hacerlo muy<\/p>\n\n\n\n<p>largo, si ten\u00e9is alguna duda concreta para alguno, para David, para Anilo, para<\/p>\n\n\n\n<p>Santi, pues pod\u00e9is el hacer y si m\u00e1s no pues echarnos una copichuela de cava<\/p>\n\n\n\n<p>para celebrar este a\u00f1o de de de Terraza y de<\/p>\n\n\n\n<p>y de granoyer.<\/p>\n\n\n\n<p>No, hombre, Terrassa, tambi\u00e9n empezasteis el a\u00f1o pasado.<\/p>\n\n\n\n<p>S\u00ed, s\u00ed, s\u00ed, es verdad, en abril del a\u00f1o pasado. Exacto, exacto, entonces pues a ver si le<\/p>\n\n\n\n<p>ponemos un punto final a este fat\u00eddico a\u00f1o y nada, yo muchas gracias a todos<\/p>\n\n\n\n<p>los que hab\u00e9is venido, much\u00edsimas gracias que quiero que quede con que conste en<\/p>\n\n\n\n<p>el v\u00eddeo a Nilo, a Pablo, a David y a Santi, \u00bfvale? porque sin vosotros esto no<\/p>\n\n\n\n<p>hubiera sido posible. Un lujazo.<\/p>\n\n\n\n<p>Quiero disculparme por meteros prisa a hacerlos como moderador, me tocaba un poco el papel de polimalo.<\/p>\n\n\n\n<p>Con todo el tiempo del mundo lo puedes hacer con lo que te de la gana.<\/p>\n\n\n\n<p>El caso es verlo en un caso real de aqu\u00ed tienes el brief, aqu\u00ed tienes el contenido.<\/p>\n\n\n\n<p>Eso es. Y la entrega para ma\u00f1ana.<\/p>\n\n\n\n<p>[Risas]<\/p>\n\n\n\n<p>Es as\u00ed, m\u00e1s o menos as\u00ed.<\/p>\n\n\n\n<p>Pues nada, pues ponemos final al v\u00eddeo, una hora 45.<\/p>\n\n\n\n<p>As\u00ed que nos vemos en el 2021.<\/p>\n\n\n\n<p>Es ganarse de hacer preguntas y tal.<\/p>\n\n\n\n<p>Chau, chau.<\/p>\n\n\n\n<p>Chau.<\/p>\n\n\n\n<p>Chau.<\/p>\n\n\n\n<p>[Pausa]<\/p>\n\n\n\n<p>Buen d\u00eda!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El pasado Martes 15 de diciembre, me invitaron a la charla de WPGranollers donde estuvimos diferentes profesionales de WordPress para maquetar una misma p\u00e1gina con diferentes maquetadores visuales. <\/p>\n","protected":false},"author":1,"featured_media":2868,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"editor_notices":[],"webmentions_disabled":false,"footnotes":""},"categories":[169],"tags":[],"class_list":["post-2863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-talks","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/2863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/comments?post=2863"}],"version-history":[{"count":0,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/2863\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media\/2868"}],"wp:attachment":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media?parent=2863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/categories?post=2863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/tags?post=2863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}