0 0

Cómo crear tu web con Elementor en 2020 (desde cero)

Cómo crear tu web con Elementor en 2020 (desde cero)

Hemos diseñado sitios web de WordPress con Elementor durante más de dos años. Luego de maquetear con muchos complementos, lo que más nos gusta de Elementor es su facilidad para crear hermosos diseños, sin saber prácticamente nada de código.

Elementor te brinda muchas formas para mostrar información sin codear. Podes customizar bloques y botones para mostrar información en tu sitio web o blog.

Si estas emprendiendo, y tu proyecto necesita un sitio web funcional, te recomendamos ampliamente empezar por acá (sobre todo si nunca hiciste una página). Elementor es el plugin más usado por amateurs y profesionales de WordPress.

A continuación, vamos a ver algunas de las características básicas de Elementor, con algunos tips y consejos que fuimos aprendiendo en el camino. Con la experiencia de haber creado cientos de webs para clientes, y haber utilizado numerosos maqueteadores, podemos afirmar que Elementor es la opción más intuitiva y avanzada para crear sitios!

No dudes en seguir esta guía para crear tu primera página usando Elementor 🙂

¿Qué es elementor?

El Plugin Elementor es un complemento de WordPress freemium para construir sitios web de forma simple y amigable. Gracias a su interfaz versátil, permite crear y construir todo tipo de sitios web desde Landing Pages, sitios de ecommerce, portfolios, y mucho más, simplemente arrastrando y soltando widgets.

Con la versión paga Elementor Pro, el complemento agrega numerosas funcionalidades extra como personalizar el diseño de tu página de blog individual, y el acceso a más de 50 widgets premium. Con todas las opciones de personalización disponibles, este plugin hace que diseñar en WordPress este al alcance de todos.

Características Principales

Como es un plugin freemium, hay una versión gratuita y otra paga de Elementor. La versión gratuita es genial para empezar cuando necesitas crear una landing page rápido y no tenes conocimientos de WordPress. Luego, la versión Pro, te permite crear websites enteros!

Diferencias entre Elementor Free y Pro

Podes usar fácilmente Elementor Free para construir una landing page. Como Elementor Pro incluye funciones increíbles, te recomendamos hacer el upgrade de versión. Con Elementor Pro podés diseñar (y rediseñar) todo tu sitio web, manteniendo una estética moderna acorde a tu marca.

Además, solo teniendo instalado Elementor ya podes ahorrarte la instalación de varios plugins, y alivianar la carga del sitio!

Elementor Free

  • Page Builder
  • 30 widgets gratuitos
  • 20 bloques premade

Elementor Pro

  • +90 Widgets premium
  • Builder de Popups
  • Creador de formularios
  • Integración para WooCommerce
  • Galería de +300 bloques premium
  • Theme Builder

Recursos que vas a necesitar

En esta guía mencionamos distintos recursos que te pueden ser de utilidad!

  • Hello Theme de Elementor
  • GeneratePress Theme
  • Plugin Elementor Pro
  • Duplicate Post
  • Shop de OrbitaPixel
  • MailOptin Plugin
  • UseAnyFont

Cómo Empezar

Paso 1: Descargar e Instalar un Tema

Decidí qué tema vas a usar en tu sitio. Para empezar, te recomendamos la versión gratuita de GeneratePress porque es liviana. Pero también podes usar el tema Hello que lo descargas gratis de la web de Elementor. Debido a que Elementor Pro es una herramienta tan avanzada, no necesita un tema pesado con muchas características adicionales.

A continuación, descarga e instala el complemento Elementor.

Paso 2: Ajustes generales con Elementor

Lo que vemos aquí es el dashboard de Elementor que aparece en cada nueva página que editamos con el plugin.

  • Elegí la tipografía que vas a usar desde WordPress “Apariencia> Personalizar”
  • Ahora vamos a crear tu primera página con Elementor. Para empezar, ir a Páginas > Agregar Nueva, luego “Editar con Elementor“. Se abrirá un panel como este que ves en pantalla. Hace clic en el icono “Ajustes Generales de Estilo” en la esquina superior izquierda de la página.
  • Desde acá podes hacer clic en “establecer colores predeterminados” para personalizar la paleta de colores con la que vas a trabajar en tu web.
  • Desde el mismo menú podes escoger distintas tipografías.

El primer secreto para dominar Elementor es familiarizarte con este panel. Parece confuso al principio, pero es sumamente intuitivo!

Paso 3: Definir los ajustes de página

¡Muy biennn! 
Ya estamos listos para crear la primera página. 
En la parte de abajo, hacemos click en el icono del engranaje “Configuración” en la esquina inferior izquierda. 

