Creación de un sitio de revisión de productos con extra - Parte 2

Bienvenido a la parte 2 de esta serie de 4 partes sobre cómo desarrollar un sitio de revisión de productos utilizando Extra. Si se está devanando los sesos sobre cómo empezar a desarrollar un sitio de revisión de productos, esta serie es para usted. Con su funcionalidad de revisión incorporada y categorización inteligente de publicaciones, Extra está especialmente equipado para crear excelentes reseñas, plantillas de publicaciones de productos, mega menús y diseños de categorías en minutos. Únase a mí mientras exploramos el poder de Extra.

En la parte 1 de esta serie, comenzamos nuestro viaje de crear un sitio de revisión de productos configurando las Opciones de tema y la Configuración del personalizador de temas.

Hoy vamos a comenzar de inmediato agregando nuestra primera revisión de producto como una nueva publicación y personalizando el diseño de la publicación para esa publicación utilizando Divi Builder y la configuración del tema adicional. Una vez que haya completado este tutorial, tendrá una plantilla de publicación guardada que puede extraer de su biblioteca para crear el resto de sus publicaciones con facilidad.

Aquí hay un adelanto de lo que vamos a construir

Preparación de los elementos de diseño

Dado que agregaremos nuestros productos en esta parte de la serie, necesitará las imágenes de sus productos. Para este tutorial, tendré 4 categorías con 3 productos en cada categoría, por lo que usaré un total de 12 imágenes. Estoy usando imágenes de archivo de Shutterstock con fondos blancos para darle un aspecto más limpio.

Para diseñar el diseño de la publicación, usaremos Visual Builder y un poco de CSS personalizado.

Empecemos.

Creación de un sitio de revisión de productos con extra - Parte 2

Suscríbete a nuestro canal de Youtube

Agregar su primera reseña de producto como una publicación nueva

Desde el panel de WordPress, vaya a Publicaciones> Agregar nuevo .

Cada publicación será la revisión de su producto, por lo que el nombre de su publicación debe ser el nombre de su producto. Dado que mi producto va a ser un rastreador de actividad física, ingresaré "Fitness Tracker" como título de mi publicación.

Nota : si aún no lo ha hecho, ahora es un buen momento para establecer la configuración de su enlace permanente en la opción "Nombre de la publicación" para que su URL contenga solo el nombre del producto (su preferencia, por supuesto).

A continuación, haga clic en el botón "Usar Divi Builder" y luego en el botón "Usar Visual Builder" para implementar Visual Builder.

Desde Visual Builder, inserte una fila de una columna y agregue un módulo de texto a la columna.

En la pestaña de contenido de la Configuración del módulo de texto, ingrese el siguiente html en el cuadro de contenido (asegúrese de que está trabajando en la pestaña "texto" y no en la pestaña "visual"):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Esto servirá como nuestros subtítulos "elegantes" para diferentes secciones. Le daremos estilo con CSS personalizado más tarde.

Justo debajo de la etiqueta h2 puede agregar el texto de descripción de su producto. Estoy usando algo de "lorem ipsum" por ahora.

Agregue otra fila de una columna debajo de su fila actual y agregue otro módulo de texto en ella. En la configuración del módulo de texto, agregue otro subtítulo html insertando la siguiente etiqueta h2 "Pros y contras" en la pestaña de texto de la sección de contenido.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Aquí comenzará la sección Pros y contras de la revisión de su producto.

A continuación, agregue una fila de la mitad y la mitad (dos columnas) debajo de la anterior. En la columna de la izquierda agregue un módulo de texto y coloque un título h3 con el texto “Pros”.

Ahora duplique ese módulo de texto y arrastre el módulo duplicado a la columna de la derecha. Cambie el título h3 en el nuevo módulo de texto a "Contras".

Sugerencia : En Visual Builder, simplemente puede hacer clic en el cuadro de texto y escribir el nuevo título en lugar de abrir la configuración.

A continuación, usaremos el módulo de propaganda para agregar algunos subelementos debajo de los títulos Pros y Contras.

En la columna de la izquierda, debajo del módulo de texto "Pros", agregue un módulo Blurb. En la pestaña de contenido de la Configuración de Blurb, agregue una línea de texto (estoy usando texto ficticio por ahora) en el cuadro de contenido.

Luego, desplácese hacia abajo y seleccione "Usar icono". En el cuadro Icono que aparece, seleccione el símbolo más.

Haga clic en la pestaña Diseño y actualice lo siguiente:

Color del icono: #ffffff

Icono de círculo: SÍ

Color del círculo: # 5bd999

