 Buen día, una charla más para el Workup, este vamos a aprender sobre Elementor, así que vamos a ver un poco sobre lo que es Romper los Tabus de Elementor, se ha sonado mucho y es nuevo para la edad que tiene Workpress, entonces en esta presentación primero quiero que vean que vamos a aprender un poquito sobre qué es un constructor, cómo verificar si mi tema de Workpress es compatible con Elementor, qué es esto con diferentes globales que suele comodirse un poco y ya si uno maneja CSS también hay otras características por ahí, plantillas, un par de trucos que me han servido muy bien donde encontrar información para quienes sean nuevos usando Elementor y un poquito de ver el entorno Elementor al crear una sección así que les cuento un poquito sobre mí, soy Samir Purola, soy ingeniera en computación desarrolladora web de hace unos siete años más o menos he andado por varias herramientas y una que se arroba al corazón que es Workpress, mucha agilidad, independencia, autonomía para mis clientes, eso es algo que da un valor muy bonito y pues ayudando en la comunidad desde que se creó acá en Costa Rica en 2016 y en estos años he podido colaborar organizando el Workpress, lo cual ha sido una devolución a la comunidad de todo lo que he aprendido y me ha encantado, así que aprendemos un poco de Elementor, vamos a empezar con qué es esto de un constructor, tenemos componentes, tenemos widgets, tenemos palabras elementos incluso, entonces estas palabras significan que tenemos algo ya creado, por acá voy a usar el ejemplo de un objeto texto, si bien en español tenemos esta palabra objeto y vamos a la para n cantidad de cosas, es de la misma manera cuando lo llevamos al digital, en este objeto texto vamos a poder darle la propiedad de ser un título, de ser un párrafo, de ser una lista, así que estos elementos ya vienen creados, preconfigurados y simplemente tomándolos y arrastrándolos podemos ir construyendo nuestra página, así que Elementor es un plugin que vamos, instalamos nuestro Workpress, contamos visitar el Mentor en el Buscador, vamos a ver el Elementor Website Builder, este es el plugin, hay una versión gratuita, hay una versión de par, entonces con una versión gratuita ya empezamos a ver las opciones, podemos a las entradas, a las páginas, al landing page, a la página de bienvenida o al inicio, como gusta llamarles, se puede aplicar, hay trucos, quédense para ver los trucos de lo que son las entradas, de cómo podemos usar algo especial ahí con el Mentor, algo interesante, hay integraciones, entonces son cosas que estaban creadas y se vienen creando, dentro de ellos están los temas de estos que hemos creado, hay temas gratuitos pues sí, pueden ir y buscarlos, hay una pequeña lista en la página de Elementor, pueden buscarlos también en el Buscador de Workpress o RG, algo casual, ya tienen el tema, no se preocupen, podemos verificar si es compatible, yendo o a la página del tema, usando la descripción del tema, ahí en el texto va a decir, es compatible con Elementor, o eso es compatible con Gutenberg o es compatible con ADC, entonces son maneras prácticas, maneras sencillas, ¿qué pasa si descubrimos que nuestro tema no es compatible? y entonces ya lo que vamos a diseñar para ver todas nuestras entradas, toda la información, no va a servir, van problemas de que no podemos editar el landing page o creamos un landing page y nunca se muestra, ¿qué es lo que pasa? pues porque viene un tema pequeñito de Elementor, que es propio Elementor, se llama Hello, lo pueden encontrar igual en el Buscador de temas, en Googleándolo, es fácil, es accesible, es gratis, entonces lo que hace es limpiarnos todo lo que tenemos en el sitio, todo lo que es diseño del tema y nosotros creamos, así que en esta parte de crear viene el tema de componentes globales, vamos a entender un componente global como una tabla de contenidos, la tabla de contenidos, lo que hace es leer los H1, H2, H3, nosotros podemos configurar incluso, ¿cuáles H van a leer o qué, cuál va a ser la jerarquía, eso va a cambiar por la página, pero el componente como tal, quién va a leer esos H y los va a mostrar en un bloque, a un lado, arriba, abajo, lo que estamos diseñando va a ser siempre el mismo, entonces ese es un componente global, ya sea que tengamos al pie de la página una sección de contacto, un call to actions, también accionables en alguna área de la página, eso también es un componente global, qué es lo que es específico un componente global, que no importa la parte del sitio que esté, va a ser la misma, esa no podemos cambiarla de acuerdo a la página en la que esté, por ejemplo, el call to action de enviar un mensaje a mi sitio web, va a ser el mismo en la página de nosotros, en la página de productos y es exactamente el mismo texto, el mismo link, el mismo botón, entonces eso es un componente global y podemos editarlo, darle mantenimiento como un global, crearlo y tenerlo como un global, si yo necesitara cambiar algo, por ejemplo, si tengo un pop up con tweets y esos tweets van a cambiar, si estoy en la página de noticias, si estoy en el landing page o si estoy en la página de productos, ya eso no sería un componente global, ya tiene variables, entonces ese es un detalle que manejamos de la manera diferente, ahí es donde vienen las plantillas, este es el menú, esta pantalla de plantillas, cuando nosotros estamos creando la página, la tenemos en blanco, no vamos a tener ninguna al inicio, porque estas son mis propias plantillas, pero estos call to actions de los que les comento, si empezamos a agregarlos, salvarlos o plantillas, pues vamos a empezarlos a ver acá, esto es desde la vista gratuita, una vez que tenemos el pro, todo esto lo vamos a ver, todas estas banderitas, todos estos puntitos en las esquinas, derechas, superiores que dicen pro, se nos van a agilitar, cuando tengamos el pro ya no nos va a restringir, podemos usar plantillas, vamos a tener bloques y vamos a tener páginas, entonces los bloques que son, son las secciones, si programan algo de html, recordar que hay Google div, que hay sections, ok, vienen a hacer estas secciones, vamos a tener cosas de furer, de herer, todas esas etiquetas, al vez que recuerdan por ahí de html, pues por aquí se van convirtiendo en bloques, ya por ahí vamos conociendo un poquito, si no hemos programado nunca antes, todas las secciones son como los banners que usamos cuando diseñamos la página, entonces el págrafo o todo el componente, a cierta manera lo llamamos componente para hacer igualdad con componentes como los de Uriak, pero ya un lenguaje no tan técnico, no tan de programadora, pues son los elementos, porque por ahí viene un poquillo el nombre, ya no irán descubriendo, como les decía también hay ya páginas como plantilla, entonces hay una ventaja muy grande, si no saben por dónde empezar y quieren practicar y ver el elemento, tiene ya páginas con diseño, si ustedes quieren diseñar, pero no pueden construir y diseñar, todo se nos hace bastante pesado, hay estructuras ya creadas en las que nosotros podemos después ir y ajustar el diseño, y entonces son estos frames muy parecidos en los que hacemos los prototipos, o que lo sentiamos, nada más agarramos un pilot y decimos como aquí necesito una imagen, aquí un texto, algo así, después podemos ir y ver que hay plantillas así en Elementor y ya nosotros ajustamos el color del fondo, la imagen, que si tiene borde redondeado, que si es el fondo de uno o del otro, lo bueno de las plantillas es que nos agilizan creación, nos ayudan a hacer dinámico el contenido, entonces es contenido muy pesado, muy técnico, o por el contrario es contenido que necesitamos hacer atractivos, entonces pues eso nos va a agilizar con Elementor y todo este manejo y permite guardar, al guardar yo una plantilla ya guardé totalmente esa estructura, ese diseño y yo puedo insertarlo, después cambiarle la información que hay dentro de todo este, también nos ayuda a darle mantenimiento, lo malo no son estilos, no hay estilos globales, no son plantillas globales, eso que quiere decir, para los que conocen de CSS no estamos creando una clase, para los que conocen nada más de creación de contenido, lo que significa es que la plantilla, vos la creaste, la usaste en esa página y se queda ahí, no, si yo copio la plantilla a otro lugar, yo estoy copiando la plantilla, yo estoy insertando la plantilla, pero no es llamando a la plantilla original, entonces contextualizando un poco este ejemplo, yo creo un banner como un título, un botón, lo guardo como plantilla y después lo inserto en varias páginas, cuando yo edite ese banner va a estar la edición particular, singular en cada uno de los lugares donde lo inserté, esta es la diferencia con los globales, los globales me cortas el centro a la página de la bout y lo editó, se va a reflejar en la página de contacto, entonces eso es algo global, una plantilla o otra plantilla no es necesariamente global, eso puede ser confuso, ya ahorita vamos a ver cómo solucionamos esto, ahí es donde les digo que vienen los trucos, entonces para lo malo que tiene elementos, pero esto que me decimos no, no la logro, no quisiera porque me divisa o que si no es global, entonces no hay plantillas globales y pues por ahí creo que sea solo la estructura y el estilo nos va a limitar, cómo vamos a abrir estas limitaciones, tenemos clases, tenemos los ID de CCS y los podemos usar, vamos a ver, esto del CCS podemos usarlo de dos maneras, una es al editar nosotros algún elemento, vamos a tener en el menú de avanzados una prestanita donde dice custom o CCS personalizado, custom CCS, ahí es importante siempre, siempre siempre de primero cualquier clase que vayan a crear, cualquier estilito, poner selecto primero, esta palabra lo que hacer es trabajar sobre ese elemento, un ejemplo de cómo hacer algo malo, poner un P para el párrafo, decirles que tengo un margen de 15 y no ponerle la palabra selector antes, cuando esto pasa ese P va a ir y van a transformar todos los párrafos que pueda, entonces quiere decir que no va a quedarse aplicado en el banner, va a ir aplicarse en el contenido del post, va a ir aplicarse el texto que está en el landing, el texto que está en la pestaña de equipo, entonces el selector lo contiene hacia el elemento y ahí podemos escribir CCS sin problema y va quedando como el capsuleado, por otro lado podemos hacerlo en el tema, en el tema tenemos la particularidad de que podemos manejar todo el CCS junto, entonces si ocupamos de reutilizar una clase, podemos obtener visualidad, elemento nos deja signarle o el ID y las clases de CCS en el menú de edición avanzada, ahí vamos a ver cuando vamos a poder manipularlo y vamos a poder dar bastante forma cuando usamos el CCS, entonces si ya conocen o si no conocen y como ahora hay tanto incremento perfectamente podemos buscar como algún botón y decir a generador de botón mira yo quería como este estilo no es estilo no sé hacerlo no sé configurarlo entonces si no pueden ir y configurarlo y si ya me dicen redes entonces copian el estilo y lo pegan por ahí son trucos digo entonces cuando tenemos un diseñador en el equipo yo como desarrolladora estoy implementando todo esto y si tenemos que utilizar el CCS mi recomendación es usémoslo desde lo que es el tema y el tema siempre con un tema hijo para que si se actualiza el tema no vaya a pasar nada a todas las configuraciones este es como un detalle de un buen truco para acomodarnos ahí hay algo que suele confundir a los que hacen el contenido a estas personas que son content editor o que suelen estar en sitio cuando creamos entradas siempre ese teme el que vamos a tener que estar arrastrando y jalando por todos los componentes y otra vez alistándolos y si no podemos hacer este estilo global y como hacemos es una solución fácil y práctica porque no todos somos programadores es usar el mentor y no tembol los dos pueden coexistir no se van a morir no se van a matar entre ellos ellos pueden ser amigos pueden ser compas no hay problema alguno puede hacer ahí el el detalle ok todo el contenido que escribamos en la entrada con el post content se va a mostrar y ahí pueden usar sus columnas lo ideal es que no usen mal de dos de mobile no se haga muy desastroso es ahí pueden usar sus textos pueden ingresar imágenes pueden ingresar videos pueden hacer listas puede hacer cualquier contenido ahí y con otros elementos como es el título o el fichu image podemos crear una plantilla y esa plantilla a condicionarla y decirle usted va a ser la plantilla para las entradas entonces no es una plantilla de todo global porque va a estar alimentada por la información de la entrada entonces es un truco interesante de ver por quien no solo vamos a poder aplicarle la información de la entrada a los elementos de single post de entrada de elementos podemos también perfectamente acomodar alguna imagen algún icono de algún flotante en la página y decir ok esta imagen que va a estar aquí flotando mientras nosotros exploramos en redondito un lado de la página va a ser el fichu image entonces vamos a ir y decirle el elemento usted se va a alimentar del fichu image entonces hay bastantes posibilidades y como les digo esto es un tabú el que hay no es que si yo uso el elemento es solo el evento y el elemento es el más grande poderoso y es que si usan botel solo botel y en todos mis sitios va solo botel pueden usarse juntos y recuerden aquí muy importante no se cacen con ninguno de los dos ustedes van a ir a utilizar el que más le favorezca el usuario o al usuario final al usuario del elemento del porpreso o quien va a consumir ese coro entonces adecuando eso pueden usarlos y pueden usarlos juntos y no pan del cúnico detalles prácticos de todo esto que he dicho hay pequeñas configuraciones que que son bonitas de conocer antes de empezar a usar el elemento tenemos desde el panel donde vamos a trabajar acceso a lo que son los serings globales dentro de eso que vamos a poder que editar las fuentes los colores la paleta colores de todo el sitio tipografías que si decimos no este va a ser el botón y en todo el sitio va a ser ese el moto aquí lo tenemos todo eso está resumido en lo que es la primera pestaña que es el site series tenemos también partes importantes que son el el fin bill el constructor del tema nos va a ayudar a hacer estas puntillas de que tal vez ustedes inician y ok ya tengo si la página de inicio el entrada y el contacto ya no sé qué más crearon como que eso quería no importa también acompañan esa parte nos da este la opción de hacer el error el poder a lo que es toda la navegación del sitio también el que son cuando buscamos cómo se va a ver eso para que no tengamos todo el sitio todo el elemento y a la hora de buscar usamos el buscador en el workpress y que nos salga una lista de todos y tú los has dicho real no tiene sentido entonces por ahí cómo hacer esos componentes todo eso también y acompañan y ahí de estas páginas son así también hay plantillas sin diseño o diseño y ustedes pueden ir personalizando y lo último que me gustaría mencionar de estos como detallitos prácticos que vienen por aquí es el panel de notas a como ya hemos aprendido a usar bastante los archivos compartidos de lo que son ojal de cálculo que son textos y a eso lo dejamos comentarios mirar revisate el copia del texto que va a entrar al lado y pues estamos directamente o si estamos estudiando de mirar te toca la de hacer la introducción al tema aquí al texto esas notitas que dejamos aquí ponemos una roba el nombre podemos tallar a alguien dejarle un comentario se puede hacer en elemento esto no va a ser visible para el usuario final va a ser solo visible para los editores vamos a poder tener una lista de todos estos comentarios que se hacen y además vamos a poder responder señalar vamos a poder dejar así como este pincel de aquí del icono de esto y otro cambia color esto no me gusta pueden dar ese filba que el diseñador a esa exactitud podemos llegar verdad lo he usado es una de las herramientas que me ha facilitado mucho ya que muchas veces era enviar un correo crear un ticket y aquí si estamos revisando algún staging hicimos ver en dos semanas revisamos staging para pasar a su producción quien tenta ve anota cosas yo puedo ir corrigiéndolas y perfecto para cuando llegamos a staging ya el bea bueno te había dejado la nota de abc revisamos abc así me gustó como se corrigió y no en vea y querría hacerlo no sigue sin gustarme esto no está práctico no está usable entonces reformamos es una manera ágil es más sencillo lo veo desde mi punto de vista que tomarle un screen shut a la página y señalarlo con rojo y ese el encírculo que haga un ticket y todo esto se puede volver un poco engorroso en el día a día entonces pues ahí tenemos agilidad ese es como el detalle práctico más bonito de Elementor y yo voy acomodándolos ahí en un top en ese momento es está el número dos hay documentación sin claramente documentación de elementos yo les estoy conversando mucho desde mi experiencia en estos como dos años que ya usando Elementor al revés al delé al derecho y cuando inicié que fue en dos de veinte a usarlo me ayudó mucho la documentación entonces Elementor.com slash academy ahí van a encontrar vídeos hay guías y cuando venga el vídeo en que pues es fácil de seguirlo no necesitan tener un título de computen de computines no tienen que ser desarrolladores web no tienen que ser ingenieros programadores diseñadores está hecho de una buena manera detalles por ahí hay mucha información en inglés así que practicar el inglés se le escucha la lectura y hay material que se va a estar empezando a devuelver también español si quieren apoyar y hacer y decir mira yo aprendiendo logré hacer tal cosa documentarla también recuerden que la documentación les está ayudando a ustedes y mañana nos puede ayudar de vuelta o hay más entonces hay información acá en Elementor hay incluso una comunidad de Elementor entonces les hago el anuncio de que pueden ir buscarla y alimentarse de esa comunidad de todo lo que se está haciendo ahí está en español también en inglés español lo que se sienta más cómodos y quieren estar en ambos también ahora bien voy a dar un paso rápido por lo que sería crear entonces hay un Elementor 101 yo voy a ir a instalar Elementor va a salir un dashboard me decir como hola como están vamos a instalar el tema hello ya se los comité se instala perfecto te pide en el nombre del sitio parece como si estuviéramos haciendo un work pues verdad después de eso nos va a dar la opción de implementar algo desde cero o de ingresar una plantilla también hay kits que son completos pueden instalar para ir a usar uno los kits o bien iniciar con ello vas a verles esta pantalla no se susten si tienen un montón de todas las cosas en grises pero es un lienzo en blanco donde va a empezar a ser suerte van a tener a la derecha un navegador eso que es como el arbolito está en las carpetas que nos sale en la computadora que de esta carpeta este archivo aquí van a estar apiladas todas las secciones para los que son computines este es el árbol que va para el dom para los que no somos computines agregar una plantilla estructura y componentes lo que es de elementos clics y arrastrar las que son computines si es dracan rob bienvenidos al mundo que va facilitando cómo realizar la solución les son yo lo he trabajado con internet inestable internet desde el celular internet con fibra óptica la computadora conectada directo la computadora sin conectar no ha tenido problemas así que eso es una de las preguntas que a veces surge por ahí personaliza damos las plantillas ahí por ejemplo yo ingresé una de las plantillas delante en page pueden ver que se el árbol ya ahora se nutrió hay un montón de cosas en este árbol de la derecha este árbol de la derecha puede estar en la izquierda puede estar arriba puedes trabajo ustedes como dracan rob y biller puede manipular el elemento también el elemento perdón así también entonces ustedes pueden seleccionarlo y moverlo hacia el centro de la pantalla o simplemente quitarlo para tener mejor visualización en la personalización de los componentes va a venir un gran detalle entonces cosas para editar la plantilla en estilos que ya puedes editarle al título el color la tipografía en las sombras los anchos los pesos todo esto que si queremos que este título siempre se muestre en mayúsculas entonces en la epógrafía vamos a las transformaciones y le decimos siempre mayúsculas o por qué entonces cada vez que ustedes den clic a un elemento se va a activar un estilo por editar y ahí van a tener sin fin de opciones este no es un taller entonces no vamos a entrar cada una de ellas mentalmente no nos daría tiempo ni siquiera haciendo un work para para practicar cada una de las veras propiedades cosas que si puedo decirles tiene motion effects no ya netes está usando esto para que no sea una su texto plano y bajando nos vamos a hacer cosas divertidas tenemos transformaciones en los fondos que ahora que está de moda que usar blu que si queremos usar un vídeo de fondo etcétera bordes de los elementos de las secciones quieren poner marcos pues por ahí la configuración muchas que serían en ccs ustedes escribiendo cada una de las propiedades se pueden ya configurando desde estos paneles de estilos de opciones avanzadas incluso está una pausa el de responsive yo sé que ahora se está adoptando más que sea un diseño adaptativo y no tanto responsive porque es muy complicado todas las pantallas que tenemos que en iphone si tenemos algunas estándares pero para todo lo que es android varían mucho las medidas pues podemos ocultar elementos en lo que es el desto el tablet e incluso secciones es un truco que ya es algo como implementamos cosas adaptativas esto significa que puede cambiar totalmente la estructura de cómo mostramos la información entonces antes de ir y el 6s programar todo el cambio y mirar y que eso se esconde todo entonces sí precisamente acá podemos en estas estaña de responsive darle visualizar ocultar y si es necesario incluso ocultar toda la sección y rehacerla para lo que es móvil entonces pueden desde lo más grande que la sección hasta que sea un texto que se esconde y cuando dice no es que ya cuando llegan a móvil en una medida de 4 20 para lo justo no va a ver los breakpoints de esto se configura en los series generales entonces como pueden ver hay mucho que configurar mucho que avanzar a la plantilla se le puede hacer un montón de cosas vamos a ver ahora un poquito de cómo es visualizar el trabajo porque es uno de los factores de usar elementos que vamos viendo cómo van quedando las cosas entonces podemos ver la para escritorio podemos verlo para tablet y podemos verlo para el eso desde donde en nuestra página de nuestra pantalla de trabajo que diga a la izquierda abajo se tiene un minuto chiquitito entonces ahí vamos a tener como ese dibujito de computadora celular hace parte cuadritos cuando acercamos el mouse nos va a decir responsive mode y nos va a activar esto y nosotros podemos turnarnos y trabajar un rato en cada uno ver ajustar devolverse después de trabajar tablet devolverse a escritorio y es que todo sigue bien es una buena práctica que más hay en este pequeño menú hay un montón de grandes cosas vean recuerden siempre siempre que uno visualiza guarda y cuida el historial de su trabajo eso y es su trabajo es algo muy muy valioso así que para guardar pueden ir salvando el drag en borrador es puede ir salvándolos como cuando hacemos una entrada que guardamos el borrador hasta publicarlo podemos ya una vez que si listo esta va a ser la página y yo quiero que todas las estructuras de mi página quedan así este diseño perfectos va todo así entonces ya una vez que está ya la pueden guardar como template que es como plantilla y después la usan la visualización ese ojito que está a la par de la palabra publicar eso es para un preview es verla ver qué tal manejarla pueden achicar ahí pantalla todo pueden verla antes de publicar así que ven a por favor es como cuando ustedes escriben la justificación de un proyecto y la ley en cinco minutos en voz alta y si esto no tiene sentido en este párrafo pueden toparse con eso a que puede que la vean y no está perfecta ya no voy a trabajar la más no investir más tiempo ya tengo el resultado que quiero entonces pensando desde mi como si ustedes estuvieran iniciando el elemento y probando todo los recomiendo si pueden siempre tener una pestaña visualización y va a ser un gran amigo porque si no uno empieza a hacer sobre trabajo y este además de poder guardar de poder visualizar vamos a tener el historial el historial va por acciones cada que le cambiaste el nombre el botón que le pusiste la letra en lugar de 2014 cada una se hace una acción el va a ir guardando el cada vez que le damos salvar emborrador va a guardar una revisión entonces ustedes pueden devolverse sobre acciones o sobre grabiciones historia de la vida real trabajando con un diseñador él quería ayudar y bueno no hay mucho que hacer en la página es una página gigantes grandísima y tenía toda la razón había mucho que hacer y él quiso como que arreglar un momento unos textos y mover unos botones y acomodar un poco empezó a hacer eso y se le desarmó la página entonces me escribió como llamadita por mí o llamada por favor mirar quise ayudarte y estrofié esta página yo que no hay problema si cuánto está en esto y lo guardó sí sí yo guardé todo pero ya se guardó más vamos a revisiones dice que usted la última revisión la hizo a las 33 con 4 ok un antes de esa y ya no está lo que usted hizo que lo que usted quería hacer poner esto aquí allá ok me devolví en el tiempo en esa página y trae el elemento lo que estuvo creado en este momento ahí está yo que perfecto para los que son computines esto es un rollback es como un control de versiones entonces de como entrar allí y hacer el robo los son los commits para quien no son más computines no se preocupen todas estas fueron buenas palabras son control de versiones es esto de que vamos con sobre la banda salvando resguardando el avance poco a poco así que eso se puede hacer en el momento cuando devolvernos ese es el dú y un dú el deshacer y re hacer entonces pues en el mentor también está para que puedan investigar practicar el mentor tranquilos y esta fue una pincelada de cómo usar el mentor un poquito de entendimiento ojalá puedan romper muchas esticas más que alrededor hay que uno lo usado por alguna situación o que no es que dice que es muy pesado para usarlo hay optimización hay optimización de las imágenes optimización del ccs optimización de fron en ya el mentor tiene esa capacidad ya no es sólo el builder ya es en carga también de optimizar otras partes así que espero que haya aprendido bastante que hayan aprendido algo nuevo como una cosa que es para mí bastante lo que aprendí a salir de no conocían les agradezco la atención prestada y pues si más pueden buscarme preguntarme después totalmente a eso de que no somos un café o no compartamos algunos emojis sea el medio que sea saben que pues aquí estoy para la comunidad y muchas gracias