Creador de bloques personalizados para WordPress sin instalar plugins

  • Autor Autor Manuscholz
  • Fecha de inicio Fecha de inicio
Manuscholz

Manuscholz

Alfa
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¡Hola comunidad! Me llamo Manuel Scholz, soy nuevo por aquí pero creo que es el sitio indicado para darle visibilidad a una herramienta que he desarrollado, espero venderlo bien para daros curiosidad de probarlo.


Bloques-gutenberg.com es una herramienta web que permite a personas que utilizan Wordpress en sus webs o nichos crear y personalizar bloques como cajas de información o tablas de productos para sus webs sin necesidad de instalar ningún plugin.

open-graph.webp


https://bloques-gutenberg.com/


Características de la herramienta​


  • Personalización de bloques a tiempo real en la web
  • No te obligo a instalar nada en tu wordpress
  • CSS Minificado (comprimido)
  • Plantillas divididas para nichos de Amazon y de Adsense
  • En constante crecimiento, actualización del personalizador y cada semana bloques nuevos.

Contexto respecto a la competencia​


La gran mayoría de plugins para crear bloques (Atomic Blocks, Ultimate Gutenberg...) relentizan tus páginas y te obligan a instalar sus plugins para utilizar y personalizar sus tablas o cajas.

También existen otras páginas que te aportan el código de los bloques para copiar y pegar en tu web pero tampoco permiten modificar los estilos, solamente si instalas el plugin X.

Supongo que aquí todos sabemos que tener muchos plugins instalados en nuestras webs solo van a ocasionar problemas de compatibilidad, mala visibilidad frente a Google y su PageSpeed Insights y estaría estupendo poder resolver esa parte

¿Por qué querría tener bloques personalizados en mis artículos?​


Bueno, creo que no es necesario responder pero lo haré de todas formas, tu objetivo como SEO es obtener tráfico mejorando tu posición en la SERP pero también te interesa retener al lector o comprador en tu web, no?

Estos bloques están hechos para mostrar cajas de información o tablas para ofrecer tus productos de afiliación de una manera elegante, mejorando la posible conversión e incluso convertir nichos informacionales en posibles call to click, algo que nos interesa.

¿Por qué es mejor que la competencia?​


Como dije arriba, yo no te obligo a instalar plugins, tu decides que bloque utilizar, lo personalizas todo desde la propia web y yo mismo te cedo el bloque html con el etiquetado gutenberg para que Wordpress lo transforme en el editor en un bloque y puedas editar su contenido.

El CSS que viene asociado al bloque también te lo doy para que puedas agregarlo en el CSS Adicional de tu página web, esta totalmente minificado (comprimido) para agilizar incluso aún mas estos bloques.

Y repito, todo esto desde la web con lo cual no estarías instalando absolutamente nada en tu wordpress, ¿A que mola?

¿Hay que pagar una suscripción o algo para usarlo?​


No, ni pretendo hacerlo en un futuro cercano, la herramienta esta en beta y necesito feedback, la creación de cuentas de momento es totalmente gratuita y os desbloqueará dos plantillas premium automáticamente.

Así que si os interesa tener una cuenta dentro de la herramienta os aconsejo crearla ya que es gratis, por si un día me da por meter suscripción.

¡Espero vuestra opinión!​


Me ha llevado tiempo, cambios de tecnología, frustración y existe cierto miedo de que algo deje de funcionar durante el lanzamiento, así que estaré atento por aquí y por Twitter para dar soporte constante y hacer todos los fix necesarios.

Muchas gracias a todos
 
La verdad es que tiene muy buena pinta. Enhorabuena.
 
La verdad es que tiene muy buena pinta. Enhorabuena.
Muchas gracias, es mi primer proyecto construido y lanzado en público, así que se agradece muchísimo estos mensajes 🙏
 
Excelente, muy útil y fácil de manejar, recomendado !!! 👍 👍
 
Se ve muy buena la idea, lo único que se me ocurre puede servir como feedback es el siguiente caso, supongamos que quiero crear 1 tablas diferentes usando como base el mismo template para ambas pero con diferentes estilos (supongamos que una con fondo blanco y otra gris) entonces, los estilos generados por el sitio me chocarian, ya que ambos estarian estilizando la misma clase. Te dejo un ejemplo

Bloque con template 2 en fondo blanco:


CSS:
.template2{width:100%;display:flex;flex-wrap:wrap;transition:1s;background:0 0;padding:8px 4px}.template2 h3{font-size:24px;font-weight:700}.template2>div:first-child h3{color:#1b4d1b}.template2>div:nth-child(2) h3{color:#962424}.template2 ul{padding:0;list-style:none}.template2 ul>*{text-align:left}.template2 ul li{margin:10px 0;font-size:18px;list-style-position:inside}
 .template2{color:#000000!important;background:#ffffff!important;letter-spacing:0px!important;word-spacing:1px!important;border-top-left-radius:30px!important;border-top-right-radius:30px!important;border-bottom-left-radius:0px!important;border-bottom-right-radius:0px!important;}
 .template2 .wp-block-button a, .template2 tr:last-child td a {background:#272c30!important;color:#ffffff!important;border-radius:7px!important;font-weight:normal!important;}

Bloque con template 2 en fondo gris:

CSS:
.template2{width:100%;display:flex;flex-wrap:wrap;transition:1s;background:0 0;padding:8px 4px}.template2 h3{font-size:24px;font-weight:700}.template2>div:first-child h3{color:#1b4d1b}.template2>div:nth-child(2) h3{color:#962424}.template2 ul{padding:0;list-style:none}.template2 ul>*{text-align:left}.template2 ul li{margin:10px 0;font-size:18px;list-style-position:inside}
 .template2{color:#000000!important;background:#d6d6d6!important;letter-spacing:0px!important;word-spacing:1px!important;border-top-left-radius:0px!important;border-top-right-radius:0px!important;border-bottom-left-radius:30px!important;border-bottom-right-radius:30px!important;}
 .template2 .wp-block-button a, .template2 tr:last-child td a {background:#272c30!important;color:#ffffff!important;border-radius:7px!important;font-weight:normal!important;}

Creo que se podria solucionar agregando un nombre de clase generado aleatoriamente o bien, permitir agregar manualmente el nombre de la clase a la hora de personalizar el template
 
Se ve muy buena la idea, lo único que se me ocurre puede servir como feedback es el siguiente caso, supongamos que quiero crear 1 tablas diferentes usando como base el mismo template para ambas pero con diferentes estilos (supongamos que una con fondo blanco y otra gris) entonces, los estilos generados por el sitio me chocarian, ya que ambos estarian estilizando la misma clase. Te dejo un ejemplo

Bloque con template 2 en fondo blanco:


CSS:
.template2{width:100%;display:flex;flex-wrap:wrap;transition:1s;background:0 0;padding:8px 4px}.template2 h3{font-size:24px;font-weight:700}.template2>div:first-child h3{color:#1b4d1b}.template2>div:nth-child(2) h3{color:#962424}.template2 ul{padding:0;list-style:none}.template2 ul>*{text-align:left}.template2 ul li{margin:10px 0;font-size:18px;list-style-position:inside}
 .template2{color:#000000!important;background:#ffffff!important;letter-spacing:0px!important;word-spacing:1px!important;border-top-left-radius:30px!important;border-top-right-radius:30px!important;border-bottom-left-radius:0px!important;border-bottom-right-radius:0px!important;}
 .template2 .wp-block-button a, .template2 tr:last-child td a {background:#272c30!important;color:#ffffff!important;border-radius:7px!important;font-weight:normal!important;}

Bloque con template 2 en fondo gris:

CSS:
.template2{width:100%;display:flex;flex-wrap:wrap;transition:1s;background:0 0;padding:8px 4px}.template2 h3{font-size:24px;font-weight:700}.template2>div:first-child h3{color:#1b4d1b}.template2>div:nth-child(2) h3{color:#962424}.template2 ul{padding:0;list-style:none}.template2 ul>*{text-align:left}.template2 ul li{margin:10px 0;font-size:18px;list-style-position:inside}
 .template2{color:#000000!important;background:#d6d6d6!important;letter-spacing:0px!important;word-spacing:1px!important;border-top-left-radius:0px!important;border-top-right-radius:0px!important;border-bottom-left-radius:30px!important;border-bottom-right-radius:30px!important;}
 .template2 .wp-block-button a, .template2 tr:last-child td a {background:#272c30!important;color:#ffffff!important;border-radius:7px!important;font-weight:normal!important;}

Creo que se podria solucionar agregando un nombre de clase generado aleatoriamente o bien, permitir agregar manualmente el nombre de la clase a la hora de personalizar el template
No había contemplado esa posibilidad y mira que tiene todo el sentido del mundo, investigaré la forma de como implementarlo teniendo en cuenta tu consejo, muchas gracias por encontrar ese problema y por tu mensaje 🙏

Edit: Ya está programado una solución, generando un nombre único de clase aleatoriamente para los estilos personalizados
 
Última edición:
Hola, he probado la plantilla de ventajas y desventajas y funciona muy bien, lo único que no me sale al copiar el CCS adicional el borde de las tablas, no se porqué. Gracias!
 
Hola, he probado la plantilla de ventajas y desventajas y funciona muy bien, lo único que no me sale al copiar el CCS adicional el borde de las tablas, no se porqué. Gracias!
Lo acabo de revisar y tienes toda la razón, es debido a mi "gusto" a la hora de diseñar las distintas cajas

Para el update 1.1 estará implementado en el personalizador la opción de dibujar bordes a las cajas que quieras, ya que a gusto, colores, gracias por usarlo y por avisarme!! 😉
 
Perfecto! Muy amable
 
Muy buena idea, lo probaré
Estaría bueno poder hacer bloques mas complejos. Saludos
 
Muy buena idea, lo probaré
Estaría bueno poder hacer bloques mas complejos. Saludos

Gracias Juani!!

En la próxima versión 1.1 se integrará mas opciones en el personalizador y varios bloques nuevos para poder abastecer las diferentes necesidades de todo tipo de nichos y webs

También se resolverán varios fallos como el mencionado por @Reconecting y otros más
 
Cuando empiece mi proximo proyecto lo implementare, gracias por la aportación.
 
Cuando empiece mi proximo proyecto lo implementare, gracias por la aportación.
¿Como lo vas a implementar? Me gustaría saber mas sobre tu idea, gracias a ti!
 
Esta genial para iniciados con webs de afiliado como yo xd
 
Esta genial para iniciados con webs de afiliado como yo xd
Muchísimas gracias juan, esta totalmente en beta, ya está programado la versión 1.1 con muchas mejoras, ya que si rebuscas un poco te encontrarás varios fallos, tanto en el diseño como en el rendimiento de los bloques, así que ya mismo se viene, un abrazo
 
🚀 Actualización v1.1 de http://bloques-gutenberg.com 🚀

He subido la actualización 1.1 donde incluye ciertas mejoras en los siguientes aspectos:

➡️ Arreglo de bugs
➡️ Nueva plantilla
➡️ Optimización de los bloques
➡️ 2 opciones nuevas de personalización

#Bugs
Error encontrado por @Tglex

Al agregar un bloque varias veces con distintos estilos en una misma web se sobreescribía, ya que utilizaban el mismo selector

Ahora cada bloque genera una clase única solucionando este problema

#Nueva plantilla

Se ha agregado una nueva plantilla a http://bloques-gutenberg.com v1.1

box-template13.webp


#Optimización de los bloques


En un directo de promoción en el twitch de Phoenix Seo se vio que varias líneas de código CSS sobraban ya que los bloques nativos de Wordpress ya lo implementaban.

Se ha eliminado código css sobrante de todos los bloques


# Personalización

Elegir si quieres un borde en tu plantilla y elegir su color
Escoger la cantidad de relleno horizontal y vertical de los botones en todas las plantillas

Las notas del parche completa lo podéis ver en el blog https://bloques-gutenberg.com/blog/notas-parche-1-1
 

Actualización 1.2 de https://bloques-gutenberg.com 🚀🚀​

Resumen:​


🔥 Página para ver estadísticas y nombres de los usuarios que han puntuado bloques

🔥 Ahora puedes pedir GRATIS bloques personalizados mandandome un MP

🔥 2 Plantillas nuevas

🔥 Pequeños rediseños

🔥 Página para ver estadísticas y nombres de los usuarios que han puntuado bloques​


En bloques-gutenberg.com/estadisticas podrás ver los nombres de usuario, valoración y bloque que han puntuado

🔥 Ahora puedes pedir GRATIS bloques personalizados mandandome un MP​


Desde el panel de tu cuenta podrás ver una información nueva: Pedir un bloque personalizado que aún no exista en bloques-gutenberg.com

Envíame un MP por twitter con una descripción o imágen de referencia y lo diseñaré

🔥 2 Plantillas nuevas​


2 plantillas nuevas en bloques-gutenberg.com, tanto en formato caja con columnas como en tablas:

- Caja horizontal para ofrecer servicios
- Caja vertical para vender servicios

🔥 Pequeños rediseños​


He arreglado ciertos aspectos de diseño

- Nueva sección en la landing
- Reformado el header en formato móvil
- Contenido spin en cada plantilla
- Efectos en el listado de bloques
 

Temas similares

Atrás
Arriba