Ubicación de la imagen / icono: Izquierda

Guardar ajustes

Duplique (o copie) ese módulo de propaganda y arrástrelo (o péguelo) debajo del módulo de texto "Contras". Luego actualice la pestaña Diseño de configuración de Blurb con el siguiente color de círculo: # e6567a

Guardar ajustes

Ahora duplique los módulos de propaganda en cada columna unas cuantas veces, ya que no sabemos cuántos puede necesitar para un determinado producto.

Ahora vaya a la configuración de la fila que contiene sus pros y contras. En la pestaña de contenido , actualice lo siguiente:

Fondo de la columna 1: # f8f8f8

Fondo de la columna 2: # f8f8f8

En la pestaña Diseño , actualice lo siguiente:

Usar ancho de canalón personalizado: SÍ

Ancho de canalón: 1

Ecualizar alturas de columna: SÍ

Relleno de la columna 1: 20px (arriba), 20px (derecha), 20px (abajo), 20px (izquierda)

Relleno de la columna 2: 20px (arriba), 20px (derecha), 20px (abajo), 20px (izquierda)

En la pestaña Avanzado , agregue el siguiente CSS personalizado al cuadro de texto Elemento principal de la columna 1 :

 border-top: 10px solid #5bd999; 

Agregue el siguiente CSS al cuadro de texto del elemento principal de la columna 2 :

 border-top: 10px solid #e6567a; 

Consejo : si tiene una versión actualizada de Extra, debería poder aplicar las nuevas animaciones a su sitio web. Agregue una animación a la fila Pros y Contras yendo a la Configuración de Fila en la pestaña Diseño y seleccionando el Estilo de Animación que desee. Esto hará que su sección de pros y contras se muestre a medida que el usuario se desplaza hacia abajo en la página.

Guardar ajustes

Duplique (o copie) la segunda fila que contiene el subtítulo “Pros y contras” y arrástrela (o péguela) debajo de la fila que acabamos de terminar. Luego cambie el encabezado h2 a "Especificaciones".

Duplique la fila de dos columnas que contiene los elementos de la lista de pros y contras y colóquela debajo del nuevo módulo de texto con el título "Especificaciones". Elimine los dos módulos de texto que contienen los encabezados "Pros" y "Contras" de la columna.

Ahora haga clic en Configuración de Blurb para el primer módulo de propaganda en la columna de la izquierda.

En la pestaña Contenido , cambie el icono a una marca de verificación.

En la pestaña Diseño , cambie el Color del círculo a # 222222.

Guardar ajustes

Ahora elimine los otros módulos de propaganda y reemplácelos con el que acaba de actualizar duplicándolos y arrastrándolos a los lugares correctos.

Ahora vaya a la Configuración de fila y reemplace el CSS personalizado tanto en el cuadro de texto del Elemento principal de la columna 1 como en el cuadro de texto del Elemento principal de la columna 2 con lo siguiente:

border-top: 10px solid #222222;

Guardar ajustes

Ahora, lo último que necesitamos agregar a este diseño de publicación es un botón de "comprar". Continúe y cree una nueva fila de una columna y agregue un módulo de botones . Luego actualice la configuración del módulo de botones de la siguiente manera:

En la pestaña Contenido ...

Texto del botón: Comprar ahora

URL del botón: [ingrese la URL] (lo más probable es que eventualmente sea un enlace de afiliado a un sitio de terceros)

Url se abre: en la nueva pestaña

En la pestaña Diseño…

Alineación de botones: centro

Color del texto: oscuro

Usar estilos personalizados para el botón: SÍ

Tamaño del texto del botón: 30px

Color del texto del botón: # 222222

Color del texto de desplazamiento del botón: # 5bd999

Color de fondo de desplazamiento del botón: #ffffff

Color del borde de desplazamiento del botón: # 5bd999

Eso es todo para la sección de contenido del diseño de publicación de su producto. Asegúrate de guardar la página . Una vez que haya guardado la página, salga del constructor visual para editar la publicación desde el panel de WordPress.

Agregar reseñas a su publicación

Desplácese hacia abajo hasta la parte inferior de la página del editor de publicaciones y busque el cuadro titulado "Revisar el contenido del cuadro" .

Esta inteligente adición a Extra le permite agregar una calificación de producto a sus publicaciones. El sistema de clasificación está diseñado para tener una o varias averías. Un desglose es un componente que constituye la calificación general. Por ejemplo, si va a calificar una cámara, los desgloses de ejemplo incluirían cosas como diseño, rendimiento, duración de la batería, etc. Estos son componentes de la cámara a los que puede agregar un porcentaje de calificación por separado. Luego, Extra calculará el porcentaje de calificación general en función de esos componentes y lo mostrará en el cuadro Revisar. El cuadro de revisión también tiene áreas de entrada útiles para un título de cuadro de revisión, un resumen y un título de resumen.

