Las secciones del tema Divi permiten muchas personalizaciones pero por defecto una imagen está en una sección o en la siguiente, no hay manera de hacer que una imagen, por ejemplo el logo de tu empresa, flote entre medias de dos secciones. Pero se puede hacer de manera bastante sencilla.
Añadiendo una imagen flotante entre secciones de Divi
Vamos a ello, solo tienes que seguir los siguientes pasos:
1. Añade una nueva sección de ancho completo
Simplemente pulsa en el enlace para crear una sección estándar y eliges la fila de ancho completo.
2. Abre los ajustes de la sección y añade la siguiente clase CSS
En el menú de ajustes de la sección ve a la pestaña de CSS Personalizado y en el apartado Clase CSS escribe lo siguiente:
espacio-logo
Guarda los cambios de estos ajustes.
3. Pon el relleno personalizado a 0 en la sección y en la fila
Antes de seguir, tanto en los ajustes de la sección como de la fila pon a cero (0) el relleno personalizado superior y base.
Como siempre guarda los cambios.
4. Añade un módulo de texto
5. Añade tu imagen en el módulo de texto
Al elegir el módulo de texto se abre al instante. Cambia la Orientación del texto a Centro y añade en el editor la imagen que quieras que flote, mejor si es de fondo transparente claro.
6. Añade la clase CSS al módulo de texto
Sin salir del módulo de texto ve a la pestaña de CSS Personalizado y añade la siguiente clase CSS:
logo-entremedias
Ahora guarda los cambios.
7. Haz una copia de toda la sección
Para poder usarla en otras partes clona la sección recién creada.
8. Añade la clase CSS al módulo de texto clonado
Abre los ajustes del módulo de texto de la sección que acabas de clonar y en la pestaña de CSS Personalizado añade la siguiente clase CSS.
logo-secciones
La idea de esta nueva clase CSS en el módulo clonado es que luego haremos que sea un poco más pequeña que la principal, por eso se la cambiamos.
9. Mueve las secciones a su ubicación
Ahora moveremos las secciones creadas a las ubicaciones entre las que queramos que floten. La idea es que la primera sección creada (la original) esté bajo la cabecera, y la clonada entre el resto de secciones. También puedes hacer tantas copias como quieras de esta segunda sección y colocarlas entre cada dos secciones.
Nota importante: El fondo de las nuevas secciones debe ser el mismo que el de las secciones anterior y siguiente a donde las coloques para que el efecto sea perfecto.
10. La magia del CSS
Ya solo nos queda crear las clases CSS que anteriormente hemos nombrado, para ello ve a la administración de WordPress y en Divi -> Opciones del tema -> CSS Personalizado, añade lo siguiente:
/*------------------------------------------------*/ /*-------[Imagen flotante entre secciones]-------*/ /*------------------------------------------------*/ /* quitamos todos los padding de sección */ .espacio-logo { padding:0px; margin:0 0 -40px 0;} .espacio-logo .et_pb_row, .espacio-logo .et_pb_section { padding: 0px;} /* logo bajo la cabecera */ #logo-entremedias {padding: 0px; margin: 0px;} #logo-entremedias img {margin-top:-105px; width: 150px; z-index: 1; position: relative;} /* logo bajo secciones estandar */ #logo-secciones {padding: 0px; margin: 0px;} #logo-secciones img {margin-top: -55px; width: 100px; z-index: 1; position: relative;}
¡Ya está!
Guarda todos los cambios, actualiza tu página y comprueba que los logos recién creados flotan entre las secciones. El primero algo más grande que el resto.
Una de las herramientas de fidelización y marketing más potentes de toda tienda son los cupones de descuento, y esta funcionalidad, cómo no, viene integrada por defecto en WooCommerce.
Para crear un cupón de descuento en WooCommerce solo tienes que acceder al menú de administración WooCommerce -> Cupones.
Añadir un cupón descuento en WooCommerce
Una vez en esta pantalla solo tienes que pulsar el botón de Añadir cupón.
Una vez ahí lo primero es crear el código del cupón y una descripción, para que como administrador lo distingas rápidamente del resto, por ejemplo, "descuento del 10% sobre el total del carrito" o "descuento de 10 euros en el producto X"
A este respecto el código – o título – del cupón descuento solo debe seguir una regla, y es que WooCommerce no guarda mayúsculas, pero sí puede contener acentos y espacios, aunque mi consejo es que crees códigos simples y fáciles de recordar para los usuarios, como "descuentolectores" u "ofertablackfriday", por ejemplo, para evitarte llamadas por errores de tecleo.
Datos del cupón descuento en WooCommerce
El siguiente paso obligatorio antes de publicar el cupón es especificar los datos del cupón, para lo que tenemos 3 secciones:
General: Donde definiremos fundamentalmente el tipo de descuento, importe, fecha de caducidad del cupón (si procede) y algún detalle más.
Restricción de uso: En esta sección añadiremos parámetros de aplicación del cupón descuento, como a qué productos afecta, cuántas veces se puede utilizar, etc.
Límites de uso: El número de veces que se podrá usar el cupón.
Por su importancia vamos a ver cada una de las secciones.
Datos del cupón – General
Lo más importante y primero a decidir es el tipo de cupón descuento, pudiendo elegir entre las siguientes opciones:
Descuento en el carrito: Importe fijo de descuento sobre el total del carrito del cliente. Por ejemplo, 50 euros.
% de descuento en el carrito: Porcentaje de descuento sobre el total del carrito del cliente. Por ejemplo 15%
Descuento en el producto: Importe fijo de descuento sobre un producto, que deberemos especificar más adelante en la sección Restricción de uso.
% de descuento en el producto: Porcentaje de descuento sobre un producto, que deberemos especificar más adelante en la sección Restricción de uso.
A continuación está la decisión comercial más relevante: decidir el importe. Da igual si elegimos importe fijo de descuento o porcentaje, simplemente añadiremos la cantidad. Por ejemplo, si será importe fijo de descuento de 50 euros pondremos "50" y si va a ser un 20% de descuento escribimos "20"
Si activamos la siguiente casilla de "Permitir envío gratuito" añadirá al descuento el "regalo" del envío gratuito, si existe esta opción de envío en tus ajustes y, sobre todo, si quieres, además del descuento, dar esa posibilidad.
Para finalizar, podemos especificar una fecha de caducidad del cupón, seleccionando la fecha en la que dejará de estar activo.
En cualquier caso vamos a ver cada sección en detalle, y te recomiendo que siempre revises todos los datos del cupón, uno por uno, antes de publicarlo. Vamos a ver para qué sirve cada parte…
Datos del cupón – Restricción de uso
De especial importancia es revisar esta sección, pues hay muchos parámetros posibles que determinarán tanto la experiencia de usuario como lo que ingresemos finalmente, así como a qué afectará el cupón descuento.
Gasto mínimo: Si quieres que solo se aplique el cupón a partir de un importe neto máximo, impuestos incluidos, de compra. Simplemente introduce el número de gasto mínimo a partir del que se podrá usar el cupón.
Gasto máximo: No se suele usar mucho pero aquí defines un importe neto máximo, impuestos incluidos, de compra hasta el que se podrá usar el cupón. Si, por ejemplo, solo quieres que funcione hasta 2.000 euros o algo así. Ya te digo que tiene poco uso.
Uso individual: Muy importante. Si marcas esta casilla impides que se pueda usar el cupón descuento actual al mismo tiempo que otros cupones descuento. Salvo excepciones – bien meditadas – siempre suelo recomendar marcar esta casilla, no sea que termines regalando productos si algún usuario se pone a sumar cupones.
Excluir los artículos rebajados: Si quieres que el cupón no funcione con productos ya rebajados en los datos del producto activa esta casilla. Activar esta opción o no es una decisión comercial. En cualquier casi WooCommerce siempre avisa a la hora de añadir cupones descuento de sí se ha podido aplicar o no y el motivo, así que tus clientes siempre estarán informados.
Productos: Esta sección es un buscador de productos, como el que utilizas en los productos vinculados o cruzados al crear un artículo. Simplemente empieza a escribir el nombre de un producto y lo seleccionas. El cupón descuento solo se aplicará a los productos que elijas.
Productos excluidos: Esta otra sección es la inversa de la anterior. Aquí eliges sobre qué productos no tendrá efecto el cupón descuento. Sé consciente de que se aplicará el descuento a todos los productos excepto a estos, a todos. Y si no eliges ningún producto en el apartado anterior ni en este el descuento se aplicará a todos los productos de la tienda, así que no sigas adelante sin pensártelo bien.
Categorías de productos: Igual que el apartado Productos, pero en este caso si quieres aplicar el descuento a toda una categoría.
Excluir categorías: Lo mismo que en Productos excluidos, pero para categorías. De nuevo mucho ojo con estas decisiones.
Restricciones de correo electrónico: Esto se suele utilizar si quieres hacer ofertas a empleados o a clientes específicos, más para este último uso. De este modo puedes enviar sin miedo un cupón importante y que solo lo pueda usar el cliente registrado con la dirección de correo electrónico que aquí especifiques. Puedes incluir varios correos electrónicos separándolos por comas, por ejemplo: pepe@ayudawp.com,manolo@ayudawp.com.
Como habrás visto esta sección es muy importante, y debes comprender bien las decisiones que tomes en cada apartado o puedes terminar, o enviando cupones que nadie pueda usar, o por el contrario prácticamente regalando productos.
Datos del cupón – Límites de uso
En esta última sección, que también te recomiendo revisar siempre, puedes especificar cuántas veces se podrá usar el cupón descuento.
Por defecto está en uso ilimitado pero plantéate siempre si deberías limitar el uso al menos por usuario.
Simplemente pon una cantidad y, en la primera casilla será el número de veces total, independientemente del usuario, que se podrá usar el cupón.
Si, por el contrario, pones un límite de uso por usuario, normalmente 1, el cupón se podrá usar ilimitadamente siempre y cuando no sea el mismo cliente, lo que suele ser el uso más habitual también.
Así que una configuración tipo de esta sección sería:
Límite de uso por cupón: Uso ilimitado
Límite de uso por usuario: 1
Una vez tengas creados tus cupones ya se pueden usar tanto en el carrito como en la página de finalizar compra.
Y el cupón descuento se aplica al instante…
Como usar cupones descuento para aumentar las ventas
Y con esto ya has terminado de configurar tu cupón descuento en WooCommerce, ahora solo te queda publicarlo, y como todo tipo de contenido de WordPress, puedes incluso programar la fecha de publicación, ¿para qué?, te pongo un ejemplo:
Imagina que vas a lanzar una newsletter anunciando un gran descuento para suscriptores mediante un cupón descuento, que por supuesto pondrás en el mensaje, pero que solo se podrá usar a partir del día 1 de noviembre (por poner una fecha de ejemplo). Luego, si quieres, también puedes especificar en los datos del cupón una vigencia máxima, que también sería importante, muy importante, indicarlo en el mensaje que envíes.
Pues bien, puede generar un buen impacto comercial, casi ansiedad de compra, que los usuarios tengan que esperar unos días hasta poder usarlo, e incluso puedes animar a compartir en redes sociales el descuento y ser tendencia durante unos días, y encima luego conseguir más compras, con la expectación generada.
Podrías incluso no decir el importe final del descuento, con lo que el misterio sería mayor y posiblemente también el impacto. Lo que seguro que conseguirías sería mucho tráfico y posibles clientes realizando todo el proceso de compra para ver qué enorme descuento ofreces finalmente.
Pero ojo, esto puede ser un arma de doble filo. Asegúrate de que el descuento no sea decepcionante, o generarás antipatía hacia la marca y, de paso, un montón de carritos de compra abandonados por posibles clientes insatisfechos incluso antes de adquirir tus productos.
Por el contrario, si lo haces bien, tendrás un impulso de ventas y, en el peor de los casos, un montón de nuevos clientes registrados a los que enviar en el futuro ofertas.
Independientemente de la programación de publicación de tus cupones, el uso de descuentos siempre es una oportunidad comercial, pero solo si los anuncias, si tus futuros posibles clientes se enteran, así que toda creación de cupón debe ir acompañado de una estrategia de comunicación para que realmente sirva para incentivar las ventas.
Hay otro modo especial de usar cupones, curiosamente ocultándolos en vez de anunciándolos, pero eso es tarea que te dejo, a ver si encuentras el descuento especial para aventureros que ofrecemos en los servicios de Ayuda WordPress
No queda nada, este próximo 5 de noviembre, tendrá lugar en Colombia el primer WordCamp Medellín
Este WordCamp forma parte del programa de incubadoras de la Fundación WordPress, dedicado a estimular la creación y el fortalecimiento de la comunidad WordPress en diferentes lugares del mundo.
Como dice Jason, uno de los organizadores:
Desde que vivo en Medellín me he imaginado la oportunidad de tener un WordCamp aquí. Soy un apasionado de WordPress y sigo el día a día desde nuestro podcast WP Round Table. Finalmente tenemos la oportunidad de tener un WordCamp aquí y estoy seguro que esto plantará la semilla que dará fuerza al WordPress Meetup Medellín y seguir haciendo comunidad.
Este evento contará con la presencia de reconocidos ponentes internaciones como Mike Schroder, quien nos hablará de cómo Colaborar con WordPress Core; Miguel Lezama y Los secretos de Jetpack y Karen Arnold sobre Cómo convertirte en el próximo colaborador de la comunidad de WordPress.
Además de eso, tendrá también ponentes nacionales como Andrew Macia quién hablará sobre WordPress y SEO; Catalina Zapata, una emprendedora local quién compartirá su vida de nómada digital a través de WordPress y Andrés Cifuentes que nos enseñará todo lo que hay que saber sobre el mundo de WordPress Multiligüe, entre otros. En este enlace podrás encontrar el programa completo.
El evento tendrá lugar el 5 de noviembre en el Tecnológico de Antioquia y puedes adquirir tus entradas aquí.
No te pierdas esta oportunidad de hacer y ser parte de la comunidad WordPress en Medellín.
