Elementor: cómo cambiar la imagen con solo hacer clic en un botón

por Passy | WordPress

¿Quieres cambiar la imagen con solo hacer clic en un botón con Elementor Page Builder? En este nuevo tutorial, le mostraremos cómo hacerlo.

Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:

Entonces volvamos a por qué estamos aquí.

Lea también: Cómo cambiar una imagen al pasar el cursor sobre el texto con Elementor

Para completar este tutorial, necesitará la versión Pro de Elementorporque usaremos un código CSS personalizado que solo es compatible con esta versión de Elementor.

Vamos a crear una sección con 2 columnas, luego en el panel lateral, vamos a definir el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.

Arrastremos el widget Imagen a la columna izquierda e insertemos una imagen de nuestra biblioteca.

En la columna de la derecha, insertemos un Widget de título titulado Elige lo mejor. en la pestaña Style hagamos clic en tipografía y modificar el Altura de línea en 1.

Ver tambien Cómo cambiar una imagenge al pasar el cursor sobre el texto con Elementor

Agreguemos debajo del widget Título, un Widget de editor de texto.

Encima del widget de título, coloquemos un widget de separador. En su pestaña de contenido, escriba 270 por ancho. Hagamos clic en Texto para Agregar elemento, luego ingrese tendencia como texto. en la pestaña Style, modifique la Grasa y el hueco en 2.

Descubre también: Cómo mostrar texto sobre una imagen con Elementor

En la sección Texto, haga clic en tipografía, vamos a cambiar la fuente, el Forma en 18, el grasa en 600.

Debajo del widget Editor de contenido, coloquemos un Sección interna, elimine una de las columnas de la Sección Interna y suelte en esta última un botón-widget

Modifiquemos el botón yendo al panel lateral y en la pestaña de contenido, haga clic en biblioteca de iconos en Icono e inserte el icono Cesta de la compra, también vamos a borrar el contenido del botón en textos

vamos a la pestaña Style del botón y en Radio del borde, haga clic en % y apoderarse 50 para todos los radios de bordillo y en Márgenes internosvamos a agarrar 20.

Personalicemos el color del botón cambiando el color de este último haciendo clic en clásico para Tipo de fondo y Cambiemos el color de acuerdo con el color de resaltado en la imagen.

Luego haga clic en la pestaña Avanzado de nuestro botón, luego en posicionamiento y Manga seleccionemos En línea (automático). En la sección Avanzado dePestaña Avanzadovamos a agarrar 10 para el Margen derecho.

Dupliquemos este botón 4 veces y modifiquemos los colores de estos botones.

A continuación, dupliquemos nuestro widget de imagen 4 veces y luego modifiquemos sus imágenes.

En'Lengüeta avanzadavamos a agarrar todas las imágenes en el campo Clases de CSS de cada una de nuestras imágenes.

Luego en el campo ID de CSS ingrese red-image para la imagen resaltada en rojo, green-image para la imagen resaltada en verde, brown-image para la imagen resaltada en marrón, y así sucesivamente.

Seleccionemos nuestro Sección y en elPestaña Avanzado, en el campo Personalizado CSS copia y pega el siguiente fragmento de código:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Si no tiene esta sección, entonces no tiene la versión Pro, si desea continuar, debe actualizar su versión)

A continuación, coloquemos un widget HTML en nuestra página, copie y pegue el siguiente fragmento de código en la sección Código HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Seleccionemos el primer botón, en el campo Atributos personalizados de la Sección de atributos, copie y pegue el siguiente fragmento de código:

data-showme|IMAGE-ID-NAME

Modifiquemos la parte IMAGEN-ID-NOMBRE por las ID de sus botones, estas son las ID de imagen roja, imagen verde y imagen azul, y así sucesivamente.

Entonces, para cada botón, cambiemos el código IMAGEN-ID-NOMBRE al color del botón apropiado

Actualice su trabajo y obtenga una vista previa en el modo de escritorio, tableta y teléfono inteligente mientras prueba sus botones.

