Elementor, editor visual para WordPress

Transcript

1. ELEMENTOR EDITOR VISUAL PARA WORDPRESS
2. Soy Imanol Terán ▸ Desarrollador frontend ▸ Consultor y Formador IT 2 HELLO! Puedes encontrarme en @itermar o imanol@itermar.io
3. 3 Si dudas, hazlo Podcast diario #emprendimiento #desarrolloweb #productividad #marketingonline https://itermar.io/podcast
4. 4 Otros proyectos De formación https://www.academiadeproductividad.com https://www.academiadecontrolparental.com
5. ELEMENTOR 1. Introducción 2. Instalación 3. Opciones y funcionamiento 4. Plugins 5. Ejemplos prácticos 6. Práctica 5
6. 1. INTRODUCCIÓN • Editores visuales • Elementor 6
7. INTRODUCCIÓN ▸ Editores visuales gran auge en los últimos años ▸ Divi, Visual Composer… ▸ Hasta el punto de obligar a WordPress a cambiar su editor ▹ Gutenberg 7
8. INTRODUCCIÓN ▸ Uso de este tipo de editores, facilitan la creación de layouts complejos ▸ Sin conocimientos de programación ▸ Ágil trabajar con ellos 8
9. INTRODUCCIÓN ▸ Inconvenientes: ▹ Posibles incompatibilidades ▹ Código generado en la web ▹ Efecto lock-in 9
10. INTRODUCCIÓN ▸ Elementor es una de las muchas opciones ▸ Principales virtudes: ▹ Rendimiento ▹ Intuitivo ▹ Extensible 10
11. +5.000.000 Instalaciones activas 11
12. 2. INSTALACIÓN Cómo instalar Elementor en nuestro site 12
13. INSTALACIÓN ▸ Solo necesitamos instalar un plugin ▹ https://es.wordpress.org/plugins/elementor/ ▸ Compatible con WordPress 5.4.2 ▸ Compatible con Gutenberg 13
14. INSTALACIÓN ▸ Una vez instalado, podemos elegir, para cada página o post ▹ Crear con Elementor ▹ Utilizar editor por defecto 14
15. 3. OPCIONES Y FUNCIONAMIENTO • Básicos • Flujo de trabajo • Diseño • Tipografía • Layout • Edición móvil • Integraciones • Plantillas 15
16. OPCIONES Y FUNCIONAMIENTO ▸ Básicos ▹ Drag & Drop ▹ Sin código ▹ Widgets ▹ Edición móvil/tablet ▹ Librería de plantillas 16
17. OPCIONES Y FUNCIONAMIENTO ▸ Flujo de trabajo ▹ Edición in-line ▹ Navegador ▹ Atajos de teclado ▹ Auto guardado ▹ Histórico de versiones ▹ Copiar y pegar ▹ Copiar estilo ▹ Tipografía y colores globales 17
18. OPCIONES Y FUNCIONAMIENTO ▸ Diseño ▹ Fondos ▹ Vídeo / Gradiente / Overlay ▹ Filtros CSS ▹ Elementor canvas template ▹ Sombras 18
19. OPCIONES Y FUNCIONAMIENTO ▸ Tipografía ▹ Google fonts ▹ Custom fonts ▹ PX, EM, REM ▹ TypeKit 19
20. OPCIONES Y FUNCIONAMIENTO ▸ Layout ▹ Tamaño de sección ▹ Ancho completo ▹ Columnas anidadas ▹ Posición del contenido ▹ Z-index 20
21. OPCIONES Y FUNCIONAMIENTO ▸ Edición móvil ▹ 100% responsive ▹ Tamaño de fuente para móvil ▹ Ancho de columna responsive ▹ Visibilidad de elementos ▹ Orden inverso ▹ Breakpoints personalizados 21
22. OPCIONES Y FUNCIONAMIENTO ▸ Avanzado ▹ Animaciones ▹ Contenido dinámico ▹ Código personalizado ▹ Plugins que extienden funcionalidades ▹ Guardar secciones y plantillas para reutilizar 22
23. OPCIONES Y FUNCIONAMIENTO ▸ Integraciones ▹ Mailchimp ▹ Zapier ▹ Adobe Typekit ▹ ActiveCampaign ▹ reCAPTCHA ▹ Facebook SDK 23
24. OPCIONES Y FUNCIONAMIENTO ▸ Plantillas ▹ https://library.elementor.com ▹ https://www.cssigniter.com/elementorism/ 24
25. 4. PLUGINS • Free • Premium 25
26. PLUGINS ▸ Un punto fuerte de Elementor, es que es extensible mediante plugins ▹ Gratuitos ▹ Premium ▸ https://elementor.com/addons/ 26
27. PLUGINS ▸ Estos plugins, añaden nuevos tipos de elementos que añadir a nuestra web ▹ Sliders ▹ Tabs ▹ Accordions ▹ CTAs ▹ Grids con filtros ▹ ...etc 27
28. PLUGINS ▸ Plugins Gratuitos ▹ https://premiumaddons.com ▹ https://essential-addons.com/elementor/ ▹ https://www.livemeshthemes.com/elementor -addons/addons-demo/ ▹ https://wordpress.org/plugins/modal-for-ele mentor/ 28
29. PLUGINS ▸ Plugins Premium ▹ https://elementor.com/pro/ ▹ https://powerpackelements.com ▹ https://uaelementor.com/ ▹ https://shop.namogo.com/product/elemento r-extras/ ▹ https://www.dynamic.ooo ▹ https://jetsloth.com ▹ https://facetwp.com 29
30. 5. EJEMPLOS PRÁCTICOS • Elementos comunes • Slider • Grid • Popups • Countdown • Tablas de precios • ...etc 30
31. EJEMPLOS PRÁCTICOS ▸ Elementos comunes 31 https://copaviesgo.com
32. EJEMPLOS PRÁCTICOS ▸ Slider 32 https://clubnatacionbarakaldo. com
33. EJEMPLOS PRÁCTICOS ▸ Grid 33 https://digitalresources.pro
34. EJEMPLOS PRÁCTICOS ▸ Popups 34 https://eventos.spri.eus/basque -industry-the-meeting-point-201 8/es/agenda/ponentes/
35. EJEMPLOS PRÁCTICOS ▸ Countdown 35
36. EJEMPLOS PRÁCTICOS ▸ Tabla de precios 36
37. EJEMPLOS PRÁCTICOS ▸ Listados de posts 37
38. EJEMPLOS PRÁCTICOS ▸ Custom Post Types y Filtros 38
39. EJEMPLOS PRÁCTICOS ▸ Lista de precios ▸ Elementos de WordPress ▸ Flipboxes ▸ CTA ▸ ….. 39
40. 6. PRÁCTICA Maquetación de una landing page usando Elementor 40
41. PRÁCTICA Desarrollar una landing page utilizando Elementor 41
42. PRÁCTICA ▸ Landing page 42 http://ura-10aniversario.eus
43. INSTALACIÓN WORDPRESS 43
44. INSTALACIÓN WORDPRESS Local https://local.getflywheel.com Free Demo https://trincheradev.com 44
45. ESKERRIK ASKO! Any questions? Puedes encontrarme en @itermar o imanol@itermar.io https://itermar.io/podcast https://www.academiadeproductividad.com 45