Cómo diseñar páginas web con Elementor en wordpress

Tutorial completo de elemento page builder; ahora aprenderemos a diseñar una página web con el plugin Elementor Page Builder en WordPress, un potente y fantástico complemento que está conquistando a miles de usuarios que usan WordPress para crear y maquetar sitios web.

Introducción

Elementor es un plugin que nos permite diseñar páginas web atractivas, llenas de encanto y color. Habrás notado que hasta ahora el editor de bloques para crear los contenidos de las páginas y entradas, es algo limitada para conseguir diseños atractivos, más allá de colocar ciertos estilos, no nos permite mayor libertad, esto tiene sus cosas positivas como algunas desventajas.

Lo cierto es que antes del editor de bloques con el que WordPress cuenta por defecto hoy en día, la libertad de diseño incluso era más limitada.

Pero esto es fácil de solucionar, existen muchos plugins destinados al diseño o maquetado web y en esta lección emplearemos uno de  ellos, se trata de Elementor page builder.

La forma de trabajar con Elementor es muy simple, simplemente tenemos que arrastrar y soltar los elementos dentro de la posición que deseamos y editar sus propiedades de manera muy sencilla. Ya lo verás, te va a encantar.

Elementor es un plugin que tiene una versión gratuita y otra de pago, en esta lección emplearemos la versión gratuita, es genial y suficiente para realizar las cosas que deseamos por ahora. Si te gusta y deseas ver sus opciones más avanzadas puedes revisar la versión de pago. Ahora vayamos a lo nuestro.

Instalando Elementor

Procedamos a instalar y activar el plugin Elementor, ya sabemos cómo, vamos a la opción añadir nuevo dentro de plugins o complementos, y buscamos Elementor. Una vez encontrado instalamos y activamos:

Una vez activado tenemos una nueva opción en la barra lateral para configurar Elementor, desde allí podemos ajustar varias opciones, pero lo que nos interesa ahora es que nos permita diseñar con Elementor los tipos de contenido que nos interesa.

Para ello damos clic en la Opción Elementor de la barra lateral, seremos dirigidos a una ventana como esta:

En la pestaña general asegúrate que en Tipos de contenido estén marcadas las páginas y entradas, si trabajas con otros tipos de contenidos también puedes agregar desde aquí.  Guardamos los cambios y listo, ahora ya podemos empezar a trabajar con Elementor.

Crear una página con Elementor en WordPress

Para conocer Elementor en acción crearemos una página como siempre lo hacemos, para ello nos dirigimos a la opción páginas de la barra lateral y añadir nueva.

Ahora estaremos frente al típico editor de bloques, sin embargo en la parte superior tenemos el botón de: Editar con Elementor. En el campo de título pondremos el título que deseamos y seguidamente clic en el botón de: Editar con Elementor.

Seremos dirigidos a la fantástica ventana del constructor de páginas. Desde donde maquetaremos la página creada.

¡Urra, urra! Esto es genial, ya estamos dentro del constructor de páginas de Elementor. Ahora nos toca conocerla y preparar la página para empezar a trabajar.

Barra vertical de widgets

En la parte izquierda, dentro de una barra lateral se encuentran los widgets disponibles, son elementos de diseño que podemos emplear cuando necesitemos; los más comunes son: Columnas, encabezados, imágenes, editor de texto, botón, video, espaciador, etc. etc. etc. realmente tenemos bastantes elementos.

Siempre podemos acceder a ello a través de del icono cuadriculado ubicado en parte superior derecha de la barra.

Por otro lado, esta barra también servirá para controlar las opciones que tenemos sobre los elementos, por lo tanto es bastante dinámica.

Más adelante aprenderemos a cómo usar, ahora continuemos conociendo la barra horizontal ubicada debajo.

Barra horizontal de ajustes

Debajo de la barra lateral tenemos una pequeña barra horizontal negruzca con varias opciones, la más destacada es la opción de publicar o actualizar según sea el caso (nueva o edición) Veamos qué podemos hacer con esta barra.

Las opciones que disponemos en la barra lateral son:

Ajustes

Con forma de rueda dentada, aquí encontraremos los ajustes generales de la página que estamos maquetando. Si damos clic en el icono, se despliega sobre ella los ajustes disponibles.

Desde esta opción podemos editar el título de la página, cambiar el estado: borrador, pendiente de revisión, privada o pública; podemos colocar una imagen destacada, también esconder o mostrar el título y finalmente elegir la estructura de página.