Estos son los ajustes que vamos a hacer:

  1. Título de página
  2. Indicar el estado (Borrador, Privado, Publicado), esto depende siempre de si ya la vas a publicar o aun es un borrador.
  3. Agregar imagen destacada (tene en cuenta que esta imagen es la que sale cuando compartis el URL en redes sociales o buscadores).
  4. Podes seleccionar “Hide Title” para esconder el título
  5. Elegir el Layout / Estructura de la página. Esto es importante.

Elementor Full-Width muestra la página con su barra de navegación / encabezado y pie de página. 

Elementor Canvas crea una página completamente en blanco para que pueda construir. Oculta automáticamente su barra de navegación y pie de página. 

Las opciones de Layout dependen del tema que estes usando.

Cómo construir tu primera página

Estructura de la página

En esencia, el motor de páginas de Elementor se basa en secciones, columnas y widgets. De mayor a menor, siempre empezas creando la sección.

  • Sección: Las secciones son las categorías superiores. Contienen las columnas. Lo interesante es que podes guardar toda una sección como bloque para luego usarlo en otra página. Para crear una nueva sección, hace clic en un signo “+” en la parte inferior de la página.
  • Columnas: las columnas se encuentran dentro de una sección. Puede haber una o más columnas en cada sección. Para agregar una nueva columna, desplaza el cursor sobre su columna y hace clic derecho en el icono:

Desde ahí podes hacer click en “Duplicar” la columna actual o “Agregar nueva columna”.

  • Widgets: Son las aplicaciones funcionales del complemento Elementor. Cada widget funciona de manera diferente en tu sitio web. Por ejemplo, hay widgets de texto, widgets de imágenes, widgets de testimonios, widgets de íconos sociales, etc. Para identificar un widget en tu página, cuando pasas el cursor sobre él, en la esquina superior derecha aparece un ícono de lápiz azul:

Elementor es un complemento de arrastrar y soltar, por lo que desde el generador de páginas de Elementor podes arrastrar un widget a una sección o columna de la página. Así de fácil.

Personalizar secciones, columnas y widgets

A medida que vas avanzando por el dashboard de personalización en Elementor, vas a notar que hay 2 o 3 columnas de personalización: Diseño (o Layout), Estilo, y Avanzado.

  • Layout: acá va el contenido del widget que estas usando. Para los widgets de imagen, acá es donde vamos a agregar la imagen. Para los widgets de texto, acá es donde insertamos el texto (cuando no, desde el mismo Live Editor). Y así sucesivamente. Vale mencionar que aquí podes emplear customizaciones de HTML para cuadro de texto, que nos son útiles, por ejemplo, si necesitamos agregar un link.
  • Estilo: personaliza el aspecto de la sección, columna o widget, por ejemplo, tipografía, fondo, espaciado. También podemos hacer ajustes de color y fondo en algunos bloques.
  • Avanzado: personaliza márgenes / relleno, ocultar o mostrar bloques en responsive, efectos de movimiento y CSS personalizado, y mucho más. Si estas iniciando, te recomendamos dejar estos ajustes para cuando tengas mas dominio del plugin.

También, desde la pestaña Avanzado, podes ajustar los márgenes y el relleno para cada columna. Estas opciones parecen similares a primera vista, por eso te dejamos siguiente gráfico para que veas la diferencia entre relleno (padding) y márgenes (margin)

Margin vs Padding - Frontend Shortcut - Medium

Widgets globales

Los widgets globales son widgets que se muestran en varias partes de tu sitio. Se puede mostrar un único widget global en varias páginas. Entonces, cuando actualizas ese widget global único, todos los widgets vinculados también se actualizan!

Esto es ideal para las suscripciones a boletines informativos, cuadros de texto repetidos (como para un evento o seminario web) o botones que van a estar en varias páginas. Nos permite ahorrar muchísimo tiempo y así evitar diseñar dos veces lo mismo.

Los widgets globales son una característica exclusiva de Elementor Pro.

Para guardar un widget global, hace clic derecho en el widget  y selecciona “Guardar como global”.

Luego, el widget aparecerá en la sección “Widgets globales“.

Desde el mismo dashboard de Elementor, podemos acceder a la sección de Widgets globales y arrastrar un widget global como un widget normal a la página que estamos maqueteando.

Widgets gratuitos

Dado que Elementor es un complemento freemium, podes explorar muchas funcionalidades geniales de forma gratuita. Ofrecen muchas opciones para que uses en tu web! Estos son algunos de nuestros widgets gratuitos favoritos:

Widgets de Elementor Pro

Obviamente nos encanta Elementor Pro. Sus características pagas permiten ese nivel adicional de personalización y sofisticación que tanto hace falta en casi cualquier proyecto web. Estos son algunos de nuestros widgets Pro favoritos:

