Muchos nos preguntamos cómo crear un sitio web. Luego de pasar por todo lo que es dominio y hosting, además de la instalación de wordpress, nos quedamos estancados porque no sabemos cómo diseñarlo. 

No sabemos que tema usar, que colores usar, que plugins descargar, y muchas otras cosas más. La verdad es que para crear nuestro sitio web en cuanto a contenido y diseño, lo primordial que necesitaremos es un plugin llamado “Elementor”

Elementor, como su nombre lo indica, es un plugin que contiene elementos los cuales puedes tomar y soltar en sitios específicos de la página que estás diseñando. 

Para aquellos que no saben diseñar el sitio porque creen que necesitan ser un Master en Código, Elementor es una solución bastante innovadora. Gracias a Elementor, podemos construir un sitio web muy rápido, ya que además ha incorporado plantillas que puede usar para crear páginas en un tiempo súper rápido.

Ojo: Algunas de las funciones solo están disponibles si usas la versión premium de Elementor y / o su tema. 

Entonces, ya que te explicamos qué es Elementor, comencemos nuestro paso a paso para crear nuestro sitio web. 

¿Qué necesitaremos?

  • Elementor (Plugin)
  • Elementor Pro (Plugin)
  • Un tema fullwidth

Crea una nueva página de WordPress

Después de instalar y activar los recursos previamente mencionados: 

  • Ve a Panel> Páginas> Agregar nuevo
  • Escribe un título para tu nueva página en Elementor
  • En la sección Atributos de página, busca el menú desplegable Plantilla y elija el tipo de plantilla Fullwidth.
  • Guarda tu borrador o publica la página.

Comenzar a editar con Elementor

  • Haz clic en el botón azul grande “Editar con Elementor”.
  • Haz clic en el botón gris “Agregar plantilla”.
  • Desplázate sobre todas las plantillas buscando el botón verde que indica plantillas gratuitas.
  • Cuando encuentres una que te guste, haz clic con cuidado en la imagen en miniatura, no en el botón verde de inserción.
  • Ahora verás una vista más grande de la plantilla elegida.
  • Si te gusta, haz clic en el botón verde de inserción.
  • Si deseas probar una plantilla diferente, haz clic en el enlace Volver a la biblioteca. (Arriba a la derecha y arriba a la izquierda del cuadro de diálogo).

No insertes una plantilla Elementor hasta que hayas tomado una decisión cuidadosa

Ten cuidado de no hacer clic en el botón verde “INSERTAR” hasta que te hayas decidido. Porque todas las imágenes de esa plantilla se agregaran a tu biblioteca de medios. Si pruebas varios diseños antes de elegir el que deseas usar, puedes terminar con muchas imágenes adicionales y sin usar en tu biblioteca de medios, ¡así que ten cuidado!

Después de hacer clic en el botón Insertar, Elementor tarda unos segundos en crear ese diseño de página en la página que estás editando.

  • Una vez insertes el tema, puedes guardar tu página haciendo clic en el botón verde “ACTUALIZAR” en la barra lateral de Elementor

Ahora tienes una copia exacta de la plantilla de Elementor. Seguramente cambiarás el texto e imágenes, así que veamos como se hace. 

Añadir Textos, Imágenes e Iconos

Cambiar Texto: 

Para cambiar cualquier elemento de texto, solo resalta ese fragmento de texto haciendo haciendo clic en el elemento y aparecerá la ventana de edición en el sidebar izquierdo. 

Cambiar imágenes: 

Cambiar las imágenes puede ser confuso al principio porque hay tres tipos de imágenes de uso común, imágenes en tu contenido, iconos en tu contenido e imágenes de fondo.

Entonces necesitas saber cómo editar …

  • Widgets de imagen de Elementor
  • Widgets de iconos de Elementor
  • Imágenes de fondo de la sección de diseño de Elementor

La forma más fácil de encontrar la configuración de la imagen o el icono que desea cambiar es hacer clic con cuidado en el elemento en cuestión. Se lo más preciso posible, haga clic derecho sobre el elemento que desea seleccionar.

Luego mira en la barra lateral derecha de Elementor.

La barra roja en la parte superior de la barra lateral de Elementor te indicará lo que estás editando, por ejemplo, Editar imagen o Editar icono.

Directamente debajo de la barra roja verás tres pestañas.

Cuando seleccionas un elemento o widget de Elementor, verá: contenido, estilo y avanzado.

Cuando selecciona una sección de página Elementor o una fila de página completa o una columna dentro de una fila, verá: diseño, estilo y avanzado.

Cambiar una Imagen en Elementor

  • Haz clic para seleccionar la imagen.
  • La imagen se mostrará en la barra lateral izquierda.
  • Haz clic en la imagen y se abrirá la biblioteca de medios.
  • Seleccione una imagen diferente, preferiblemente del mismo tamaño.
  • Haga clic en el botón azul de insertar medios.

Cambiar un Fondo con Elementor

Algunas plantillas de Elementor están hechas de varias filas, una encima de la otra.

Por ejemplo, la fila superior de una plantilla puede tener un título grande en la parte superior del fondo de una imagen.

Desplázate hacia abajo de la página y la siguiente fila puede tener texto oscuro sobre un fondo blanco. O quizás la siguiente fila tiene un color de fondo azul. 

Para cambiar estas imágenes y colores de fondo de filas y columnas, debes buscar y hacer clic en uno de los dos botones muy específicos.

  • Botón Editar sección
  • Botón Editar columna

Pero ten cuidado. Estos son botones muy pequeños.

El botón de sección

El botón de sección es un cuadrado formado con 6 puntos.

El botón de columna

El botón de columna es un cuadrado con una línea que va verticalmente de arriba a abajo del icono.

Para cambiar un color de fondo o una imagen en en estas secciones, sigue estos pasos …

  • Haz clic en el botón de sección o columna.
  • Mira en el lado izquierdo de la pantalla de Elementor.
  • La barra superior roja dirá Editar sección o Editar columna, dependiendo de si estás editando una sección, que es una fila completa. O estás editando una columna dentro de una fila.
  • Justo debajo de la barra roja que dice Editar sección o Editar columna, haz clic en la pestaña Estilo. La pestaña Estilo es la segunda de las tres pestañas.

Si la sección o columna tiene una imagen de fondo, la imagen será visible en la barra lateral. Haz clic en la imagen para reemplazarla.

Si la sección o columna tiene un color de fondo, la muestra de color será visible en la barra lateral. Haz clic en la muestra de color para elegir un nuevo color de fondo.

Si, al hacer clic en la pestaña de estilo, todos los cuadros de diálogo están contraídos o cerrados …

  • Haz clic en la pestaña Fondo para expandirlo.
  • En la sección Tipo de fondo, haz clic en el icono del pincel.
  • Luego haz clic en la imagen o muestra de color para reemplazarla con una imagen o color que elijas.

Añadir un Botón 

  • Selecciona “Botón” de la barra izquierda y arrastralo donde quieres que se visualice
  • Agrega un link 
  • Personalízalo

Cuando tengas todos tus cambios hechos, puedes darle al botón verde “ACTUALIZAR” para guardar todos tus cambios. 

¡Y esto es todo! así puedes crear fácilmente una página con Elementor. 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.