Guía de Elementor – Diseño Visual de páginas WEBs hechas con WordPress

Elementor es el plugin de WordPress más completo con el que he trabajado para el diseño visual de páginas de WordPress.

Y no sólo es que esté bien pensado para dar un toque artístico y profesional a nuestras páginas, si no que se lleva muy bien con el plugin Advanced Custom Fields para insertar campos variables en una plantilla como, por ejemplo, la marca de un producto o cualquier otra característica de la ficha de un nicho para el que nos estemos enfocados

¿Creación de Plantillas?

La creación de una plantilla es una de las opciones más potentes que tiene Elementor.

Podemos crear distintos tipos de plantillas, por ejemplo, una para la cabecera de todas las URLs, otra plantilla distinta para las entradas o, incluso, otra más para una determinada categoría de WordPress. Son sólo algunas ideas. Veamos cómo funciona:

  • Vamos al menú de WordPress Plantillas –> Añadir nueva
Crear nueva plantilla de Elementor
  • Insertamos una imagen, un menú, un título… Cualquier componente de Elementor o estándar de WordPress que deseelos y desde el menú Publicar o Actualizar la guardamos como plantilla y configuramos las condiciones en las que se mostrará (todas las páginas, en una categoría, etc.).
Guardar Plantilla de WordPress con Elementor
  • Iremos al menú Display Conditions para elegir en qué condiciones se mostrará la plantilla. Para este ejemplo, decidimos que la plantilla se mostrará en todas las páginas excepto en la portada, porque la portada tendrá otro diseño diferente.
Elegir las condiciones en que se mostrara la plantilla de Elementor

Ajuste del diseño para PC, Tablet o Móvil

Como una página WEB se puede visualizar en diferentes tamaños de pantalla, deberemos ajustar su diseño para se vea correctamente, tanto en un monitor de ordenador, una tablet o un smartphone.

Para ello, Elementor dispone de tres botones de diseño específicos para tal ajuste:

Elementor - Ajuste del diseño a PC, Tablet o Smartphone

Insertar una Plantilla en una nueva página de Elementor

Si estamos diseñando una nueva página o, incluso, una nueva plantilla, de Elementor, podemos insertar una nueva plantilla que hayamos guardado previamente. Lo haremos, presionando al botón «Añadir plantilla» de la sección de diseño:

Insertar plantilla de Elementor

Diseñando páginas WEB con Elementor

En el menú que tenemos a la izquierda tenemos todos los componentes que podemos insertar para el diseño de la página WEB: estructuras de varias columnas, imágenes, menús, formularios de búsqueda, vídeos, botones, mapas de Google Maps, botones de redes sociales, iconos, listas, pestañas, ficheros de audio… Hay bastantes. Lo mejor es que lo exploréis vosotros mismos.

Menú de componentes para WordPress de Elementor

Para insertar cualquier componente en nuestra página de WordPress, lo único que tenemos que hacer es arrastrarlo con el ratón hacia la parte del diseño.

Diseño de páginas WEB con Elementor – Vídeo

Opciones de Configuración de cada Componente

Una vez que hayamos insertado un componente, lo podremos personalizar desde el menú de la izquierda. Todos los componentes tienen tres opciones de configuración, que pueden variar según el tipo de componente pero, básicamente, son las siguientes:

  • Contenido: Es, precisamente, el contenido que se va a mostrar en Worpres (un texto, una imágen, etc.).
  • Estilo: Podemos personalizar el diseño del componente. Por ejemplo, en el caso de un texto, el color o el tipo de letra, entre otras características.
  • Avanzado: Aquí encontramos otras opciones relacionadas con el diseño como, por ejemplo, el margen interior o exterior, efectos de movimiento, o insertar un CSS personalizado.
Configuracion de componentes de Elementor
Ejemplo de configuración del componente Encabezado de Elementor

Insertar Campos Personalizados de Advanced Custom Fields en Elementor

Algunos valores de los componentes de Elementor se puede personalizar con el valor que tenga una variable de Advanced Custom Fields. Por ejemplo, si tenemos entradas una WEB sobre abogados de Barcelona, un campo personalizado sería la dirección o el nombre del bufete.

En Elementor, a esto lo llaman valor dinámico y lo configuramos desde el botón «Dinámico» de cada componente:

Insertar valores dinamicos de Advanced Custom Fields (ADF) con Elementor

