Creación de un sitio de revisión de productos con Extra – Parte 3

Bienvenido a la parte 3 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 2 de esta serie, creamos nuestra plantilla de publicación de revisión de productos utilizando la configuración integrada de Extra y el Visual Builder. Con la nueva plantilla de publicación, pudo agregar publicaciones adicionales y asignarlas a sus respectivas categorías.

Hoy vamos a construir dos diseños de categorías utilizando el generador de categorías de Extra. El primer diseño mostrará las publicaciones/reseñas de productos en su página de inicio, destacando las reseñas más recientes y populares. El segundo diseño mostrará todas las categorías en una página usando el módulo deslizante de carrusel. Una vez que haya completado este tutorial, tendrá una buena base para un sitio de revisión de productos bien diseñado.

Aquí hay un adelanto de lo que vamos a construir

Preparación de los elementos de diseño

Dado que los diseños de categoría dependen en gran medida del contenido de la publicación, asegúrese de agregar suficientes publicaciones para que pueda tener una idea de cómo se verá el sitio una vez que agregue su propio contenido. Como se discutió en la parte 2 de esta serie, mis diseños de categoría se completan con 4 categorías y con 3 productos en cada categoría. Estoy usando imágenes de archivo de Shutterstock para las imágenes destacadas de mis publicaciones.

Para diseñar los diseños de las categorías, utilizaremos el generador de categorías de Extra y un poco de CSS personalizado.

Empecemos.

Creación de un sitio de revisión de productos con Extra – Parte 3

Suscríbete a nuestro canal de Youtube

Creación del diseño de categoría para la página de inicio

De forma predeterminada, extra utiliza un diseño de categoría para la página de inicio. Para crear un diseño personalizado, desde la barra lateral del panel de control de WordPress, vaya a  Extra > Creación de categorías . Busque el diseño de categoría que ya se llama «página de inicio», luego desplace el cursor sobre él y seleccione editar.

A continuación, haga clic en «Borrar diseño» en el menú del constructor púrpura para borrar el diseño predeterminado actual.

Ahora podemos comenzar a construir nuestro diseño personalizado. Comience agregando una columna de dos tercios de un tercio a la fila en la sección estándar.

A la columna de la izquierda (dos tercios), agregue un Control deslizante de publicaciones destacadas.

Actualice la configuración del módulo deslizante de publicaciones destacadas de la siguiente manera:

En la pestaña Contenido…

Categorías: Todas

Mostrar solo publicaciones destacadas: [Mantendría esto apagado hasta que decidas qué publicaciones deseas presentar.
Puede designar una determinada publicación como destacada en el cuadro Configuración adicional en la página del editor de publicaciones.]


Mostrar autor: DESACTIVADO


Mostrar fecha: DESACTIVADO

En la pestaña Diseño…

Color de flecha de navegación: #ffffff

Fondo de flecha de navegación: #000000


Fondo de título: rgba(255,255,255,0.4)


Tamaño de fuente del título: 24px


Color del texto del título: #000000


Tamaño de fuente meta: 16px


Color de texto meta: #000000


Margen personalizado: 0px inferior

En la pestaña Avanzado…

Ingrese el siguiente CSS personalizado en el cuadro de texto Elemento principal:

01
02
03
04
05
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Guardar ajustes

Ahora agregue un módulo de texto a la columna derecha (un tercio) y actualice la configuración del módulo de texto de la siguiente manera:

En la pestaña Contenido, agregue el siguiente html a la pestaña de texto del cuadro de contenido:

01
02
03
<h1>Get the Latest Reviews on Popular Products</h1>
 
<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

El enlace aquí está destinado a servir como un botón de CTA simulado. Puedes elegir usarlo como quieras. Simplemente actualice la URL y el texto del enlace.

Sugerencia : puede usar Bloom para activar un cuadro emergente de suscripción de correo electrónico al hacer clic en este CTA. De esa manera, los visitantes podrán mantenerse al día con los productos de su campaña de marketing por correo electrónico. Para hacer esto, deberá instalar Bloom, agregar un formulario emergente e integrar su proveedor de correo electrónico. Luego elija mostrar la ventana emergente al hacer clic en el selector de CSS «a.join-cta» que corresponde a la clase de enlace en el código html anterior.

También puede leer más sobre cómo hacer que el formulario de suscripción de Bloom aparezca emergente al hacer clic en un botón.

Ahora regrese a la configuración del módulo de texto.

En la pestaña Diseño…

Tamaño de fuente de texto: 40 px (escritorio), 24 px (tableta y teléfono inteligente)

