Divi y sus opciones de condición integradas hacen que sea realmente fácil ocultar o mostrar cualquier elemento en función de una serie de condiciones, incluido el estado de inicio de sesión del usuario. Una aplicación realmente útil de esta funcionalidad condicional es crear publicaciones de blog exclusivas para miembros. La idea es mostrar a los que no son miembros (o usuarios que han cerrado sesión) un breve extracto del contenido de la publicación junto con un llamado a la acción para registrarse o iniciar sesión para ver el artículo completo. Luego, para los miembros (o usuarios registrados), muestra la publicación completa con todo el contenido.
En este tutorial, le mostraremos cómo crear publicaciones de blog exclusivas para miembros utilizando el generador de temas de Divi y las nuevas opciones de condición de Divi. Una vez hecho esto, tendrá una plantilla de publicación de blog dinámica que incentivará a los usuarios a convertirse en miembros de su sitio para ver el contenido completo de cada publicación.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí hay una publicación de blog que muestra solo el extracto de la publicación y una superposición de CTA que invita a los usuarios a convertirse en miembros o iniciar sesión para ver el artículo completo.
Una vez que inicie sesión utilizando el formulario de inicio de sesión, será redirigido a la misma publicación que muestra todo el contenido de la publicación.
Descargue la plantilla de publicación de blog exclusiva para miembros GRATIS
Para poner sus manos en la plantilla de publicación de blog exclusiva para miembros gratuita de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo cargar la plantilla
Ir al Creador de temas Divi
Para cargar la plantilla, haga lo siguiente:
- Navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.
- Luego, en la esquina superior derecha, verás un ícono con dos flechas. Haga clic en el icono.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Sube el archivo JSON que podrías descargar en esta publicación
- Haga clic en ‘ Importar plantillas de Divi Theme Builder ‘.
- Guardar cambios
Cómo crear publicaciones de blog exclusivas para miembros con las opciones de condición de Divi
Parte 1: Cargar la plantilla de publicación de blog
Para este tutorial, vamos a crear publicaciones de blog exclusivas para miembros agregando opciones de condición en una plantilla de publicación de blog. Puede usar cualquier plantilla de publicación de blog personalizada que desee, pero por ahora, vamos a usar la plantilla de publicación de blog de Marina que ya está prefabricada y lista para descargar en nuestro blog.
Para descargar la plantilla de publicación de blog de Marina, vaya a la publicación en nuestro blog . En la sección Descargar, ingrese su dirección de correo electrónico para acceder a la descarga. Luego haga clic en el botón de descarga para descargar el archivo zip.
Una vez descargado, descomprima el archivo para que el archivo JSON esté listo para cargar.
Para cargar la plantilla de publicación de blog en su sitio, haga lo siguiente:
- Navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.
- Luego, en la esquina superior derecha, verás un ícono con dos flechas. Haga clic en el icono.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Sube el archivo JSON que podrías descargar en esta publicación
- Haga clic en ‘Importar plantillas Divi Theme Builder’.
- Haga clic en el icono de edición en el área del cuerpo personalizado de la plantilla para comenzar a editar el diseño.
Parte 2: Creación de contenido de extracto de publicación para usuarios que han cerrado la sesión
Una vez que se haya importado la plantilla de la publicación del blog y haya hecho clic para editar el área del cuerpo personalizada de la plantilla, estará listo para agregar el contenido del extracto de la publicación para los usuarios que no hayan iniciado sesión. El contenido del extracto de la publicación está disponible como contenido dinámico en Divi y es una manera perfecta de mostrar una vista previa del contenido de la publicación sin mostrar todo el contenido de la publicación.
Agregar nueva fila para extracto de publicación
Antes de agregar el contenido del extracto de la publicación, primero agregue una nueva fila directamente debajo de la fila existente que contiene el contenido de la publicación y los módulos de navegación de la publicación.
Luego copie los estilos de fila de la fila directamente arriba de la nueva fila y pegue los estilos en la nueva fila.
Abra la configuración de la nueva fila y actualice el relleno de la siguiente manera:
- Acolchado inferior: 20px
Esto nos dará un espaciado estático que podemos superponer con nuestra sección superpuesta más adelante.
Agregar nuevo módulo de texto con extracto de publicación como contenido dinámico
Dentro de la fila, agregue un nuevo módulo de texto.
En la pestaña de contenido de la configuración de texto, haga clic en el ícono de contenido dinámico al pasar el mouse sobre el área del cuerpo y seleccione usar el extracto de la publicación como contenido dinámico.
Para hacer coincidir los estilos de texto con el diseño actual, abra la configuración del módulo de contenido de publicación y copie los estilos de texto.
Luego, pase los estilos de texto al nuevo módulo de texto que contiene el contenido dinámico del extracto de la publicación.
A continuación, haga lo mismo con los estilos de título. Copie los estilos de encabezado del módulo de contenido de la publicación.
Luego pegue los estilos de texto del encabezado en el nuevo módulo de texto.
Ahora cualquier contenido de extracto de publicación heredará los estilos coincidentes establecidos en el módulo de texto.
Parte 3: Creación de la sección de superposición de CTA para usuarios que han cerrado la sesión
Ahora que el contenido del extracto de la publicación está listo, estamos listos para crear la sección de superposición de CTA que queremos que aparezca para los usuarios que no han iniciado sesión.
Agregar nueva sección y fila
Para hacer esto, agregue una nueva sección regular debajo de la sección que contiene el contenido de la publicación y los extractos de la publicación.
Agregue una fila de dos columnas a la sección.
Agregar llamada a la acción para no miembros
En la columna de la izquierda, agregue un módulo de llamada a la acción. Esto servirá como un llamado a la acción que alienta al usuario a hacer clic en un botón para registrarse como miembro. Por lo tanto, querrá asegurarse de tener una página de registro de membresía a la que pueda redirigir a los usuarios con la URL del botón.
En la pestaña de contenido de la configuración de la llamada a la acción, actualice lo siguiente:
- Título: Acceso a contenido premium
- Botón: Únete por $4.99/mes
- URL del enlace del botón: #
- Color de fondo: #12115d
En la pestaña de diseño, actualice los estilos de texto y botón de la siguiente manera:
- Fuente del título: Pantalla Playfair
- Peso de la fuente del título: Negrita
- Altura de la línea del cuerpo: 2em
- Tamaño del texto del botón: 16px
- Color del texto del botón: #12115d
- Color de fondo del botón: #fff
- Relleno de botones: 0,7 em arriba, 0,7 em abajo, 1,7 em izquierda, 1,7 em derecha
Agregar formulario de inicio de sesión para miembros existentes
En la columna de la derecha, agregue un módulo de inicio de sesión. Esto permitirá que los usuarios existentes inicien sesión para ver el artículo completo si aún no lo han hecho.
En la pestaña de contenido de la configuración de inicio de sesión, actualice lo siguiente:
- Título: Inicie sesión para leer el artículo completo
- Redirigir a la página actual: SÍ
- Usar color de fondo: NO
NOTA: Asegúrese de redirigir a los usuarios a la página actual para una mejor experiencia de usuario. Además, todavía no podrá ver el texto blanco sin un color de fondo, pero lo arreglaremos.
En la pestaña de diseño, actualice lo siguiente:
- Color de fondo de los campos: #e3e8f0
- Color del texto: oscuro
- Fuente del título: Pantalla Playfair
- Peso de la fuente del título: Negrita
- Alineación del texto del título: centro
Para acelerar el proceso de obtener un estilo de botón coincidente, copie los estilos de botón en el Módulo de suscripción de correo electrónico en la columna derecha de la fila dentro de la sección con el título «Únase a nuestro boletín».
Luego pegue los estilos de los botones en el nuevo módulo de inicio de sesión que acabamos de crear.
Agregar estilos de superposición de sección
Para completar el diseño de la sección superpuesta, necesitamos agregar algunos elementos de estilo a la sección que contiene nuestro formulario de CTA e inicio de sesión. Abra la configuración de la sección y actualice la configuración del diseño de la siguiente manera:
- Margen: -60px superior
- Sombra de caja: ver captura de pantalla
- Posición vertical de la sombra del cuadro: -50px
- Posición de desenfoque de sombra de cuadro: 50px
- Color de sombra: #fff
Esto elevará la sección 60 px para que la sombra del cuadro se superponga a la parte inferior del texto del extracto de la publicación en la sección anterior.
En la pestaña Avanzado, asegúrese de que la sección superpuesta permanezca sobre los demás elementos de la página actualizando el Índice Z de la sección a 12.
- Índice Z: 12
Parte 4: Adición de condiciones de visualización a elementos según el estado de inicio de sesión del usuario
Ahora que la fila del extracto de la publicación y la sección superpuesta (con la CTA y el formulario de inicio de sesión) están completas, estamos listos para usar las opciones de condición integradas de Divi para ocultar y mostrar elementos según el estado de inicio de sesión del usuario.
Mostrar el contenido completo de la publicación para los usuarios registrados
Primero, agregaremos una condición de visualización para mostrar la fila que contiene el módulo de contenido de la publicación solo para los usuarios registrados.
Para hacer esto, abra la configuración de la fila y, en la pestaña Avanzado, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione la opción «Estado de inicio de sesión».
En la ventana emergente de configuración Estado de inicio de sesión, asegúrese de que la opción esté configurada en Mostrar solo si el usuario ha iniciado sesión . Luego guarde los cambios.
Mostrar fila de extracto de publicación para usuarios que han cerrado sesión
Con el contenido de la publicación actualmente oculto para los usuarios que no han iniciado sesión, debemos mostrar la fila que contiene el contenido del extracto de la publicación a esos usuarios que no han iniciado sesión.
Para hacer esto, abra la configuración de la fila que contiene el extracto de la publicación y, en la pestaña Avanzado, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione la opción «Estado de inicio de sesión».
En la ventana emergente de configuración Estado de inicio de sesión, asegúrese de seleccionar la opción Mostrar solo si el usuario ha cerrado la sesión .
Luego guarde los cambios.
Mostrar sección de CTA superpuesta para usuarios que no han iniciado sesión
Además del contenido del extracto de la publicación, también queremos mostrar la sección de CTA superpuesta a los usuarios que no han iniciado sesión. Esto les dará la oportunidad de registrarse para obtener una membresía y/o iniciar sesión para ver el artículo completo.
Para hacer esto, abra la configuración de la sección que contiene la CTA y el formulario de inicio de sesión.
En la pestaña Avanzado, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione la opción «Estado de inicio de sesión».
En la ventana emergente de configuración Estado de inicio de sesión, asegúrese de seleccionar la opción Mostrar solo si el usuario ha cerrado la sesión .
Luego guarde los cambios.
Ocultar elementos adicionales para usuarios que han cerrado la sesión
Además del contenido de la publicación, es posible que desee ocultar secciones o elementos adicionales que contienen contenido de la publicación (como publicaciones relacionadas, comentarios, etc.). Para ocultar los elementos adicionales de la publicación, use la función de selección múltiple de Divi para seleccionar todas las secciones que desea ocultar, luego abra la configuración de uno de los elementos y agregue una nueva condición de visualización. Seleccione la condición Estado de inicio de sesión y asegúrese de que esté configurada para Mostrar solo si el usuario ha iniciado sesión . Y guarda los cambios.
Parte 5: Personalización del contenido del extracto de la publicación
De forma predeterminada, el contenido dinámico del extracto de la publicación mostrará un pequeño fragmento del contenido de la publicación. Sin embargo, puede personalizar el contenido del extracto de la publicación para mostrar el contenido que desee. Para hacer esto, edite cualquiera de sus publicaciones y agregue el contenido HTML debajo de la opción Extracto en la barra lateral con las opciones del editor de publicaciones.
Resultado final
Para ver el resultado final, abra una versión en vivo de una publicación de blog mientras está desconectado. Deberías ver el extracto de la publicación y la sección CTA superpuesta.
Una vez que inicie sesión con el formulario de inicio de sesión, será redirigido a la misma publicación que muestra todo el contenido de la publicación y cualquiera de las secciones adicionales que seleccionó para ocultar.
Pensamientos finales
Con suerte, este tutorial lo ayudará a obtener la funcionalidad que necesita para obtener publicaciones de blog exclusivas para miembros en su sitio Divi con facilidad. No olvides que siempre puedes usar las opciones del generador de temas de Divi para asignar esta plantilla de publicación de blog exclusiva para miembros a publicaciones específicas, publicaciones con ciertas categorías o a todas las publicaciones en todo el sitio.
Espero escuchar de usted en los comentarios.
¡Salud!