La estructura por defecto es tal como se encuentra la ventana de edición al principio; la opción Elementor canvas creará una página totalmente blanca para diseñar desde cero; Elementor ancho completo mantiene la cabecera y pie de página y crea un lienzo para diseñar. De acuerdo al tema que estés empleando verás que se muestra de una u otra manera. Deberás probar y experimentar para ver cuál es de tu preferencia. En nuestro caso emplearemos Elementor ancho completo.

Navigator

Desde esta opción podemos abrir el navegador de Elementor. En ella encontraremos prácticamente la estructura de nuestra página. Las secciones, columnas y elementos, esto nos permitirá navegar por los elementos y moverlas de manera rápida en caso estemos diseñando una página con muchos elementos y evitar confusiones.

Historial

Desde esta opción podemos ver todo el historial de modificaciones y revisiones que realicemos en la página que estamos diseñando, desde su creación hasta el momento en el que consultamos.

También disponemos de la pestaña de revisiones realizadas en caso quieras consultar.

Modo adaptable

Desde esta opción podemos ver cómo se ve nuestra página en diferentes dispositivos: escritorio, tableta y móvil. Veamos cómo se ve en móvil.

Es genial para asegurarnos de que nuestro diseño se adapte a los distintos tamaños de pantalla.

Previsualizar cambios

Con un icono en forma de ojo, desde esa opción podemos ver cómo queda nuestro diseño, si damos clic se abrirá una nueva ventana con el resultado de nuestro trabajo. Por ahora no tenemos aún nada. Sigamos.

Guardar opciones

Disponemos del botón verde con la opción de Publicar O actualizar, a lado tenemos un desplegable que contiene las opciones de: Guardar como borrador y guardar como plantilla.

Listo, hemos terminado con las opciones que debes conocer en la barra horizontal de ajustes de  la ventana de diseño de Elementor. Ahora pasaremos a conocer el espacio de diseño. Veamos.

El espacio de diseño de Elementor

El espacio de diseño es donde crearemos y maquetaremos la página, es ahí donde diseñaremos los elementos en tiempo real. En nuestro caso hemos elegido como estructura de página a Elementor ancho completo y es así como se muestra nuestro espacio de diseño.

Perfecto, ahora es momento de empezar a arrastrar los elementos necesarios de la barra lateral hacia la sección que tenemos en el espacio de diseño. Para ello vayamos a la barra de widgets o elementos disponibles (Desde el icono cuadriculas, en la esquina superior derecha de la barra de widgets).

Empezaremos arrastrando un elemento de encabezado y soltar en la primera sección.

Perfecto, ahora tenemos el primer elemento de encabezado, por otro lado tenemos las herramientas necesarias para editar dicho elemento en la barra lateral.

El ejemplo que acabamos de ver, es para que veas como es que trabaja Elementor dentro del espacio de diseño. Presta atención a lo siguiente:

En el espacio de diseño Elementor trabaja con secciones, dentro de cada sección se encuentran las columnas, y dentro de las columnas se encuentran los elementos o widgets de diseño.

Léelo de nuevo, esa es la base del maquetado con Elementor en WordPress. Cuando arrastramos un elemento a una sección, este viene encapsulado en una columna.

Ahora dentro de una sección se pueden colocar las columnas que desees uno al lado de otro, dentro de cada columna puedes colocar los widgets que desees uno debajo de otro.

Puedes ordenar todos los bloques arrastrando y soltando en la posición que desees. 

Opciones de sección, columnas y widgets en Elementor

Ahora cada elemento puede ser personalizado como queremos, una sección engloba a las columnas y las columnas engloban widgets. Cada sección puede ser personalizad como gustes, así como cada columna y widgets de manera independiente.

Secciones

Recuerda, una sección engloba ciertas columnas y widgets, dentro de una página puedes colocar las secciones que quieras. Puedes reconocer secciones, pues poseen borde celeste y tres opciones al medio de su borde superior.

Opciones de sección

Sobre cada sección tenemos tres opciones:

1. Añadir sección.- con un signo de +, permite agregar una nueva sección sobre dicha sección.
2. Editar sección.- si damos clic sobre dicha opción, aparecerá en la barra lateral llena de  opciones disponibles para personalizar dicha sección. En la pestaña de disposición podemos controlar: el ancho, espacio entre columnas, el alto, alineación de contenido, ver estructura, etc. Desde la pestaña estilo podemos controlar el fondo, poner colores, imágenes, degradados, poner bordes, etc. Desde la pestaña avanzada podemos controlar los márgenes, rellenos, animaciones, etc.
3. Borrar sección.- se presenta con un icono en forma de X, esto eliminará  la sección en cuestión.

Si damos clic derecho sobre la sección, también disponemos de varias opciones como: Editar, duplicar, copiar, borrar, etc.