Tamaño de fuente de encabezado: 42 px (escritorio), 38 px (tableta), 28 px (teléfono inteligente)


Relleno personalizado: 40 px (arriba), 15 px (derecha), 15 px (abajo) , 15px (izquierda)

Guardar ajustes

Ahora vaya a Configuración de fila para que podamos diseñar el fondo de la fila.

Luego actualice lo siguiente:

En la pestaña Contenido…

Fondo: #ffffff

En la pestaña Diseño…

Hacer esta fila de ancho completo: SÍ

Igualar alturas de columna: SÍ

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

01
02
03
04
05
border-top: 10px solid #121212;
border-radius: 3px;
-webkit-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);
-moz-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);
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);

Guardar ajustes

Echa un vistazo a tu sección de control deslizante destacada personalizada ahora.

Se ve bien hasta ahora.

Continuemos. Regrese al Creador de categorías y agregue una sección estándar debajo de la sección actual y agregue una fila de una columna con un Módulo de texto.  

Luego actualice la configuración del módulo de texto de la siguiente manera:

En la pestaña Contenido , agregue este título html en la pestaña de texto del cuadro de contenido:

01
<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

En la pestaña Diseño…

Orientación del texto: Centro

Fuente del encabezado: B (negrita)


Tamaño de la fuente del encabezado: 48 px (escritorio), 42 px (tableta), 36 px (teléfono inteligente)

Guardar ajustes

Esto servirá como el título de la sección a continuación que mostrará las reseñas de sus productos.

A continuación, agregue una Sección de especialidad con la siguiente estructura de columna de tres cuartos y un cuarto:

En la sección izquierda (tres cuartos), agregue una fila de dos columnas.

En la columna izquierda de esa fila, agregue un módulo de publicaciones

Luego, actualice la configuración del módulo de publicaciones en la pestaña Contenido asignando una categoría al módulo. De esta forma, el módulo de publicaciones solo mostrará esa categoría. Para hacer esto, voy a seleccionar «Ropa» como mi categoría.

Luego actualice lo siguiente:

Mostrar autor: NO

Mostrar fecha: NO

Guardar ajustes

Duplique este módulo de publicaciones para que tenga dos módulos de publicaciones apilados en la columna izquierda y 2 en la derecha.

Luego actualice la Configuración en cada módulo con una categoría diferente. Las categorías que tengo son ropa, electrónica, cocina y salud y estado físico.

Si desea agregar un módulo de publicaciones que muestre reseñas de videos, puede agregarlo aquí. Primero deberá agregar una nueva categoría de publicación llamada Video, asignar a la categoría el color #222222. Luego cree una nueva publicación, seleccione «Video» para el formato y agregue la URL del video al cuadro de opciones de formato de video incorporado de Extra.

Luego, puede agregar el contenido de su cuadro de revisión para que se muestre debajo del video.

Una vez que haya subido algunos videos, asegúrese de agregarlos a la categoría Video. Luego regrese al Creador de categorías para su página de inicio y agregue una fila de una columna debajo de la fila que contiene sus cuatro módulos de publicaciones. Luego, duplique un módulo de publicaciones de la fila anterior y agréguelo a la nueva fila. En la configuración del módulo de publicaciones, en la pestaña Contenido, seleccione la categoría «Video». Ahora tiene un módulo de publicaciones que mostrará videos.

En el área derecha (barra lateral) de la sección de especialidad vamos a agregar dos módulos de publicaciones más apilados uno encima del otro.

Para el primero, actualice la configuración del módulo de publicaciones para incluir «Todas» las categorías. A continuación, seleccione el método de clasificación «Calificación más alta».

Duplique ese módulo de publicaciones para que otro se acumule debajo de él. Luego actualice el Método de clasificación en ese a «Más popular».

Continúe y actualice la publicación para guardar su configuración. Así es como debería verse el diseño hasta ahora.

A continuación, duplique (o copie) la segunda sección principal que contiene el módulo de texto con el título «Reseñas de productos».  

Luego arrastre (o pegue) la sección duplicada debajo de la sección de especialidad. En la nueva sección, actualice el contenido de la configuración del módulo de texto con el siguiente html:

01
<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Guardar ajustes

A continuación, agregaremos un blog que muestre todas las reseñas de productos, comenzando por la más reciente.

En el módulo de texto que acaba de actualizar, agregue un módulo de mampostería de fuentes de blog a la columna. En la Configuración del módulo de mampostería de fuentes de blog, en la pestaña Contenido, seleccione todas las categorías que desea que se muestren en la fuente.

Guardar ajustes