En modo smartphone puedes, por ejemplo, alinear los botones en el centro, reducir los márgenes y mucho más.

Ahí tienes, acabas de hacer esta tarea fácilmente.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo cambiar una imagen al pasar el cursor sobre un texto. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...

10 complementos de formulario de contacto de WordPress para un sitio web

por Passy | WordPress

Estás buscando ¿Cuáles son los mejores complementos de formulario de contacto de WordPress?

No importa si es un formulario de contacto, suscripción, de encargo o un cuestionario, siempre que este formulario sea atractivo, siempre le dará un aspecto profesional a su sitio web o blog. Un formulario de contacto es una excelente manera de brindarles a sus lectores la posibilidad de comunicarse con usted sin mostrar su dirección de correo electrónico.

Si bien la mayoría de los temas de WordPress son provisto de formularios de contacto integrados, a menudo es preferible crear su propio formulario con un complemento especializado. Este enfoque le permite personalizar el aspecto que desea darle a su sitio web, agregar campos adicionales; en resumen, le permite tener un control total sobre sus formularios.

Hay muchos complementos premium de WordPress en el campo que ofrecen una gama de características diferentes. La elección debe hacerse de acuerdo a sus necesidades. Pero para ayudarlo a encontrar rápidamente su perla rara, aquí está para usted los mejores complementos premium de WordPress, perfecto para crear un formulario de contacto profesional en su sitio web o blog.

Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

1. WPForms

WPForms es el complemento de formulario de contacto de WordPress más amigable para principiantes. Está construido con un objetivo: crear un complemento de formularios de WordPress a la vez. fácil y poderoso. Su creador de formularios visuales lo convierte en el complemento de formulario más fácil de usar para WordPress.

Está disponible de forma gratuita en el directorio oficial de plugins de WordPress., lo que significa que puedes instalarlo gratis en tantos sitios web como quieras. Esta versión viene con toda la funcionalidad básica del formulario de contacto, incluidos los campos de formulario básicos, captcha para la protección contra correo no deseado, notificaciones por correo electrónico y una página de agradecimiento para la confirmación del formulario.

La versión premium le permite ampliar la funcionalidad, de modo que puede crear cualquier tipo de formulario, como formularios de varias páginas, formularios de suscripción de correo electrónico, formularios de pago, formularios de pedido, etc.

Puede ver todos los envíos de formularios directamente en su panel de WordPress, así como recibir notificaciones personalizadas por correo electrónico. Incluso puede configurar notificaciones condicionales, de modo que se notifique a la persona adecuada de su equipo.

Descargar | Demo | alojamiento web

2. Patada de ninja

Ninja Kick es un complemento de formulario de contacto de WordPress premium que permite a sus visitantes ver instantáneamente el formulario de contacto sin esperar a que se cargue la página de contacto completa.

Este complemento de WordPress viene con 3 grandes temas, una barra dedicada a compartir en redes sociales, la integración de MailChimp y amplia personalización de su aspecto. Él utiliza transiciones CSS modernas, a un diseño que reacciona a los cambios en el tamaño de la pantalla y funciona bien en dispositivos móviles y responde perfectamente al tacto.

Entonces, si está buscando una solución de WordPress más universal para crea un panel deslizante con hermosos efectos no dudes en echar un vistazo a este complemento de WordPress.

Descargar | Demo | alojamiento web

3. Slick Popup Pro

Slick Popup Pro es un complemento de WordPress premium bastante simple y liviano que convierte cualquier formulario creado por el complemento Contacto 7 Forma en una ventana emergente Ella usa la forma y la convierte en una ventana emergente hermosa y perfectamente sensible.

La ventana emergente de formulario puede tener varios usos, incluidos: un formulario de recopilación de información, un formulario de contacto, un formulario de registro, un formulario de cotización, un formulario de sugerencia / queja y otros.

Descargar | Demo | alojamiento web

4. Formulario de contacto W8

W8 Contact Form es uno de los complementos de formulario de contacto premium más populares en WordPress. 