Por otro lado, podemos explorar las opciones que tenemos en las pestañas disposición, estilo y avanzado que son similares a los de columna y lo explicamos a continuación.

Columnas

Las columnas se encuentran dentro de las secciones y las podemos diferenciar por el borde oscuro con estilo entrecortado que poseen. Para editar columna simplemente damos clic en el icono oscuro que se encuentra en su esquina superior izquierda.

También podemos acceder a otras opciones dando clic derecho sobre la columna o su icono negruzco.

Pestañas disponibles para columnas

En la barra lateral disponemos de tres pestañas para personalizar una columna.

• Disposición.- desde allí podemos controlar el ancho de columna, alineación vertical y horizontal, espacio entre widgets, etc.
• Estilo.- desde esta opción podemos controlar el fondo y borde de cada columna.
• Avanzado.- desde aquí podemos personalizar el: margen, relleno, efectos, la adaptabilidad, etc.

Si tenemos más de dos columnas en una sección uno al lado de otro, podemos controlar el ancho estirando o achicando desde sus bordes con el mouse.

Más adelante profundizaremos en las opciones de diseños que tenemos para los elementos. Por ahora solo los mencionamos.

Widgets

Disponemos de una variedad de widgets, estos son los elementos que empleamos para el diseño de la página web. Cada widgets es diferente y de acuerdo al tipo de widget que sea, dispondremos de herramientas de edición.

Por ejemplo un widget de tipo texto no es igual a un widget de imagen, cada uno tendrá opciones diferentes de personalización, aunque pueden tener algunos ajustes en común.

En nuestro caso tenemos insertada un widgets de encabezado, este es de tipo texto.

Pestañas disponibles para widgets

Los widgets al igual que las secciones y columnas, posee tres pestañas disponibles que nos permiten personalizarla, a continuación veremos de qué se trata:

• Contenido.- desde esta pestaña podemos editar el contenido del widgets, de acuerdo al tipo de widgets que estemos editando las opciones en esta pestaña serán variadas.
• Estilo.- Desde aquí podemos editar y personalizar el elemento, podemos definir una tipografía, colores, sombras, etc.
• Avanzado.-  en la pestaña avanzado disponemos de varias opciones de personalización, podemos controlar los márgenes, bordes, fondos, animaciones, etc.

Teniendo en claro estas premisas, ahora pasemos al maquetado de páginas web con Elementor en wordpress.

Cómo crear una página con Elementor WordPress

Ahora pasemos a la acción, crearemos nuestra primera sección y dentro de ella nuestras columnas y widgets.

Estructura del diseño

Para empezar a diseñar primero debemos crear una estructura, ya sea mentalmente, con una aplicación o en papel. Venga, para nuestro primer ejemplo asumiremos que somos una empresa de seguridad y vigilancia; para ello nuestra estructura será la siguiente:

• Título de la empresa
• Descripción breve
• Botón de llamado a la acción

Para ser nuestra primera vez, esto es suficiente. Ahora toca arrastrar los elementos necesarios para crear la primera sección, con la estructura que acabamos de diseñar.

Arrastrando y soltando elementos

Bien, ahora arrastremos un elemento de encabezado, debajo de ella un elemento de texto y debajo un Widget de Botón.

Observa, por ahora estamos trabajando con una sola sección, dentro de ella solo tenemos una columna y dentro de columna hemos agregado tres elementos o widgets: Encabezado, un editor de texto y un botón.

Listo, por ahora no se ve atractivo, pero espera, pronto le ponemos estilo y color, pero antes editaremos los textos para que nuestro ejemplo tenga sentido.

Editando el contenido

Para editar el contenido simplemente damos clic sobre cada widget y en la pestaña de contenido en la barra lateral podemos editar el contenido. También es posible hacerlo en el mismo elemento clicando sobre ella.

Editar encabezado

Damos clic sobre el elemento encabezado y editamos el texto, elegimos un tamaño y alineamos al medio.

Pestaña contenido

Aquí editamos el texto, tamaño, alineación, etc.

Pestaña estilo

Aquí editamos el estilo, color de texto, tipografía, sombra, etc.

Pestaña avanzado

En esta pestaña encontramos muchas opciones, prueba cada opción que desees, son muy simples de utilizar y muy intuitivos.

Editando la descripción

Clic sobre el editor de texto y editamos el contenido

Por otro lado iremos a la pestaña estilo y desde ella centraremos el contenido.

Oh no, mi descripción no se guardó, por ello es importante guardar los cambios siempre que vayamos avanzando. Por ahora lo dejamos así, pasemos a editar el botón.

Editando el botón de llamada a la acción

Ahora damos clic sobre el botón para editarla, cambiaremos el texto y centramos el botón.

