Cómo diseñar páginas de cuenta personalizadas para WooCommerce, EDD, Memberpress y más con Divi Builder

Vistazo

Aquí hay algunos ejemplos de páginas de cuentas personalizadas que puede crear con Divi.

Consejos generales para diseñar páginas de cuentas

Configuración del personalizador de temas

El primer paso para personalizar esas páginas de cuenta es establecer los estilos predeterminados para el tema Divi en el personalizador de temas porque estas páginas normalmente heredarán esta configuración de estilo. El contenido de estas páginas de cuenta normalmente incluye texto, campos de formulario, enlaces y botones. El personalizador de temas puede asegurarse de que tenga la configuración de tipografía correcta para diseñar el texto y los enlaces en estas páginas, pero los campos y botones del formulario pueden requerir algún CSS personalizado.

Use códigos cortos para mostrar las páginas de la cuenta siempre que sea posible

Normalmente, los complementos le darán al usuario la opción de implementar la información de la cuenta usando un código abreviado en lugar de usar la página de cuenta designada generada por el complemento. Esto permite a los usuarios una mayor flexibilidad para organizar el contenido de la página en todo su sitio y también permite que este contenido funcione en creadores de páginas como Divi.

Por ejemplo, si está creando un sitio con WooCommerce, habrá designado páginas de WooCommerce para manejar la información de la cuenta. Una de estas páginas se llama la página Mi cuenta. Los contenidos de la página se implementan utilizando el código abreviado [woocommerce_my_account].

Entonces, si lo desea, puede usar ese código abreviado en otra página o dentro de un módulo usando Divi Builder. Todo lo que tiene que hacer es agregar el código abreviado a un módulo usando Divi Builder y agregar cualquier otro elemento de diseño que desee a la página.

Según el complemento, es posible que las páginas de su cuenta de front-end no puedan implementar Divi Builder como con WooCommerce. Pero eso no significa necesariamente que no haya códigos abreviados disponibles que lo ayuden a crear una página personalizada por su cuenta.

Por ejemplo, cuando usa MemberPress , cada vez que crea una nueva membresía, el complemento crea automáticamente una página de registro para esa membresía. Estas páginas de registro generadas automáticamente no pueden implementar Divi Builder. Sin embargo, puede usar un código abreviado para generar un formulario de registro para esa membresía. Entonces, todo lo que necesita hacer es crear una nueva página, agregar el código abreviado del formulario de registro a un módulo de texto usando el generador Divi y terminar de crear su página de registro personalizada.

A veces, es posible que deba buscar un poco más a fondo para encontrar una solución compatible con Divi para diseñar estas páginas. Pero en la mayoría de los casos, hay un código abreviado para ayudarte.

Esta es la estrategia básica para diseñar este tipo de páginas con Divi.

Use códigos cortos dentro de los módulos de texto para obtener más opciones de diseño

Normalmente, sugeriría agregar códigos cortos a un módulo de código en Divi, pero no en este caso. Los códigos abreviados que generan información de cuenta contienen encabezados, cuerpo de texto y enlaces que se pueden personalizar aún más mediante la opción Diseño del módulo de texto.

La mejor manera de verificar si este contenido puede ser diseñado por el módulo de texto es probarlo. En algunos casos, es posible que no pueda ver los cambios de diseño en tiempo real utilizando el generador visual como de costumbre. Es posible que primero deba guardar la configuración y verla en la página en vivo para ver los efectos.

Si está familiarizado con html, incluso puede hacer una inspección rápida de la salida del shortcode utilizando las herramientas de desarrollo de su navegador para ver si su texto tiene encabezados (h1, h2, etc.) a los que pueda orientar con diseño.

Sugerencia: para inspeccionar un elemento en su página en Chrome, simplemente haga clic derecho en el elemento y seleccione «Inspeccionar».

Una vez que sepa que el shortcode está implementando un encabezado, puede apuntar a eso con la configuración de diseño del módulo de texto.

También puedes hacer lo mismo con los enlaces.

Personalice un diseño de página para contener su código abreviado

Ahora que tiene la capacidad de usar un código abreviado dentro de un módulo de texto, puede diseñar el resto del contenido de la página de la cuenta con cualquier diseño personalizado que desee con Divi Builder.

Si necesita ayuda con esto, consulte estos pasos para usar un diseño Divi para su sitio web .

Dependiendo del paquete de diseño que esté utilizando, deberá encontrar el diseño de página que mejor se adapte a sus necesidades para el contenido del código abreviado.

En general, buscaría una página de blog, una página de contacto o un diseño de página acerca de. Estos diseños de página generalmente tienen un encabezado estándar que se puede ajustar fácilmente y una sección de contenido de ancho completo que puede contener fácilmente un código abreviado.

Preferiblemente, querrá usar un módulo de texto existente para que el contenido del shortcode herede el diseño del módulo existente.

Por ejemplo, así es como usaría el paquete de diseño de cafetería para crear una página de cuenta para WooCommerce.

