Icono del sitio Karok Seo Web Master

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

Tabla de contenidos

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, entre otros muchos, para insertar campos con 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 enfocando.

DESCARGA ELEMENTOR DESDE ESTE ENLACE.

¿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:

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:

DESCARGA ELEMENTOR DESDE ESTE ENLACE.

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:

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.

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.

[embedded content][embedded content]

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:

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:

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:

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

Ocultar un elemento en móvil o tablet

Todos los elementos que vamos arrastrando a la ventana de diseño, podemos decidir si los queremos mostrar en cualquier dispositivo o los queremos ocultar en escritorio, móvil o tablet.

Esta configuración la realizaremos dentro de la pestaña «avanzado» de cada uno de los componentes y luego nos dirigiremos a «Adapatabilidad» para seleccionar la configuración de visualización.

DESCARGA ELEMENTOR DESDE ESTE ENLACE.

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:

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).

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

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.

Utilizar una plantilla de Elementor en un Widget

Una vez que ya tenemos nuestra plantilla diseñada, podemos insertarla como si fuese cualquier otro Widget.

Para ello, iremos a la página de administración de WordPress, menú Apariencia –> Widgets. Luego buscamos «Elementor Library» para insertar la plantilla en la zona de la página que nos interesa y buscamos el nombre de nuestra plantilla.

Creo que lo veremos mejor con una imagen:

DESCARGA ELEMENTOR DESDE ESTE ENLACE.

Salir de la versión móvil