Si es un botón, evidentemente tendrá un enlace que podemos ponerla si ya tenemos listo. Por ahora lo dejamos pendiente.

Si nos dirigimos a la pestaña de estilo del botón podremos personalizar colores, tipografía tamaño, bordes, etc. en este caso lo único que editamos solo para mostrar, será el radio de botón, lo pondremos a 30 para que sea redondeado.

Prueba a colocar un tipo de borde, rellenos, colores, etc. será muy divertido.

Bien, algo hemos mejorado, pero aún falta pulir, para ello personalizaremos la sección entera, para que quede realmente atractiva y bien trabajada.

Puliendo el diseño con Elementor

Colocaremos una imagen de fondo a toda la sección y luego pasaremos a oscurecerla para resaltar el texto y el botón, todo depende de nuestra creatividad, combinar textos, colores, imágenes sin que el resultado quede demasiado saturado. Veamos.

Editando la sección

Vamos a la opción de editar sección y en la pestaña disposición marcamos la opción de extender sección para que la sección cubra la pantalla de borde a borde en la posición en la que se encuentre. Por otro lado, en alineación vertical pondremos al medio para conseguir simetría atractiva.

Ahora, para poner una imagen de fondo, nos dirigimos a la pestaña de estilo de sección, desde ahí, en la opción tipo de fondo elegimos un fondo clásico (tiene un icono de pincel), también puedes elegir degradado, video, diapositivas.

Bien, se activarán las opciones de color e imagen, en nuestro caso clic sobre imagen.

Clic en el icono de mas (+)  o cuadro cris y se abrirá una ventana flotante, desde allí podemos subir una imagen desde nuestro ordenador o ir a la biblioteca de medios y elegir una imagen preparada. Cargaremos una imagen.

Para el ejemplo descargamos una imagen cualquiera y la cargamos, una vez cargada, clic sobre el botón insertar medio.

Listo ahora la imagen debería verse en el fondo de nuestra sección.

Ahora debemos personalizar todos los elementos, de tal manera que el resultado final sea atractivo. Seguimos editando la sección.

Personalizando imagen de fondo

En nuestro caso y a modo de ejemplo estableceremos Posición en centro centro, Adjunto fijo para que la imagen no se mueva, repetir en no repetir y tamaño en abarcar sección. Prueba con las demás opciones y elige el que gustes y el que mejor se ve.

Ahora pasemos a oscurecer la imagen desde la opción Capa de fondo. Elegimos el color deseado, en este caso negro y una opacidad de 0.7 (0 no tiene opacidad y 1 es totalmente oscuro)

Puedes ajustar más características para ir mejorando la apariencia. Agregar elementos, secciones, columnas e ir ajustando todo.

Ahora, mediante las herramientas que hemos conocido y la pestaña de edición, que mencionamos y vimos en qué consiste cada una; mejoraré drásticamente la apariencia de la sección que acabamos de crear.

Para ello agregaré espacios, personalizaré los colores, tipos de letra, el botón y todo lo necesario con las mismas opciones que conocimiento es esta lección. Veamos el resultado.

Resultado del diseño con Elementor

Hemos agregado elementos o widgets de espacio sobre el encabezado, debajo de la descripción y debajo del botón, los hemos personalizado para crear espacio.

El límite está en tu creatividad, puedes conseguir diseños realmente hermosos sin tanto esfuerzo, arrastrando y soltando elementos, dando clic sobre ello para editar y personalizar cada detalle del contenido.

Si publicamos y nos dirigimos a ver el resultado del trabajo que realizamos podremos ver:

Últimas recomendaciones para diseñar con Elementor en wordpress

Al parecer este tutorial se ha extendido bastante, pues Elemetor realmente posee una caja llena de herramientas y opciones para facilitar el diseño de páginas en Elementor.

Continuar explicando cada detalle, o quizá cada elemento y las posibilidades que tenemos en esta misma entrada, extenderían demasiado el contenido, pues las posibilidades son casi interminables. Cada widgets es un mundo lleno de posibilidades.

Crea una página de pruebas y empieza a jugar con cada elemento, con cada opción disponible que puedas encontrar y experimenta tú mismo como es que funcionan. Realmente son intuitivos y fáciles de usar.

Tutoriales en Video de Elementor

Si gustas puedes ver estos videos tutoriales para ver cómo se manejan los demás widgets disponibles.  Los videos corresponden a las versiones anteriores de Elementor sin embargo la forma de manejar los widgets y el diseño prácticamente son los mismos.

• Introducción e instalación de Elementor aquí.
• Cómo utilizar Elementor: aquí.

[popup_anything id=»4395″]