Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo agregar reseñas de estrellas a las páginas de perfil con el nuevo y gratuito paquete de diseño de niñera de Divi . De esa manera, cada vez que alguien eche un vistazo a las diferentes niñeras de su empresa, también podrá ver cómo la gente ha respondido a su presencia en el pasado. Es probable que esto aumente la credibilidad de cada niñera y lo ayudará a convertir clientes potenciales en conversiones mucho más rápidamente.
Parte 1: Descargue el complemento de revisiones del sitio
Paso 1: Descargar complemento
Lo primero que debe hacer es descargar este complemento gratuito y genial llamado Site Reviews yendo al siguiente enlace y haciendo clic en el botón de descarga. Aunque no entramos en otros complementos, Site Reviews es uno de nuestros principales complementos de revisión entre una gran cantidad de otras excelentes opciones.
Paso 2: Cargue y active el complemento
Luego, cargue el complemento y asegúrese de activarlo también.
Suponemos que ya ha agregado cada diseño del paquete de diseño de niñera como una página y también ha creado un menú principal con estas páginas. Sin embargo, vamos a hacer un pequeño cambio. Para hacer ese cambio, navegue a su menú yendo a su Tablero de WordPress > Apariencia > Menús .
Paso 2: arrastre las páginas de perfil debajo de la página del equipo
Dependiendo de la cantidad de perfiles que tenga su sitio web de niñera, utilícelos como elementos de submenú en la página de su equipo.
Parte 3: modificar la configuración del complemento de revisiones del sitio
Paso 1: vaya a la configuración del complemento de revisiones del sitio
A continuación, puede realizar algunos pequeños cambios en el complemento yendo a Reseñas del sitio > Configuración .
Paso 2: elija sus preferencias generales
Dentro de la pestaña general, elige la configuración que deseas aplicar a las reseñas. Una de estas opciones le permite habilitar la aprobación de revisiones. Es mejor que seleccione ‘sí’ para esta opción para tener control total sobre lo que aparece en su sitio web y lo que no.
Paso 3: habilite los avatares
Para aumentar el factor de credibilidad de sus niñeras, también puede habilitar avatares dentro de la pestaña de reseñas.
Parte 4: Crear publicaciones en blanco para cada perfil y publicar
Paso 1: Crea una nueva publicación para cada perfil
El complemento Site Reviews le permite conectar revisiones a diferentes publicaciones. Sin embargo, estamos utilizando páginas para nuestras páginas de perfil. Es por eso que deberá crear algunas publicaciones en blanco que coincidan con la cantidad de niñeras que está mostrando en su sitio web. Para ello, ve a Publicaciones > Añadir nuevo y repite este paso para cada una de las niñeras que tengas .
Paso 2: Publicarlos
Asigne un título a sus publicaciones y publíquelas inmediatamente después. Pero no te preocupes, una vez que completemos todos los pasos, podremos volver a ponerlos en borrador sin perder las revisiones. El complemento solo necesitará conectarse a una determinada publicación de blog para que los códigos abreviados funcionen en una página.
Parte 5: agregar códigos cortos de revisiones del sitio a la página de perfil
Paso 1: Abra la página de perfil con Backend Builder y busque la sección de reseñas
Ahora podemos comenzar a agregar los códigos abreviados de revisión a nuestra página de perfil. Agregaremos dos cosas; revisiones recientes y un formulario de envío de revisión. Para agregar los códigos cortos a nuestra página, necesitaremos usar el generador de backend. Más adelante, cambiaremos a Visual Builder para realizar cambios en la apariencia. Ahora, comience ubicando la siguiente sección en su página usando el generador de backend:
Paso 2: Reemplace el módulo de texto existente con el código abreviado de revisiones recientes (Backend Builder)
Luego, abra el siguiente módulo de texto:
Borre todo el contenido del cuadro de contenido, haga clic en el icono de estrella y seleccione ‘Reseñas recientes del sitio’. Esta opción hará que las diferentes reseñas se muestren en tu página.
Una vez que haga clic en el botón ‘Reseñas recientes del sitio’, utilice la siguiente configuración y luego haga clic en ‘Insertar código abreviado’:
- Cuenta: 3
- ID de publicación: 1 (este ID de publicación deberá cambiar cada vez que edite otra página de perfil de niñera para asegurarse de que las reseñas sean exclusivas de esa página de perfil)
Paso 3: agregue un nuevo módulo de texto con el código abreviado de envío de revisión (Backend Builder)
A continuación, agregue un nuevo módulo de texto a la primera columna de la segunda fila de esta sección:
Luego, haga clic en el ícono de estrella nuevamente y seleccione ‘Enviar una revisión del sitio’. Este shortcode hará que aparezca un formulario de envío que permitirá a las personas enviar una reseña que tengan de esa niñera en particular.
Asegúrese de agregar el mismo número de ID de publicación a este código abreviado como lo hizo para las revisiones recientes en el paso anterior de este tutorial. Las revisiones recientes y el formulario de envío de revisión deben tener el mismo ID de publicación para asegurarse de que solo se muestren revisiones precisas en la página. Dependiendo de sus necesidades, también puede ocultar ciertos elementos del formulario de envío.
Paso 4: cambie a Visual Builder
Ahora que hemos agregado los dos códigos abreviados necesarios, podemos cambiar a Visual Builder para realizar algunos cambios de apariencia.
Paso 5: Modificar la configuración de texto Reseñas recientes Código abreviado
El primer módulo de texto que cambiaremos es el que contiene las reseñas recientes. Abra la configuración, vaya a la subcategoría Texto dentro de la pestaña Diseño y aplique los siguientes cambios que coinciden con todo el paquete de diseño de niñera:
- Fuente del texto: Nunito
- Peso de la fuente del texto: Negrita
- Color del texto: #262f71
Paso 6: Modifique la configuración del texto del encabezado Código abreviado de revisiones recientes
Desplácese hacia abajo en la misma pestaña, abra la subcategoría Texto de encabezado, cambie a la pestaña H3 y aplique las siguientes configuraciones a continuación:
- Título 3 Fuente: Nunito
- Encabezado 3 Peso de fuente: Negrita
- Título 3 Color del texto: #88d4f2
Paso 7: Modificar la configuración de texto Enviar código abreviado de revisión
El módulo de texto de revisión de envío también necesitará algunas modificaciones en su subcategoría de texto:
- Fuente del texto: Nunito
- Peso de fuente de texto: Negrita
- Color del texto: #262f71
Para hacer coincidir el botón del formulario de envío con el paquete de diseño de niñera, necesitaremos aplicar un poco de código CSS. No podemos realizar esta modificación dentro del propio Divi Builder ya que estamos utilizando un complemento de terceros. Para agregar este código CSS a su página, haga clic en el ícono en la parte inferior de su página y abra la configuración.
Luego, vaya a la pestaña Avanzado y agregue las siguientes líneas de código CSS al cuadro CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
input[class="button button-primary"] {background-color: #88D4F2;color: white;border: none;padding-bottom: 14px;padding-top: 14px;padding-left: 24px;padding-right: 24px;border-radius: 10px;font-family: 'nunito';font-weight: bold;} |
Paso 9: repita los pasos para cada perfil y cambie el número de identificación de la publicación
¡Ya terminaste! Lo único que queda por hacer es guardar la página de perfil y salir del generador visual. Si tiene varios perfiles de niñera en su sitio web, deberá repetir este proceso para cada una de las páginas de perfil. Y mientras agrega los códigos cortos; no olvides:
- Cambia el número de ID de la publicación (pasa de 1 a 2 a 3, según la cantidad de publicaciones que hayas publicado)
- Cambie el número de identificación de la publicación tanto para el código abreviado de revisión de envío como para el código abreviado de revisiones recientes
Parte 6: cuando haya completado todos los perfiles, haga borradores a partir de las publicaciones
Paso 1: Haz borradores a partir de publicaciones
Una vez que haya terminado de crear todos sus perfiles, puede continuar y poner cada una de las publicaciones del blog en borrador. Solo necesitamos las publicaciones para habilitar las revisiones y asegurarnos de que sean exclusivas para los diferentes perfiles. Eliminar las publicaciones del blog puede hacer que las revisiones ya no funcionen, por lo que ponerlas en borrador es una buena alternativa.
Pensamientos finales
En esta publicación, le mostramos cómo agregar reseñas de estrellas a cada página de perfil de niñera utilizando el nuevo paquete de diseño de niñera y el complemento gratuito de revisión del sitio . Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!