Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elementor, editor visual para WordPress
Search
Imanol Terán
PRO
December 10, 2018
Technology
0
160
Elementor, editor visual para WordPress
Imanol Terán
PRO
December 10, 2018
Tweet
Share
More Decks by Imanol Terán
See All by Imanol Terán
Magic Studio: la IA de Canva
imanolteran
PRO
0
310
ChatGPT Avanzado
imanolteran
PRO
0
280
Introducción a ChatGPT
imanolteran
PRO
0
210
Conoce los riesgos de las IAs como ChatGPT
imanolteran
PRO
0
96
Creación de imágenes con herramientas de IA
imanolteran
PRO
0
280
Novedades de WordPress 6
imanolteran
PRO
0
120
Google Bard y otras alternativas a ChatGPT
imanolteran
PRO
0
55
Conoce los riesgos de las IAs como ChatGPT
imanolteran
PRO
0
58
ChatGPT: Todo sobre la última gran revolución en Internet
imanolteran
PRO
0
1k
Other Decks in Technology
See All in Technology
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Bounded Context: Problem or Solution?
ewolff
1
210
Building Products in the LLM Era
ymatsuwitter
10
4.4k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Rails Girls Zürich Keynote
gr2m
94
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
How STYLIGHT went responsive
nonsquared
98
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bash Introduction
62gerente
610
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Transcript
ELEMENTOR EDITOR VISUAL PARA WORDPRESS
Soy Imanol Terán ▸ Desarrollador frontend ▸ Consultor y Formador
IT 2 HELLO! Puedes encontrarme en @itermar o
[email protected]
3 Si dudas, hazlo Podcast diario #emprendimiento #desarrolloweb #productividad #marketingonline
https://itermar.io/podcast
4 Otros proyectos De formación https://www.academiadeproductividad.com https://www.academiadecontrolparental.com
ELEMENTOR 1. Introducción 2. Instalación 3. Opciones y funcionamiento 4.
Plugins 5. Ejemplos prácticos 6. Práctica 5
1. INTRODUCCIÓN • Editores visuales • Elementor 6
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
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
INTRODUCCIÓN ▸ Inconvenientes: ▹ Posibles incompatibilidades ▹ Código generado en
la web ▹ Efecto lock-in 9
INTRODUCCIÓN ▸ Elementor es una de las muchas opciones ▸
Principales virtudes: ▹ Rendimiento ▹ Intuitivo ▹ Extensible 10
+5.000.000 Instalaciones activas 11
2. INSTALACIÓN Cómo instalar Elementor en nuestro site 12
INSTALACIÓN ▸ Solo necesitamos instalar un plugin ▹ https://es.wordpress.org/plugins/elementor/ ▸
Compatible con WordPress 5.4.2 ▸ Compatible con Gutenberg 13
INSTALACIÓN ▸ Una vez instalado, podemos elegir, para cada página
o post ▹ Crear con Elementor ▹ Utilizar editor por defecto 14
3. OPCIONES Y FUNCIONAMIENTO • Básicos • Flujo de trabajo
• Diseño • Tipografía • Layout • Edición móvil • Integraciones • Plantillas 15
OPCIONES Y FUNCIONAMIENTO ▸ Básicos ▹ Drag & Drop ▹
Sin código ▹ Widgets ▹ Edición móvil/tablet ▹ Librería de plantillas 16
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
OPCIONES Y FUNCIONAMIENTO ▸ Diseño ▹ Fondos ▹ Vídeo /
Gradiente / Overlay ▹ Filtros CSS ▹ Elementor canvas template ▹ Sombras 18
OPCIONES Y FUNCIONAMIENTO ▸ Tipografía ▹ Google fonts ▹ Custom
fonts ▹ PX, EM, REM ▹ TypeKit 19
OPCIONES Y FUNCIONAMIENTO ▸ Layout ▹ Tamaño de sección ▹
Ancho completo ▹ Columnas anidadas ▹ Posición del contenido ▹ Z-index 20
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
OPCIONES Y FUNCIONAMIENTO ▸ Avanzado ▹ Animaciones ▹ Contenido dinámico
▹ Código personalizado ▹ Plugins que extienden funcionalidades ▹ Guardar secciones y plantillas para reutilizar 22
OPCIONES Y FUNCIONAMIENTO ▸ Integraciones ▹ Mailchimp ▹ Zapier ▹
Adobe Typekit ▹ ActiveCampaign ▹ reCAPTCHA ▹ Facebook SDK 23
OPCIONES Y FUNCIONAMIENTO ▸ Plantillas ▹ https://library.elementor.com ▹ https://www.cssigniter.com/elementorism/ 24
4. PLUGINS • Free • Premium 25
PLUGINS ▸ Un punto fuerte de Elementor, es que es
extensible mediante plugins ▹ Gratuitos ▹ Premium ▸ https://elementor.com/addons/ 26
PLUGINS ▸ Estos plugins, añaden nuevos tipos de elementos que
añadir a nuestra web ▹ Sliders ▹ Tabs ▹ Accordions ▹ CTAs ▹ Grids con filtros ▹ ...etc 27
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
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
5. EJEMPLOS PRÁCTICOS • Elementos comunes • Slider • Grid
• Popups • Countdown • Tablas de precios • ...etc 30
EJEMPLOS PRÁCTICOS ▸ Elementos comunes 31 https://copaviesgo.com
EJEMPLOS PRÁCTICOS ▸ Slider 32 https://clubnatacionbarakaldo. com
EJEMPLOS PRÁCTICOS ▸ Grid 33 https://digitalresources.pro
EJEMPLOS PRÁCTICOS ▸ Popups 34 https://eventos.spri.eus/basque -industry-the-meeting-point-201 8/es/agenda/ponentes/
EJEMPLOS PRÁCTICOS ▸ Countdown 35
EJEMPLOS PRÁCTICOS ▸ Tabla de precios 36
EJEMPLOS PRÁCTICOS ▸ Listados de posts 37
EJEMPLOS PRÁCTICOS ▸ Custom Post Types y Filtros 38
EJEMPLOS PRÁCTICOS ▸ Lista de precios ▸ Elementos de WordPress
▸ Flipboxes ▸ CTA ▸ ….. 39
6. PRÁCTICA Maquetación de una landing page usando Elementor 40
PRÁCTICA Desarrollar una landing page utilizando Elementor 41
PRÁCTICA ▸ Landing page 42 http://ura-10aniversario.eus
INSTALACIÓN WORDPRESS 43
INSTALACIÓN WORDPRESS Local https://local.getflywheel.com Free Demo https://trincheradev.com 44
ESKERRIK ASKO! Any questions? Puedes encontrarme en @itermar o
[email protected]
https://itermar.io/podcast https://www.academiadeproductividad.com 45