El bloque EDD Checkout te permite crear una página de pago totalmente personalizada para tu tienda Easy Digital Downloads. Este bloque muestra todos los elementos del proceso de pago, incluidos los formularios de información de facturación, el resumen del carrito y las opciones de pago, con un control total sobre el estilo y el diseño.
Una página de pago bien diseñada es el paso final para convertir a los visitantes en compradores. Con este bloque, puedes crear una experiencia de pago que genere confianza, reduzca las fricciones y se adapte perfectamente a tu marca. Personaliza los campos de los formularios, los botones, la visualización del carrito y las secciones de pago para crear una ruta fluida desde el carrito hasta la compra completada.
Añadir el bloque EDD Checkout a tus páginas
Siga estos pasos para añadir un bloque EDD Checkout a su página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques > Easy Digital Downloads, arrastra y suelta el bloque Checkout en la sección deseada de tu página.
El bloque EDD Checkout 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 EDD Checkout para abrir su configuración. En la pestaña Estilos, puedes personalizar todos los aspectos del aspecto 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 el nombre, el correo electrónico y la dirección.
- Color del texto del campo: Elija 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: Ajuste el grosor de los bordes del campo (superior, derecho, inferior, izquierdo).
- Espaciado entre filas: controla el espaciado vertical entre las filas del campo del formulario.
- Radio del borde: Ajusta la redondez de las esquinas del campo. Los valores más altos crean campos más redondeados.
Botones:
- Estilo del botón: elige el aspecto visual de 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 sin formato).
- 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 de 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 de 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: Elija el color del texto del artículo del carrito.
- Tipografía de enlaces: controla las propiedades de fuente de los enlaces del carrito.
- Color de los enlaces del carrito: Establece el color de los enlaces en los que se puede hacer clic en la sección del carrito.
Sección de pagos:
- Color de fondo: Establece el color de fondo para la sección de métodos de pago.
- Color del borde de los pagos: elige el color de los bordes que rodean las opciones de pago.
- Ancho del borde de los pagos: Ajuste el grosor de los bordes de la sección de pagos (superior, derecho, inferior, izquierdo).
- Radio de los bordes de los pagos: controla la redondez de las esquinas de la sección de pagos.
- Color de la etiqueta: Establezca el color de las etiquetas de los campos de pago.
- Tipografía de etiquetas: personaliza las propiedades de la fuente para las etiquetas de pago.
- Color del título: Elige el color para 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.
- Descripción Color: Establezca el color para las descripciones de los métodos de pago.
- Descripción Tipografía: Personaliza las propiedades de la fuente para las descripciones de pago.
- Color total: Elija el color para la visualización del total del pedido.
- Tipografía total: controla las propiedades de la fuente para la cantidad total.
La pestaña Estilos ofrece opciones de personalización completas para los campos de formulario, los botones, la visualización del carrito y las secciones de pago.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de campo prediseñados para cambiar rápidamente el aspecto 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 los campos de tu formulario, cada uno con un estilo único. Previsualiza cada estilo para encontrar el que mejor se adapte al diseño de tu página.
La pestaña Plantillas ofrece siete estilos de campo prediseñados para personalizar rápidamente el aspecto de tu formulario de pago.
Paso 3: Configurar opciones avanzadas
En la pestaña Avanzado, puedes personalizar aún más tu bloque EDD Checkout:
Espaciado:
- Margen: controla el espacio exterior alrededor del 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 espacio interior dentro del bloque de pago (arriba, derecha, abajo, izquierda). Esto crea un espacio entre el contenido del pago y sus bordes.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de pago. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade 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 proceso de pago. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-checkout|edd-checkout).
Visibilidad del dispositivo:
- Ocultar en escritorio: Ocultar el bloque de pago en pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque de pago en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar el bloque de pago 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 pago aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más.
La pestaña Avanzado ofrece opciones para el espaciado, los atributos personalizados, la visibilidad de los dispositivos y los efectos de animación.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque EDD Checkout y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque EDD Checkout a tu página! Esta completa solución de pago te ayuda a crear una experiencia de pago profesional y personalizada con tu marca que genera confianza en los clientes y agiliza el proceso de compra. Prueba diferentes estilos de campos, colores y opciones de diseño para crear una página de pago que convierta a los visitantes en compradores y maximice las ventas de tus productos digitales.