Cómo crear una página web con WordPress y Elementor8 min de lectura

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on telegram
Telegram

En esta ocasión veremos de forma sencilla cómo elaborar una página web con WordPress y Elementor Pro que sea adaptable a los distintos dispositivos móviles.

Creación de Páginas Web

Trabajaremos con algunas plantillas del plugin Elementor Pro para la página web en sí y de Thrive Architect para estrategias de marketing, como páginas de captura de leads, páginas de gracias, páginas de ventas, etc.

Debemos tener instalados los plugins necesarios, el tema y el menú.

Si tienes dudas puedes revisar estos artículos:

Cómo instalar plugins de WordPress

Tema de WordPress: Cómo instalarlo y configurarlo

Entendiendo el menú de WordPress y sus funciones

Ahora debemos crear una configuración básica para que el WordPress entienda cuál es el Blog, el cual será el lugar donde ingresaremos las entradas o publicaciones informativas referentes a nuestra web, y la Página de Inicio que será una más estática donde estará toda la información de la marca, con recursos y diferentes automatizaciones para generar prospectos (leads).

Para crear una página web con WordPress y Elementor seguiremos los siguientes pasos:

Ajustes de lectura

Ingresa en el menú Ajustes de WordPress

Ajustes de lectura

Aquí debemos establecer la configuración que mostramos a continuación.

Colocamos la opción de una “Página estática” y abajo se nos activan los campos para elegir cuál será la Portada y la Página de Entradas (que ya sabemos que será el blog).

Ajustes de lectura 2

Hacemos clic en Guardar cambios y estamos listos para empezar a maquetar o crear la apariencia de la página.

Ajustes de lectura 3

Sección de Páginas

Ingresamos a la sección Páginas del menú principal y veremos que cada una tendrá asignada la Página de Inicio y la Página de Entradas.

paginas de wordpress

El siguiente paso es editar la página en la cual se va a trabajar, en este caso será la Página de Inicio.

pagina de wordpress

Estaremos dentro de la sección de edición que trae el WordPress.

editor paginas wordpress

Lo primero que tenemos que hacer es configurar los atributos de la página y colocarla en Elementor ancho completo y hacemos clic en Actualizar.

ajuste de páginas WordPress

Luego ingresamos en el botón que nos activa el Elementor, ubicado en la parte central superior de la pantalla.

editor de página web con WordPress y Elementor

Editar con Elementor

Ya estamos preparados para crear una página web con WordPress y Elementor.

Ahora podremos ingresar a la sección de edición de Elementor.

 página web con WordPress y Elementor 1

Para empezar a maquetar utilizaremos las plantillas que vienen cargadas en Elementor Pro presionando el siguiente botón.

 página web con WordPress y Elementor 2

Si no tienes Elementor Pro no tendrás acceso a las plantillas Premium, sólo a las básicas.

Se abrirá la siguiente pantalla.

plantillas  página web con WordPress y Elementor

Luego de seleccionar la plantilla que más se adapte a las características deseadas, aparecerá una vista previa para luego poder insertarla.

plantillas  página web con WordPress y Elementor 2

Presionamos Insertar para empezar a editarla.

plantillas  página web con WordPress y Elementor 3

Ahora tenemos la plantilla lista y podremos empezar a modificar las opciones pre cargadas.

plantillas  página web con WordPress y Elementor 4

Iniciaremos cambiando los títulos y textos, cuando los seleccionamos se nos cambia el menú del lado izquierdo con los atributos que podemos modificar en cada elemento.  

edición texto  página web con WordPress y Elementor

Ya podemos colocar el título que deseamos. Cada cambio que realizamos lo vemos en tiempo real.

Editar cabecera elementor
título  página web con WordPress y Elementor

Si presionamos el botón de Estilo, ubicado en la parte superior del menú izquierdo, nos mostrará más elementos del título que estamos editando, como tamaño de fuente, color, sombreado y mucho más.

editar encabezado elementor
título  página web con WordPress y Elementor 2
título  página web con WordPress y Elementor 3

Al seleccionar el texto, los procedimientos son muy parecidos solo que este tiene algunas opciones distintas que ayudan a mejorar los párrafos, como la tipografía, bordes, alineación, entre otras.

Otro de los elementos que podemos modificar en esta plantilla es el video. Al seleccionarlo, se activa el menú del lado izquierdo y presionando el botón derecho del mouse nos sale un menú donde debemos hacer clic en Editar sección.

Texto  página web con WordPress y Elementor  3

Podremos ver el origen del video, también podemos colocar un link y todas las características necesarias para optimizarlo.

Texto  página web con WordPress y Elementor  4

Método Mobile First

Este método parte de diseñar la web a partir de la vista del móvil, haciéndola más simple y adaptable a los dispositivos, pensando en que la mayor cantidad de personas que verán la web será por medio de estos equipos móviles.

El valor agregado de esta metodología es trabajar bajo lo simple, colocando elementos que hagan nuestra lectura y captación de imágenes más atractiva para los usuarios de dispositivos móviles.

Otro punto importante es que Google siempre evalúa la adaptabilidad de nuestra web, esto ayuda a tener un mejor posicionamiento.

Para realizar estas revisiones en Elementor, nos vamos al menú de la parte inferior izquierda y buscamos el siguiente ícono.

vista movil página web con WordPress y Elementor

Se desplegará el siguiente menú.

vista móvil página web con WordPress y Elementor  2

Y podremos ver la web de esta forma:

vista móvil página web con WordPress y Elementor  3

Así podremos cerciorarnos de que se vea bien en dispositivos móviles.

