¿Cómo tuneamos nuestros widgets de elementor?

Lista de los widgets que ofrece Elementor PRO:

  1. Posts (Entradas): Muestra una lista personalizada de entradas de blog con opciones avanzadas de diseño y filtrado.
  2. Portfolio: Presenta tus proyectos en un diseño de cuadrícula o mampostería con opciones de filtrado.
  3. Gallery (Galería): Crea galerías de imágenes con estilos y efectos personalizados.
  4. Form (Formulario): Añade formularios de contacto totalmente personalizables con integraciones a servicios de terceros.
  5. Login (Inicio de Sesión): Inserta un formulario de inicio de sesión personalizado en tu página.
  6. Slides (Diapositivas): Crea diapositivas y carruseles con animaciones y efectos avanzados.
  7. Animated Headline (Título Animado): Añade títulos con animaciones dinámicas para captar la atención del visitante.
  8. Price List (Lista de Precios): Muestra una lista de precios o menús con estilos personalizables.
  9. Price Table (Tabla de Precios): Crea tablas de precios detalladas con características y comparaciones.
  10. Countdown (Cuenta Regresiva): Añade una cuenta regresiva para eventos, lanzamientos o promociones.
  11. Share Buttons (Botones para Compartir): Añade botones de compartir en redes sociales a tu contenido.
  12. Blockquote (Cita): Muestra citas estilizadas con opciones avanzadas de tipografía y diseño.
  13. Facebook Button (Botón de Facebook): Añade un botón de acción de Facebook a tu página.
  14. Facebook Comments (Comentarios de Facebook): Inserta una sección de comentarios de Facebook.
  15. Facebook Embed (Incrustar Facebook): Inserta publicaciones de Facebook directamente en tu página.
  16. Facebook Page (Página de Facebook): Muestra una vista previa interactiva de tu página de Facebook.
  17. Template (Plantilla): Inserta plantillas guardadas o secciones reutilizables.
  18. Woo Products (Productos de WooCommerce): Muestra productos de tu tienda con opciones avanzadas de diseño.
  19. Add to Cart (Añadir al Carrito): Inserta botones de añadir al carrito personalizados.
  20. Product Categories (Categorías de Productos): Muestra categorías de productos con opciones de diseño.
  21. Menu Cart (Carrito en Menú): Añade un icono de carrito en el menú de navegación.
  22. Product Breadcrumbs (Migas de Pan de Productos): Añade migas de pan para mejorar la navegación en productos.
  23. Custom Add to Cart (Añadir al Carrito Personalizado): Personaliza el botón de añadir al carrito con más opciones.
  24. Product Meta (Meta de Producto): Muestra información adicional del producto como SKU y categorías.
  25. Product Data Tabs (Pestañas de Datos de Producto): Personaliza las pestañas de descripción, información adicional y reseñas.
  26. Product Image (Imagen de Producto): Muestra la imagen destacada del producto.
  27. Product Rating (Valoración de Producto): Muestra la valoración media del producto.
  28. Product Stock (Stock de Producto): Indica la disponibilidad del producto.
  29. Product Related (Productos Relacionados): Muestra productos relacionados al actual.
  30. Product Upsells (Ventas Cruzadas de Producto): Muestra productos adicionales para aumentar las ventas.
  31. Checkout (Página de Pago): Personaliza la página de pago de WooCommerce.
  32. My Account (Mi Cuenta): Personaliza la página de cuenta de usuario.
  33. Nav Menu (Menú de Navegación): Crea menús de navegación personalizados con diseños avanzados.
  34. Media Carousel (Carrusel de Medios): Muestra imágenes o videos en un carrusel interactivo.
  35. Testimonial Carousel (Carrusel de Testimonios): Presenta testimonios de clientes en un carrusel estilizado.
  36. Flip Box: Crea cajas con efecto de voltear para mostrar contenido adicional al pasar el cursor.
  37. Call to Action (Llamada a la Acción): Diseña secciones que invitan al usuario a realizar una acción específica.
  38. Menu Anchor (Ancla de Menú): Añade anclas para permitir la navegación interna en una página.
  39. Sidebar (Barra Lateral): Inserta barras laterales personalizadas en tu diseño.
  40. Google Maps: Añade mapas de Google con opciones de estilo y ubicación personalizadas.
  41. Lottie Animations: Inserta animaciones Lottie para enriquecer tu contenido visualmente.
  42. PayPal Button (Botón de PayPal): Añade botones de pago de PayPal directamente en tu página.
  43. Site Logo (Logo del Sitio): Muestra el logo de tu sitio con opciones de estilo.
  44. Site Title (Título del Sitio): Inserta el título de tu sitio con opciones de tipografía.
  45. Page Title (Título de la Página): Muestra el título de la página actual.
  46. Post Title (Título de la Entrada): Muestra el título de la entrada o artículo.
  47. Post Excerpt (Extracto de la Entrada): Muestra un extracto de la entrada.
  48. Post Content (Contenido de la Entrada): Inserta el contenido completo de la entrada.
  49. Post Info (Información de la Entrada): Muestra metadatos de la entrada como autor, fecha y categorías.
  50. Post Navigation (Navegación de Entradas): Añade navegación entre entradas anteriores y siguientes.
  51. Author Box (Caja del Autor): Muestra información del autor de la entrada.
  52. Sitemap (Mapa del Sitio): Genera un mapa del sitio para facilitar la navegación.
  53. Search Form (Formulario de Búsqueda): Añade un formulario de búsqueda personalizado.
  54. Breadcrumbs (Migas de Pan): Añade migas de pan para mejorar la navegación del sitio.
  55. Site Menu (Menú del Sitio): Inserta un menú de sitio con opciones avanzadas de personalización.
  56. Reading Progress (Progreso de Lectura): Muestra una barra de progreso mientras el usuario se desplaza por la página.
  57. Hotspot (Punto de Interés): Añade puntos interactivos sobre imágenes.
  58. Gallery Carousel (Carrusel de Galería): Muestra galerías en formato de carrusel.
  59. Reviews (Reseñas): Presenta reseñas y valoraciones de productos o servicios.
  60. Formación de Reseñas de Facebook: Muestra reseñas de Facebook en tu sitio.

