() translation by (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.
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.
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í:
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.
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:
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.
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:
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:
- Secciones
- Columnas
- 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
