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

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 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, 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 nuestras reseñas de 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 construyendo 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 las páginas de su categoría correspondiente. También le mostraré cómo implementar las opciones de megamenú integradas de Extra y agregar algunas personalizaciones propias.

Aquí hay un adelanto de lo que vamos a construir.

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á al ver una página de categoría que no tiene un diseño de categoría específico seleccionado. 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 reseñas de productos, usaremos este diseño de categoría predeterminado.

Para personalizar nuestro diseño de categoría predeterminado, vaya al panel de WordPress y navegue hasta Extra> Generador de categorías. Luego, coloque 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 del 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 albañilería de noticias en blogs con 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 actual / Etiqueta / Taxonomía".

Ahora, para diseñar el título h1 de su página de categoría, debe agregar el siguiente CSS personalizado al CSS adicional en el Personalizador de temas. Asegúrese de ponerlo dentro de una consulta de medios con un ancho mínimo de 980px.

.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ía 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 el nombre del menú. Luego, seleccione "Menú principal" como la 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 la palanca de Categorías a la izquierda de la página. En las opciones que aparecen, seleccione "ver todo" para asegurarse de que puede ver todas las 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 nuestros elementos de menú.

Vuelve a tu menú. Comenzando con el elemento del menú Categoría de electrónica, haga clic para abrir las opciones de configuración. En el cuadro Clases CSS, agregue una clase llamada "verde". Y para la opción Extra Mega Menú, seleccione "Mega Menú 3 Destacados".

Esto logrará dos cosas. Primero, la clase "verde" se utilizará para convertir el elemento del menú en 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 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 la 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 CSS en blanco. Y para la opción Mega Menú, seleccione "Lista 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 bajo el elemento del mega menú "Todas las categorías".

Cambie las opciones de configuración para cada uno de esos elementos del menú de categorías y agregue las mismas clases de CSS a cada uno como lo hizo anteriormente. Estas son las categorías con la clase que necesita agregar:

Electrónica - verde
Ropa - azul
Cocina - rosa
Salud y forma física - 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ú.

Utilice 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 de medios 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:

<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 el portapapeles.

Ahora regrese a la configuración del elemento del 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 elementos del menú de 3 categorías.

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.

Haz clic para abrir el cuadro Publicaciones a la izquierda y seleccionar la pestaña "Ver todo". Luego, seleccione los 12 productos y haga clic en Agregar al menú. Luego, arrastre cada uno de los elementos del menú de publicaciones un nivel debajo de cada una de sus categorías.

Menú Guardar

Antes de ir a ver nuestro nuevo menú, necesitamos agregar algo de CSS personalizado para darle los toques finales a nuestro menú.

Vaya al Personalizador de temas> CSS adicional e ingrese el siguiente CSS:

/****************************
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 echemos un vistazo a nuestro nuevo menú. Observe los colores de los elementos del menú al pasar 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 para nuestro sitio de revisión de productos, vamos a aprovechar 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 Footer Sidebar Left y haga clic en el botón para Agregar un widget. Seleccione el widget Extra - Reseñas recientes

Vuelva al menú de widgets y seleccione Footer Sidebar Right 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.

/****************************
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 revise 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 revisión de productos utilizando Extra.

CSS final

Dependiendo de dónde ingresó en la serie, es posible que deba verificar su CSS personalizado para asegurarse de que haya ingresado todo correctamente. Aquí está el código CSS final que se debe ingresar en el Personalizador de temas.

.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 para crear 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 convierten en una excelente opción para un sitio de revisión de productos.

Un tema que no abordé (guardándolo 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. No dude en compartir sus pensamientos sobre este asunto a continuación en los comentarios.

Espero escuchar de usted.