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

SUSCRÍBETE A PUERTO53

Recibe un email periódico con los artículos más interesantes de Puerto53.com

Antes de suscribirte lee los términos y condiciones. Gracias.

Contenido Relacionado

Este es un blog de informática. ¿Qué necesita un informático?

Portátiles

Rebajas
Lenovo S145-15IIL - Ordenador portátil 15.6" FullHD (Intel Core i5-1035G1, 8GB RAM, 512GB...
  • Pantalla de 15.6" FullHD 1920x1080 pixeles 220nits Anti-glare
  • Procesador Intel Core I5-1035G1, QuadCore, 1.0-3.6GHz
  • Memoria RAM de 4GB Soldered + 4GB DIMM DDR4-2666
Lenovo S145-15AST - Ordenador portátil 15.6" FullHD (AMD A9-9425, 8GB de RAM, 512GB SSD,...
  • Pantalla de 15,6"fullhd 1920x1080 pixeles
  • Procesador amd a9-9425, dualcore 3.1ghz hasta 3.7ghz, 1m
  • Memoria ram de 8gddr4, 2133mhz
Rebajas
HP 15s-eq0004ns - Ordenador portátil de 15.6" HD (AMD Ryzen 3 3200U, 8 GB RAM, 256 GB,...
  • Procesador AMD Ryzen 3 3200U (2 núcleos, 5 MB de Caché, 2.6 GHz hasta 3.5 GHz)
  • Memoria RAM de 8 GB DDR4, 2400 MT/s
  • Disco SSD de 256 GB PCIe NVMe M.2
Rebajas
Lenovo S145-15AST- Ordenador portátil 15.6" FullHD (AMD A9-9425, 8GB RAM, 256GB SSD, AMD...
  • Pantalla de 15.6" FullHD 1920x1080 pixeles 220nits Anti-glare
  • Procesador AMD A9-9425, DualCore, 3.1GHz-3.7GHz
  • Memoria RAM de 8GB DIMM DDR4, 2133Mhz

Monitores PC

HP 22w - Monitor 21.5" (Full HD, 1920 x 1080 pixeles, tiempo de respuesta de 5 ms, 1 x...
  • Regálale a tu escritorio un toque de elegancia
  • Esta pantalla IPS de 53.61 cm (21,5 pulgadas) en diagonal dispone de 178 ángulos de visualización para ofrecer una experiencia de entretenimiento...
  • Con los puertos VGA y HDMI, esta pantalla hace que conectar tu ordenador portátil o pc de sobremesa sea una tarea sencilla y fluida
Rebajas
Samsung LC24F390FHU - Monitor para PC Desktop de 24'' (1920 x 1080 pixeles, Full HD, HD...
  • Pantalla de 24 pulgadas con una resolución de 1920 x 1080 píxeles
  • Brillo de pantalla: 250 cd / m²
  • Interfaz de montaje VESA 75 x 75 mm
Rebajas
BenQ GW2470HL - Monitor para PC Desktop de 23.8" Full HD (1920x1080, VA, 16:9, 2x HDMI,...
  • Los niveles ajustables de baja luz azul eliminan la luz azul peligrosa y mantienen la luz beneficiosa para una comodidad de visualización prolongada
  • Disfruta de gráficos nítidos con una resolución de 1920 x 1080
  • Minimiza las distracciones y crea una configuración de varios paneles con monitores de bisel estrecho

NAS

Rebajas
Western Digital My Cloud Home - Almacenamiento En Red NAS de 3 TB, 1 Bahía, Blanco y...
  • Configuración sencilla y rápida desde el teléfono
  • Acceso desde cualquier lugar con la aplicación para móviles o para ordenadores de My Cloud Home, o bien desde MyCloud.com
  • Copia de seguridad automática de las fotos y los vídeos del teléfono
Synology Diskstation DS218+ - Memoría externa DS218+ NAS 2bay
  • Procesador de doble núcleo con aceleración de cifrado AES-NI
  • No lleva disco
  • Admite la transcodificación 4K en tiempo real
Synology DS218J Diskstation
  • A versatile entry-level 2-bay NAS for home and personal cloud storage
  • Over 113 MB/s reading, 112 MB/s writing
  • Dual-core CPU with hardware encryption engine
Synology diskstation ds120j.
  • Almacenamiento de 1 bahía fácil de usar en una nube personal para usuarios de nas inexpertos
  • Rendimiento secuencial más de 112 mb/s de lectura, 106 mb/s de escritura
  • Plataforma para compartir archivos y sincronización entre dispositivos

Deja un comentario

About Author