Bienvenido a la parte 4 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 , configuramos nuestras Opciones de tema y la configuración del personalizador. En la parte 2 , agregamos nuestras publicaciones y creamos un diseño de publicación para mostrar las reseñas de nuestros productos. En la parte 3 de esta serie, creamos dos diseños de categorías para nuestro sitio de revisión de productos: uno para nuestra página de inicio y otro para la página «Todas las categorías».
Hoy vamos a terminar nuestro sitio de revisión de productos creando nuestro diseño de categoría predeterminado, nuestro menú y nuestro pie de página. Lo más destacado de la publicación de hoy será el menú personalizado que tiene enlaces de menú que coinciden con el color de sus páginas de categoría correspondientes. También le mostraré cómo implementar las opciones de mega menú incorporadas de Extra y agregar algunas personalizaciones propias.
Empecemos.
Creación de un sitio de revisión de productos con Extra – Parte 4
Suscríbete a nuestro canal de Youtube
Creación de la página de categoría predeterminada
Extra viene con una página de categoría predeterminada ya instalada. La página de categoría predeterminada es el diseño que se utilizará cuando se visualice una página de categoría que no tenga seleccionado un diseño de categoría específico. En la parte 3 de esta serie, designamos un diseño de categoría para nuestra página de inicio y asignamos nuestra página «Todas las categorías» a la categoría específica «Todas las categorías». Para el resto de nuestras páginas de categorías de revisión de productos, utilizaremos este diseño de categoría predeterminado.
Para personalizar nuestro diseño de categoría predeterminado, vaya al panel de wordpress y navegue a Extra > Creador de categorías. Luego pase el cursor sobre la «Categoría predeterminada» y haga clic en el enlace de edición.
De forma predeterminada, su categoría predeterminada tiene dos módulos apilados uno encima del otro dentro de una fila de una columna de una sección estándar. Antes de realizar cambios en el diseño, asegúrese de seleccionar la opción «¿Usar este diseño como diseño predeterminado?» en el cuadro Uso de diseño en la barra lateral derecha.
Primero, reemplace el Control deslizante de publicaciones destacadas superior con un módulo de carrusel de publicaciones. Luego actualice la configuración del módulo marcando «Categoría/Etiqueta/Taxonomía actual» como Categoría para este módulo. Ahora este módulo de carrusel de publicaciones solo mostrará los productos de la página de categoría que se está visitando. Bastante inteligente, ¿eh?
Guardar la salida
Puede dejar el módulo de mampostería de fuentes de blog en su configuración predeterminada. Solo asegúrese de que cualquier módulo de categoría que agregue a esta página en el futuro tenga asignada la categoría «Categoría/Etiqueta/Taxonomía actual».
Ahora, para diseñar el título h1 de la página de categoría, debe agregar el siguiente CSS personalizado al CSS adicional en el personalizador de temas . Asegúrate de ponerlo dentro de una consulta de medios con un ancho mínimo de 980 px.
|
01
02
03
04
05
|
.archive h1 {text-align: center;font-size: 48px;line-height: 1.3em;} |
Eso es todo para el diseño de categoría predeterminado. Veamos cómo se ve nuestro diseño predeterminado en la página de categorías de mi cocina.
Ahora que tenemos nuestro diseño de categoría predeterminado en su lugar, dirijamos nuestra atención a una de las partes más importantes de nuestro sitio web: el menú de navegación.
Ya configuramos nuestro estilo de encabezado básico en la parte 1 de esta serie. Pero hoy vamos a crear y diseñar nuestro menú de navegación principal.
Desde su panel de WordPress, vaya a Apariencia > Menús y luego seleccione Menús . Seleccione el enlace «crear un nuevo menú» en la parte superior de la página e ingrese el nombre «Menú de categorías» como nombre del menú. A continuación, seleccione «Menú principal» como ubicación de visualización en la sección Configuración del menú.
Ahora podemos comenzar a agregar nuestros elementos de menú a nuestro menú. Haga clic en el interruptor Categorías a la izquierda de la página. En las opciones que aparecen, seleccione «ver todo» para asegurarse de que puede ver todas sus categorías disponibles. Marque las 5 categorías que ha creado (no sin categorizar) y haga clic en el botón Agregar al menú para agregarlas a la sección de estructura del menú a la derecha de la página. Ahora puede hacer clic y arrastrar cada uno de los elementos del menú para que se muestren en el siguiente orden:
- Electrónico
- Ropa
- Cocina
- salud y estado fisico
- todas las categorias
Antes de editar los elementos del menú, seleccione el enlace de opciones de pantalla en la parte superior de la página. En la sección de propiedades del menú avanzado que se abre, asegúrese de marcar la casilla junto a «Clases CSS». Esto nos permitirá agregar una clase CSS personalizada a cada uno de los elementos de nuestro menú.
Vuelve a tu menú. Comenzando con el elemento de menú Categoría electrónica, haga clic para abrir las opciones de configuración. En el cuadro Clases de CSS, agregue una clase llamada «verde». Y para la opción Extra Mega Menu, seleccione «Mega Menu 3 Featured».
Esto va a lograr dos cosas. Primero, la clase «verde» se usará para hacer que el elemento del menú se vuelva verde al pasar el mouse. En segundo lugar, la opción destacada del mega menú 3 agregará tres elementos destacados como un mega menú al pasar el cursor sobre el elemento del menú.
Para el elemento del Menú de Categoría de Ropa, agregue la clase «azul» y seleccione la opción «Mega Menú 3 Destacados» .
Para el elemento del menú de categoría de cocina, agregue la clase «rosa» y seleccione la opción «Mega menú 3 destacados» .
Para el elemento del menú de categoría Salud y estado físico, agregue la clase «púrpura» y seleccione la opción «Mega menú 3 destacados» .
El elemento del menú «Todas las categorías» será ligeramente diferente. Continúe y deje el cuadro de texto Clases de CSS en blanco. Y para la opción Mega Menú, seleccione «Lista de Mega Menú». Este tipo de mega menú es un mega menú más tradicional que crea una lista de elementos de submenú. El objetivo de este enlace de mega menú es mostrar todas las categorías con una lista de sus productos debajo.
Regrese y abra el cuadro de categorías y seleccione las mismas cuatro categorías (Electrónica, Ropa, Cocina y Salud y estado físico) y agréguelas al menú. Luego, arrastre cada una de las categorías que acaba de agregar un nivel debajo del elemento del mega menú «Todas las categorías».
Alterne las opciones de configuración para cada uno de esos elementos del menú de categoría y agregue las mismas clases de CSS a cada uno como lo hizo anteriormente. Aquí están las categorías con la clase que necesita agregar:
Electrónica: verde
Ropa: azul
Cocina: rosa
Salud y estado físico: violeta
A continuación, agregaremos nuestra propia imagen personalizada para que sirva como nuestra imagen de categoría destacada para cada categoría en el mega menú.
Use un editor de fotos para reducir y recortar cada imagen para que tenga un ancho de 500 px y una altura de 300 px.
Agréguelos/arrástrelos a la biblioteca multimedia de WordPress .
Ahora regrese a la página de menús en WordPress Admin.
En este ejemplo, el enlace de la categoría superior en mi mega menú es «Electrónica». Haga clic en la flecha a la derecha del elemento «Electrónica». En el cuadro Etiqueta de navegación, agregue la imagen que desee utilizando la etiqueta html img directamente antes del texto «Electrónica». La etiqueta de la imagen debe tener el siguiente aspecto:
|
01
|
<img src="Insert Image Url" width="100%" /> |
Para encontrar la URL de la imagen, vaya a Medios → Biblioteca. Haga clic en la imagen que desea agregar. En la pantalla emergente Detalles del archivo adjunto, busque la URL en la sección de la derecha, resáltela y luego use ctrl+c para copiarla en su portapapeles.
Ahora regrese a la configuración del elemento de menú «Electrónica» en la página del menú y reemplace el texto «Insertar URL de imagen» pegando la URL de su imagen usando ctrl+v.
Repita el mismo proceso para los siguientes 3 elementos del menú de categoría.
Una vez que haya agregado las cuatro etiquetas de imagen a cada uno de los elementos del menú de su categoría, es hora de agregar los elementos del menú de sus publicaciones individuales (enlaces a las reseñas de sus productos) en cada una de sus respectivas categorías.
Haga clic para abrir el cuadro Publicaciones a la izquierda y seleccione la pestaña «ver todo». Luego seleccione los 12 de sus productos y haga clic en Agregar al menú. Luego arrastre cada uno de los elementos del menú de publicación un nivel debajo de cada una de sus categorías.
Menú Guardar
Antes de ir a ver nuestro nuevo menú, necesitamos agregar un poco de CSS personalizado para darle los toques finales a nuestro menú.
Vaya al Personalizador de temas > CSS adicional e ingrese el siguiente CSS:
|
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
|
/****************************style menu*****************************/#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {color: #5bd999 !important;}li.green a:before {background-color: #5bd999 !important;}#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {color: #e6567a !important;}li.pink a:before {background-color: #e6567a !important;}#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{color: #00c0e4 !important;}li.blue a:before {background-color: #00c0e4 !important;}#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{color: #7658f8 !important;}li.purple a:before {background-color: #7658f8 !important;}/***************************increase height of line under nav links on hover****************************/#et-navigation>ul>li>a:before {height: 8px;} |
Guarde y publique su configuración.
Ahora veamos nuestro nuevo menú. Observe los colores de los elementos del menú a medida que pasa el cursor sobre ellos. Los colores coinciden con el color de su categoría correspondiente.
Construyendo el pie de página
Para crear el pie de página de nuestro sitio de revisión de productos, aprovecharemos los widgets integrados de Extra para mostrar las últimas revisiones de productos y una lista de categorías.
Primero debemos ir a Personalizador de temas > Configuración de pie de página. Luego haga clic en Diseño y seleccione un diseño de 2 columnas.
Regrese y seleccione Tipografía y actualice lo siguiente:
Tamaño del texto del encabezado: 32
Tamaño del texto del cuerpo/enlace: 16
Color del texto del widget: rgba(255,255,255,0.6)
Color del enlace del widget: #ffffff
Color del encabezado del widget: #ffffff
Guardar y publicar
Vuelva al menú principal del Personalizador de temas y seleccione Widgets. Luego, seleccione Barra lateral izquierda del pie de página y haga clic en el botón Agregar un widget. Seleccione el widget Extra – Reseñas recientes
Vuelva al menú de widgets y seleccione Pie de página en la barra lateral derecha y agregue el widget Categorías.
Vaya a la sección CSS adicional y agregue el siguiente CSS personalizado para su pie de página.
|
01
02
03
04
05
06
07
08
09
10
|
/****************************footer*****************************/#footer .et_pb_widget li {border-bottom: none;color: #fff;}.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {background: rgba(255,255,255,.1);} |
Guarde y publique la configuración del personalizador de temas y consulte su pie de página.
Eso es todo. Ha terminado con éxito la parte 4 y ha completado la serie sobre la creación de un sitio de reseñas de productos con Extra.
CSS final
Dependiendo de dónde haya entrado en la serie, es posible que deba verificar su CSS personalizado para asegurarse de haber ingresado todo correctamente. Aquí está el código CSS final que se ingresará en el personalizador de temas.
|
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {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);border-top: 10px solid;}/****************************style menu*****************************/#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {color: #5bd999 !important;}li.green a:before {background-color: #5bd999 !important;}#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {color: #e6567a !important;}li.pink a:before {background-color: #e6567a !important;}#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{color: #00c0e4 !important;}li.blue a:before {background-color: #00c0e4 !important;}#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{color: #7658f8 !important;}li.purple a:before {background-color: #7658f8 !important;}/***************************increase height of line under nav links on hover****************************/#et-navigation>ul>li>a:before {height: 8px;}/****************************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) {.join-cta {display: block;text-align: center;border: 3px solid #333;color: #333;padding: 20px 15px;text-transform: uppercase;font-weight: 600;font-size: 30px;}/***************************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;}}/****************************footer*****************************/#footer .et_pb_widget li {border-bottom: none;color: #fff;}.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {background: rgba(255,255,255,.1);}/***************************Mobile Adjustments****************************/@media (max-width: 980px) {.subtitle {font-size: 30px;text-align: center;}} |
Terminando
Espero que haya disfrutado explorando el poder de Extra en la creación de un sitio de revisión de productos conmigo. En todo caso, estoy seguro de que al menos se irá con una nueva apreciación de este tema excepcional y un poco de inspiración para hacer más con él. El sistema de revisión incorporado, los diseños de categorías inteligentes y el poder de Divi Builder lo hacen ideal para un sitio de revisión de productos.
Un tema que no abordé (lo guardé para una publicación futura) es cómo manejar los enlaces de afiliados usando Extra. Después de todo, para la mayoría de las personas, el objetivo final de su sitio de revisión de productos es ganar dinero. Siéntase libre de compartir sus pensamientos sobre este asunto a continuación en los comentarios.
Espero escuchar de usted.