203 | Cómo maquetar una web entera a medida con Elementor Pro

En el episodio 203 de WordPress semanal te hablo de una forma muy eficiente de utilizar Elementor Pro para maquetar tu web con WordPress una sola vez y después olvidarte. Vamos allá. Hola hola, Soy Gonzalo de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress desde de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de crear y gestionar tu propia web con WordPress. Y hoy os voy a hablar de una aproximación que puede ser interesante para muchos de vosotros para un perfil más implementador, y es aprovechar lo que trae Elementor Pro, que aunque parezca paradójico, te permite diseñar la estructura de tu web precisamente utilizando Elementor Pro para después no tener que volver a utilizar Elementor cada vez que quieras crear un contenido, una página web, una entrada, lo que sea. ¿Vamos a hablar de ello en detalle en este episodio, creo que puede ser un punto de vista muy interesante, pero antes vamos a ver las novedades qué está pasando en Gonzalo Navarro es esta semana? Pues como cada semana tenéis un nuevo vídeo de la zona código en el que os enseño a personalizar por completo utilizando CSS, los formularios hechos con el plugin WPForms WordPress Forms. Y decidme qué os parece este tipo de vídeos, porque creo que puede ser más interesante para la zona código hacer este tipo de vídeos, es decir, cómo modificar algo muy concreto de WordPress, por ejemplo plugins como los formularios que se generan con WordPress Forms. Me he dado cuenta que hay mucha gente que quisiera controlar su aspecto y con lo que trae WordPress Forms no puede, pues hay que meterle un poquito de CSS. De esta forma os enseño de forma muy certera cómo podéis hacerlo. Voy a hacer lo mismo con el plugin de Contact Form 7 y quiero hacer lo mismo con otros plugins. Entonces ahora mismo tengo una página que es Gonzalo es sugerencias donde podéis sugerirme lo que querá, pero lo que voy a hacer es ponerlo también en vuestra cuenta para los que seáis suscriptores, que me podáis sugerir temas para vídeos para la zona código, es decir, modificar cosas que queráis, aunque sean específicas, por ejemplo, pues cómo cambiar el ancho de página del ZIM concreto que uséis o no sé, cómo modificar algo que muestra un plugin. Todo esto que ya sabéis o que os imagináis que sólo se puede hacer a través de código, Pues me lo sugerís por ahí, ¿De acuerdo? Tanto para la zona código como si queréis sugerirme cursos completos, ya de cosas distintas, pero en este caso me refiero para que la zona código sea algo donde yo vaya haciendo los problemas con los que os vais encontrando y no como ahora, pues que voy publicando cosas que veo interesantes acerca de cómo usar código, pero en este sentido así vais marcando vosotros el paso de la zona código. Creo que podría ser muy interesante, ¿De acuerdo? Así que no lo he hecho todavía, pero voy a añadir una pestañita dentro de vuestra cuenta donde vais a poder sugerirme temas, como digo para la zona código y para los cursos. De todas maneras dejaré la página de GonzaloNavarro es Sugerencias, donde ahí cualquiera, esté suscrito o no, me puede sugerir temas para el podcast, para el blog, para los cursos, para lo que queráis. Bien, bueno, me ha ido un poco del tema. Como decía, la primera novedad es que el nuevo vídeo de la zona código os explico cómo personalizar a través de CSS los formularios que generas con WordPress Forms, tanto todos los formularios como si quieres personalizar uno concreto, que uno sea diferente al resto. Lo vemos todo paso a paso y os dejo el código para que copiéis, peguéis y modifiquéis lo que haga falta. Todo ello lo podéis ver en el vídeo 154 de la zona código, si vais a Gonzalo Navarro es código, lo encontraréis perfecto. La siguiente novedad es el curso de Elementor Pro. Tenemos nuevo curso, ya sabéis que cada mes saco uno nuevo o una renovación completa de uno existente y en este caso pues hago un curso que tiene mucho sentido porque el de Elementor básico, que ya está publicado, es uno de los más populares, de los que más se han consumido ya recordad cuando hice el episodio 200 en el que hice un repaso de los episodios más escuchados de los vídeos de mi web, los cursos más vistos, pues Elementor era uno de los más vistos, entonces tenía mucho sentido esta continuación, hacer el curso de Elementor Pro, donde pues ahí aprendemos las funcionalidades más avanzadas, básicamente cómo diseñar la estructura de tu web, que es de lo que vamos a hablar en este episodio del podcast, Cómo usar animaciones complejas, como por ejemplo que un elemento de la página siga al ratón, cuando tu usuario navega por la página, cuando cómo crear pop ups condicionales, que esta funcionalidad de Elementor es muy, muy, muy potente, porque te permite crear ventanas emergentes en función de un montón de disparadores, es decir, en función de un montón de casos distintos, ya pues los típicos de cuando alguien intenta salir de la página, pero también otros más avanzados, cuando pasan X segundos o cuando una persona ha visto X número de páginas. Por supuesto, esos pop ups los puedes diseñar con todos los widgets que ya vienen con Elementor en el constructor visual de Elementor, con lo cual el nivel de control que tienes es enorme. Además de las plantillas ya prediseñadas, también una de las cosas que hacen Elementor Pro más popular es la posibilidad de personalizar las páginas de tienda y las páginas de producto que genera WooCommerce. Todo ello combinado con el contenido dinámico que te permite utilizar Elementor, que cuando aprendes a usarlo es una verdadera pasada, porque te permite que se muestren cosas que tú no tienes por qué escribir, como títulos, imágenes destacadas, fechas. Un montón de cosas que cuando le vas cogiendo el rollo ves que es increíble. Y también, por supuesto, la posibilidad de utilizar campos personalizados directamente en tus diseños, como por ejemplo los de Advanced Custom Fields. Y es un curso en el que cubro todo esto, No me centro en el típico curso en el que vemos cómo usar cada widget de los 50 que te trae Elementor en su versión Pro, sino que me focalizo en todas estas opciones interesantes que te da nivel de control estructural y de funcionamiento la versión Pro de Elementor, porque al final los widgets o los elementos que te trae Elementor Pro, pues bueno, una vez sabes cómo usar los del básico, sabes cómo usar los del Pro, ¿De acuerdo? Porque siempre se dividen en las tres mismas pestañas de Contenido, Diseño y Avanzado, así que en ese sentido no debéis tener problemas. Pero vamos, lo que hago también es que os dejo enlaces, por si esa parte también queréis profundizar en ella, pues os lo dejo a través de enlaces, ¿De acuerdo? Entonces, curso de Elementor Pro, novedad para todos los suscriptores. Recuerda que para acceder a esto y a la zona código, mi soporte Gonzalo Navarro es Cursos, y ahí tienes todos los detalles para apuntarte. Fantástico. Pues una vez vistas las novedades, nos vamos con el plugin de la semana, que esta vez es para mostrar recetas con un plugin que se llama WP Recipe Maker y que una de sus grandes peculiaridades es que tiene el foco puesto en el SEO. Básicamente vas a poder añadir cualquier receta que quieras o en un formato o pues tipo receta a una página, un post, una entrada o cualquier contenido personalizado y cuando lo añadas automáticamente el plugin les va a dar unos metadatos que le van a indicar a Google que es una receta. Lo típico. Entonces, ¿A qué te puede ayudar esto? Pues a que cuando alguien lo busque en Google tengas la posibilidad al menos, porque luego Google hace lo que quieras, lo que quiera, pero que tengas al menos la posibilidad de que salga la receta. Cómo hacer huevos con patatas y si tu contenido está posicionado pues te podría aparecer una tarjetita en Google que bebe de tu contenido pues mostrando esa pues pelas las patatas, las fríes y fríes los huevos. Y luego pues por supuesto un enlace de ver más que llevaría a tu página. Tienen bloques para Guttenberg, también tiene un bloque para Elementor, pero lo interesante es todo esto de los metadatos de la parte de Schema que el plugin hace por ti y si por ejemplo añades un vídeo, pues en los metadatos lo pone que es un vídeo de recetas. Todo esto que ayuda a Google a entender tu contenido y que puede ser que después lo muestre de forma diferente con los Rich Snippets, estos los resultados enriquecidos. Que por cierto, publiqué un episodio completo sobre todo esto de los Rich Snippets y el esquema y qué es cada cosa y cómo puedes utilizarlo y demás. De todas formas recuerda que en última instancia todo esto depende de Google, aunque tú hagas las cosas muy bien, Google tiene la última palabra. Bueno, este plugin se llama WP Recipe Maker, tenéis el enlace en las notas de este episodio que es el 203 y al que podéis llegar yendo a Gonzalonabarro es 203. Perfecto, pues ahora sí, vámonos con el tema central, cómo maquetar tu theme con Elementor Pro una vez y después olvidarte. Bueno y el objetivo de este episodio es algo que se me ocurrió haciendo el curso de Elementor Pro y es ver cómo todas las funcionalidades que te trae Elementor Pro están un poco pensadas para no tener que estar usando el constructor de Elementor todo el rato, que puede ser un rollo. Por ejemplo, habrás visto por ahí que no es muy recomendable que las entradas del blog, las maquetes con un constructor visual, porque pierdes tiempo, porque es un poco un rollo. Imagínate que publicas semanalmente o todos los días, al final el constructor, aunque te ayuda mucho a la parte del diseño, pues tener que estar abriendo el constructor todo el rato no es el flujo de trabajo más cómodo. Pues bien, lo que os voy a explicar a lo largo de este episodio es precisamente cómo no tener que hacer eso con nada, ni con las entradas, ni con las páginas, ni con los contenidos personalizados, ni con los productos de WooCommerce, ni con absolutamente nada. Que por supuesto luego puedes usar Elementor para hacer landing pages, para hacer páginas nuevas, lo que quieras, pero es la idea de crear una estructura, un diseño que tú buscas, que siempre va a ser el mismo una vez lo dejes definido y que vas a poder publicar utilizando normal, el editor clásico de WordPress o el de Gutenberg, tanto para las páginas, para las entradas, para los contenidos y tendrá el formato, la estructura que tú habías elegido con Elementor. Así que vamos a verlo. Y para que podáis llegar a entender todo esto, tengo que empezar por el Team Builder de Elementor Pro. ¿Qué es esto del Team Builder? ¿Qué es esto Del constructor de temas? Bueno, básicamente te permite hacer lo que te estoy ya adelantando, construir una estructura para sustituir o complementar la que traiga tu SIM. Y esta estructura puede afectar a todo, es decir, puedes crear un header a medida, la cabecera de tu web la puedes crear a medida, un footer, el pie de página lo puedes crear también a medida. Pero lo que resulta casi más interesante es que puedes hacer lo propio con la estructura, es decir, el aspecto, el diseño de las páginas, de las entradas, de las páginas de archivo, como la página de blog, las páginas de categoría, las páginas de resultados de búsqueda o cualquier contenido personalizado incluido los productos de WooCommerce. Y como te vengo comentando, una vez lo tengas todo preparado, todo estructurado, todo diseñado, ya puedes dedicarte a publicar contenidos, a crear contenidos, sin tener que diseñar nada más. No tienes que volver a diseñar la entrada o irte a Elementor, duplicar una entrada anterior y ya después maquetarla o hacer los cambios del texto que necesites. No, no. Te vas al menú Entradas de WordPress, le das a Añadir nueva creas tu entrada, publicas y tendrá la misma estructura que tenía cuando tú se la diste al principio. Esto es lo que te permite hacer el Theme Builder de Elementor Pro. Bien, pues vamos a ver la primera parte, si queremos diseñar el header y el footer a medida, pues aquí tienes control total, como con todo. Por ejemplo, para crear el header, que esto es algo que la gente suele querer mucho, suele querer controlar cómo mostrar la parte de arriba de la web, es decir, dónde quieres el logo, si es que quieres un logo, dónde quieres el menú de navegación, si quieres también un widget para poder buscar directamente que aparezca arriba, si quieres los enlaces a redes sociales, si lo quieres centrado, si lo quieres, pues no lo sé, al milímetro, mover donde quieres cada cosa. Esto por supuesto, un constructor visual te lo suele dar pues con las entradas, con las páginas donde puedes controlar el detalle, pero la gracia de Elementor Pro es que te permite hacer lo propio con el header, es decir, utilizas las funcionalidades del constructor de elementor para crear 100 % a medida una parte tan interesante como es el header de tu web. Y en el footer lo mismo, ¿Qué cosas solemos querer? Pues tener también menús en el footer, poder poner algunos en vertical, de acuerdo, que gracias a qué elemento te trae esta opción de menú, pues te permite ponerlo vertical u horizontal, añadir también enlaces a redes sociales y ponerlo todo también al milímetro, como tú quieras, poder controlar, por supuesto, que en móvil se vea de una forma, que en tablet de otra y que en ordenador de otra. En fin, todas estas opciones interesantes de los constructores potentes como pueden ser Elementor, pues traídas a partes estructurales de tu web, como son el header y el foot, y una vez los tienes, pues ya están, ahora van a sustituir a los que había en tu zinc y no tienes por qué hacer nada más, no tienes que seguir añadiendo un header y un footer a cada página que cree, sino que se crean a nivel global y ya los tienes, te olvidas, header y footer listos. Siguiente parte, cuando quieres diseñar la estructura de tus páginas, tus entradas, tus CPTs, es decir, custom Post Types, lo que vienen siendo páginas individuales, pues bien, puedes crear una estructura, o una igual para todos o una distinta. Imagina que quieres una estructura para las páginas, un diseño específico para todas tus páginas, un diseño específico para las entradas del blog, que normalmente van a ser diferentes, un poquito distintas de la de las páginas, aunque no tiene por qué, y otra para un Custom Post Type, un contenido personalizado que puedas tener, por ejemplo en el curso de Elementor Pro, yo de ejemplo os pongo un Custom Post Time de Portfolio, e incluso puedes diseñar páginas especiales, como por ejemplo la página de error 404, que muchas veces es interesante poder diseñarla para evitar que la gente salga así, que siga navegando aunque se encuentre con algún error en una URL de nuestra web. Y aquí lo mismo, diseñas una vez la estructura de las páginas, una vez la de las entradas, una vez la de los Custom Post Type, si es que quieres distintas, sino una vez para todas y ya cada vez que publiques de forma normal con WordPress, tendrán ese diseño que tú le habías dado. Y aquí viene una de las partes también más interesantes, porque todos estos contenidos, sobre todo las entradas y quizás algún Custom Post Type, tendrán su página de archivo, como puede ser una página de blog, una página de categoría donde se muestran archivadas estas entradas o estos contenidos, pues también vas a poder sustituir la página de archivo, es decir, la página de blog, la de categoría, los resultados de búsqueda, por ejemplo, si alguien usa el buscador de tu web, eso muestra varios contenidos, pues es un archivo de contenidos, con lo cual es una página de archivo. Pues con Elementor Pro también puedes diseñar esa estructura y olvidarte pues lo quiero en tres columnas y que abajo del todo haya una llamada a la acción para que la gente se apunte a mi newsletter y que aparezca también el buscador tanto arriba como abajo, porque quiero que mis usuarios tengan la posibilidad de buscar todo el rato lo que quieran para que no se vayan de mi página. Todo esto que muchas veces seguro has pensado y no has podido hacer por limitación, pues Elementor Pro te permite hacerlo. Y bien, vamos a hacer un punto clave, porque si bien un Custom Post Type puede ser por ejemplo los productos de WooCommerce, un tipo de contenido personalizado, me parecía interesante en este punto 4 del esquema que estoy siguiendo, hablar específicamente de qué pasa cuando tienes WooCommerce activo en tu web y usas Elementor Pro. Bueno, pues que tienes la posibilidad de diseñar a medida también la página de la tienda, la página de las categorías, por ejemplo, es decir, todas estas páginas de archivo y las fichas de producto, es decir, las páginas de producto de WooCommerce puedes diseñarla a medida. ¿Esto qué quiere decir? Pues que si tú, ya sea porque tú lo quieres así o porque un cliente te lo pide, pues quieres tener las imágenes y la galería de imágenes del producto a la derecha, el texto descriptivo a la izquierda, o quieres tener las imágenes al principio y debajo el texto, quieres añadir llamadas a la acción, quieres añadir contenido extra, pues explicando que el producto que vendes es el mejor del mundo y que ofreces un descuento si se apuntan en ese momento, poner un contador por ejemplo de tiempo de queda este tiempo para que esto sea más caro, todo eso que a lo mejor en algún momento has visto o en otra web, en otra tienda online que tú querías implementar y no podías porque tenías esa falta de control sobre la página de producto de WooCommerce, pues ahora lo tienes. ¿Por qué? Porque puedes usar el constructor de Elementor Pro para diseñarla a medida y trae los widgets específicos para que se muestre contenido de WooCommerce, como digo, la descripción que tú pones cuando escribes el contenido, el precio del producto. Por supuesto, todo este tipo de cosas que nosotros ponemos a Los productos de WooCommerce podemos cogerlas desde el constructor visual de Elementor y ponerlas en la página donde queramos, pero además podemos usar todo el resto de widgets que trae Elementor y diseñar, como digo, esa página a medida una vez, después, cada vez que publiques un producto tendrá ese formato. Y quería dejar para el final la guinda, algunos extras que trae Elementor Pro y que facilitan y amplían todo esto que te he comentado hasta ahora. La primera de ellas es todo esto que hemos dicho se puede hacer de forma condicional, es decir, yo puedo, empezando por lo primero de lo que te he hablado que son los headers y los footer, puedo mostrar headers y footers diferentes para cada parte de la web en la que esté mi usuario o para cada estado, si hay uno conectado, no conectado, si están en la página de blog, si están en la página de una entrada, si están en un Custom Post Type, todo eso puedo hacerlo a nivel condicional y tener tantos headers, tantos footers como quieras o mostrar un footer a medida y un header a medida en un momento determinado y en el resto de momentos mostrar el que trae mi theme, pero lo mismo con las páginas, entradas y Custom Post Types. Imagínate que, pues por ejemplo, para una determinada categoría de mis entradas quiero mostrar un diseño especial para esas entradas. Pues no lo sé, porque en algunas hablo de recetas y ahí pues necesito un diseño especial, en otras hablo de estilo de vida y ahí no, ahí no necesito tanto diseño y me vale contexto y alguna imagen. Así sin mucha parafernalia, pues puedo hacerlo. Puedo definir previamente estructuras para cada categoría, por ejemplo, o etiqueta u otra condición. Las condicionales son muy muy poderosas en Elementor y de esa forma pues como digo, lo dejas todo preparado de nuevo una vez. Lo mismo por supuesto con las páginas de archivo, A lo mejor la página de blog quieres que tenga un diseño específico, pero las páginas de categoría o las de resultados de búsqueda quieres que tengan otro. Y lo mismo con los productos y la tienda dentro de WooCommerce, que tienes una tienda de productos en la que vendes por un lado ropa deportiva, por otro lado ropa más de vestir y por otro lado, no lo sé, material de oficina, pues puedes tener diseños diferentes para cada tipo de producto, para cada tipo de página de archivo, es decir, para cada categoría y diseñarlo de primeras una sola vez, como digo. ¿Vale? Esa es la primera de esta de las guindas que te digo. Después hay dos opciones más muy interesantes que también te facilitan todo esto y que he comentado a lo mejor de pasada. Una es el contenido dinámico, es decir, el hecho de yo poder coger cosas que ya existen, como por ejemplo el título de mi página web. ¿Yo podría poner, podría poner Gonzalo Navarro, es en una página que yo creo a medida, pero qué pasa si yo cambio el título de mi web? No se recogería ahí, tendría que ir a todas esas páginas donde lo he puesto y cambiarlo. Es un ejemplo un poco tonto, pero para que lo veas. ¿Te permite coger cosas existentes dentro de WordPress a nivel general, prácticamente cualquier cosa, títulos, descripciones, fechas, categorías, etiquetas, imágenes destacadas, datos de usuarios, de acuerdo? Todo eso que se podría acceder por código si se hace un desarrollo, pues Elementor lo incorpora en su versión Pro y te permite utilizarlo para que lo aproveches en la estructura de tus contenidos. Y otra parte es los campos personalizados, que no sé si estás acostumbrado, pero por ejemplo si has hecho el curso de Advanced Custom Fields, verás que luego cuando nosotros creamos esos campos personalizados por código, tenemos que meterlos en nuestro ZIM, en nuestras plantillas, digamos a nivel de código, para que se muestren en la parte frontal de la web. Pues bien, Elementor te permite cogerlos una vez los tienes creados en la parte de atrás y esto te permite, por ejemplo, crear contenidos 100 % a medida, muy típico cuando quieres hacer una web de películas, una web de recetas, en las que hay que poner campos muy concretos que no vienen cuando estás editando una entrada, un contenido con WordPress, como son el autor, los ingredientes, el tiempo de cocción, en el caso de las recetas o en el caso de las películas, pues director, actores, fotos de los actores, año de salida de la película, no sé qué, no sé cuánto, premios. Todo eso se crean campos personalizados para poder publicarlo, pues Elementor te permiten mostrarlos en la parte frontal, aprovechando las funcionalidades de diseño que trae este constructor visual. Bueno, espero que te haya quedado clara la idea, que no es otra que entender que Elementor Pro te da la posibilidad de crear la estructura de tu web a medida desde cero y con un control enorme, y que no por ello después estás obligado a seguir utilizando Elementor para cada contenido que vayas a generar, que eso desde el punto de vista del workflow, el flujo de trabajo, pues se hace muy tedioso, sino que vas a poder publicar de forma normal con las opciones que ya trae WordPress y vas a tener el aspecto que querías. Genial, pues todo esto y mucho más os lo enseño en el nuevo curso de Elementor Pro, al que podéis ir en gonzalonabarro es cursos. Ahí os aparecerá el primero, si es que estáis escuchando este episodio, pues en el mismo mes en el que lo he publicado, y si no, pues tenéis un buscador, buscáis Elementor Pro y ahí tenéis el curso. No me quiero ir sin antes recordaros que cuando os suscribís no sólo tenéis acceso a este curso, al de Elementor Pro, sino a más de 43 cursos ya publicados, a más de 150 vídeos de la zona, código a soporte conmigo personalizado. En definitiva, un lugar donde aprendes a crear tanto webs para ti, para tus proyectos, como si quieres dedicarte a hacer proyectos para otros. Recuerda todo ello en Gonzalo Navarro es cursos. Nada más por este episodio, nos seguimos escuchando. Adiós.