Y, por último, en el módulo de mampostería de fuentes de blog, agregue un módulo de carrusel de publicaciones. Actualice la configuración del módulo Carrusel de publicaciones en la pestaña Contenido para incluir todas las categorías y seleccione SÍ para mostrar solo las publicaciones destacadas.

Este carrusel está diseñado para mostrar solo las publicaciones que ha seleccionado como elementos destacados al crear sus publicaciones de revisión de productos.

Ahora veamos cómo se ve el diseño final.

Agregar algunas líneas de CSS personalizado

Para unir el diseño, necesitamos agregar algunas líneas de CSS personalizado. Vaya al Personalizador de temas > CSS adicional y agregue lo siguiente en la parte superior del código CSS actual que ya está allí:

01
02
03
04
.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;
}

Luego, dentro de los corchetes de consulta de medios establecidos en un ancho mínimo de 980 px, agregue lo siguiente:

01
02
03
04
05
06
07
08
09
10
.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;
}

El primer fragmento de CSS agrega una sombra ligeramente más oscura y un borde superior más alto a los módulos. El segundo personaliza el botón «Únete ahora» en la sección superior.

Bueno, eso es todo para el diseño de la categoría de la página de inicio. Así es como se ve el resultado final:

Además del diseño de categoría de la página de inicio, agreguemos un diseño más simple para mostrar todas nuestras categorías en una página.

Creación del diseño «Todas las categorías»

Este diseño es realmente simple de crear ahora que tiene todas sus publicaciones cargadas, sus categorías configuradas y el estilo del tema en su lugar. El propósito de este diseño es crear una página que muestre todas las categorías y productos en una sola página. Esto se puede hacer de muchas maneras diferentes, pero con Extra, quería aprovechar el módulo de carrusel de publicaciones para mostrar las categorías y publicaciones en un diseño similar al que vería en sitios web de transmisión de video como Hulu y Netflix.

Para agregar el diseño, desplácese hasta la parte superior de su diseño de categoría actual y seleccione Agregar nuevo. Con el generador de categorías, agregue una fila de una columna a una sección estándar. Luego agregue un módulo de texto a la fila. Actualice la configuración del módulo de texto, en la pestaña Contenido para incluir la siguiente etiqueta h1 en el cuadro de contenido:

01
<h1 class="subtitle fancy"><span>All Categories</span></h1>

Guardar ajustes

Luego agregue un Módulo de carrusel de publicaciones debajo del Módulo de texto. En la Configuración del módulo Carrusel de publicaciones, seleccione Ropa como Categoría.

Guardar ajustes

A continuación, agregue un Módulo de texto en el carrusel de publicaciones de la categoría Ropa. En la Configuración del módulo de texto, agregue el siguiente enlace al cuadro Contenido en la pestaña Contenido:

01
<a href="/category/clothing">view all clothing reviews</a>

Es posible que la URL y/o el texto del enlace deban cambiar según su sitio, pero la idea es vincular a la página de categoría para esa categoría en particular para mostrar todas las reseñas de productos para esa categoría.

En la pestaña Diseño, cambie la Orientación del texto a «Derecha».

Guardar ajustes

Para mostrar las siguientes tres categorías de la misma manera, repita el proceso de agregar un módulo de carrusel de publicaciones asignado a una categoría específica seguido de módulos de texto que contengan un enlace a la página de la categoría correspondiente.

En el cuadro de categoría a la derecha del generador, agregue una nueva categoría llamada «Todas las categorías» y selecciónela para este diseño. De esa manera, cada vez que enlacemos a la página de categoría «Todas las categorías», se mostrará esta plantilla.

El diseño final debería verse así cuando haya terminado.

Y así es como se ve el diseño de la categoría en el sitio.

Puede saberlo ahora porque aún no hemos agregado muchos productos, pero eventualmente funcionará como una forma conveniente de cambiar los productos para cada categoría usando el módulo deslizante de carrusel de publicaciones.

Eso es todo por el post de hoy. Espero que hayas disfrutado la parte 3 de esta serie de 4 partes sobre la creación de un sitio de reseñas de productos con Extra.

Espero que no te estés cansando todavía, tenemos una última publicación para nuestra serie.

Subiendo

En la publicación final de nuestra serie, personalizaremos el encabezado y los elementos de navegación de nuestro sitio de revisión de productos. Además de crear su menú, le mostraré una forma genial de asignar colores a los enlaces de su menú que corresponden a los colores de categoría en todo el sitio. También te mostraré cómo crear mega menús con unos pocos clics.

Espero poder construir juntos la última parte de nuestro sitio web.

Como siempre, no dude en enviar comentarios a continuación.