Ofrece muchas funciones, como envío a múltiples destinatarios, soporte de animación, creación ilimitada de formas, diferentes estilos y una amplia variedad de opciones de personalización adicionales.

Descubrir también Cómo crear un mapa del sitio en tu blog de WordPress

Además, le da a su sitio web o blog un sistema profesional para que sea más fácil ponerse en contacto con sus clientes. Podrás personalizar todos tus formularios según tus necesidades y tus gustos.

Descargar | Demo | alojamiento web

5. Maravilloso Formularios

Formidable Forms es el complemento de formulario de WordPress más avanzado del mercado. Se especializan en ayudar a los desarrolladores a crear rápidamente soluciones complejas centradas en formularios. Formidable Forms es un generador de formularios de WordPress todo en uno que viene con poderosas extensiones para ayudarlo a ir más allá de los simples formularios de contacto.

Puede usar su interfaz de arrastrar y soltar para crear formularios avanzados como cuestionarios, encuestas, formularios de pago, formularios de registro, formularios de perfil, etc. A los usuarios avanzados les encantará la función Formidable Views, ya que les permite formatear, filtrar y mostrar los datos enviados por los usuarios en el front-end de su sitio web.

Puede usarlo para crear soluciones basadas en formularios, como directorios, listados de sitios web de trabajo, calendarios de eventos, sistemas de gestión, sistemas de calificación, etc. También puede utilizar los campos de cálculo avanzados de Formidable Forms para crear potentes formularios de pedido, así como calculadoras inteligentes como calculadora de hipotecas, calculadora de pagos de automóviles, calculadora de solicitud de cotización y más.

Descargar | Demo | alojamiento web

6. Formas de gravedad

Sin lugar a dudas, el plugin premium de WordPress Gravity Forms es uno de los plugins los más popular en esta lista. La semana pasada, los datos de Datanyze revelaron que es utilizado en 53% de los mejores sitios web clasificados por Alexa como utilizando formularios alojados.

GravityForms le permite diseñar y crear sus propios formularios utilizando un editor visual intuitivo. Sus características principales incluyen: creación fácil e intuitiva de Formas de contacto, laprueba de rendimiento, el creación de encuestas, la creación deormals of quotes, the control de ataques, el apoyo dehamps estándar y avanzados, y muchos más.

Ver también Complementos de 10 WordPress para crear un formulario de inicio de sesión

Los precios comienzan desde $ 39 por año para una licencia personal y atención al cliente. También tiene muchos complementos. (extensiones) disponible que le permitirá integrar Gravity Forms en MailChimp, PayPal y otros servicios.

Descargar | Demo | alojamiento web

7. Formulario de contacto 7

Si el complemento GravityForms es el complemento premium de WordPress de forma más popular, ContactForm 7 es probablemente el complemento gratuito más popular con más de 5 millones de descargas

ContactForm 7 es fácil de usar. Puede manejar múltiples formularios de contacto y puede personalizar formularios con HTML. Este complemento también es compatible Validación AJAX, el CAPTCHA et Filtrado de spam con Akismet.

Si está buscando una solución gratuita y potente para crear un formulario de contacto en su sitio web de WordPress, entonces este complemento es para usted.

Descargar | Demo | alojamiento web

8. Formas Ninja

Otro complemento popular es el complemento premium Ninja Forms de WordPress. Tiene una interfaz de arrastrar y soltar fácil de usar y le permite crear formularios de contacto, formularios de captura de correo electrónico o cualquier otro formulario que necesite.

Algunas características de este complemento son: un modo de vista previa disponible, opciones para personalizar estilos y diseño, l'' opciones de importación y exportación, soporte para campos anti-spam, dCampos personalizados reutilizables y otros.

Lea también nuestro artículo sobre Cómo agregar un fragmento de código usando Gutenberg en WordPress

Incluso si este complemento de WordPress es gratuito, sepa que tiene que pagar para tener algunas extensiones (Hay varios).