Otros widgets Pro destacados son: Menú de navegación, Testimonial Carousel, Botones de compartir, Media Carousel, Facebook Embed, y mucho más!

Bloques y páginas Premade

Por supuesto, no podía faltar la inmensa galería de bloques y páginas listas para importar en Elementor.

Son bloques premade que permiten ser importados a la página que estemos trabajando, para facilitar la tarea de diseño. Simplemente importamos el bloque que nos guste, y reemplazamos el contenido que viene por defecto con el nuestro.

Estos bloques pueden ser secciones individuales (como páginas, FAQ, testimonials, etc), así como también, páginas enteras con distintas temáticas.

Elementor Pro trae una galería gigante de plantillas y bloques premade premium, y es una de las mejores funcionalidades que vienen con la licencia.

Para importar estos bloques, simplemente hacemos click en el signo “+” de la parte inferior de la página que estamos editando.

Cómo crear formularios con Elementor Pro

Una de nuestras características favoritas de Elementor, es el widget de formularios. Crear formularios con Elementor Pro es sumamente sencillo.

Los formularios son una característica Pro.

Dos de los ejemplos más comunes de formularios serían crear un formulario de contacto o un formulario de suscripción por correo electrónico. 

Para construir ambos formularios, arrastra el widget “Formularios” a la sección que estas trabajando en tu página.

Ejemplo 1: Formulario de contacto

Para cada elemento del formulario, podes seleccionar el tipo de visualización (texto, correo electrónico, URL, carga de archivos, casilla de verificación, etc., hay muchas opciones diferentes!). El primer paso es definir los campos (Form Fields).

Después de crear los campos del formulario, podes decidir mostrar las etiquetas (las etiquetas aparecen sobre cada campo del formulario, se usan para dar alguna instrucción, ej: “obligatorio”). También se pueden realizar modificaciones en el botón “Enviar“.

Luego vas a “Acciones después de enviar”. Esto dicta lo que necesitas que pase después de que el visitante complete con éxito tu formulario y presione “Enviar”.

Para los formularios de contacto, asegurate de que la acción “Correo electrónico” esté seleccionada.

También podes configurar este formulario para enviar información a través de Discord o Slack. Esta es una característica interesante que podría ordenar tu bandeja de entrada o ayudar a tu equipo a mantenerse al día con respecto a las consultas de contacto que reciban.

Luego, hace clic en la sección “Correo electrónico” y verifica que se haya completado la información correcta. En este apartado, vas a personalizar el email con los datos de contacto que llegaran a tu casilla. 

Ejemplo 2: Formulario de suscripción

El generador de formularios de Elementor viene con cierta integración de CRM. Si usas un CRM como Convertkit, podes integrarlo con Elementor instalando el complemento Mailoptin e integrándolo con tu CRM.

La creación de un formulario de suscripción de correo electrónico es similar al formulario de contacto anterior, excepto que en lugar de que “Correo electrónico” sea una Acción después de que alguien ingrese sus datos, acá vamos a elegir otra acción como “Mailchimp” o “Mailoptin”.

A partir de ahí, aparecerá una nueva sección (por ejemplo, “Mailoptin”) para que confirmes a qué lista quieres que se vinculen las personas cuando ingresan su información.

Este es un ejemplo de una sección de suscripción de correo electrónico creada con Elementor:

Licencia GPLv3

Elementor, como la mayoría de temas y plugins, posee licenciamiento GPLv3.

Elementor is a free software released under the GPLv3 license. When using the Elementor and Elementor Pro software, you receive all rights granted under the GPL.
Términos y Condiciones de Elementor

Esto significa que Elementor sigue todas las directivas de la Licencia Pública General. Para más informacion acerca de este sistema de licenciamiento, visita nuestra guía de licencias.

¿Listo para empezar?

Sin dudas, Elementor Page Builder ha llegado para quedarse.

Es la forma mas intuitiva y fácil de hacer despegar nuestros proyectos web.

En OrbitaPixel te brindamos todas las herramientas para que tu sitio web crezca. Visita nuestra tienda, y adquirí Elementor Pro a un precio increíble!

Ahora te toca a vos. Comentanos lo que piensas sobre todo lo que te contamos acá de este constructor web llamado Elementor.

Empeza a probarlo con la versión free y comentanos tus impresiones: lo que más te ha gustado, lo que menos, lo que crees que le falta… ¡lo que sea! Cualquier cosa para seguir compartiendo opiniones sobre esta increíble herramienta 😉

Leandro Montiel
Leandro Montiel

Mi pasión es ayudar y brindar tutoriales de calidad para todas aquellas personas que necesitan potenciar sus proyectos. También me podes encontrar en diversos blogs de WordPress, marketing digital y diseño gráfico.

Related Posts
Deja tu comentario

No publicaremos tu email. Campos requeridos *