El bloque de Pago de EDD te permite crear una página de pago totalmente personalizada para tu tienda de Easy Digital Downloads. Este bloque muestra todos los elementos del pago, incluyendo formularios de información de facturación, resumen del carrito y opciones de pago, con control total sobre el estilo y la disposición.
Una página de pago bien diseñada es el último paso para convertir visitantes en compradores. Con este bloque, puedes crear una experiencia de pago que genere confianza, reduzca las fricciones y coincida perfectamente con tu marca. Personaliza los campos del formulario, los botones, las visualizaciones del carrito y las secciones de pago para crear un camino fluido desde el carrito hasta la compra completada.
Añadir el Bloque de Pago de EDD a tus Páginas
Sigue estos pasos para añadir un bloque de Pago de EDD a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > Easy Digital Downloads, arrastra y suelta el bloque Pago en la sección deseada de tu página.
El bloque de Pago de EDD se encuentra en Easy Digital Downloads y se puede añadir para crear una página de pago personalizada.
Paso 2: Personalizar el Diseño
Una vez añadido, haz clic en el bloque de Pago de EDD para abrir su configuración. En la pestaña Estilos, puedes personalizar cada aspecto de la apariencia de tu página de pago.
Campos:
- Color de Fondo del Campo: Establece el color de fondo para los campos de entrada del formulario como nombre, correo electrónico y dirección.
- Color del Texto del Campo: Elige el color del texto introducido en los campos del formulario.
- Color del Borde del Campo: Establece el color de los bordes alrededor de los campos de entrada.
- Ancho del Borde del Campo: Ajusta el grosor de los bordes de los campos (Superior, Derecho, Inferior, Izquierdo).
- Espaciado de Filas: Controla el espaciado vertical entre las filas de campos del formulario.
- Radio del Borde: Ajusta la redondez de las esquinas de los campos. Valores más altos crean campos más redondeados.
Botones:
- Estilo del Botón: Elige el tratamiento visual para los botones de pago como “Completar Compra”. Las opciones incluyen Plano (diseño plano moderno), 2D (profundidad sutil), Vintage (aspecto clásico), Fantasma (transparente con borde) o Enlace (enlace de texto simple).
- Color del Botón: Establece el color de fondo del botón de compra.
- Radio del Borde: Ajusta la redondez de las esquinas de los botones.
Carrito:
- Color del Borde del Carrito: Establece el color de los bordes alrededor de la sección del resumen del carrito.
- Ancho del Borde del Carrito: Ajusta el grosor de los bordes del carrito (Superior, Derecho, Inferior, Izquierdo).
- Color de Fondo: Establece el color de fondo del área del resumen del carrito.
- Tipografía del Encabezado: Controla las propiedades de la fuente para los encabezados de la sección del carrito como “Resumen del Pedido”.
- Color del Encabezado: Establece el color del texto del encabezado del carrito.
- Tipografía del artículo: Personaliza las propiedades de la fuente para los nombres de los productos en el carrito
- Color del artículo del carrito: Elige el color del texto de los artículos del carrito
- Tipografía de enlaces: Controla las propiedades de la fuente para los enlaces del carrito
- Color de enlaces del carrito: Establece el color de los enlaces clicables en la sección del carrito
Sección de pago:
- Color de fondo: Establece el color de fondo para la sección de métodos de pago
- Color del borde de pagos: Elige el color de los bordes alrededor de las opciones de pago
- Ancho del borde de pagos: Ajusta el grosor de los bordes de la sección de pago (Superior, Derecho, Inferior, Izquierdo)
- Radio del borde de pagos: Controla la redondez de las esquinas de la sección de pago
- Color de la etiqueta: Establece el color de las etiquetas de los campos de pago
- Tipografía de la etiqueta: Personaliza las propiedades de la fuente para las etiquetas de pago
- Color del título: Elige el color de los títulos de los métodos de pago (como “Tarjeta de crédito” o “PayPal”)
- Tipografía del título: Controla las propiedades de la fuente para los títulos de pago
- Color de la descripción: Establece el color de las descripciones de los métodos de pago
- Tipografía de la descripción: Personaliza las propiedades de la fuente para las descripciones de pago
- Color del total: Elige el color para la visualización del total del pedido
- Tipografía del total: Controla las propiedades de la fuente para el importe total
La pestaña Estilos proporciona opciones completas de personalización para campos de formulario, botones, visualización del carrito y secciones de pago.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de campo prediseñados para cambiar rápidamente la apariencia general de tu formulario de pago.
- Campo de entrada claro, Campo de entrada sin borde, Campo de entrada con borde ancho, Campo de entrada gris, Campo de entrada oscuro, Campo con borde inferior, Campo de entrada transparente: Elige entre siete diseños de plantilla diferentes para tus campos de formulario, cada uno con enfoques de estilo únicos. Previsualiza cada estilo para encontrar el que mejor se adapte al diseño de tu página.
La pestaña Plantillas proporciona siete estilos de campo prediseñados para personalizar rápidamente la apariencia de tu formulario de pago.
Paso 3: Configurar Opciones Avanzadas
En la pestaña Avanzado, puedes personalizar aún más tu bloque de pago EDD:
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de pago (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el formulario de pago y los elementos circundantes.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de pago (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido del pago y sus bordes.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de pago. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del checkout. Introduce cada atributo en una línea nueva usando el formato: nombre-atributo|valor (ej. data-checkout|edd-checkout)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de checkout en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de checkout en dispositivos tableta
- Ocultar en móvil: Oculta el bloque de checkout en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el formulario de checkout entra en la vista. Las opciones incluyen Bounce, Fade In, Zoom In, Rotate In y muchas más
La pestaña Avanzado proporciona opciones para espaciado, atributos personalizados, visibilidad del dispositivo y efectos de animación.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Checkout de EDD y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Checkout de EDD a tu página! Esta solución integral de checkout te ayuda a crear una experiencia de pago profesional y de marca que genera confianza en el cliente y agiliza el proceso de compra. Experimenta con diferentes estilos de campo, colores y opciones de diseño para crear una página de checkout que convierta a los visitantes en compradores y maximice tus ventas de productos digitales.