Bienvenido a la parte 2 de esta serie de 2 partes en la que le mostraré cómo crear un sitio de membresía completo combinando MemberPress y Divi. Únase a mí mientras le explico cómo configurar su sitio de membresía con todo lo que necesita para vender un curso o producto en línea, incluidas páginas de registro personalizadas, notificaciones por correo electrónico y tres niveles de membresía que filtran contenido durante un período de tiempo. Mas, un monton mas. También le mostraré cómo diseñar sus páginas de membresía usando códigos abreviados de membresía en combinación con el constructor Divi . ¡No te lo querrás perder!
Estoy emocionado de continuar nuestra misión de construir un sitio de membresía completo con Divi. En la publicación anterior, le mostré cómo desarrollar toda la funcionalidad de su sitio de membresía usando MemberPress. Entonces, si se unió a ese proceso, debería estar bien preparado para el tutorial de hoy.
Hoy se trata de Diseño. Más específicamente, le mostraré cómo diseñar su sitio de membresía (incluso aquellas páginas de membresía creadas por MemberPress) usando Divi Builder. Usaré el paquete Divi Layout del sistema de gestión de aprendizaje para acelerar considerablemente el proceso de diseño y para esos raros momentos en los que MemberPress nos deja afuera y no podemos utilizar Divi Builder, también tengo algo de CSS para eso. . Pero, en general, mi objetivo es menos CSS personalizado y más Divi Builder.
Lista de Verificación
Aquí hay algunas cosas que desea tener antes de comenzar este tutorial.
El paquete de diseño del sistema de gestión de aprendizaje
Usaré el paquete de diseño del sistema de gestión de aprendizaje para diseñar las páginas de membresía en este tutorial. Asegúrate de tomar tu copia si aún no lo has hecho e importarla a tu Biblioteca Divi.
Para obtener ayuda adicional sobre cómo configurar un paquete de diseño Divi, consulte estos consejos .
Páginas de membresía creadas
Hasta ahora deberías tener las siguientes páginas creadas. No tienes que tener contenido en estas páginas todavía. Solo necesitan ser creados en su Tablero de WordPress. Algunas de estas páginas son específicas para un sitio de membresía que ofrece un curso en línea. Es posible que deba ajustarlos para su propio sitio.
- Página de Membresías
- Página de precios
- Página de descripción general del curso de membresía
- Página de la lección
- Página(s) de registro
Páginas front-end (reservadas) de MemberPres creadas
- Página de cuenta
- Página de inicio de sesión
- Página de agradecimiento
Cómo construir un sitio de membresía con Divi – Parte 2
Suscríbete a nuestro canal de Youtube
Configuración del personalizador de temas
A pesar de que puede estar utilizando uno de esos diseños embellecedores, no desea ignorar la configuración del personalizador de temas. Por supuesto, aquí es donde debe ir para diseñar su encabezado, navegación y pie de página, ya que sus diseños Divi importados no tienen efecto en estos elementos. Además, dado que inevitablemente tendrá páginas o contenido que Divi Builder no puede personalizar, establecer los valores predeterminados del personalizador de temas es la forma de orientar esos elementos fuera de Divi Builder.
Para actualizar el Personalizador de temas, ve a Divi > Personalizador de temas. Solo voy a hacer algunos cambios, pero siéntete libre de hacer más.
Cambiar el color de acento del tema
El color de acento del tema afectará a muchos elementos diferentes en todo su sitio. Más específicamente en este tutorial, notará que cualquier cosa que configure en este color también será el color predeterminado de sus enlaces, incluso los que se encuentran en los códigos cortos de MemberPress (como la página de la cuenta). Para actualizar el color de énfasis del tema, vaya a Configuración general > Configuración de diseño en el menú Personalizador de temas. Estoy agregando el color púrpura que se usa en todo el Diseño de la Escuela de Codificación: #7272ff.
Cambiar la configuración de la tipografía
En el caso del paquete de diseño de Coding School que estoy usando para este tutorial, realmente no hay una fuente específica establecida en el nivel del módulo, por lo que puedo establecer una fuente predeterminada desde el personalizador de temas y se aplicará a todos los diseños. De todos modos, es una buena idea establecer la configuración de tipografía aquí como una alternativa para su sitio. Para actualizar la Configuración de tipografía, vaya a Configuración general > Tipografía en el menú del personalizador de temas.
Cree un diseño genérico para usar en las páginas de membresía
Un diseño genérico es básicamente un diseño multipropósito que puede usar para esas páginas adicionales que pueda necesitar. Para construir nuestro diseño genérico, usaré la página de cuenta. Ya deberías haber creado una página de cuenta y haberla asignado como la página de cuenta predeterminada en las opciones de MemberPress (si no es así, consulta la parte 1 de este tutorial).
NOTA: Hay una página de cuenta predeterminada que MemberPress puede crear automáticamente para usted. Sin embargo, dado que esta página no puede implementar Divi Builder, es mejor crear su propia página de Cuentas y asignarla como su página de cuenta predeterminada. De esa manera, puede diseñarlo con Divi Builder y luego agregar el código abreviado para generar el formulario de información de la cuenta de usuario con un módulo.
Ahora ve y edita la página de la cuenta. Implemente el generador visual e importe el diseño de la página de contacto a su página. Actualice el título de la página para que diga «Mi cuenta».
Actualice el diseño de columna para la fila que contiene el formulario de contacto y la información a un diseño de una columna.
A continuación, elimine todos los módulos dentro de la columna para que no haya nada dentro de la fila de una columna.
Con el menú del botón derecho, copie el módulo de texto y sostenga un fragmento de texto justo debajo de «Preguntas frecuentes». Luego use el menú contextual para pegarlo en la fila de una columna que acaba de crear.
Ahora actualice la configuración del módulo de texto que acaba de agregar con las siguientes opciones en la pestaña Diseño:
Orientación del texto:
Ancho izquierdo: 100 % (predeterminado)
Guarde su página.
Puede eliminar el resto de las secciones a continuación si lo desea, pero podría ser una buena idea dejarlas en caso de que desee alguno de esos elementos para ciertas páginas.
Nota: la página de su cuenta aún no está terminada (aún necesitamos agregar el código abreviado), pero eso llegará muy pronto. En este momento solo necesitamos guardar este diseño para nuestra plantilla de diseño genérico.
A continuación, debe guardar este diseño en su Biblioteca Divi. Abra el menú de configuración de su página (el icono morado en la parte inferior de su generador visual). Seleccione Guardar en la biblioteca y asigne a la nueva plantilla el nombre «Diseño genérico». Luego haga clic en Guardar en la biblioteca.
Eso es todo. Ahora tiene un diseño genérico de ancho completo para usar en otras páginas de membresía que pueda necesitar en su sitio. Todo lo que necesita hacer es extraer este diseño genérico de su biblioteca para una ventaja conveniente.
Ahora que tenemos nuestro diseño genérico, abordemos esas páginas frontales de MemberPress.
Una palabra sobre el diseño de páginas frontales de membresía
Las páginas frontales de membresía son aquellas páginas específicas para la funcionalidad de la membresía. Por lo general, estas páginas incluyen una página de cuenta para administrar la información de la cuenta de usuario, una página de pago (para membresías pagas) y una página de inicio de sesión o registro. Puede haber más páginas dependiendo del complemento.
Como regla general, habrá limitaciones a lo que Divi puede hacer con las páginas generadas por un complemento de terceros. Si el contenido de la página se genera mediante un código abreviado (como WooCommerce o MemberPress, por ejemplo), puede usar el código abreviado dentro de un módulo en una página capaz de implementar Divi Builder. De esa manera, puede ajustar el diseño del contenido generado agregando el código abreviado a un módulo de texto y modificando la configuración de diseño en la pestaña de diseño del módulo.
Diseño de páginas frontales de MemberPress
Como cubrí en la parte 1 de este Tutorial, MemberPress tiene 3 páginas frontales que debe reservar: Página de agradecimiento, Página de cuenta y Página de inicio de sesión. Estas páginas se seleccionan en la pestaña de páginas de las Opciones de MemberPress. Dado que no usaremos las páginas de registro predeterminadas, también necesitaremos diseñar una página de registro. Pero primero, terminemos lo que empezamos con nuestra página Cuenta.
Página de cuenta
Diseño utilizado: diseño genérico
Código abreviado utilizado: [mepr-account-form]
Modificaciones de diseño: dado que ya diseñamos la página de la cuenta cuando creamos nuestro diseño genérico, lo principal que debe hacer aquí es agregar el código abreviado al módulo de texto y luego actualizar la configuración de diseño para orientar el texto y los enlaces dentro del formulario que se muestra desde el código abreviado. . Por ejemplo, cambiar el tamaño del texto a 18 px cambiará todo el texto de la información de la cuenta a 18 px. Y personalizar el texto del enlace también afectará los enlaces del menú de navegación de la cuenta y otros enlaces en toda la información de la cuenta.
CSS personalizado: debido a la limitación con la orientación de ciertos elementos de la información de la cuenta, sugiero agregar el siguiente CSS personalizado al personalizador de temas en CSS adicional:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/*Account page nav buttons, and other buttons used by MemberPress*/.mepr-submit, .button-primary, .mepr-active-nav-tab a { color: #ffffff!important; border-width: 10px!important; border-color: #7272ff; border-radius: 100px; letter-spacing: 1px; font-size: 16px; font-weight: 700!important; text-transform: uppercase!important; padding-left: 2em; padding-right: 2em; background-color: #7272ff !important;}#mepr-account-nav { text-align: center;}.mepr-nav-item a, .mepr-payments a { background: #eeeeee; padding: 0.5em 1em; border-radius: 100px; }/*styles form fields and text form field text*/.mp_wrapper textarea, .mp_wrapper select, .mp_wrapper input[type=text], .mp_wrapper input[type=url], .mp_wrapper input[type=email], .mp_wrapper input[type=tel], .mp_wrapper input[type=number], .mp_wrapper input[type=password] { border: 1px solid rgba(71,74,182,0.12)!important; color: rgba(114,114,255,0.91)!important; padding: 12px 10px !important; background: #f8f8f8} |
Este CSS agregará estilo a la navegación de la página Cuenta, campos de formulario, botones de formulario y enlaces. También agregará un estilo similar a sus formularios y botones de registro.
Página de agradecimiento
Diseño utilizado: diseño genérico
Modificaciones de diseño: todo lo que hay que hacer es actualizar el diseño con contenido nuevo. Una adición importante es la CTA que lleva al usuario al curso en el que se registró.
La página de agradecimiento es a donde se redirige al usuario una vez que completa el proceso de registro. No es una página específica de complemento, por lo que tiene el poder de Divi Builder para este. Simplemente importe el diseño genérico a la página desde la Biblioteca Divi, actualice el título de la página y agregue contenido.
Puede designar la página de agradecimiento predeterminada en las Opciones de MemberPress. Y puede anular esto para cada membresía que cree seleccionando «Habilitar mensaje de página de agradecimiento personalizado» en la pestaña Registro de Opciones de membresía en la parte inferior de la página.
Recordatorio: es posible que desee continuar y crear otra página de agradecimiento para sus otras membresías para que pueda personalizar la CTA para cada una.
Página de inicio de sesión
Diseño utilizado: diseño de contacto de codificación
Código abreviado utilizado: [mepr-login-form]
Nota: cualquier página de inicio de sesión que seleccione en la pestaña Página en las Opciones de MemberPress tendrá una opción para colocar manualmente el formulario de inicio de sesión en la página al editar la página.
Modificaciones de diseño: utilicé el diseño de contacto de codificación porque quería usar el diseño de dos columnas de la sección del formulario de contacto para incluir el formulario de inicio de sesión y un CTA adyacente para registrarse como miembro.
CSS personalizado: afortunadamente, el css personalizado que ingresamos anteriormente para nuestro formulario de cuenta también nos ha brindado un formulario de inicio de sesión excelente.
Página(s) de registro
Diseño utilizado: diseño del curso de codificación
Shortcode utilizado: depende de la membresía
Modificaciones de diseño: cambié la fila de la sección del encabezado a una fila de una columna y eliminé la imagen. Luego eliminé todos menos uno de los anuncios publicitarios en la sección de contenido de la izquierda y agregué mi código abreviado del formulario de registro al contenido del módulo publicitario.
Memberpress crea una página de registro automáticamente con cada membresía que crea. El formulario de registro utilizado en cada una de estas páginas se extrae del formulario de registro que crea en la pestaña de campos en las Opciones de MemberPress.
Sin embargo, no tiene que usar esta página de registro. Al configurar su membresía, puede encontrar una lista de códigos cortos en la parte inferior de la página Editar membresía en el cuadro Opciones de membresía en la pestaña Registro haciendo clic en Códigos cortos de membresía. Uno de los códigos abreviados le permite generar un formulario de registro para esa membresía específica.
Este es el código abreviado que deberá agregar a la página de registro que cree para esa membresía.
Así es como se ve la página de registro.
Nota: Desafortunadamente, si la membresía es paga y requiere un proceso de pago, el usuario será redirigido a la plantilla de página de registro predeterminada para completar la compra. Por lo tanto, sería una buena idea agregar un CSS personalizado a la página de registro predeterminada para mantener el diseño consistente durante el pago.
No, déjame mostrarte qué diseños y modificaciones usé para crear el resto de mis páginas de membresía.
Diseño de páginas de sitios de membresía
Página de inicio
Diseño utilizado: Inicio de codificación
Modificaciones de diseño: eliminé los módulos de imagen que mostraban gráficos. Hice la sección de encabezado y los diseños de columna de la sección uno “Fácil como 1..2..3..”. Cambié los botones a texto. y actualice la sección de cursos con los tres cursos que ofrezco (gratis, plata y oro). Me tomó alrededor de 3 minutos, así que no juzguen con demasiada dureza :).
Página de Membresías
Diseño utilizado: cursos de codificación
Modificaciones de Diseño: Cambié el Título. Para la fila que contiene los cursos, cambio el diseño de la columna a una columna y un ancho personalizado de 680 px. Luego eliminé todos menos tres cuadros (en realidad son módulos publicitarios). Se agregó un enlace debajo de cada uno que iría a la página de registro correspondiente o a la página de precios.
Página de precios
Diseño utilizado: Precios de codificación
Modificaciones: Esto fue fácil. Todo lo que hice fue actualizar el contenido de las tablas de precios y agregar enlaces para ir a las páginas de registro de cada membresía.
Página de descripción general del curso de membresía
Diseño utilizado: Curso de codificación
Modificaciones: Esto también fue bastante simple. Para la sección del encabezado, actualicé el contenido, hice la columna de ancho completo y centré el texto. luego actualizo el contenido de las notas publicitarias a la izquierda de la página y agregué un enlace para ver la página de la lección de cada una.
La siguiente imagen muestra la página de descripción general del curso de membresía para la membresía gratuita. Deberá crear uno para cada una de las membresías que ofrece. Además, debo recordarle que esta es la página principal de todas las páginas de la lección ( páginas secundarias ) de este curso (consulte la parte 1 para saber por qué esto es importante).
Página de la lección
Diseño utilizado: Curso de codificación
Modificaciones: básicamente, hice las mismas modificaciones que hice para la página de descripción general del curso de membresía, excepto que actualicé el contenido y el contenido de la barra lateral.
La siguiente imagen muestra mi página de la lección 1 del curso gratuito. Esta página, junto con las otras páginas de lecciones del curso, es una página secundaria de la página principal Página de descripción general del curso de membresía gratuita.
Terminando
A medida que esta serie de 2 partes llega a su fin, espero que vea cuán poderosos pueden ser MemberPress y Divi juntos al crear un sitio de Membresía. MemberPress tiene mucho que ofrecer y debo decir que es bastante fácil de usar. Algunas cosas que me llaman la atención son el sistema de reglas de MemberPress para proteger el contenido y crear secuencias de goteo. Las notificaciones por correo electrónico también fueron muy fáciles de personalizar y editar. Y me encantó la capacidad de agrupar membresías de manera que los miembros puedan cambiar/comprar diferentes membresías desde la página de su cuenta.
Por el lado del diseño, pensé que Divi encajaba bastante bien con MemberPress. Las páginas Front-end de MemberPress no se crearon automáticamente para usted (lo cual fue refrescante) y los códigos abreviados estaban disponibles para generar el contenido dentro de los Módulos Divi. Sí, todavía tenemos limitaciones de diseño en el sentido de que cierto contenido no puede ser objetivo de Divi Builder. Pero tener que agregar algunas líneas de CSS personalizado para pulir un sitio de membresía completo no está mal si me preguntas.
Espero escuchar de usted en los comentarios.
¡Salud!