¿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;
}
Customiza tus widgets de Elementor de manera fácil
📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉
ThreeJS + Vanta.Fog: Animated Background
Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL.
Tensorflow videotracking V2
🧠TensorFlow.js, es como un cerebro de computadora que detecta objetos a tu alrededor 🕵️♂️.
Proyecto de Conversión de Texto a Voz (TTS) – Gratuito
Este proyecto ha sido creado como una herramienta accesible para cualquier persona que desee convertir texto en voz sin necesidad de utilizar servicios de pago. Lo ofrezco de manera gratuita como una forma de contribuir al acceso de tecnologías avanzadas para todos.
Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio
Encontrarás el código HTML completo para que puedas integrarlo fácilmente utilizando un widget de HTML en WordPress y Elementor.
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. ✨