Cuando escribe reseñas de productos o publicaciones de comparación, donde necesita resaltar lo bueno y lo malo del producto o servicio destacado, es una buena idea agregar un complemento pros y contras, para mostrar cuadros estandarizados en la parte inferior de sus publicaciones.
Cuando vi por primera vez al editor de Gutenberg, lo odié.
Al instante busqué una solución para recuperar el aspecto antiguo de mi backend de publicaciones de WordPress. Un look con el que me sentía tan cómoda, una comodidad construida durante más de 15 años.
Por suerte no estaba solo y me quedé más que feliz cuando vi que los chicos reflexivos de WordPress hacían un plugin llamado Classic editor.
Era escéptico sobre el nuevo editor de bloques, con todos los creadores de páginas populares que existen, ¿qué estaba pensando WordPress? ¿Cómo competirían con las potentes funciones de Elementor o WPBakery?
El tiempo pasó y seguí ignorando al editor de Gutenberg. Un día instalé una copia nueva de WordPress en un nuevo sitio que estaba comenzando entonces, y pensé que lo probaría.
Al principio, lo odiaba, pero luego comencé a probar nuevos complementos, nuevos bloques, diferentes estilos, para darme cuenta un día de que este es el futuro de WordPress y la construcción de páginas.
Todavía estoy cambiando al editor de bloques aquí en wpctrl.com, ya que hay muchas publicaciones que usan códigos cortos antiguos y tengo que revisar manualmente todas y cada una de ellas, pero estoy en el proceso.
¡Este post está hecho con el editor de Bloques!
Comencemos con los ejemplos de pros y contras (edición gutenberg)
Cuando olvides los viejos hábitos en la pantalla 'Edit Post', el TinyMCE, Meta Boxes, etc., y te acostumbres al editor de bloques, te encantará.
Primero, vaya y tome algunos complementos gratuitos que necesitará para estos ejemplos.
Plugins utilizados en el tutorial
Método #1 – Usando genesis blocks
Esta es mi primera sugerencia para crear una sección de pros y contras para sus revisiones con bloques de Gutenberg.
Ejemplo en vivo:
Pros
– Gratis
– Buen precio
– Optimizado
Contras
– Mala calidad
– Soporte deficiente
– Caro
La sección anterior está hecha con el plugin gratuito Genesis Blocks.
Aquí está el proceso exacto:
Elija el lugar deseado para colocar los cuadros en su publicación y haga clic en el signo '+' para agregar un nuevo bloque.
Puede agregar una columna y dividirla en dos mitades.
A continuación, desplácese hacia abajo y toque el bloque Genesis Blocks Notice.
A partir de aquí solo tienes que cambiar los colores, y añadir la lista de pros y contras.
Este es el método más fácil, pero tiene sus limitaciones.
- No puedes usar iconos personalizados
- No puede agregar una lista con viñetas real (solo texto sin formato)
Método #2 – Uso de bloques Getwid
Ejemplo en vivo:
Este es bastante fácil de conseguir también.
Haga clic en el signo más en su publicación o página para agregar un nuevo bloque. Busque los bloques Getwid y seleccione el cuadro de iconos en el menú Getwid.
En las opciones de bloque en el lado derecho de la pantalla, aplique la siguiente configuración:
- En la pestaña general, elija el icono de la primera columna y la alineación del contenido.
- En la pestaña de estilo, puede establecer el tamaño del icono, los colores tanto del icono como del fondo del icono, el radio y el espacio alrededor del icono (rellenos)
- En la pestaña avanzada, tiene la opción de configurar agregar un enlace a su icono. Deja esto en blanco, porque no tendrá ningún sentido
¡Lea esto primero!
En el momento de escribir este artículo, no pude encontrar ningún complemento para hacer lo que estoy describiendo a continuación. Pero más tarde comenzaron a aparecer nuevos complementos, para hacer aún mejores listas de pros y contras, ¡y lo que es más importante es hacerlos más fáciles!
Así que los recopilé y los agregué a la publicación a continuación.
¡Compruebe JoomDev WP Pros & Contras!
Vea la lista de pros y contras plugins y decida por sí mismo. Si te gusta más el mío, siéntete libre de usarlo. ¡Disfrutar!
Los mejores complementos de pros y contras GRATUITOS
Pros&Cons es un elemento poderoso en sus reseñas de productos afiliados, y son conocidos por aumentar la tasa de conversión, además de ser un gran elemento fácil de usar. Los usuarios tienden a omitir los artículos largos y buscar directamente conclusiones o ressumaciones.
1. Poderosos pros y contras clásicos
Este fue uno de los primeros complementos que se supone que deben hacer precisamente eso: mostrar listas de pros y contras con un simple botón de CTA.
El complemento gratuito proporciona un código corto y está diseñado para funcionar con el editor clásico de WordPress.
Si desea utilizar la función en el editor de Gutenberg, deberá obtener los poderosos pros y contras.
2. Pros y contras de i2
Puede usar el antiguo shortcode o editar la lista visualmente en bloques de Gutenberg.
Los pros y los contras tienen múltiples estilos para elegir. Puede cambiar los colores, los iconos, el estilo de los botones y mucho más.
Pros y contras del bricolaje (Old Classic Edditor)
Te mostraré una manera fácil de hacer esto, sin escribir ni editar ningún tipo de código.
Esto es lo que obtendrás al final …
Aquí hay un ejemplo en vivo en la Revisión del tema de Basilea.
Una vez que obtenga un par de cuadros que se ven de la manera que desea, puede guardarlo en una publicación preliminar y luego simplemente copiarlo y pegarlo en sus nuevas revisiones reemplazando solo los atributos en él.
Los plugins que estoy a punto de mostrar no están especialmente diseñados para este propósito. Cuando me topé por primera vez con esto, estaba buscando una manera de mostrar dos cuadros simples con una lista de oraciones cortas de 2-3 palabras en ellos.
Mi investigación no arrojó resultados satisfactorios, ya que parecía que no había un complemento gratuito dedicado a los pros y los contras para lo que quería.
Entonces, ¿cómo logré crear mis cajas de pros y contras?
Actualización: Este plugin ya no está actualizado, no se recomienda usarlo más.
Utilicé un plugin gratuito llamado: Olevmedia Shortcodes.
Este complemento también cuenta con muchos otros códigos cortos, ¡pero el que vamos a usar para esta tarea es el "Box"!
¡También puedes usar los Shortcodes de Olevmedia para crear un botón de CTA para tus reseñas!
Pero primero las cosas primero.
Antes de saltar al shortcode de Box, agregaremos dos columnas de 1/2 a nuestra página.También puede usar el complemento Olevmedia Shortcodes para esto, o el propio código corto de columna de su tema. Al hacer esto, garantizamos una visualización receptiva adecuada en dispositivos móviles, así como tamaños uniformes de las cajas.
Seleccione el icono "más" del editor.
En el menú desplegable, seleccione "Columnas", luego elija "Una mitad" e Insértelo en su página de trabajo. Después de eso, haga lo mismo, pero esta vez marque la casilla de verificación "última columna" para mostrar esta columna junto a la primera.
Vamos a ponernos a ponernos a la obra ahora y crear las cajas reales …
Dirígete de nuevo al icono 'Plus' en tu editor visual y elige el shortcode "Box". Debería obtener esta pantalla después de hacer clic en ella:
Como puede ver, tenemos opciones de personalización, que analizaremos a continuación.
Los campos que debe completar para obtener algo similar a mis cuadros de demostración son los siguientes:
- Título: Pros
- Contenido:deja esto en blanco por ahora
- Frontera: Añade un borde si quieres (en mi ejemplo no lo hay)
- Color de fondo: Elija un color verde/rojo u otro color para el fondo
- Icono de cuadro: Para mi ejemplo, estoy usando los iconos de pulgares hacia arriba y pulgares hacia abajo
- Cierta altura de la caja: Para el ejemplo anterior, establecí la altura en 250px. Tenga en cuenta que si deja esto vacío, ¡sus cajas se mostrarán desiguales!
Reemplace el "Aquí está el contenido" con los textos de sus pros o contras deseados y colócalos en una lista con viñetas, directamente desde el editor de WordPress en modo visual. Usted debe conseguir algo como esto:
- Ventajas 1
- Ventajas 2
- Pros 3…
[/caja]
Ahora puede duplicar el shortcode anterior y simplemente cambiar el color, el icono y el nombre a "Contras". Ahora tienes las dos cajas: Pros y Contras. Finalmente, tenemos que ponerlos en cada una de las columnas que hemos creado al principio.
A continuación, copie el cuadro Contras y péguelo en la última columna entre:
¡Felicidades! Estás listo para crear reseñas increíbles.
Guarde su ajuste preestablecido en una página de borrador o publicación para que esté listo para su uso. Solo asegúrese de pegarlo en modo "Texto", siempre que lo use en una publicación real, para evitar cualquier ruptura de código.
Disclosure: Some of the links on the page may contain a ref code (affiliate links), that tells the other side that we have sent you. If you liked what we suggest and you make a purchase, we may receive a commission.