Otra herramienta importante es el historial, que nos permitirá regresar algunos pasos atrás por si queremos volver a como estaba anteriormente. Existe una cantidad limitada de pasos a regresar.

historial elementor

Así se vería el menú:

menú historial

Agregando imágenes

Si tenemos una sección en la que trabajaremos con imágenes, tenemos que agregarlas desde nuestra PC.

Buscamos la sección donde colocaremos la imagen, en este caso la trabajaremos como imagen de fondo.

agregar imágenes  página web con WordPress y Elementor

Haremos clic en el menú del lado izquierdo a la imagen que tenemos actualmente y nos saldrá la pantalla a continuación.  

Biblioteca worpdress

Iremos a la pestaña de Subir archivo.

Biblioteca worpdress  2

Presionamos el botón Seleccionar archivos.

Biblioteca worpdress  3

Seleccionamos el archivo y hacemos clic en Abrir.

Biblioteca worpdress  4

La imagen se cargará y estará disponible en Medios.

Biblioteca worpdress 5

Luego presionamos en Insertar medio.

Biblioteca worpdress 6

La imagen estará en la web y aparecerá en el menú del lado izquierdo para seguir editándola.

menú imagen elementor

Luego, para darle un efecto de color podemos hacer clic en Capa de fondo y elegiremos el color.  

color página web con WordPress y Elementor

Una vez cambiado el color, podremos verlo en la web.

También podríamos verificar la sección de ajustes Avanzados, donde tendremos los estilos de márgenes, tamaño de la sección, adaptabilidad y otros.

color página web con WordPress y Elementor 2

Para ver cómo va quedando podremos hacer clic en la flecha que tiene en uno de sus costados el menú de la izquierda.

flecha elementor

Nos mostrará la web sin el menú, para que podamos ver cómo los usuarios verán la web cuando ingresen.

flecha menú elementor

Cuando queramos agregar una sección manualmente o eliminarla, tendremos que irnos a la mitad de cada sección y se activará una barra.

Secciones en Elementor

Aquí podremos agregar o eliminar la sección.

eliminar sección  página web con WordPress y Elementor

Cuando agregamos una sección nos aparece la siguiente pantalla:

agregar sección  página web con WordPress y Elementor

Presionamos el botón con el símbolo “+”.

agregar sección  página web con WordPress y Elementor 2

Se nos desplegará una sección donde nos preguntarán la cantidad de columnas que vamos agregar.

agregar sección  página web con WordPress y Elementor 3

Allí podremos colocar cualquier elemento que se encuentra dentro del menú del lado izquierdo.

menú izquierda elementor

Reorganizando las columnas del Elementor

Si queremos cambiar la posición de una columna, simplemente tenemos que hacer clic sostenido y arrastrar a la posición donde va a ir el elemento.

Primero cambiamos la imagen que tenemos del lado derecho.

columnas  página web con WordPress y Elementor

Luego hacemos clic sostenido.

columnas  página web con WordPress y Elementor  2

Y la arrastramos hacia el lado izquierdo.

columnas  página web con WordPress y Elementor  3

Agregando íconos de redes sociales

Agregar los íconos de las redes sociales es tan fácil como buscar el ícono, agregar el link de la dirección en Internet y personalizar con el orden, tamaño y color.

íconos redes sociales elementor

También puedes personalizar secciones con íconos de distintas imágenes, variando el tamaño, color y posición.

íconos  menú lementor

Todas estas secciones son editables, si deseas agregar otra plantilla con otras secciones y nuevas características, también puedes hacerlo.

Todo se puede personalizar.

Maquetando el formulario de contacto

Ahora crearemos la sección de Contacto o un formulario.

Cuando activamos el plugin ya lo configuramos, solo nos toca agregarlo y darle las características visuales.

Ya tenemos la sección vacía donde lo vamos a colocar y será del lado derecho de la página.

formulario de contacto elementor

Buscaremos la herramienta EA contact Form 7, esta sólo se activa si tenemos instalado el plugin.

EA contact Form 7

Buscamos el ícono correspondiente y presionamos y arrastramos hasta el espacio vacío.

EA contact Form 7 elementor

Seleccionamos en el menú del lado izquierdo la opción Formulario de contacto 1.

formulario de contacto elementor 2

Verificamos cómo se vería en modo móvil, notamos que las medidas no son correctas y las ajustamos en el menú de estilos logrando que tenga la apariencia indicada.  

menú móvil formulario de contactos
menú móvil formulario de contactos 2

Salir de Elementor y Guardar

Al finalizar los ajustes tenemos que hacer clic en Actualizar para guardar los cambios.

menú actualizar  elementor

Para regresar al escritorio de WordPress tendremos que hacer clic en las tres líneas del menú superior izquierdo.

menú elementor superior

Aparecerá  el siguiente submenú y podremos Salir al escritorio.

salir al escritorio elementor y wordpress

Ya hemos aprendido cómo realizar una página web con WordPress y Elementor.

También conocemos las bondades que nos brinda esta herramienta como:

  • La facilidad de construir una página web.
  • Editar con solo arrastrar y soltar elementos.
  • Ajustar la página a dispositivos móviles.
  • No tienes necesidad de programar.

Todas estas opciones hacen que crear una página web sea realmente fácil, ahora solo queda que lo pongas en práctica y diseñes la web a tu gusto.

Para finalizar, nos gustaría que conozcas Sistemapress y compruebes las miles de ventajas que tiene para la creación de páginas web.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on telegram
Telegram

Dejar un comentario

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

1
Hola ,
¿En que podemos ayudarte?
Haz clic en el botón de Whatsapp para enviar un mensaje.
Powered by
Ir arriba