La configuración del resto de componentes de Elementor es muy parecida, ya que los creadores del plugin siempre siguen el mismo estándar para la comodidad de los usuarios.

Diseño de la sección

Si queremos ajustar el diseño de la sección que engloba a todos los componentes, por ejemplo, con una imagen de fondo, márgenes, colores, etc, haremos click en el botón superior que parece una rejilla para ver todas sus opciones de diseño:

Elementor - Boton de ajuste del diseño de la seccion

Este botón aparece al pasar el ratón por encima de cada sección, en la parte superior en el medio.

Plantilla para los Resultados de Búsqueda

Cuando creamos un formulario de búsqueda de contenido en nuestra WEB, es conveniente diseñar una plantilla específica de tipo archive para mostrarlos con un diseño acorde al resto de nuestra WEB. Para ello, Elementor tiene una solución:

  • Insertamos el componente «Archive Posts» en el lugar de la página donde queramos que se vean los resultados. Editamos el componente para personalizar su diseño (número de columnas, ubicación de las imágenes, color de fondo, etc.),
Resultados de busqueda con Elementor
  • En el menú de ajustes (la ruedecita con dientes inferior izquierda), indicamos que esta plantilla se utilizará en los resultado de las búsquedas:
Resultado de las busquedas con Elementor
  • Configuramos de la misma manera las conficiones de la plantilla, tal y como se comentaba anteriormente en este post:
Elementor - Condiciones de la plantilla para los reusltados de busqueda de contenido

Mostrar Listado de Artículos Filtrados por Categoría

En esta ocasión utilizaremos el componente «Posts» para insertar el listado de artículos que nos interese mostrar. Por ejemplo, listado de las entradas de los abogados de Barcelona (puede que en nuestro inventario tengamos los de todas las poblaciones de la provincia).

Elementor - Listado de posts por categoria

Donde vemos «Term» escribimos la palabra clave que queremos encontrar, como el nombre de la categoría.

Creación de Popups

Con Elementor también podemos crear Popups. Verás que se crean igual que cualquier otra plantilla o diseño pero con la diferencia de que podemos configurar eventos para elegir cuando queremos que aparezca el popup.

Por ejemplo, al intentar cerrar la página WEB, ocuando haya pasado un tiempo prudencial, si detectamos inactividad en la sesión, al hacer scroll, etc.

Creación de Popups con Elementor

¿Te ha gustado? ¡Compártelo!

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Deja un comentario

Tal vez también te gustaría leer...

LiteSpeed Cache – Optimizar el RENDIMIENTO de WORDPRESS

LiteSpeed Cache es un plugin de WordPress que sirve para acelerar la velocidad de carga de una página WEB construida con este popular CMS, algo imprescindible para que Google y el resto de buscadores puntúen mejor tu página WEB y se posicione mejor en los resultados de las búsquedas para recibir más visitas. Rebajas HP

Leer más »

Redirección de URLs en WordPress con el plugin Redirection

Es frecuente en WordPress unificar artículos o moverlos a otro dominio con una URL distinta y necesitamos redirigir la antigua URL a la nueva para no perder la fuerza de posicionamiento WEB adquirida y para que los usuarios sigan llegando si acceden a la URL antigua por medio de algún enlace en alguna página WEB

Leer más »

Tutorial de WordPress para configurarlo correctamente

¿Qué es WordPress? WordPress es el gestor de contenidos más utilizado del mundo para crear páginas WEB. En WordPress.com puedes crear un blog sin tener que contratar un hosting, mientras que WordPress.org distribuye libremente el código fuente para que podamos personalizarlo como queramos. Eso sí, tendremos que contratar un hosting pero seremos totalmente libres de

Leer más »

Navegación por Clusters en WordPress con WP Show Posts

Una de las maneras de mejorar el tráfico interno de nuestra página WEB y mejorar la navegabilidad para los usuarios, es incorporando enlaces internos dentro de las URLs que están relacionadas con la misma temática y aportan valor al usuario. La manera más vistosa de hacerlo y que suelo utilizar para las páginas principales de

Leer más »

Análisis del Hosting de WordPress de Sered.net

Desde hace mucho tiempo que estoy usando la infraestructura de Amazon AWS para alojar Puerto53.com y me ha venido muy bien para aprender cómo funciona la plataforma y certificarme como arquitecto de AWS. Pero he decidido que ha llegado la hora de hacer un cambio de proveedor de WordPress y sered.net ha sido el elegido.

Leer más »