Copie el código abreviado existente dentro de la página Mi cuenta de WooCommerce. Implemente Divi Builder y luego Visual Builder para editar la página Mi cuenta. Abra el menú Configuración y seleccione Cargar desde la biblioteca y

seleccione Cafetería – Acerca del diseño de la lista de diseños prefabricados.

Cambie el contenido del encabezado para que diga «Mi cuenta» en lugar de «Acerca de nosotros» (puede usar el editor en línea para eso. Cosas muy fáciles).

Luego elimine todo en el diseño excepto la primera y la segunda sección y la sección de pie de página.

Ahora elimine la segunda fila de la segunda sección (la que contiene las tres notas publicitarias). Esto le deja una fila en la sección central con una fila de una columna que contiene algunos Módulos de texto. Esta es una configuración perfecta para el shortcode.

En el módulo de texto superior con el título «La mejor cafetería», cámbielo a «Bienvenido a la página de su cuenta».

Lo único que queda es agregar nuestro shortcode al módulo de texto debajo. Simplemente borre el texto ficticio que está allí y reemplácelo con el código abreviado [woocommerce_my_account].

Actualice la configuración de la pestaña Diseño de la siguiente manera:

Orientación del texto: Izquierda

en la pestaña de texto de la lista desordenada Fuente de la lista desordenada

: Oswald

Peso de la fuente de la lista desordenada: Luz

Estilo de fuente de la lista desordenada: Mayúsculas (TT), subrayado (U)

Estilo de subrayado de la lista desordenada: Sólido Tamaño

del texto de la lista desordenada: 32px

Espaciado entre letras de la lista desordenada: 2px

Lista desordenada Altura de línea: 1,8 em

Tipo de estilo de lista desordenada: Ninguno

Tamaño: 100% (predeterminado)

Este es un gran ejemplo de cómo puede orientar el contenido dentro de su shortcode. Dado que WooCommerce usa una lista desordenada para mostrar la navegación vertical de la información de la cuenta, puedo apuntar a la lista desordenada desde la configuración del módulo de texto. ¡Muy guay!

Hay limitaciones

Desafortunadamente, habrá momentos en que ciertas páginas no se podrán diseñar con Divi. Normalmente, esto se debe a que el complemento está utilizando archivos de tipo de publicación personalizados. Un buen ejemplo de esto es la página de productos de WooCommerce.

Debido a que este es un tipo de publicación personalizada, la plantilla de la página no puede implementar el generador Divi, ni podemos usar un código abreviado para mostrar la página del producto. Por lo tanto, estamos limitados a lo que podemos controlar con el Personalizador de temas y CSS personalizado.

Diseño de páginas de cuenta de Memberpress con Divi

Página de inicio de sesión de MemberPress

Puede designar cualquier página que desee que sea su página de inicio de sesión desde las Opciones de MemberPress. Una vez que seleccione la página para que sea su página de inicio de sesión de MemberPress, un código abreviado se hará visible cada vez que edite la página.

Simplemente copie ese código abreviado, implemente Divi Builder y estará en camino.

Página de cuenta de MemberPress

Al igual que la página de inicio de sesión, puede designar cualquier página como su página de cuenta de MemberPress. Sin embargo, el código abreviado necesario para la información de la página de la cuenta no se encuentra fácilmente en las Opciones de MemberPress. Tuve que encontrarlo dentro de su lista de códigos cortos disponibles .

A veces, los códigos cortos que necesita no serán fáciles de encontrar, por lo que es posible que deba buscar un poco más.

Página de agradecimiento de MemberPress

La página de agradecimiento de MemberPress que designe puede ser cualquier página con cualquier contenido. Así que no hay restricciones de diseño aquí. Puedes usar el Divi Builder como de costumbre.

Establecer la página como su página de agradecimiento de MemberPress simplemente le dice a MemberPress que esta es la página a la que desea redirigir a los usuarios después del registro.

Diseño de páginas de WooCommerce con Divi

WooCommerce genera su propio conjunto de páginas de WooCommerce automáticamente cuando instala el complemento . Estos incluyen lo siguiente:

Tienda: que es un marcador de posición para un archivo de tipo de publicación para sus productos.

Carrito: que usa el código abreviado [woocommerce_cart] para generar el contenido del carrito.

Pago: que usa el código abreviado [woocommerce_checkout] para mostrar la información.

Mi cuenta: que utiliza el código abreviado [woocommerce_my_account] para mostrar información específica del cliente relacionada con su cuenta.

Como ya expuse cómo crear una página personalizada de Mi cuenta anteriormente, te dejaré algunos consejos de diseño útiles para cada una de estas páginas de WooCommerce.

Echemos un vistazo a la página del carrito primero. Esto es lo que parece antes de que le hagamos algo.

Si actualiza su color de acento global, los enlaces y botones en la página del carrito coincidirán con el esquema de color de su diseño. Y, si actualiza la configuración de tipografía en el Personalizador de temas, los encabezados y el texto del cuerpo también deberían coincidir.

