Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Cómo crear un sitio web de WordPress con Elementor

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Crear tu propio sitio web sin saber codificar, o contratar a tu propio desarrollador, solía ser casi imposible. Actualmente, casi cualquier persona puede utilizar una plataforma como WordPress y un plugin "constructor" como Elementor para crear un sitio web en poco tiempo.

En este tutorial de miniseries (disponible en video y en forma escrita), te mostraré cómo crear un sitio web con WordPress y Elementor, y te guiaré por el proceso completo paso a paso. Esto es lo que vamos a cubrir en este tutorial:

  • Configuración técnica
  • Creación de páginas web
  • Conociendo a Elementor

Construyendo sitios web de WordPress con Elementor

1. Configuración técnica

Para tener un sitio web listo y funcionando necesitarás algunas cosas:

  • Un dominio
  • Alojamiento para los archivos de tu sitio web
  • Una instalación de WordPress

Nota: para los fines de este tutorial, asumiré que ya tienes estos, por lo que me enfocaré en el plugin de Elementor. Si necesitas ayuda con alguno de estos puntos, tenemos una guía completa para principiantes sobre el uso de WordPress que puedes ver en el canal Tuts+ en YouTube.

Instala el plugin de Elementor

Primero necesitamos instalar el plugin de Elementor. Hay dos versiones, una versión gratuita y una versión Profesional. La versión Pro cuenta con una serie de funciones profesionales, incluidas algunas plantillas y bloques premium para ayudarte a crear exactamente lo que deseas. Para conseguir el plugin visita https://elementor.com; la versión gratuita está disponible inmediatamente en la página de inicio, pero para la versión Pro, navega hasta la página de precios para hacer la elección.

Elementor homepage
La página de inicio de Elementor

En cuanto hayas descargado los archivos, regresa a la instalación de WordPress, luego ve a Plugins> Añadir nuevo> Subir plugin y sigue las instrucciones en pantalla.

Una cosa importante a tener en cuenta es que para instalar la versión Pro, también necesitarás tener instalada la versión gratuita. Piensa en la versión Pro como una extensión de la versión gratuita.

Una vez activado, aparecerá una pantalla de bienvenida y notarás un nuevo elemento en el menú de la navegación de administrador de WordPress.

elementor menu item
Elemento del menú Elementor

Si estás instalando la versión Profesional, deberás presionar el botón Activar licencia (Activate License) en cuanto se haya cargado el plugin. Este número de licencia estará disponible a través de la cuenta que habrás creado al comprar el plugin.

Instala el plugin de Envato Elements

Con nuestra configuración técnica casi completa, ahora es el momento de instalar el plugin de Envato Elements. Esto nos permitirá descargar y utilizar bastantes plantillas prefabricadas para Elementor. Visita el repositorio de plugins de WordPress en https://wordpress.org/plugins/envato-elements/ y descarga el plugin en tu sistema. El proceso de instalación del plugin es igual que antes.

Tu página de plugins ahora debería verse así:

plugins page

2. Crea las páginas del sitio web

Para los fines de este tutorial, crearemos un sitio web de cuatro páginas para una pequeña empresa ficticia que vende jugos. Habitualmente vamos a Páginas> Añadir nueva. Luego ingresamos un título para la nueva página y comenzamos a editar con Elementor. Sin embargo, puesto  que ya tenemos el plugin de Envato Elements instalado, vamos a crear nuestras páginas de una forma diferente.

Ve hacia a Elements, luego asegúrate de tener a Elementor seleccionado en las opciones de kits de plantillas.

elementor kits in envato elements plugin for wordpress

Navega en la categoría Comidas y Bebidas (Food & Drink), luego desplázate hacia abajo hasta que veas el kit de Juice Bar. Necesitamos varias páginas para nuestro sitio web, así que comencemos con la página de inicio. Selecciona la plantilla Home 6 del kit de Juice Bar, luego crea una página de inicio ingresando un nombre de página en el formulario:

create a home page

Si ahora vas a Páginas, verás que hemos creado un borrador de página de inicio en unos pocos clics. Podemos modificar esto más adelante, pero por ahora avanza y crea las siguientes páginas adicionales:

  • Página de menú: con la plantilla del menú 5
  • Acerca de: con la plantilla Acerca de 1
  • Contacto: con la plantilla de Contacto 2

Una vez que hayas hecho esto, en las listas de Páginas, deberías ver todas las páginas de Elementor recién creadas listas y en espera.

newly created Elementor pages
Páginas de Elementor recién creadas

Estaremos editando estas páginas en el siguiente tutorial, pero antes de concluir ,veamos rápidamente las operaciones básicas de Elementor.

3. Conociendo a Elementor

Existen algunas maneras de editar contenido con Elementor. Quizás la forma más rápida es visitar los listados de páginas y luego hacer clic en el enlace Editar con Elementor en la página que quieras. De forma alterna, puedes hacer clic en la página y pulsar el botón Editar con Elementor, que se muestra claramente debajo del título. Ambas rutas abrirán el editor de Elementor:

Elementor editor

El editor de Elementor muestra la página que estás modificando, con un gran menú en el lado izquierdo. Todos los widgets que puedes ver (como Sección interna, Encabezado, Imagen) se pueden arrastrar y soltar en la página.

También hay opciones para editar los estilos globales, las fuentes, los colores y los tamaños. Cuando cambias alguna de las opciones, esos cambios se reflejan en tiempo real en la página a la derecha. Cuando estés satisfecho con los cambios, presiona el botón Publicar en la parte inferior del menú para guardar tu trabajo.

Tres aspectos clave

Hay tres aspectos clave para trabajar con Elementor, y son:

  1. Secciones
  2. Columnas
  3. Widgets

Las secciones son los bloques de construcción más grandes disponibles para ti. Al desplazarse sobre ellos en el editor se revelará un borde azul punteado alrededor de ellos, así como una pestaña en la parte superior con algunas opciones.

Las columnas, también conocidas como secciones internas, definen el diseño en columnas verticales.

Los widgets son básicamente bloques de contenido; botones, imágenes, bloques de citas, cualquier cosa que puedas encontrar en la barra de menú como se mostró previamente.

El uso de estos tres aspectos clave de Elementor te permitirá crear cualquier tipo de página que quieras.

Concluyendo

¡Con esto se finaliza la primera parte de esta miniserie! En el próximo tutorial, personalizaremos nuestro sitio web Juice Bar y exploraremos Elementor con más detalle.

Enlaces útiles

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.