Descargar | Demo | alojamiento web

9. FormCraft

FormCraft es un complemento de WordPress premium simple e intuitivo gracias a su interfaz de arrastrar y soltar que le permite crear formularios complejos y receptivos sin escribir ningún código.

Este complemento ofrece: soporte plea los campos especiales de 20, tTres tipos de visualización de formularios (emergente, móvil y fijo), un formulario de análisis, varios opciones de estilo, soporte para fórmulas matemáticas, soporte para lógica condicional, integración perfecta con otros complementos de WordPress, la presencia de muchas plantillas y muchos más.

Descubre nuestro Complementos premium de WordPress 5 para aumentar su número de suscriptores

A $ 36, este complemento de WordPress no es caro, pero definitivamente vale la pena si está buscando un complemento potente, flexible y personalizable para crear un hermoso formulario de contacto.

Descargar | Demo | alojamiento web

10. Formulario de contacto

Contact Us Form es un complemento de WordPress de alta calidad que responde y una herramienta simple pero rica en opciones de personalización que le permite mostrar un formulario claro y alentador, en el que sus visitantes pueden contactarlo dejando su mensaje.

Tendrá la posibilidad de definir los campos necesarios, elegir el mejor diseño de los campos y personalizarlo completamente para Anime a sus clientes o visitantes a dejar sus sugerencias o mensajes..

Descubre nuestro Formulario de contacto de 10 WordPress Complementos de 7 que probablemente ignore

Simplemente configure la dirección de correo electrónico donde desea recibir los mensajes y úsela para hacer crecer su negocio en la dirección más rentable.

Descargar | Demo | alojamiento web

Otros recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

• Cómo administrar sus contraseñas y asegurar su acceso
• 8 WordPress plugins para personalizar su sitio Derechos de autor
• Cómo agregar una clase incluso impares / artículos en su WordPress
• Complementos de 10 WordPress para crear fácilmente una ventana emergente
• las estrategias de creación de contenido para una mejor 3 el blog

Conclusión

Listo ! Eso es todo por esta lista de los mejores complementos premium de WordPress creación de formulario de contacto. Si tiene alguna inquietud o sugerencia en esta área, busquemos en la sección comentarios para discutirlo

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales ... 

Cómo regenerar tus enlaces permanentes en WordPress

por Passy | WordPress

¿Necesitas regenerar tus enlaces permanentes de WordPress? descúbrelo en este tutorial de WordPress

Si no puede ver el contenido de su sitio web, sus visitantes tampoco. Los enlaces rotos y los errores 404 pueden dañar la experiencia del usuario y tu posición en los rankings SEO.

En este artículo, le mostraremos cómo reparar estas URL rotas regenerando sus enlaces permanentes en WordPress. También hablaremos sobre las causas de este error y cómo detectar enlaces rotos antes de que sus visitantes los noten.

¿Por qué necesito regenerar los enlaces permanentes en WordPress?

La mayoría de las veces, las URL de su sitio de WordPress son permanentes y no causarán ningún problema. Simplemente funcionan.

Sin embargo, a veces puede hacer clic en un enlace y obtener un erreur 404. Incluso puede obtener un error 404 al intentar acceder a todo su sitio web de WordPress.

Esto a veces sucede después migrar su sitio de WordPress a un nuevo host o servidor. Esto también podría suceder después de instalar un nuevo complemento de WordPress. De hecho, algunos complementos de WordPress modifican el farchivo .htaccess de su sitio web sin su conocimiento. Esto puede afectar a su sitio de varias formas, incluido el daño a sus URL.

Observación: Para este tutorial, debe poder iniciar sesión en el panel de control de WordPress.

A menudo, regenerar sus enlaces permanentes puede ser una solución rápida y fácil para estos problemas. Veamos cómo hacer esto.

Cómo regenerar tus enlaces permanentes en WordPress