Estos widgets adicionales te permiten personalizar casi cualquier aspecto de tu sitio web con funciones avanzadas y estilos personalizados.

A continuación modificaremos la apariencia de nuestros widgets insertando un poco de CSS

1. Widget: Posts (Entradas)

Objetivo: Personalizar la apariencia de las entradas de blog.

CSS:

				
					/* Cambiar el estilo del título de las entradas */
.elementor-widget-posts .elementor-post__title {
  font-size: 24px;
  color: #e74c3c;
  font-family: 'Roboto', sans-serif;
}

/* Añadir borde y sombra a las tarjetas de las entradas */
.elementor-widget-posts .elementor-post {
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Estilizar los botones de "Leer más" */
.elementor-widget-posts .elementor-post__read-more {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
}

.elementor-widget-posts .elementor-post__read-more:hover {
  background-color: #2980b9;
}

				
			
view transitions

¿Qué es View Transitions?

View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.

Read More »

WordPress con React y Gutenberg

Crear una landing page con React y Gutenberg en WordPress es una combinación poderosa para lograr una experiencia de usuario moderna y un control total sobre el desarrollo.

Read More »

5. Widget: Price Table (Tabla de Precios)

Objetivo:

Cambiar el estilo de las tablas de precios.

CSS:

				
					/* Cambiar el estilo del título de las entradas */
.elementor-widget-posts .elementor-post__title {
  font-size: 24px;
  color: #e74c3c;
  font-family: 'Roboto', sans-serif;
}

/* Añadir borde y sombra a las tarjetas de las entradas */
.elementor-widget-posts .elementor-post {
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Estilizar los botones de "Leer más" */
.elementor-widget-posts .elementor-post__read-more {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
}

.elementor-widget-posts .elementor-post__read-more:hover {
  background-color: #2980b9;
}

				
			

Enter your title

Enter your description
$ 39
99
Monthly
  • List Item #1
  • List Item #2
  • List Item #3
Popular

Mantente atento a mis próximas publicaciones donde compartiré más widgets personalizados y trucos para optimizar tus diseños web. ✨