¿Cómo tuneamos nuestros widgets de elementor?
Lista de los widgets que ofrece Elementor PRO:
- Posts (Entradas): Muestra una lista personalizada de entradas de blog con opciones avanzadas de diseño y filtrado.
- Portfolio: Presenta tus proyectos en un diseño de cuadrícula o mampostería con opciones de filtrado.
- Gallery (Galería): Crea galerías de imágenes con estilos y efectos personalizados.
- Form (Formulario): Añade formularios de contacto totalmente personalizables con integraciones a servicios de terceros.
- Login (Inicio de Sesión): Inserta un formulario de inicio de sesión personalizado en tu página.
- Slides (Diapositivas): Crea diapositivas y carruseles con animaciones y efectos avanzados.
- Animated Headline (Título Animado): Añade títulos con animaciones dinámicas para captar la atención del visitante.
- Price List (Lista de Precios): Muestra una lista de precios o menús con estilos personalizables.
- Price Table (Tabla de Precios): Crea tablas de precios detalladas con características y comparaciones.
- Countdown (Cuenta Regresiva): Añade una cuenta regresiva para eventos, lanzamientos o promociones.
- Share Buttons (Botones para Compartir): Añade botones de compartir en redes sociales a tu contenido.
- Blockquote (Cita): Muestra citas estilizadas con opciones avanzadas de tipografía y diseño.
- Facebook Button (Botón de Facebook): Añade un botón de acción de Facebook a tu página.
- Facebook Comments (Comentarios de Facebook): Inserta una sección de comentarios de Facebook.
- Facebook Embed (Incrustar Facebook): Inserta publicaciones de Facebook directamente en tu página.
- Facebook Page (Página de Facebook): Muestra una vista previa interactiva de tu página de Facebook.
- Template (Plantilla): Inserta plantillas guardadas o secciones reutilizables.
- Woo Products (Productos de WooCommerce): Muestra productos de tu tienda con opciones avanzadas de diseño.
- Add to Cart (Añadir al Carrito): Inserta botones de añadir al carrito personalizados.
- Product Categories (Categorías de Productos): Muestra categorías de productos con opciones de diseño.
- Menu Cart (Carrito en Menú): Añade un icono de carrito en el menú de navegación.
- Product Breadcrumbs (Migas de Pan de Productos): Añade migas de pan para mejorar la navegación en productos.
- Custom Add to Cart (Añadir al Carrito Personalizado): Personaliza el botón de añadir al carrito con más opciones.
- Product Meta (Meta de Producto): Muestra información adicional del producto como SKU y categorías.
- Product Data Tabs (Pestañas de Datos de Producto): Personaliza las pestañas de descripción, información adicional y reseñas.
- Product Image (Imagen de Producto): Muestra la imagen destacada del producto.
- Product Rating (Valoración de Producto): Muestra la valoración media del producto.
- Product Stock (Stock de Producto): Indica la disponibilidad del producto.
- Product Related (Productos Relacionados): Muestra productos relacionados al actual.
- Product Upsells (Ventas Cruzadas de Producto): Muestra productos adicionales para aumentar las ventas.
- Checkout (Página de Pago): Personaliza la página de pago de WooCommerce.
- My Account (Mi Cuenta): Personaliza la página de cuenta de usuario.
- Nav Menu (Menú de Navegación): Crea menús de navegación personalizados con diseños avanzados.
- Media Carousel (Carrusel de Medios): Muestra imágenes o videos en un carrusel interactivo.
- Testimonial Carousel (Carrusel de Testimonios): Presenta testimonios de clientes en un carrusel estilizado.
- Flip Box: Crea cajas con efecto de voltear para mostrar contenido adicional al pasar el cursor.
- Call to Action (Llamada a la Acción): Diseña secciones que invitan al usuario a realizar una acción específica.
- Menu Anchor (Ancla de Menú): Añade anclas para permitir la navegación interna en una página.
- Sidebar (Barra Lateral): Inserta barras laterales personalizadas en tu diseño.
- Google Maps: Añade mapas de Google con opciones de estilo y ubicación personalizadas.
- Lottie Animations: Inserta animaciones Lottie para enriquecer tu contenido visualmente.
- PayPal Button (Botón de PayPal): Añade botones de pago de PayPal directamente en tu página.
- Site Logo (Logo del Sitio): Muestra el logo de tu sitio con opciones de estilo.
- Site Title (Título del Sitio): Inserta el título de tu sitio con opciones de tipografía.
- Page Title (Título de la Página): Muestra el título de la página actual.
- Post Title (Título de la Entrada): Muestra el título de la entrada o artículo.
- Post Excerpt (Extracto de la Entrada): Muestra un extracto de la entrada.
- Post Content (Contenido de la Entrada): Inserta el contenido completo de la entrada.
- Post Info (Información de la Entrada): Muestra metadatos de la entrada como autor, fecha y categorías.
- Post Navigation (Navegación de Entradas): Añade navegación entre entradas anteriores y siguientes.
- Author Box (Caja del Autor): Muestra información del autor de la entrada.
- Sitemap (Mapa del Sitio): Genera un mapa del sitio para facilitar la navegación.
- Search Form (Formulario de Búsqueda): Añade un formulario de búsqueda personalizado.
- Breadcrumbs (Migas de Pan): Añade migas de pan para mejorar la navegación del sitio.
- Site Menu (Menú del Sitio): Inserta un menú de sitio con opciones avanzadas de personalización.
- Reading Progress (Progreso de Lectura): Muestra una barra de progreso mientras el usuario se desplaza por la página.
- Hotspot (Punto de Interés): Añade puntos interactivos sobre imágenes.
- Gallery Carousel (Carrusel de Galería): Muestra galerías en formato de carrusel.
- Reviews (Reseñas): Presenta reseñas y valoraciones de productos o servicios.
- 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;
}
Módulo 1: Fundamentos Avanzados de UI
Comprender y aplicar principios de diseño
Image Accordion Slider with CSS and JS
🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥
¿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.
Creando partículas controladas por audio en Three.js
👉 Con tecnología de Three.js y Web Audio API, ahora el sonido no solo se escucha,
¡se ve en tiempo real! 💻🎶
Looping words with GSAP
CodePen
Looping words with GSAP
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.
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-
List Item #1
-
List Item #2
-
List Item #3
Mantente atento a mis próximas publicaciones donde compartiré más widgets personalizados y trucos para optimizar tus diseños web. ✨