Cuando regeneras tus enlaces, reconstruyes y reparas la estructura de enlaces permanentes de WordPress. Esto puede sonar complicado, pero no te preocupes. Todo lo que necesita hacer es hacer clic en un botón y WordPress se encargará del resto.

Para empezar, vaya a Configuración -> Enlaces permanentes desde el menú de administración de WordPress.

Esto lo llevará a la página de configuración más común. Aquí verá la estructura de enlaces permanentes que está utilizando actualmente.

WordPress admite varias opciones para enlaces permanentes. Puedes consultar nuestra guía sobre como crear enlaces permanentes personalizados en wordpress para obtener instrucciones paso a paso sobre cómo personalizarlos.

Para regenerar sus enlaces permanentes, simplemente desplácese hasta la parte inferior de la página y haga clic en " Guardar cambios ".

Después de unos momentos, debería ver un mensaje que confirma que WordPress ha actualizado su estructura de enlaces permanentes.

Listo ! WordPress ha regenerado sus enlaces permanentes.

Para asegurarse de que funcionó, vaya a su sitio web e intente hacer clic en algunos enlaces diferentes.

¿Sigues viendo errores de enlace permanente después de la regeneración?

Si aún recibe errores 404, es posible que deba borrar la memoria caché de su navegador. Para obtener más detalles, consulte nuestra guía de Cómo borrar el caché de tu sitio web.

Si eso no soluciona el problema, piense en lo que sucedió justo antes de que comenzara a ver esos mensajes 404. Si acaba de instalar o actualizar un complemento, es posible que haya afectado sus enlaces. Puede intentar deshabilitar este complemento para ver si eso elimina el error 404.

Si eso no funciona, puede intentar deshabilitar todos los complementos para ver si eso soluciona sus enlaces rotos.

Este es un paso un poco drástico, por lo que es una buena idea primero ponga su sitio en modo de mantenimiento. Esto mantendrá informados a los visitantes mientras prueba sus complementos, dando una mejor impresión que ver un sitio web roto.

Si deshabilitar todos sus complementos soluciona el problema, sabrá que al menos un complemento está afectando sus URL. En este caso, vuelva a habilitar cada complemento individualmente, luego pruebe el impacto que esto tiene en sus enlaces.

Cuando vuelve a aparecer el error 404, ha encontrado el complemento que causa el problema. Luego puede eliminar este complemento de su sitio web o pedir ayuda al desarrollador.

Su sitio web ahora debería estar libre de errores y funcionar correctamente. De lo contrario, consulte nuestra lista de Errores más comunes de WordPress y cómo solucionarlos.

Cómo rastrear y evitar enlaces permanentes rotos en WordPress

Los enlaces rotos son malas noticias para los visitantes, las conversiones y la clasificación de los motores de búsqueda. Con el tiempo, las URL inactivas pueden afectar el lugar en el que apareces en las clasificaciones de los motores de búsqueda. Esto significa menos tráfico a su sitio web.

Con tanto en juego, tendrá que familiarizarse rápidamente con los enlaces rotos.

La forma más fácil de rastrear y reparar enlaces rotos en su sitio web de WordPress es usar el complemento de WordPress Todo en uno SEO (AIOSEO). Más de 3 millones de propietarios de sitios web usan AIOSEO, incluidos nosotros aquí en BlogPasCher.

AIOSEO le facilita encontrar enlaces rotos y corregirlos con solo unos pocos clics utilizando su poderoso administrador de redireccionamiento.

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

• Cómo usar múltiples temas de WordPress en un sitio web
• Cómo mostrar videos de YouTube en WordPress
• Cómo crear un formulario de varios pasos o varias páginas
• Cómo mostrar un PDF en su blog de WordPress
• El uso de diferentes orígenes WordPress
• Cómo administrar las URL de las imágenes de tu blog de WordPress

Conclusión

Listo ! Eso es todo por este tutorial. Esperamos que este artículo te haya ayudado a aprender cómo regenerar tus enlaces permanentes en WordPress.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, no olvides dejarnos tu comentarios y sugerencias en la sección dedicada.

...