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 está pensando en cómo comenzar a desarrollar un sitio de revisión de productos, esta serie es para usted. Con su funcionalidad de revisión incorporada y la categorización inteligente de publicaciones, Extra está especialmente equipado para crear excelentes revisiones, 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 creación de un sitio de revisión de productos configurando las Opciones de tema y la Configuración del personalizador de tema.
Hoy vamos a comenzar a trabajar agregando nuestra primera revisión del 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 de 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.
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, así 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 nueva publicación
Desde el tablero de WordPress, ve 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 será un rastreador de actividad física, ingresaré «Rastreador de actividad física» como título de mi publicación.
Nota : si aún no lo ha hecho, ahora es un buen momento para establecer su configuración de enlace permanente en la opción «Nombre de 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 estar trabajando en la pestaña «texto» y no en la pestaña «visual»).
|
01
|
<h2 class="subtitle fancy"><span>Product Description</span></h2> |
Esto servirá como nuestros subtítulos «elegantes» para diferentes secciones. Lo diseñaremos con CSS personalizado más adelante.
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 su sección de contenido.
|
01
|
<h2 class="subtitle fancy"><span>Pros & Cons</span></h2> |
Esto comenzará la sección Pros y contras de la revisión de su producto.
A continuación, agregue una fila de la mitad de 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, puede simplemente hacer clic en el cuadro de texto y escribir el nuevo título en lugar de abrir la configuración.
A continuación, vamos a utilizar el módulo de publicidad para agregar algunos subelementos bajo los títulos Pros y Contras.
En la columna de la izquierda, debajo del módulo de texto «Pros», agregue un módulo de 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
Colocación de imagen/icono: Izquierda
Guardar ajustes
Duplique (o copie) ese módulo de publicidad 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 publicitarios en cada columna varias 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 ventajas y desventajas. 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 del canalón: 1
Igualar alturas de columna: SÍ
Relleno de la columna 1: 20 px (arriba), 20 px (derecha), 20 px (abajo), 20 px (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 :
|
01
|
border-top: 10px solid #5bd999; |
Agregue el siguiente CSS al cuadro de texto Elemento principal de la columna 2 :
|
01
|
border-top: 10px solid #e6567a; |
Sugerencia : 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 Configuración de fila en la pestaña Diseño y seleccionando el Estilo de animación que desee. Esto hará que la sección Pros y contras aparezca a medida que el usuario se desplaza hacia abajo en la página.
Guardar ajustes
Duplica (o copia) la segunda fila que contiene el subtítulo «Pros y contras» y arrástrala (o pégala) 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 ventajas y desventajas 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 «Cons» de la columna.
Ahora haga clic en Configuración de publicidad para el primer módulo de publicidad en la columna de la izquierda.
En la pestaña Contenido , cambie el ícono 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 publicitarios y reemplácelos con el que acaba de actualizar duplicándolos y arrastrándolos a los lugares correctos.
Ahora vaya a Configuración de fila y reemplace el CSS personalizado tanto en el cuadro de texto Elemento principal de la columna 1 como en el cuadro de texto Elemento principal de la columna 2 con lo siguiente:
|
01
|
border-top: 10px solid #222222; |
Guardar ajustes
Ahora, lo último que debemos 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 botón . 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: [ingresar 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 flotante del botón: #5bd999
Color de fondo de desplazamiento del botón: #ffffff
Color del borde flotante del botón: #5bd999
Eso es todo para la sección de contenido del diseño de la publicación de su producto. Asegúrate de guardar la página . Una vez que haya guardado la página, salga del generador visual para editar la publicación desde el tablero 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 contenido del cuadro» .
Esta adición inteligente a Extra le permite agregar una calificación de producto a sus publicaciones. El sistema de calificación está diseñado para tener uno o varios desgloses. 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 aspectos como el diseño, el rendimiento, la 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. Extra luego calculará el porcentaje de calificación general en función de esos componentes y lo mostrará en el cuadro Revisar. El cuadro Revisar también tiene áreas de entrada útiles para el título del cuadro de revisión, el resumen y el título del resumen.
Para agregar su revisión, actualice el contenido del cuadro de revisión con lo siguiente:
Título del cuadro de revisión: [ingrese el título del cuadro de revisión] (sugiero «Revisión del producto» o «Revisión editorial»)
Resumen: [introducir resumen]
Título del resumen: [ingrese un título para el resumen] (solo estoy usando «Resumen» para mantenerlo 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
Calificación: 85%
Desglose #1
Título: Actuación
Calificación: 90%
Desglose #2
Título: Duración de la batería
Calificación: 70%
Desglose #3
Título: Características
Calificación: 85%
Ahora que tiene su calificación en su lugar, demos algunos toques finales a nuestra publicación antes de publicarla.
Asigna una categoría a tu publicación
Asegúrate de asignar la categoría correcta a tu 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 condición física». Además, desmarque la casilla «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 actividad física
- 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, puedes personalizar esto como quieras, pero para este ejemplo, marco las siguientes casillas:
Publicación destacada (Esto permite que el producto se extraiga como una publicación destacada en ciertos módulos de categoría).
Ocultar cuadro de autor
Finalmente, agrega tu imagen destacada. Asegúrese de que tenga al menos 1280 px de ancho, ya que usaremos un diseño de una sola 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 biblioteca» en el menú del generador visual en la parte inferior de la página, ingrese un nombre de plantilla y haga clic en Guardar en biblioteca.
Ahora, cuando vaya a agregar el resto de sus publicaciones, puede cargar esta plantilla de la biblioteca y completar el contenido para la revisión del nuevo producto. El proceso entonces se vuelve mucho más rápido.
Agregar CSS personalizado
Casi terminamos. Necesitamos agregar algo de CSS personalizado a nuestro tema para darle estilo a algunos elementos de la publicación. Para hacer esto, desde el Panel de control de WordPress, vaya a Personalizador de temas > CSS adicional e ingrese lo siguiente:
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
/****************************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 clasificación de usuarios
Tenga en cuenta que en la parte inferior de la publicación, tiene un sistema de calificación de estrellas del usuario.
Aquí, sus visitantes pueden enviar una calificación de estrellas en cualquier producto simplemente pasando el mouse sobre los íconos de estrellas y haciendo clic en el nivel de estrellas 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 deshabilitar esta función en el cuadro Configuración adicional.
Bueno, eso es todo. Espero que hayan disfrutado la segunda parte 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ía 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:
Siéntase libre de enviar preguntas o comentarios a continuación. Espero escuchar de usted.