 Bueno, a ver, entonces yo voy a empezar totalmente desde la base, aunque aquellos que ya hayáis usado Elementor y sepáis un montón de cosas, a lo mejor esta primera parte es un poco más tosca porque voy a repetir cosas que son muy básicas y para aprenderlo totalmente es de cero, como para el tipo de ejemplo que vienes de Bibi y que no sabes absolutamente nada, como ya algo alrededor de más o menos por la mitad o un poquito más, ya vamos a ir aprendiendo cosas mucho más avanzadas, de lo que he comentado antes de ahorrarnos tiempo, para no tener que perder tiempo realizando los mismos pasos, etcétera, así que nada. Esto va a ser lo que vamos a ver en este taller, vamos a empezar con la instalación del tema Hello, que básicamente es el tema que ha creado Elementor para ellos y yo lo uso muchísimo porque es un tema muy ligero, es gratuito y es muy fácil de utilizarlo, no mete código adicional a la página, entonces todo lo que son funciones y cosas que normalmente otros temas tienen pues se optimizan muchísimo al no implementar esto. Luego veremos totalmente desde cero la interfaz del editor, tanto el contenido, cómo se muestra el contenido de la página, como todo el panel de Elementor, cómo funciona y todas las herramientas que tiene, luego seguiremos con el diseño de cómo funciona el sistema de diseño de Elementor, porque Elementor es una herramienta muy potente para maquetar, pero siempre hay como para todo, hay muchas formas de hacer las cosas, entonces yo en base a mi experiencia también voy a intentar explicar todo más o menos de la manera más optimizada y de la manera que sea como la mejor entre comillas de todas las maneras posibles que hay de maquetar. Luego vamos a seguir con el tema del diseño responsive, para que no lo sepa responsive simplemente significa adaptar la web o cosas que están adaptadas a los diferentes y positivos, como tablet, móvil, pantalones, etcétera para saber no solo hacer una web en Elementor sino tenerla adaptada que este editor también nos permite, en su editor tiene la parte de responsive y podemos conseguir pues que en esta web se vea perfectamente bien en todos los dispositivos. Luego veremos nuevas funcionalidades, aquí una cosa súper importante es que vamos a hablar de una novedad que yo creo que va a cambiar mucho el mundo de Elementor porque ese tema de los containers que lo vamos a ver más adelante que básicamente lo que han hecho es traernos una nueva forma de maquetar que nos va a dar muchísima posibilidad sobre todo con el tema de los diseños porque ahora Elementor funciona de una manera que ya veremos y con esta mejora lo que han intentado es que se pueda hacer diseños complejos de una manera fácil y de una manera mucho más optimizada, entonces eso también lo veremos. Luego seguiremos viendo, bueno haremos un resumen de un montón de tips y buenas prácticas que es súper importante porque al final cuando tú realizas un trabajo o lo que sea, lo más importante es que lo realices de la manera correcta intentando ahorrarte todo el tiempo posible, intentando no repetir los mismos pasos o no hacer como cometer pequeños errores que se pueden modificar y más para los que estéis aprendiendo desde cero os viene perfecto porque como yo os dije esto lo sé de muchas webs que he ido haciendo que las primeras pues me salían peor, luego me dio que iba mejorando ya iba aprendiendo cómo podía optimizar mi tiempo, cómo el consultor te permite y te deja hacer un montón de cosas que te ahorran el tiempo para tardar menos y no tener que duplicar cosas todo el rato y por último vamos a ver algunas cosas que trae adicionales o podremos llamarlo como una diferencia entre cuál es, qué diferencia hay entre Elementor Core que es la versión gratuita y la versión Pro, vale es más o menos ver qué trae el Pro y qué se puede conseguir con eso porque realmente a mí lo que me interesa es que en este taller sepáis utilizar Elementor con profundidad porque al final si lo sabéis usar luego simplemente con el Pro es pues tras las funcionalidades que trae también las puedes utilizar pero lo primordial es que es el país Elementor, entonces yo en todo este taller voy a estar utilizando solamente la versión gratuita vale pero para que veáis que tiene muchísimo potencial también aunque sea la versión gratuita y que luego ya estéis mucho más ágiles a la hora de hacer cosas con el Pro, entonces Elementor para quien no le sepa es un país builder que básicamente lo que es es una herramienta que ayuda a maquetar tu web, es decir a maquetar páginas y a crearlas y a diseñarlas, vale no es un tema es un plugin que está en el depositorio de Warps y es básicamente estar en el top 3 de los plugins que más se utilizan para maquetar webs con Warps aquí tenéis un ejemplo para que veáis más o menos qué es lo que hace Elementor, Elementor es una herramienta que nos facilita que no tengamos que tocar nada de código vale como veis a la derecha tenemos como se vería una web inspeccionándola, vale o sea el HTML, el CSS y el JavaScript que son lenguajes de código y de programación que sirven para maquetar webs y que hace muchísimo tiempo se han hecho así, entonces con Elementor lo que ellos quieren conseguir es que tú sin ser programador, sin saber escribir ni una línea de código tú puedas hacer tu web igualmente porque es todo visual y de hecho Elementor utiliza la técnica de drag and drop que en inglés significa o sea que en español traducción significa arrastrar y soltar, entonces es como que tienes un panel de widgets y tú los vas arrastrando y en ningún momento estás viendo pues nada de código y bueno a ver esperad, yo me he instalado una web en local vale que para quien no lo sepa trabajar en local simplemente es que en vez de hacer que mi web esté alojada en un hostil en un servidor mi ordenador ahora mismo hace de servidor, vale para que quien lo quiera también usar, yo en este caso estoy utilizando la herramienta de web local que sirve de muchísima ayuda para incluso aprender montarte tu web en producción o sea en staging y hacer pruebas, probar plugins y no hacer todo a nivel online sino que es como para ti pues para hacer un curso para seguir aprendizajes vale para que lo tengáis en cuenta entonces aquí lo que veis es, yo lo que me he hecho es una instalación limpia de golpes así simple, o sea cuando tú te instalas las golpes lo primero que te sale es esto porque lo que quiero hacer es empezar desde el momento cero de no tener ni siquiera el tema ni siquiera el plugin instalado para saber qué pasos vamos a hacer vale entonces lo primero que vamos a hacer es irnos a la parte del escritorio de golpes obviamente y nos vamos a ir a la parte de apariencia y temas y aquí podemos buscar el tema de gelo, añadir uno nuevo perdón me salto de ese paso, vale aquí lo tenemos el tema de gelo lo podéis buscar o bueno aquí como sale porque es uno de los temas más instalados con golpes pues simplemente es darle a instalar y una vez es instalado lo activamos vale aquí ya vemos que está nuestro tema activo y el resto en el caso de que no lo fuesemos a utilizar incluso lo podemos borrar vale para que no ocupe ningún tipo de espacio de consumo para irnos a instalar el plugin vamos a la pestaña de plugins y le damos a añadir nuevo y en la pestaña de populares lo vamos a encontrar en la tercera posición que como os he dicho antes tiene un montón de instalaciones por eso sale aquí de los primeros y lo activamos también vale aquí cuando ya lo tengamos instalado lo que primero que salta es el onboarding que es muy típico en cualquiera de las herramientas nada más la instalamos nosotros vamos a seguirlo porque una de las cosas buenas que también trae Elementor es que cuando aunque tengamos la versión gratuita y no la pro Elementor tiene también una parte de plantillas y kits que podemos utilizar y que nos lo ofrecen de manera totalmente gratuita simplemente haciéndonos una cuenta en Elementor.com vale entonces en ese caso nos tendríamos que ir a Elementor a hacernos una cuenta y ya puedes vincularla aquí en mi caso como ya tengo la cuenta creada pues simplemente la conecto saltamos este paso saltamos este también y aquí ya nos va a abrir el editor en mi caso yo lo que voy a hacer para explicar más o menos todo lo que trae y todas las herramientas que tiene Elementor vamos a hacer como una one page vale no vamos a hacer una web con muchas páginas y no vamos a hacer una sola página y que todos lo hacen pues de anclano y nos lleven a diferentes secciones y vamos a aprender a maqueta desde cero vamos a saber como podemos maqueta utilizando los bloques utilizando plantillas pero vamos a ir parte de la base que es maqueta sin nada si tienen ningún tipo de plantilla ni nada instalado vale entonces lo bueno partiendo desde que hemos instalado el tema de Hello si nos vamos al menú este que he dado aquí de hamburguesa tenemos aquí los ajustes del sitio vale que esto nos sirve muchísimo para empezar a maqueta sobre todo la cabecera y el pie de página en la cabecera y el pie de página son cosas que normalmente tu instalando el Elementor si no es con gelo y es con otro tema no tienes a no ser que ese tema te traiga esas dos opciones por eso de ahí también que os digo que podemos tener con gelo y el Elementor cabecera y pie de página que son como dos cosas que normalmente suele traer que no traen por defecto pues también gratuitamente para maquetarlo vale entonces vamos a empezar a maqueta la cabecera aquí veis que os trae por ejemplo el tema del logotipo del sitio la descripción corta el menú diseño y demás y aquí tenemos el logotipo del sitio bueno lo mismo y el menú que en este caso pues no lo tenemos creado oye espera me salta un paso vale no me salta un paso vamos a salir un momento al sitio de WordPress porque claro hay que crear las páginas y el menú para que nos salga la vista previa porque si no no vamos a poner nada entonces vamos a empezar a crear el menú le ponemos menú principal por ejemplo y vamos a hacer unos enlaces personalizados pues por ejemplo sobre mí vale para que no lo sepa los enlaces que son de tipo ancla no podemos utilizar pues ni mayúsculas ni como es ni signos extraños vale porque si no este enlace no va a funcionar simplemente tenemos que usar este hashtag o la amarilla todo escribirlo en minúsculas de como queramos que se llame la página y pues ponemos aquí debajo el texto de la página que en este caso sería sobre mí lo añadimos al menú vamos a crear unas cuantas más por ejemplo servicios vamos a crear una parte de testimonios y vamos a hacer una última parte de contacto vale le damos a guardar el menú vale y ahora que ya lo tenemos guardado ya ahora si vamos a tener algo que vamos a poder mostrar el elemento entonces vamos a volvernos a la página y volvemos a la página que habíamos quedado que en este caso es la home y le damos a editar y luego le damos a editar con el elemento vale aquí ya hemos vuelto a donde estábamos antes y en este armadillo de la hamburguesa volvemos otra vez a los ajustes del sitio vamos a la identidad del sitio y aquí vamos a empezar a maquetar lo que es la identidad del sitio para que se muestre la cabecera tanto el logo como por ejemplo también el favicon que es básicamente lo que sale cuando tú haces una a ver su otra pestaña pues el pequeño icono ese que aparece cuando haces cuando haves una pestaña de tesagüe entonces yo tengo aquí un logotipo un segundito no se porque no me sale vale dármelo un segundito vale pensaba que había metido todas las imágenes pero veo que no así que voy a meterlas un momentito dármelo un segundo vale pues dármelo un segundo es que no se porque no está dejando subir los medios si vale voy a intentar meterlos desde elemento a ver si deja ya es que no sé si vale ahora sí vale voy a arrastrar todos simplemente para ya tener las cosas que voy a utilizar y vamos a volver a donde estábamos que eran ajustes del sitio y la identidad del sitio vale bueno aquí no lo había dicho antes pero tenemos bueno la opción de poner el nombre del sitio vale que es lo que aparece aquí la descripción y en este caso voy a meter el logo que había elegido antes y el favicon que en mi caso pues está ahorita aquí esto es simplemente lo que va a aparecer en la cabecera que es lo primero que vamos a empezar a maquitar y ahora vamos a intentar elegir todo el tema de los ajustes de lo que queremos que se mueste vale en este caso queremos que se mueste el logotipo del sitio la descripción corta no queremos que se mueste y el menú si entonces eso lo dejamos activado diseño lo dejamos normal en este caso hay dos opciones más que es invertido y centrado que simplemente lo que haces pues te pone el contenido según las estas opciones que salen aquí el ancho podemos tener en la cabecera de nuestra web en cajas o en ancho completo vale y yo la voy a dejar en caja lo único que recuerdo es que para hacer esta configuración hay que refrescar la página porque como acabamos de meter todas las imágenes de la entidad del sitio no las está seleccionando porque no está ahí refrescada la página entonces vamos a refrescarla y ahora sí vale ahí sale un pequeñito no se ve mucho pero bueno ahí ya se ha metido el logo vale y aquí podemos modificar pues la anchura de este logo que en este caso pues para que no esté tan pequeño pues voy a poner un poquito más grande a 200 píxeles luego tenemos el selector del menú aquí simplemente seleccionamos el menú que hemos creado vale el menú principal el diseño del menú lo dejamos en unición tal punto de ruptura estable de esta bien y aquí ya podemos modificar el tema del color que es una de las cosas que nos deja modificar y también las tiporacías antes que nada vamos a ver cómo podemos modificar todas las fuentes globales y todos los colores globales del sitio para que nos coja pues todo a la vez y si hacemos un cambio de color o de tipografía en cualquier parte de la web pues se cambie tanto donde la hemos cambiado en globalmente y se cambie pues en todas las partes donde sale esa tipografía o ese color en el agua entonces yo tengo aquí tengo que salir aquí un momentito que tenía aquí guardado en esta extensión de well los colores entonces voy a copiar estos colores que voy a utilizar para maquitar esta web y los voy a ir incrustando entonces principal secundario y texto básicamente son los colores que va a agarrar nuestra web como texto yo en este caso los voy a dejar los textos del mismo color porque no quiero que los textos de mi web sean de diferente color en la mayoría del diseño van a ser de este color entonces aquí tenéis que ajustar ya vosotros pues el color que queráis que se aplique el color de énfasis que es el último que podemos configurar básicamente es el color que se agarra en todas las cosas como por ejemplo botones o cosas a las que les suele hacer clic vale para que tengamos en cuenta que ese color se va a aplicar mayoritariamente a todas las cosas luego además podemos añadir colores personalizados que aquí pues nos deja añadir infinitos colores yo no recomiendo tampoco que en vuestros diseños agregáis demasiadas colores porque al final pues si no se va a focalizar la gente o sea cuando tenga que hacer el usuario clic en alguna zona y tal si tenemos muchos colores pues al final también es un poco lioso para el usuario entonces vamos a hacer las fuentes globales yo en mi caso bueno por defecto viene la fuente Roboto nosotros vamos a utilizar la poppins aquí pasa lo mismo vale tenemos una fuente principal secundaria de texto y de énfasis de cómo la aplica Elementor es la principal pues a lo que la apliquemos nosotros como textos principales los secundarios pueden ser pues subtítulos etcétera y el de texto pues serían todos los párrafos y de énfasis sería todos los textos que tengan por ejemplo los botones vale entonces vamos a poner por ejemplo el ajuste del tamaño de la tipografía principal a 36 por ejemplo del título secundario igual ponemos poppins vamos a ponerlo a 24 y el texto vamos a ponerlo a 16 en poppins y por último el de los enlaces que vamos a dejarlo también a 16 aquí vais a ver que tenemos aparte de los colores y las fuentes globales varias cosas que se llaman que es del que pertenece al estilo de tema que son las tipografías que aquí vais a encontrar pues la tipografía principal del cuerpo y también todos los diferentes etiquetas html como son h1 h2 h3 vale etcétera y aquí podemos ajustar directamente luego vamos a ver como podemos bueno cuál es la diferencia entre hacer los ajustes aquí y hacer los ajustes en fuentes globales y cómo podemos aplicar cada una para cada cosa entonces el resto de cosas de botones, imágenes y cosas que son globales para que todo este esté funcionando tenemos que bueno voy a actualizar esto voy a cambiar ya esto de la ahí y para esto nos vamos a volver a los ajustes que los ajustes vamos a elemento ajustes aquí veis que tenemos en general los tipos de contenido que queremos que sean editables con elemento en este caso pues las entradas las páginas y las páginas de destino o holandes vamos a desactivar esto porque como nosotros estamos utilizando el tema de hello pues no queremos que cojan los estilos por defecto ni la fuente por defecto sino que cojan lo que estamos haciendo el tema que hemos hecho antes vamos a volver a editar la página y vamos a continuar con nuestro gd como habíamos visto aquí realmente sólo quedaría darle estilo a lo que es el menú del gd entonces pues bueno aquí ya habiendo metido una vez los colores y las tipografías ya podemos empezar a cambiar los colores aquí veis que haciendo click podemos seleccionar los colores que hemos ajustado antes le podemos poner que tenga un color básico y que cuando pase por encima pues tenga otro color en este caso este y de tipografía pues le ponemos la de texto para que este todo no se abue con las mismas tipografías estos son todos los ajustes que deja hacer sobre las cabeceras no es algo muy avanzado pero bueno teniendo en cuenta que el tema de hello también es gratuito y que estamos trabajando con la versión gratuita de elemento pues bueno ya poder hacer una cabecera está genial para no tener que instalar ningún plugin de terceros o adicionales para poder tener esa función para nuestro pide página simplemente podéis quedar las típicas páginas legales también vale pero para ahorrar un poco de tiempo como hay muchas cosas que explicar pues no lo voy a hacer pero voy a dejar solamente la descripción corta perdón el logotipo del sitio y pues lo el típico copyright de los derechos que se suele también dejar en los videos de página de diseño lo mismo aquí salen las mismas ajustes que salían en el gd sobre si el ancho se encaja o en ancho completo aquí podemos editar también la ancho del logotipo vamos a dejarlo igual y aquí el copyright pues bueno podríamos editarlo no y poner con el símbolo de copyright etcétera y aquí vamos a hacer lo mismo vamos a cambiar el color del texto al que hemos aplicado y la tipografía que vamos a utilizar vale me he saltado una cosa que estaba mirando ahora que es el tema de darle un color distinto al alzute que eso está aquí abajo en el pide página y aquí podemos darle que en este caso yo lo voy a poner de otro color voy a dejarlo con el oscuro y vamos a dejar al revés el color del texto para que se lea y ahora que como antes ya habíamos desclicado el tema de que cogiesen las fuentes y los colores por defecto de elementos ahora si nos vamos al estilo del tema y editamos tipografías si nosotros realizamos aquí ajustes en los h1 h2 etcétera vamos a poder ahora veremos como asignar a los diferentes widgets que van a aparecer estos ajustes lo único que voy a cambiar de aquí es el color del cuerpo para que cualquier texto que se meta sea de este color y la tipografía igual que la de base de todo lo que tenga pues sea la de la que le hemos dado los parados una vez tenemos lo que es la identidad del sitio para poder haber hecho en gd y el fute vamos a ver aquí que hay otros los ajustes que son muy importantes que es el tema del fondo yo en mi caso voy a dejar la web de este color pero si por ejemplo vosotros quiseis tener la web de un color específico un color clarito o tipo así o un base o lo que sea pues aquí es donde podríais editar ese estilo de todas las páginas para que cuando queréis una página no hagáis todas las secciones amarillas por favor en este caso sino que toda vuestra web directamente es amarilla y no tenéis que ir cambiando todo en cada una de las secciones luego otra cosa muy importante que tenemos es el tema de la disposición aquí por defecto el ancho de todo el contenido que es esta caja concretamente que tenemos aquí o sea lo que es el ancho de lo que es nuestra página en completo se ajusta desde aquí, yo os recomiendo que utilicéis siempre un ancho un poco mayor porque el que viene por defecto elemento es de 1400-1140 que es un poco pequeñito normalmente ahora ya las páginas están haciendo con bastante resolución y con más de mayor tamaño así que mi recomendación es siempre que utilicéis 1200-180 o 1400-140 por ejemplo que sería como por defecto el maco de apel la caja de luz simplemente que luego lo veremos es la interfaz que sale cuando tú haces clic en una imagen el típico lightbox que te sale para pasar a la siguiente imagen o verla más cerca ver la leyenda de la imagen simplemente lo han traducido así como caja de luz pero simplemente es eso y nada el resto de cosas de transición de páginas si te has personalizado pertenece a la versión pro y como nosotros vamos a hablar de toda la parte gratuita pues esa parte la vamos a dejar ya tenemos más o menos todos los ajustes del sitio para empezar a maquetar así que voy a pasar ya a explicar un poco cómo es el tema de y cómo funciona el sistema de diseño en elemento como habéis visto tenemos pues la parte del panel que es toda esta parte oscura que está así porque tengo elemento de Darmog para que no lo sepa se puede utilizar tanto el Lightmove como Darmog lo sacaron ya hace tiempo pero bueno está así porque cuando ya pasas pues muchas horas es mejor tenerlo siempre en modo oscuro y yo lo recomiendo y luego aquí en esta parte que veis aquí pues tenemos toda la parte que se da de contenido aquí es donde vamos a poder arrastrar todas las cosas que nos deja elemento que son todos estos widgets que básicamente un widget es para que os hagáis una idea Elementor pues trabaja con widgets con unas excepciones se insetan unos dentro de otro y para poneros un ejemplo es como hablar de una casa es como tener una casa las paredes y un cuadro el cuadro sería los widgets que obviamente sin una pared no puede haber un cuadro y sin una casa no hay paredes entonces para que entendáis un poco como va son las secciones son como la caja padre por así decirlo luego están las columnas que son como contenedores internos que tiene dentro para hacer por ejemplo un estilo de tres de cuatro columnas de dos y poner información aquí y información otro lado y luego tenemos pues todos estos widgets que son pues de encabezado de imagen de botones etcétera que nos sirven para meterlos dentro de esas columnas vale entonces nosotros vamos a empezar maquitando una sección muy muy sencilla que va a ser nuestro hero para quien no lo sepa el hero ves nada más tú te metes en una web lo primero que ves vale como el primer pantalla que ves a eso se le llama giro y es súper importante pues tener un buen diseño sobre eso porque es lo primero que ve la gente cuando entran tu web vale entonces vamos a maquitar y maquitando un poco a poco las secciones para ir entendiendo como podemos maquitar con elementos de ese cero luego más adelante vamos a ver como podemos maquitar utilizando bloques que también es con la versión gratuita y como incluso como podemos maquitar utilizando plantillas y kits de elementos vale entonces lo primero que vemos aquí en el contenido es un más de una carpeta vale con el más simplemente podemos elegir la estructura con la que queremos trabajar pues simple con una columna con dos columnas tres cuatro vale o columnas incluso a diferente disposición con diferente digamos que contienen el ancho distinto y en mi caso voy a dejar la primera vale ancho completo para que veamos un poco cómo funciona el editor esta es la biblioteca lo vamos a ver más adelante cuando ya explique el tema de los bloques y las plantillas entonces lo primero que vemos nada más empezar y nada más hemos arrastrado bueno hemos abierto una sección elemento es estas tres prestañas vale disposición estilo y avanzado para que os hagáis una idea no es simple no es siempre así pero en disposición solemos tener como todas las cosas que tienen que ver con el la movilidad de ese objeto o el el ancho del contenido como cosas que tienen que ver con el espacio de ese de cuánto cupa si está arriba o abajo vale cosas así luego en la parte de estilo tenemos normalmente toda la parte de colores de qué tipo hacía el aplicas tiene bordes si no tiene bordes o si tiene alguna decoración como las formas de divisores y cosas así pues para que os hagáis una idea más o menos de cuáles son las diferencias vale porque mucha gente siempre también se equivoca en intentar ajustar cosas que están en una pestaña en la otra vale pero eso a medida que también vais utilizando elementos vais a ver que se resume un poco así aunque como he dicho antes no para todos los huelles de lo mismo pero para hacer eso resumen pues esa es la diferencia entre disposición estilo y en avanzado normalmente siempre suele haber cosas un poco más avanzadas vale como el tema de pues dar magia en dar relleno o Padding que también se le llama Padding muchísimo y ciertos ajustes que son pues como bien dice la pestaña un poco más avanzados como puede ser darle z indes darle y de ccs, clases ccs luego tenemos toda la parte que son efectos de movimiento, atalidad y temas que tienen que ver con el response y básicamente es todo eso lo que podemos encontrar en avanzado vale para que sepamos que cuando vamos a restar un widget o una sección pues son esas pestañas y más o menos para que tengáis diferencias lo que hace cada uno entonces lo primero que vamos a hacer es vamos a ver por ejemplo cómo le podemos dar a esta sección un font vale para eso bueno voy a explicar primero que son estas tres cosas que salen aquí aquí simplemente este más es para añadir otra sección como veis nos vuelve a salir el mismo panel de abajo es simplemente para añadir una sección aquí tenemos si hacemos clic derecho varios ajustes podemos editar la sección que lo único que hace es nos abre el panel de elemento de aquí de la sección podemos duplicarla copiarla pegarla y algunas cosas más borrarla también vale o también podemos borrarla haciendo clic en la X vale es bastante intuitivo esto simplemente luego vamos a ver también algunos comandos incluso con los que se puede hacer estos ajustes para incluso ahorrarnos tiempo entonces vamos a empezar por ejemplo pues dándole el estilo vamos a fondo y tipo de fondo vamos a meter una imagen de fondo para esta sección en mi caso insertar esta aquí veis que se ve todo un poco extraño y repetido y demás aquí en la misma ajuste del estilo vamos a tener siempre estos electorios de aquí que los que nos va a ayudar es a decirle al elemento como queremos que posicione esa imagen vale en este caso pues veis que salen varios ajustes incluso esto también lo podéis hacer probando y viendo que hace cada uno en mi caso yo la posición la quiero pues que esté en el centro esto de adjunto simplemente si quiero que la imagen se mueva cuando yo haga scroll o que se quede ahí que repetir quiero que no se repita ahí veis que ya se me ha quitado todo eso que salía ahí que salía la imagen repetida varias veces y el tamaño pues quiero que abarque toda la sección vale por eso le damos opción de abarcar que también tiene la opción de contener que simplemente es que sale la imagen o personalizado que le puedes dar todo un ancho concreto entonces yo voy a dejarla en abarcar porque como estaba ser la sección de mi giro pues la vamos a dejar así ancho completo entonces otro de los ajustes principales que vais a tener que hacer cuando añadís una sección es el tema del alto vale porque aquí vemos que la imagen pues se ve muy achatada y que no se está viendo nada entonces como hemos dicho antes todos estos tipos de ajustes de cuánto espacio ocupa cada sección y demás están en aquí en la pestaña de disposición si miramos un poco aquí veis que está el tema del alto de ajustar el alto entonces vamos a darle una altura mínima que puede ser tanto de píxeles como viewport height que es la altura de la pantalla o el ancho que sería el huevo de doble vale yo en mi caso quiero que se ajuste a la pantalla por eso también podemos darle el ajuste de la pantalla pero vais a ver que queda un poco abajo porque está este título de aquí no le he dicho antes pero bueno lo voy a decir ahora cuando nosotros tengamos que editar una página todos estos ajustes este panel que ahora mismo se nos está abriendo de la sección que estamos editando no son cosas de la página entonces una cosa muy importante es saber dónde están los ajustes que tiene la página dentro de Elementor para eso tenemos aquí abajo esta engranaja de aquí abajo que se hacemos click ahí aquí sí vamos a ver algunos ajustes generales que son de la página vale como lo veis aquí arriba tenemos por ejemplo esta opción de esconder el título que básicamente lo que hace Elementor es por defecto te coge la H1 de esa página y te lo muestra como estamos viendo aquí entonces como mi diseño yo quiero poner mi propio H1 y mis H2 y demás y no quiero que Elementor haga de nada por defecto pues donde podemos esconder este título que sale aquí que es de los primeros ajustes que tenéis que hacer también cuando hagáis una página pues simplemente le damos aquí y ya se nos va el título entonces ya podemos seguir maquillando sin que eso pues nos esté esturbando entre otros entonces vamos a... dime ¿Tú estás diseñando pensando que el dispositivo principal es escrito de un título? Sí ¿Lo haces y lo ajustes para darle a un mobile? Sí ¿Puedes supuestarte las redes que decimos empezar con un mobile y lo ajustas para analizar esto? Sí el tema es que... ¿Qué nos enseña primero cómo se hace de la versión escritorio a tablet y luego a mobile? Porque bueno ahora está como muy de moda hacer el mobile first que se dice que es como diseño se ha adaptado totalmente primero a mobile y luego si en el escritorio a lo mejor es también optimizado web o no es tan bueno el diseño está como empezando para el mobile que está muy bien al final porque no sé cuánto es el 65% de la gente que navega navega desde el mobile pero sí luego lo veremos quiero explicar primero el tema de cómo funcionan las secciones las por unas y los willes y luego cuando ya tengamos la sección maquillada vamos a ver cómo la hacemos responsive para luego además reutilizarla y como he dicho antes ahí vamos a ver también el tema de la productividad de no tener que repetir secciones una y otra vez sino con la misma que has hecho que encima las ha adaptado a tablet y las ha adaptado a mobile la vamos a poder reutilizar para hacer el resto de la web súper rápido además vale entonces aquí simplemente bueno me he dado cuenta que no me había dado cuenta antes que no he metido el este color como cremita que lo tengo que meter dame un segundito esto estoy simplemente utilizando la extensión está de will para copiar el color porque la tenía que añadir a los a los colores globales vale voy a volver un momentito a los ajustes de los colores y lo voy a añadir porque para las secciones que sean oscuras pues si el texto morado y el fondo también es morado pues no se va a leer nada vale y ahora sí bueno como veis tenemos nuestra primera sección y la manera de diferenciar las secciones las columnas y los widgets puede que no quede muy destacado o sea muy diferenciado pero bueno más o menos para que os hagáis una idea las secciones siempre van con este como con esta borde azul vale y estas líneas discontinuas que vemos así y esta cajetita gris son las columnas vale si yo por ejemplo aunque hayamos metido una sección de aquí abajo con una columna si yo hago clic derecho al igual que puedes hacer clic derecho en las secciones y hacer pues duplicarlas y hacer varias funcionalidades en la columna pasas completamente lo mismo puedes duplicarla copiarla apagarla etc. si la duplicamos aquí veis que tampoco es que destaque muchísimo pero bueno veis que está en gris que ahí se ve claramente que están dos columnas a disposición de 50% cada una entonces bueno yo voy a maqueta decirlo solo con una pero bueno para que trindamos también como va el tema de las columnas y como diferenciar entre una columna y una sección que eso también es una de las dudas que suele pasar al principio entonces ahora vamos con los widgets como he comentado al principio el elemento que utiliza la técnica está de arrastrar y soltar para que podamos maquetar todo nuestro sitio entonces simplemente arrastrando el widget incluso ya nos va a poder meter una sección lo voy a hacer aquí el ejemplo veis que no tengo nada pero si arrastro un widget ya el panel nos ha metido una columna y también nos ha metido la sección vale porque como he dicho antes también como el ejemplo que he dado de la casa no puede haber cuadros sin paredes y sin paredes no es la casa entonces todo se necesita para que el widget me tiene entonces en el widget que cambia a diferencia de las secciones y las columnas las secciones y las columnas como hemos visto antes tienen esta pestaña de disposición vale cuando hacemos click en el widget el widget en sí no tiene sentido que tenga ajustes de disposición porque es a lo mejor una imagen o un texto entonces lo que va a tener es el contenido que en este caso pues si es nuestro título pues que nos deja meter nuestro título en el caso por ejemplo de una imagen vale pues nos deja meter el contenido de la imagen o sea la imagen que queremos meter es la única diferencia que hay así principal entre las secciones las columnas y los widgets entonces que podemos hacer en contenido la parte de contenido de los widgets es un poco similar al estilo porque aquí vamos a encontrar cosas en algunos como por ejemplo la alineación que al final también esto depende como lo mires para algunos widgets son así para otros no yo digo que tampoco hay como que encajarlo encajonarlo en una de las secciones pero para que os habéis una idea en estilo siempre va a estar el tema del color, las tipografías y todas las configuraciones pues que te van a ver con el diseño de cebolla a pesar de que aquí tengamos por ejemplo el tema de la alineación que yo en mi caso lo voy a poner en el centro vale pero para que veáis que puede ser a veces confuso pero lo principal lo vamos a tener siempre en la pestaña de estilo o sea que si vais a querer buscar cambiar un color, cambiar la tipografía o cosas así el tamaño y todo eso pues va a estar en estilo aquí como no se ve nada pues vamos a ponerlo en blanco que se le da mejor y vamos a darle el test de principal que bueno se ha quedado un poquito pequeño pero bueno en este caso podéis vais a ver que para todas las tipografías que se están aplicando que no lo he dicho antes, tenemos este widget o sea perdón este icono que es como un Google o no, una está de global y cuando está activado y está en azul pues estamos viendo que está utilizando ese estilo global que nosotros habíamos aplicado en los ajustes del sitio vale si nosotros le damos al lápiz lo que hacemos es deslincar ese ajuste y si yo por ejemplo pongo un tamaño aquí personalizado no se va a cambiar en todos los títulos que yo haya puesto si yo cambiara el ajuste global porque al dándole al lápiz es como una manera de desvincular ese ajuste simplemente vale para comentarlo, yo en mi caso lo voy a dejar así pero porque se ha quedado un poquito pequeño pero en este caso pues es siempre útil pues utilizar los tipografías globales para que en todas las páginas que cambiemos si el día mañana queremos que todos los h1s tengan un tamaño de 42 y que pasa nada 36 o viceversa pues que cambie en todos los sitios vamos a añadir otro widget así básico que es el botón que lo tenemos por aquí cuando ya empezamos a utilizar varios widgets que son como repetitivos como que ya sabemos que vamos a utilizar todo el rato a pesar de que Elementor nos enseñan algunos de los principales que se utilizan también tiene una opción que se hacemos click derecho y una sección de los favoritos que está aquí que salen al principio de todos los widgets que lo único que nos haces facilitanos el acceso a esos widgets si yo por ejemplo digo vale pues el encabezado lo voy a utilizar muchísimo la imagen pues también muchísimo el editor de texto que son serían los párrafos pues también lo vas a utilizar un montón y el botón también vale entonces nos lo añadimos a favoritos y así mejoramos el tema de pues estar buscando el widget que a pesar de que tenemos el buscador aquí y podemos siempre escribir pues separador o lo que sea que vayamos a usar sobre todo al principio porque al principio tú no te sabes en nombre de todos los widgets ni como son entonces por mucho que nos den este buscador no lo podemos buscar si no sabemos como se llama entonces cuando ya vayamos identificando que son los widgets que utilizamos más pues nos los vamos guardando favoritos vale como en mi caso y nada vamos a seguir maquetando este botón que como veis aquí sale sin estilos y sin nada una manera de utilizar lo que es la edición de los botones como nosotros hemos desactivado los ajustes bueno hemos hecho que los ajustes los agarre el tema hagelo cuando nos hemos ido a la configuración yo os recomiendo sobre todo en los ajustes y que vistes que en el estilo del tema tenemos una sección de botones que antes no hemos visto es aplicar un estilo exacto si por ejemplo hay cosas que se repiten en los botones como lo explico si tú tienes toda tu web por ejemplo que lo voy a hacer aquí, los botones son redondos pues lo ajustas directamente en los ajustes globales del sitio y no en ese botón concreto porque si no pues cada vez que arrastres un botón no va a tener el estilo que tú quieres entonces con mi caso todos mis botones voy a hacer que sea redondos pues vamos a ver qué ajustes podemos encontrar aquí y vamos a ver cómo se trasladan a todos los botones que arrastremos inmediatamente desde el panel del momento entonces aquí tenemos lo primero para elegir la tipografía vamos a darle que coja el texto para que todos los botones tengan la tipografía global de texto el color de texto lo voy a dejar en blanco porque voy a hacer que todos los botones de momento sean de este color luego veremos cuando necesites un botón que tenga todo el mismo estilo pero que el fondo del botón sea otro color pues vamos a ver cómo lo podemos desvincular el tipo de borde no le vamos a dar ningún borde y el radio del borde que esto si es redondo o no pues le voy a dar 100% para que se queden así redonditos y veis que de hecho arrastrando un widget como he arrastrado el widget del botón y estoy realizando los ajustes en el sitio como es para todos los botones aunque yo no le haya dado antes el ajuste a este botón en concreto si yo voy modificando todo aquí pues si yo tuviera aquí por ejemplo esta página 100 botones estaría cambiando en los 100 widgets vale pues es muy importante utilizar siempre todo de manera global de relleno voy a darle 16 a mí un tip que yo estoy para que nos queden los botones así como con un tamaño extraño que me enseñó una chica que es una track diseñando es darle siempre doble de o sea utilizar el número doble de por la izquierda y por la derecha que de arriba y de abajo vale en este caso si por ejemplo estamos utilizando 16 pues darle por la derecha de los dedos y por la izquierda de los dedos si yo tengo un tip para que sepáis que a mí me sirvió muchísimo para no hacer botones de tamaños extraños entonces bueno vamos a guardar eso aquí veis también que tenemos el tema de las imágenes voy a aprovechar que estamos editando los ajustes de sitio para también hacer un pequeño ajuste ahí porque bueno yo por cambiar un poco y porque haya más cosas para explicar y para ver voy a hacer el agua como que todo sea redondito y que no haya nada cuadrado así tengo más cosas que explicar y para que veáis sobre todo casos prácticos entonces voy a editar también aquí para las imágenes que por ejemplo el borde sea de 20 vale y nada más eso lo dejamos así vale creo que lo único para ver el bueno para actualizar los cambios vamos a refrescar la página que esto es un poco una peguilla que hay que cuando veis que no se ha aplicado algo no es que no se haya hecho todo lo que hemos hecho sino que simplemente hay que refrescar la página porque cuando estás editando cosas en producción de los ajustes del sitio en la misma página a veces pues no se ven o no se en el inventor no entiende que estás haciendo los ajustes sobre eso mismo entonces simplemente cargar la página y ya lo podéis ver en contenido este botón como vemos que está linea a la izquierda pues es otra cosa que vamos a cambiar como forma parte del espaciado de cómo se distribuye este botón en nuestra columna pues también está aquí el tema de la lineación simplemente lo ponemos en el centro como habíamos hecho con el texto y por ejemplo este botón que os había dicho antes que habíamos hecho un diseño este moradito para todos los botones de la web en este caso por ejemplo aquí no está funcionando bien porque el botón no se ve apenas entonces simplemente dándole dentro del botón que aquí ya estamos dentro del botón no estamos haciendo ningún ajuste global si nosotros aquí ya cambiamos el color del fondo del botón y lo ponemos blanco nos va a hacer caso va a priorizar los ajustes que tú hagas en ese widget de botón más allá de que por ajuste global tú le hayas hecho otra configuración vale, esto está bien porque a lo mejor a ti te interesa que todos los botones sean morados y redundos para no tener que hacerlo uno en todos los botones pero en este caso peculiar como no nos sirve así pues lo podemos modificar para hacerle la inversa le ponemos el texto morado y el color en este brisecito aquí y bueno vamos a pasar ahora a explicar un poco cómo va el tema del tamaño del tamaño de los espacios que hay en una sección porque puede ser un poco lioso yo me acuerdo que cuando empecé aprendiendo con Elementor me hacía un lío porque siempre encontraba en la pestaña de avanzado el aviso está aquí el tema del margen y el padding entonces voy a utilizar esta diapositiva de aquí para explicar un poco esto cuando nosotros tenemos un elemento como puede ser este texto aquí de ejemplo que he puesto simplemente para diferenciar entre padding y margen o relleno y margen es que el margen no pertenece al elemento sino que el elemento ocupa X por ejemplo 200 x 200 príseles y el margen es espacio como desangrado pero que no pertenece al elemento en cambio el padding cuando tú le añades un color por ejemplo a un widget que tenga un fondo de color si ese color por ejemplo es morado pues si le das margen ese color no va a ser transparente porque no pertenece al elemento en cambio si le das padding la diferencia es que el padding que os consideras más espacio de 20 o 40 píxeles más todos esos ese borde que se va a crear también pertenece al padding como en este caso azul que estamos viendo y el borde de los elementos que es justo lo que está entre medias es simplemente el espacio que ocupa entre el margen y el padding es decir el padding sigue formando parte del elemento puede ser de y tener el mismo fondo si ese elemento tiene un fondo y el borde puede ser de otro color a parte como por ejemplo el blanco entonces para que entendamos un poco la diferencia de cuándo usan márgenes y cuándo usan paddings normalmente no puede interesar siempre utilizar paddings o rellenos cuando queramos hacer que nuestra caja por ejemplo si estamos haciendo cajitas de icono o algo así para que haga un clic tengan ese espacio y respira el elemento pero que tenga todos los colores y el borde y todo igual entonces explicado eso por una parte decías que el padding como es parte del elemento es una imagen de texto de abajo y es un enlace significaría que el imagen sea clicable como perdón? si cuando tienes un típico enlace que es imagen más texto imagen arriba un texto abajo esto influye para que el área de imagen sea clicable claro exacto digamos que si es padding si es clicable y si es imagen no sería clicable porque no forma parte del elemento si es clicable es el elemento y el borde? claro el borde es justo lo que está entre medias tenemos un cuadro tenemos por ejemplo un texto que pone contacto en elemento o un botón vamos a poner mejor un botón si tu tienes un botón y le das padding para que respire por ejemplo este botón te hace clic aquí pero todo este espacio es como el relleno de hecho le hemos rellenado el botón dándole 16 píxeles para arriba y 16 píxeles por abajo y 32 por los lados si yo clico en cualquier pádito o que me vaya al borde ves que esto que me dices tu en el enlace es clicable mientras yo esté en el padding de ese elemento pero en cambio si me voy a lo que ya no pertenece al elemento ya no es clicable es lo mismo cuando le damos pádins o margenes a las secciones y a las columnas por eso quería diferenciar un poco porque como al final es como que le estás dando aire pero no sabes si pertenece a un elemento simplemente es para diferenciar el padding, forma pertenece al elemento y el margeno y el borde es lo que está entre medias entonces esto lo digo porque hay movimientos de formas de por ejemplo y maquetar porque si yo por ejemplo quiero separar como se ve la columna que está como muy pegada al elemento que no sé si lo veis desde el texto a la columna que ahí ahora mismo 10 píxeles eso es lo que vienen por defecto cuando tú ahora estás en una columna de cualquier tipo, vale así y metes buches dentro veis que hay muy poco aire no está respirando en absoluto porque si esto lo dejamos así está super pegado a lo de arriba entonces como hay varias maneras quiero mostraros la que yo creo que es como la más optimada con la que mejor me llevo para aplicar todo el tema de espacios y demás entonces a mi lo que me gusta es hacerlo todo esto en la sección que posiblemente clicamos en la sección y vais a ver que hay un ajuste que es el espacio entre columnas porque el espacio se puede aplicar el espacio se puede aplicar en muchos sitios tanto dentro del widget como dentro de de la columna como dentro de la sección creo que lo mejor de hecho voy a hacer un caso práctico para que veamos un poco la diferencia porque hacen más cosas y no hacerla vale si yo tengo por ejemplo este este texto para mi sección que está super pegado a la izquierda y no respiran absoluto pues le podría coger el widget irme a la pesteña de avanzado y decir vale pues le pongo un padding por todos los lados y vemos que tiene por arriba por abajo por los laterales y ahora respira un poco más el widget pero esto no es la mejor manera porque ahora cuando vayamos a ver el tema de responsive que simplemente es aquí en este icono de aquí abajo que sale un portátil y un móvil aquí se nos abre este pequeño panel donde vamos a poder ver el editor de manera responsive es decir si hacemos click en el icono de tableta pues nos hace una preview de cómo vemos nuestra web en tablet y de cómo la veríamos si estuvimos en el móvil que si nosotros metemos padding solamente en el widget y no lo hacemos de manera global para todos los elementos si yo por ejemplo lo pongo bueno lo voy a poner a cero en momento y digo como se pega a la izquierda solamente pues le voy a dar 30 por la izquierda solamente vale entonces luego esto por ejemplo lo vemos en móvil y ya está descentrado porque como le hemos dado el padding y encima sólo se le hemos dado por un lado para separarlo de cómo se ve en el escritorio pues ahora en móvil nos queda mal entonces ya para quitarle esto pues le tienes que dar 30 para luego ponerle cero vale esto digamos que entre comillas es una mala plátipa porque no nos ahorramos tiempo ni realmente estamos aplicando los espacios como se deberían yo como os decía a mi mi lo que me gusta es darle bueno uno de los métodos que me parecen bastante fáciles es darle el espacio entre columnas personalizado vale que aquí veis varios ajustes una cosa mal que han hecho al nombrarlo es que lo llamas sin espacio, angüesto, extendido, ancho no saben muy bien cuál es cuál yo por experiencia sé que ancho son 20 píxeles que más amplios son 30 pero claro esto yo lo sé de tanto que lo he usado no de que lo ponga aquí entonces para asegurarnos de saber cuál es el espacio que se le está aplicando le damos a personalizado y aquí ya vemos directamente si yo pongo por ejemplo 100 vale pues aquí vemos que está respetando un padín de 100 si yo lo quito vamos a ver dónde estaba la columna ahí veis que está super pegada el elemento no tiene nada tiene cero igual que se la aplicó pues 40 está un pelín separado vale este espacio que vemos aquí yo normalmente lo que suelo usar es 40 en escritorio aunque puede depender todo esto obviamente depende del diseño que tengamos si dos columnas tiene el mismo estilo o no yo en este caso estoy hablando para secciones y columnas pues que todas tienen el mismo estilo que todas respiren si tienes un elemento que está abajo y eso tal pues ahí hay que ir a tocar cada elemento para hacer justo el diseño como nos lo han maquetado o como nos lo ha dado el diseñador por ejemplo en el caso de que nosotros sólo estiésemos la guadre pero en general lo ideal sería tener el espacio siempre aplicado a la sección para que todas las columnas tengan el mismo espacio y luego no de esto y ya podemos saltar el tema de la sección es que tanto desde el icono de aquí arriba como los de aquí abajo que os he mostrado antes o el panel este gris que nos aparece arriba del todo podemos cambiar y también cambian muchos de los ajustes que hemos hecho y que podemos hacer distintos para tablets por ejemplo, yo en tablets no quiero que sean 40, quiero que sea 30 si se des y por ejemplo lo cambiamos a mobile y aquí en la previsión de la sección pues igual, porque quiero que sean 20 que sean menos espacio todavía porque el mobile es mucho más pequeño el diseño, entonces eso es lo único malo que deberían implementar pero ahora vas a ver porque yo siempre digo que tienes que o sea que lo ideal es maquetar una sección meterle el estilo meter ajustar todo esto en mobile en tablets y luego ya teniendo esa sección como he comentado antes al hacer clic tener hecho en una sección la podemos duplicar o sea uno de las puntillas de cosas que nos dejan de duplicar porque a lo mejor ahora lo veremos yo no voy a utilizar esta imagen a lo mejor en la siguiente sección hay dos columnas y no tengo una o tengo tres, tengo una caja pero ya haciéndolo de este modo me ahorro todo el tema de tener que adaptar todo a tablet y mobile, sino que directamente ya está adaptado ¿vale? entonces bueno, simplemente quería explicar eso y ya viendo esto que cómo funciona podemos cambiar algunas cosas para diferentes dispositivos una de las cosas que como has dicho tú no las secciones pero lo que sí que podemos cambiar en los ajustes globales es los ajustes del sitio es decir como hemos visto antes aquí por ejemplo este texto en mobile a lo mejor se me queda enorme ¿vale? o si lo hubiéramos dado a lo mejor de 60 porque queremos que en escritor yo sea un texto super grande pero luego en mobile 60 te quedan enorme y las letras se separan y se ve fatal entonces una de las cosas buenas que tiene el editor responsive de Elementor o el modo adaptable como lo queréis llamar es que los ajustes del sitio como habíamos visto antes en las fuentes globales si cambiamos de previsualización y vemos a tablet vamos a poder hacer ajustes sobre la tipografía y veis el iconito cuando sale el iconito de tablet o mobile o el dispositivo que sea significa que puede ser diferente para esa sección ¿vale? por ejemplo yo no sé qué le he dado aquí no le he dado mucho pero bueno 36 pero si me lo invento y yo les hubiera dado a todos los títulos a lo mejor un 42 o un piso más o sea 56 en escritorio ¿vale? que luego en mobile se me queda enorme pues en mobile podemos dar ya así de 32 o así para que se nos queden como títulos principales pero no que se rompa la web y que sea que sea como una proporción otro simplemente un tello que os comento aquí también es que también a mí por ejemplo mucha gente me ha preguntado ¿qué tamaño pongo de tipografía? es algo muy típico a mí me gusta siempre trabajar en valores de la tabla del 8 para 6 y lo plan 8 o 12 16 32 ¿vale? siempre intentar que los encabezados de la web tengan sentido y se han se puedan distinguir de lo que es el contenido porque al final el título es más importante y siempre no puede ser el título de 22 píseles y el texto de 21 porque no hay un píxel de diferencia vale simplemente comentar eso para que también lo podáis aplicar entonces en este caso por ejemplo los parafus son de 16 píseles cosa que está muy bien en mobile que sea de 16 píseles pues se le perfecto y el tesoro secundario por el 24 estaba también bien sigue siendo más pequeño que el principal en mobile y sigue siendo más grande que el encabezado por su título y se queda bastante lejos entonces en ese caso no hace falta que ajustemos nada más para cuando lo veamos en mobile y aquí bueno voy a actualizar un momentito y voy a recargar la página a ver si se ha cambiado ah vale no no se ha cambiado porque como vigiances el lápiz desvincula todo el tema de las globales pero si yo ahora le pongo la principal pues ahí se queda en grande entonces como la tipografía principal la hemos adaptado si ahora vemos todo esto en mobile pues se ve en pequeño bueno pequeño se ve bien en mobile vale y esto es más o menos como lo tenemos que ajustar otra cosa que quería comentar es que en este caso veis que la justa pantalla no está funcionando esto es porque en algunas cosas pequeñas en detalles hay algunos fallos otra manera de hacer ajuste a la pantalla pero ya de manera manual es poner la altura mínima por ejemplo del ancho o del alto podéis poner el alto al 100% para decir que esta sección ocupe el 100% de la vista o también a veces depende para que sección queráis poner podéis poner el 50% de la columna que esto sería la pantalla para que también coja más o menos el 100% yo lo voy a dejar el 100% en este caso y ahora si ya teniendo esto que vemos que se ve bien en una tablet y vemos que se ve bien también en un mobile ya podemos coger esta sección y duplicarla ya hemos que lidiar hecho lo duplicamos y aquí tenemos otra sección igual voy a borrar esta que había hecho para el ejemplo y simplemente vamos a ir maquetando posiciones un poco diferentes en este caso yo no quiero ya que esta porque no va a ser el giro de inserción entonces me voy al estilo de la sección y le voy a quitar la imagen ¿por qué? porque ya no vamos a utilizar ese fondo y en este caso como voy a hacer una disposición por ejemplo de dos columnas pues vamos a duplicar también esta columna este encabezado lo vamos a dejar también veremos como podemos utilizar incluso lo mismo widgets que estamos duplicando y quitando lo que no necesitemos vamos a maquetar una sección típica de el texto aquí a la izquierda y la imagen a la derecha esto lo podemos eliminar y el botón también lo podemos eliminar este textón que se ve mal y demás simplemente haciéndole un par de ajustes ya lo vamos a poder bien por ejemplo le cambiamos la alineación a la izquierda nos volvemos al estilo y le cambiamos el color para que lo podamos ver y ahora ya está mucho mejor el botón igualmente podéis hacer esto o si por ejemplo como hemos hecho los ajustes globales para todos los botones y ahora mismo arrastro otro botón y lo vamos a hacer con el estilo que le habíamos aplicado de manera igual entonces este momento me lo cargo y ya no lo necesitamos y pues bueno aquí podemos arrastrar otro widget también para añadir uno más y el de párrafo que como habéis visto es muy parecido al del encabezado pero con más cantidad de texto y tener lo mismo ajustes de estilo entonces podemos darle los colores globales y las tipografías globales que en este caso es la de texto vamos a añadir aquí otro widget de imagen aquí y aquí podéis ver que también habíamos hecho de manera global el tema de que todas nuestras partes en esta web iban a ser como redonditas entonces he redondito el botón porque lo habíamos hecho y en la imagen que también la habíamos hecho redondita pues ahora cualquier imagen que arrastres también es redondita vale entonces en ese caso la dejamos así una pregunta pero es que la imagen si se te quedaba grande no te permites de nos figurar por donde recortabas lo ideal es que metas las imágenes en el espacio que van a ocupar vale porque más que nada ya a nivel de optimización porque más que nada tú tienes una típica imagen de banner así muy horizontal y con mucho mucho de ancho pero poco de alto y la metes en una 65 en la que estoy midiendo yo realmente la imagen que está cargando es la grande a lo sé que luego la hagas acusas por encima pero ya es meter una imagen que tiene acusas encima entonces lo mejor y lo que más te aconsejo es si la imagen por ejemplo es cuadrada pues mete una imagen cuadrada si la imagen es sólo que se ve un baile precio pues le corta la ponerle por abajo lo que sea necesario y que sólo cargue lo que lo que necesites entonces otra cosa para entender la diferencia entre por ejemplo secciones con una columna y secciones con dos columnas es que en las dos columnas en este caso cuando lo pasamos a responsive pues una tiene que ponerse encima de la otra vale por defecto la que está a la izquierda se pone por encima de la que está la derecha tanto en tablet como en mobile habría que ajustarlo aquí vamos a hacer otro ajuste y vamos a ver también otra cosa adicional de las columnas que es que por ejemplo al igual que podemos ajustar la disposición de la sección de como queremos que sea el ancho por ejemplo de la caja que sea el contenido más estrecho y tal también podemos ajustar el ancho que queremos que sea esa columna por ejemplo en este caso yo en tablet siempre suelo poner todas las columnas al no ser que se vea muy bien ya así pero normalmente no suele pasar y las pongo al 100% porque a mi me interesa que las columnas estén al 50% pero en la versión escritoria pero en la versión tablet me interesa que sea 100% para que se vea mejor y se vea más adaptado entonces simplemente haciendo este ajuste pues ya podemos ver que se va viendo todo un poco mejor en los dispositivos y bueno en mobile para que tengáis también una referencia hay una jerarquía es decir al igual que he explicado las columnas y los widgets que hay como esa jerarquía de que las secciones como la caja grande las columnas es como lo que está dentro y el widget es el elemento dentro de todo con los ajustes en responsive también pasa más o menos lo mismo si tú tienes esta columna al 50% en tablet vas a tener al 50% y bueno ahora elemento le ha hecho una modificación para que en mobile por defecto tengan el 100% porque han visto que la mayoría de personas todas las columnas que estaban al 50% en escritorio en mobile es casi todo al 100% porque el mobile al final es una cosa así y no puedes leer nada en medias columnas entonces eso ya elemento como que lo cambio pues para facilitar el trabajo hay que hacerlo pero hace tiempo eso no estaba entonces claro tú ponías una columna de 50% y en tablet estaba al 50% y en mobile era al 50% o sea que en tablet se veía súper pequeño y súper mal entonces yo lo que siempre trato es ver que ajustes puedo extender hasta que donde me haga falta por ejemplo en este caso en escritorio está bien y en tablet lo hemos ajustado 100% pero si en tablet por ejemplo también lo ponemos en otro tipo de ajuste digamos que bueno para consumir un poco la jerarquía es así o sea va todo en escritorio luego lo de escritorio se alimenta o sea tablet se alimenta de todo lo que pongas en escritorio y el mobile se alimenta de todo lo que pongas en tablet a lo sé que pongas algo específico en ese dispositivo pero para que os hagáis una idea de cuál es la jerarquía por eso sí que por ejemplo en este botón para hacer un ejemplo rápido le pongo que tenga margen por la izquierda en mobile de ellos de 20 vamos a volver a escritorio y veis que no hay nada de margen aquí vale porque lo que configuremos en mobile no es no es prioritario en la jerarquía a lo que pongamos en escritorio vale entonces bueno simplemente vamos a seguir maquenando un par de secciones más como todo esto ya está incluso bien también para tablet y para mobile, vamos a también duplicar esto y la vamos a utilizar para hacer una otra sección y vamos a utilizar otros widgets para ver también otras cosas que podemos implementar entonces otros de los widgets que vienen con la versión gratuita por ejemplo bueno tenemos aquí de buen más, de vídeos, imágenes vale y tenemos por ejemplo también a ver si lo encuentro aquí estos son lo de la versión pro aquí en general tenemos estos que son por ejemplo de cuadre, imagen y cacadicón voy a arrastrarlo para que veis como se ve y bueno este widget para que os hagáis una idea hay muchos widgets en la versión general que son como un mix pero para que lo podamos maquinar de manera más optimizada como en este caso que es como una cajita con varios widgets entonces vamos a ver por ejemplo voy a eliminar esto de aquí voy a quedar con ese widget ahí y vamos a simplemente ajustar como podríamos hacer estas cajitas aquí nos vamos a la sección de estilo y en el contenido aquí vamos a ver que tenemos tanto el título como bueno arriba tenemos la imagen y la descripción de esto lo mismo metemos el color global las tipografías globales utilizar esta de subtítulos que había hecho antes y para la descripción lo mismo utilizamos la fuente globales y la tipografía de texto una cosa también que os recomiendo mucho es que por ejemplo varias formas de las que se podrían maquinar lo siguiente que voy a hacer yo podría duplicar esta columna tres veces y entonces tendría tres columnas con tres widgets de cuadro de imagen dentro pero esto realmente cuando lo vayamos a maquinar hay que pensar si podemos hacerlo de otra forma porque precisamente esto podríamos hacerlo pues duplicando por ejemplo este widget y aunque veamos que nos sale al 100% pues nos vamos a la pesteña de avanzado que aquí vimos que teníamos un ajuste de ancho de cuánto ocupa este widget de ancho podemos también asignarle un ancho personalizado entonces aquí por ejemplo si yo le doy en este caso que sería como el 33,3 periodo 1% que es como una tercera parte de 100 si yo duplico este widget que ya está con esta disposición vais a ver que ahora caben los tres entonces esto a qué más o menos afecta pues esto puede afectar también al tema de la carga de la web porque al final todo lo que los elementos que estamos metiendo son menos porque nos hemos quitado dos columnas de por medio sin tener que maquinar o sea maquetando esto de la misma forma entonces simplemente eso que sepáis que todos los incluso un botón aunque esté al ancho completo que veis que llega hasta el final vais a utilizar muchísimo la sección de avanzado el tema de integrar o personalizar el espacio que ocupa ese widget dentro de la columna eso sería el equivalente a esa al inline block si, eso si para quienes sepáis de ese pues si totalmente equivale al inline o un block lo que hace es te coge el espacio solamente que ocupa el elemento o el personalizado que tú le ves vale, entonces bueno para el entubro hay algo que te explica si, eso es lo que iba a enseñaros pero no se si va de tiempo que bueno porque me quedan creo que 5 minutos en la nueva manera de maquetar con el elemento que os comentaba al principio que están creando algo mucho más optimizado para poder hacer diseños más más complejos y demás hay una opción que de hecho, bueno, voy a aprovechar y la voy a mostrar igualmente un segundo lipo que es elemento creo como una página que es de ello que es el playground aquí os podéis meter es playground.elemento.com y es una página que básicamente lo que muestra es eso y de hecho te quiero responder a esa pregunta porque aquí lo vamos a ver bueno, lo primero que voy a hacer es, voy a traducir esto así que se traducen rápidamente para que lo intentamos un poco mejor había un ejemplo aquí en este playground que estaba por aquí a ver si lo encuentro que había, mira, aquí es había un montón de de widgets que estaban como apelotonados ahí y entonces, básicamente si le queréis echar una vistazo muy rápido aquí podéis trastear y hay como actividades que os enseñan a medida que os va mostrando y podéis leer como la descripción de en qué consiste cada actividad ver cuál es la nueva funcionalidades que meten, en este caso de los containers de frescos entonces aquí por ejemplo nos dicen que metamos aquí abajo que pongamos por ejemplo el widget de título al ancho de 100% cosa que antes habíamos visto, igual esto está avanzado, lo ponemos ancho completo y ahí vemos que no hace nada pero, ¿por qué? porque lo único que faltaría es ajustar a ver si lo encuentro aquí en la peste de diseño aquí en opciones adicionales desbordando por ahí aquí, perdón en elementos en envolver le damos a wrap no wrap, que esto también es algo que tiene el CSS y veis que cuando le damos a que comprima bueno, digamos que no deje pasar de la sección todos estos widgets, simplemente con este ajuste que es un clic pasa de verse todo mal a verse todo perfecto que nos pone todos los que quepan y básicamente lo que está haciendo es de X, bueno este container es de X tamaño ponme tantos hasta que no quepan más y me los arrastra a la línea de abajo vale, que esto pues simplemente es lo que tú me preguntabas de cómo optimiza esto luego el inventor a la nueva funcionalidad esto que hemos visto de que se ha dado ahora rápidamente el playground es la la parte nueva que va a sacar Elementor que de hecho está ahora en beta si no, mal recuerdo y lo que va a hacer es que va a cambiar un poquito, bueno, va a cambiar algunos widgets y alguna manera de maquetar para que nosotros tengamos que hacer como en menos pasos o para optimizar como maquetamos nosotros en Elementor simplemente pues como habéis visto dando un clic o diciéndole como nos coloca los elementos que tengamos todo de una manera mucho más responsive, o sea, que se adapte a los dispositivos, sobre todo en Mobile y otro ejemplo también que cabe destacar en el tema de los Xbox es que van a meter una nueva bueno de la mano de eso viene una nueva funcionalidad que es el tema del orden que eso es el que ese también existe tienes pues esto, caja uno, caja dos, caja tres, en Mobile cuál sale primero o cuál no, cuál sale exacto, claro por aquí por ejemplo, lo único que podemos hacer es modificar el ancho de lo que es el widget y pues ir ajustando o no, en este caso pues que en tablet esté al, o sea, perdón que en Mobile esté al cien por ciento pero no le podemos decir, pome la tercera en la segunda o la primera en el tercer puesto, vale también es otra cosa, muy potente que va a sacar cuando el elemento se actualice, que no se supone que saldrá mejor la versión 4.0 no lo tengo, claro, pero ahora lo puedes decir sí, ahora, claro, ahora lo que sí que es este es que se puede meter pero claro, si a lo mejor tú tienes un, a lo mejor cuatro volunas y tienes dos de por medio que te interesa cambiarla o si le de porque quieres que el orden sea ese específico pero a lo mejor el orden en el Mobile pues quieres que se cambie pues con eso lo vas a poder hacer y cosa que no permite el editor actual pero bueno, como todo se va a actualizar al final, elementos pues se va a actualizar a cosas también que los que editamos con ellos necesitamos claro, hasta que lo corpone, exacto sí, de hecho un montón de cosas que fueron sacando también para hacer bueno, funcionalidades que hace tres años pues no existían pues lo han ido implementando y ya nos estaba haciendo las cosas más frederes como lo que comentaba de que antes tú metías como la sección está que he hecho el ejemplo tu antes pues tenías eso, en escritorio una a 50% y otra con una también a 50% lo ponías en version mobile y también funcionaba igual o sea, lo tenías a 50% en los dos, ahora sin hacer nada ya lo tenías todo, te lo amplían a 100% para ahorrarte ese paso, porque saben que ese paso es algo que vas a hacer entonces bueno, simplemente para para terminar que bueno, no me ha dado tiempo hacer lo que quería hacer quería simplemente comentaros que esta manera de la que implemento el espacio el tema es súper importante de aplicar todo de manera global creo que es lo más importante y creo que es con lo que a nivel de buenas prácticas os deberíais quedar porque también va a haber o sea, siempre es lo apasante que tengáis que hacer a lo mejor varios cambios o si de repente la vueltas que lleváis, la que tenéis cambios de color o queréis hacer cualquier ajuste que acepte a todo pues para que no tengáis que poneros a cambiar cada una de las cosas y sobre todo si estéis empezando a maquetar pues simplemente eso que sepáis que está todo hecho en Elementor para que se pueda utilizar de manera global y que todos los ajustes incluso, que no son de manera global pero que podéis guardar como el espacio que hay entre las secciones para repetir esas secciones en el tableritimóvil y tenerlo todo adaptado de una manera que están ahí batallando haciendo más secciones nuevas pues que utilicéis eso y que empecéis maquetando a partir de todo eso que nos déjame implementar para no tener que repetir ni cometer fallos, que luego vamos a tener que rectificar vale, tanto sea para cosas de responsive o cosas del diseño Yo tengo dos vacíos que me dan con Elementor porque como yo debo debir el tema ya es el propio y por su culpa es fácil que tiene su propio tema y en el caso de Elementor que el sentido tiene aquí en otro tema que no será gelo porque lo más toma que está todo tu visualmente si, yo por ejemplo también utilizo cuando necesito bueno, a ver, realmente por ejemplo, si tu necesitas imajar a tu Google puedes utilizar el segundo tema que para mí es también muy útil me gusta mucho utilizaba muchísimo tiempo hasta que claro pasó eso, que Elementor sacó el de gelo que encima es de ellos digamos el tema está mucho más optimizado, no mete funcionales ni cosas aparte porque lo que pasaba antes era que con Elementor tú tenías que aplicar como todos los ajustes de Elementor y el tema iba aparte iba según el tema que estabas utilizando tanto las tipografías rogales como todo eso claro, el personalizador del tema era una cosa, claro, de Warpes fuera de Warpes y lo hacías fuera de Warpes como habéis visto por ejemplo, estos ajustes del tema bueno, ajustes de sitio todos estos que son cosas del estilo del tema y como también por ejemplo el poder hacer una cabecera y pie de págino que sean básicos ¿vale? hay muchos temas que no lo tienen o que si lo tienen a lo mejor es con la versión PRO ¿vale? porque como por ejemplo hasta apoyo utiliza mucho, hasta PRO y Elementor hasta que bueno, dependiendo también qué tipo de web necesites hacer pues vas a utilizar una cosa u otra y nada simplemente pues comentaros también rápidamente qué cosas tienes por ejemplo Elementor PRO ¿vale? las voy a nombrar simplemente para que tengáis como una diferencia entre Elementor PRO y Elementor PRO, el que gratis la tuviste el correct es que el maquetador de Elementor PRO tiene tiene el maquetador de temas que es como un panel donde puedes ver todas las plantillas por ejemplo el header, footer juntas pero dentro como de una preview de Elementor, no solo desde Warpes y que también se de pues para ahí una u otra o ver cuántas cuántas plantillas tienes de cada cosa tiene más de 60 widgets tanto de estos por aquí por ejemplo pues de menús de navegación de porfolio, de galería y muchos widgets que tiene así que son un poquito más complejos que en la versión básica y muy importante de WooComes, con la versión PRO de Elementor pues también si instalamos el plugin de WooComes de una tienda online pues también nos viene con todos esos plugins el contenido dinámico que es algo también muy importante sobre todo para el tema de las plantillas de archivo, de las plantillas de blog para que hagas una sola plantilla y esto se incorpore a sí, contenido dinámico de pues el título de entrada va a ser con este estilo obviamente vas a poder ajustar una preview es decir que no maquetas sobre nada sino que normalmente con la última entrada o el último post o el último producto y pues ya en base a eso vas maquetando y bueno y otra cosa muy diferencia también que tiene Elementor PRO esto más que nada para que sepáis que pues si merecen la pena si necesitáis a lo mejor también esa parte de la versión PRO de Elementor según pues el título que necesitáis es el tema de formularios que tiene la verdad que la funcionalidad es que tiene para los formularios son bastante avanzadas casi que puedes hacer cualquier formulario para newsletter con interacciones de para mains o cosas así es muy potente también otro tema que tiene es el tema de los pop-ups que puedes hacer pues pop-ups ventanas emergentes para promocionar cualquier producto o una suscripción a la newsletter típica o algo así y otra cosa muy típica que tiene es el tema de las landis y los kits que sólo comentar que en la parte que no habíamos visto de aquí de la izquierda de la biblioteca vale aquí es muy sencillo tenéis como los bloques y las páginas vale y aquí podéis insertar directamente bloques si no queréis meteros de lleno a maquetar desde cero porque a lo mejor yo que se llego sur hace en la web o no tenéis tiempo de elegir están elegiendo por esa tipografía el tema de los bloques y las plantillas es como una opción muy buena para que no tengáis que estar ajustando ni siquiera nada de responsive porque todas las bloques y las plantillas que descargáis aquí están bien en ya adaptadas a responsive y tablet y demás y bueno otra de las cosas también que hay a destacar de los elementos pro es que tiene las es que tiene las tipografías los iconos y el código personalizado que esto bueno pues la verdad que sobre todo yo creo que lo que hice interesante es el tema del código personalizado porque para aquellas personas que saben pues un poquito de CS o quieren meter una función extra a las personas que trae elementos pues viene súper bien para personalizar eso y bueno las tipografías al final también si queremos customizar una página y meter fuentes que no sean de web font por defecto porque todas las las tenemos disponibles con la mesa gratuita pues también es una opción bastante buena que ofrece elemento pro y nada, hasta aquí y bueno nada yo soy Mery Larcía soy diseñada de la web mi segunda faceta es que soy artista trabajo trabajando con golpes y con elementos más de 3 años y nada, ahí tenéis mis redes sociales LinkedIn Mery Larcía y mi web Merylin.exe