Pero podemos hacerlo un poco mejor que esto con solo unos pocos clics. Ahora ve a editar la página de tu carrito. Copie el código abreviado [woocommerce_cart]. Importe un diseño de la Biblioteca Divi y agregue el código abreviado a uno de los módulos de texto dentro del diseño. Asegúrese de que sea una fila de una columna para que el contenido del carrito tenga espacio para mostrarse. Luego, elimine todas las secciones, filas y módulos que no necesita.

Este es un ejemplo de cómo se ve esta página de carrito usando el paquete de diseño Moda.

Página de la tienda y páginas de archivo

Puede crear una página de tienda personalizada para su vista de WooCommerce utilizando el módulo de tienda de Divi. Sin embargo, dado que esta página no compartirá el archivo de tipo de publicación personalizado de la página de tienda predeterminada, se verá obligado a utilizar la plantilla de página de archivo de tipo de publicación si desea buscar productos por categoría, por ejemplo.

Páginas de productos

Las páginas de productos no se pueden diseñar con Divi, pero deben heredar al menos la configuración del personalizador de temas. También puede agregar CSS personalizado al personalizador de temas para orientar elementos en esta página.

Cómo diseñar páginas de cuenta de descargas digitales fáciles usando Divi

Aquí es donde configura las páginas frontales predeterminadas que EDD usa para administrar su tienda. Las siguientes páginas se crearán automáticamente para usted y estarán accesibles en sus páginas de wordpress .

Página de pago: tiene el título «Pago»

Página de éxito: tiene el título «Confirmación de compra»

Página de transacción fallida: tiene el título «Transacción fallida»

Página de historial de compras: tiene el título «Historial de compras»

Nota: Todas estas páginas usan códigos abreviados para implementar la información de la página. Por lo tanto, podrá usar Divi Builder para personalizar cada una de estas páginas e insertar el código abreviado en cualquier lugar que desee dentro de un Módulo Divi. Esto le permitirá mantener su diseño consistente en todo su sitio.

Página de pago

Puede usar el código abreviado de la página de pago [download_checkout] para diseñar su página de pago personalizada usando Divi Builder.

Este es un ejemplo de una página de pago que utiliza el diseño de página de blog del paquete Diseño de precios digitales. Debido al fondo oscuro, tuve que darle un fondo blanco a la fila que contenía el módulo de texto con el shortcode.

Página de transacción fallida

Cualquier página se puede designar como página de transacción fallida. EDD simplemente redirigirá al usuario a esta página si alguna transacción falla al finalizar la compra. Simplemente cree cualquier página con el contenido que desee utilizando Divi Builder.

Aquí hay un ejemplo que usa el mismo diseño de página de blog del paquete de diseño de precios digitales:

Página de historial de compras

Puede usar el código abreviado [purchase_history] para crear la página Historial de compras con Divi Builder. Este es un ejemplo de cómo se vería esta página usando el diseño de página de blog del paquete Diseño de precios digitales:

Aunque la página del historial de compras tiene un código abreviado que se puede usar con Divi Builder, la funcionalidad integrada de hacer clic en el enlace para ver desde la lista de artículos comprados romperá el diseño.

La página de inicio de sesión

La página de inicio de sesión no se crea automáticamente porque utiliza el inicio de sesión predeterminado de WordPress. Pero puede crear su propia página de inicio de sesión usando el código abreviado [edd_login]…

Este es un ejemplo de página de inicio de sesión creada con el diseño de página de blog del paquete de diseño de pagos digitales:

Para crear la página de confirmación de compra, puede repetir el mismo proceso de agregar el diseño del blog a la página y agregar el módulo de texto con el código abreviado necesario en lugar del módulo del blog.

Aquí hay un ejemplo de la página de confirmación de compra (o página de éxito):

Más sobre Easy Digital Download Pages

EDD también proporciona códigos abreviados de compra para cada producto de descarga. Esto le permite crear una página personalizada con Divi para exhibir su producto agregando este código abreviado de compra a un módulo de texto en la página. Esta funcionalidad es un poco más flexible que los productos WooCommerce.

Aquí hay un ejemplo de una página de producto que usa el código abreviado de compra:

Pensamientos finales

Incluso con Divi, a veces necesitas complementos. Por eso es importante saber cómo fusionar el poder de Divi (como herramienta de diseño) con el poder de los complementos de terceros. Entonces, si está creando un sitio de comercio electrónico con WooCommerce, un sitio de Membresía con MemberPress, o si tiene un desafío al integrar páginas de cuenta con Divi Builder, esté atento a esos códigos abreviados.

Mi objetivo en este artículo es ayudarlo a maximizar Divi Builder como herramienta de diseño cuando trabaje con complementos de terceros. Pero para los amantes de CSS, puede optar por un enfoque completo de tema infantil para estas páginas de cuenta. En la mayoría de los casos, esta es la única forma de controlar todos los aspectos del diseño.

Avíseme si ha tenido experiencias similares con el uso de Divi con otros complementos. Me encantaría escucharlos. Déjame saber abajo en los comentarios.

¡Salud!