Para agregar su reseña, actualice el contenido de la caja de reseñas con lo siguiente:

Título del cuadro de revisión: [ingrese el título del cuadro de revisión] (sugiero "Revisión de producto" o "Revisión editorial")

Resumen: [ingresar resumen]

Título del resumen: [ingrese un título para el resumen] (solo estoy usando "Resumen" para que sea más simple)

A continuación, agregue cuatro desgloses con un título y un porcentaje de calificación de la siguiente manera:

Desglose # 0

Título: Diseño

Clasificación: 85%

Desglose # 1

Título: Performance

Calificación: 90%

Desglose # 2

Título: Duración de la batería

Clasificación: 70%

Desglose # 3

Título: Características

Clasificación: 85%

Ahora que tiene su Calificación en su lugar, démosle algunos toques finales a nuestra publicación antes de publicarla.

Asignar una categoría a su publicación

Asegúrese de asignar la categoría correcta a su publicación / producto haciendo clic en la casilla de verificación junto a la categoría. En este caso, dado que esta publicación es para un rastreador de actividad física, seleccionaré la categoría "Salud y forma física". Además, desmarque la casilla de "sin categorizar".

Aquí hay un desglose de los productos y sus categorías que estoy usando:

• Ropa
  • Zapatos
  • Mirar
  • Calcetines geniales
• Cocina
  • Cuchillos de cocina
  • Mezclador
  • Tabla de cortar
• salud y estado fisico
  • Rastreador de ejercicios
  • Pesos
  • Rueda de andar
• Electrónica
  • Cámara
  • Auriculares
  • Ordenador portátil

No muy abajo en la página, encontrará el cuadro Configuración adicional. Estos controles le permiten anular la configuración predeterminada del tema para esta publicación en particular. Por supuesto, puede personalizar esto como desee, pero para este ejemplo, marco las siguientes casillas:

Publicación destacada (esto permite que el producto se muestre como una publicación destacada en ciertos módulos de categoría).

Ocultar cuadro de autor

Finalmente, agregue su imagen destacada. Asegúrese de que tenga al menos 1280 px de ancho, ya que usaremos un diseño de una columna de ancho completo para la imagen destacada.

Publica tu publicación.

Continúe y guarde esta plantilla para que pueda duplicar este proceso para todos sus productos / publicaciones. Para guardar la plantilla, haga clic en el icono "Guardar en la biblioteca" en el menú del constructor visual en la parte inferior de la página, ingrese un nombre de plantilla y haga clic en Guardar en la biblioteca.

Ahora, cuando vaya a agregar el resto de sus publicaciones, puede cargar esta plantilla desde la biblioteca y completar el contenido para la revisión del nuevo producto. Entonces, el proceso se vuelve mucho más rápido.

Agregar CSS personalizado

Casi terminamos. Necesitamos agregar algo de CSS personalizado a nuestro tema para diseñar algunos elementos de la publicación. Para hacer esto, desde el Panel de WordPress, vaya a Personalizador de temas> CSS adicional e ingrese lo siguiente:

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Guardar y publicar

Ahora veamos nuestro resultado.

El sistema de calificación de usuarios

Tenga en cuenta que en la parte inferior de la publicación tiene un sistema de racionamiento de estrellas para el usuario.

Aquí, sus visitantes pueden enviar una calificación inicial en cualquier producto simplemente colocando el cursor sobre los íconos de estrellas y haciendo clic en el nivel de estrella de su elección.

La calificación general del usuario se mostrará en los metadatos del extracto de la publicación.

Siempre puede optar por desactivar esta función en el cuadro Configuración adicional.

Bueno, eso es todo. Espero que hayas disfrutado de la parte 2 de esta serie.

Próximamente: Creación de diseños de categorías para mostrar sus productos

En la parte 3, le mostraré cómo crear los diseños de categorías para la página de inicio y la página Todas las categorías. Asegúrese de usar su nueva plantilla de publicación para agregar al menos 3 productos para cada una de las 4 categorías para prepararse para la parte 3 de la serie. Los necesitará para completar los módulos de categoría que mostrarán sus productos.

Esto es lo que puede esperar construir en la parte 3:

No dude en enviar preguntas o comentarios a continuación. Espero escuchar de usted.