En esta sección de Snippets Gutenberg te comparto pequeñas soluciones prácticas que puedes implementar directamente en tu web sin necesidad de instalar plugins adicionales.
Aquí encontrarás códigos listos para usar (HTML, CSS y JavaScript) que puedes pegar en un bloque de HTML de Gutenberg para crear componentes visuales como sliders, pestañas, acordeones, tablas de precios, carruseles de equipo y mucho más.
Son fragmentos sencillos, personalizables y totalmente compatibles con cualquier tema de WordPress. Perfectos para quienes buscan agilizar el desarrollo y mantener su web ligera sin perder funcionalidades.
¿Buscas un slider sin plugin? ¿Un acordeón rápido para tus FAQs? ¿O un carrusel con autoplay para la página de equipo? Todo eso y más lo tienes aquí, en la categoría Snippets Gutenberg.
Ampliamos la sección de snippets para Gutenberg con una nueva idea que surgió a raíz de un comentario en el blog. Un lector me pidió un contador regresivo que empezara automáticamente al cargar la página y que, al pasar un minuto, revelara un contenido oculto. En este ejemplo, el contenido revelado es un cupón de descuento, pero puedes adaptarlo fácilmente para mostrar cualquier cosa: un botón, un enlace, un mensaje,…
A veces solo quieres mostrar un efecto visual atractivo, como unas flip cards o cajas que giran al pasar el cursor, pero no quieres instalar un plugin más para hacerlo. Tal vez lo necesitas en una sola página, como en el Inicio, la sección de Contacto o una landing page, y no te compensa sobrecargar tu WordPress con más bloques de terceros. Pues te alegrará saber que puedes hacerlo solo…
Hoy te traigo un snippet súper útil para añadir a tu web sin necesidad de plugins: métricas animadas o contadores que suben automáticamente al hacer scroll. Perfectos para mostrar logros, estadísticas o cifras clave en tu landing page o página corporativa. Y como siempre, solo necesitas HTML, CSS y JavaScript dentro de un bloque HTML de Gutenberg, nada más. ¿Para qué sirve este tipo de contador? ¿Qué hace este código?…
Hoy quiero enseñarte a crear algo muy visual y efectivo para tu página de inicio, landing page o cualquier otra página donde necesites un hero con video de YouTube en autoplay que solo reproduce un fragmento concreto del video, como si fuese un gif animado, y que además incluye un slider de contenido encima del propio video. Y lo mejor de todo es que no necesitas plugins, solo un bloque…
Hoy te traigo un snippet muy práctico para Gutenberg: un botón que abre un popup a pantalla completa con un video de YouTube incrustado. Ideal para páginas de inicio, landing pages o incluso para incluirlo en la barra lateral sin ocupar mucho espacio. ¿Por qué usar este sistema? A veces, incrustar directamente un video de YouTube rompe el diseño o no es lo más estético, especialmente en zonas como el…
Hoy te traigo otro snippet útil para Gutenberg: un timeline horizontal animado totalmente personalizado, que puedes insertar directamente desde un bloque de HTML sin depender de constructores visuales o plugins adicionales. ¿Qué vamos a crear? Un timeline o línea de tiempo con 8 pasos, perfecto para mostrar procesos, roadmaps o fases de un proyecto, con las siguientes características: Código completo del timeline Simplemente copia y pega este código dentro de…
Hoy te traigo otro snippet directo para Gutenberg sin plugins que te va a encantar. Ya hemos visto cómo crear sliders, tablas de precios y carruseles, pero ahora vamos a crear algo que queda genial en cualquier web profesional: un grid tipo masonry de testimonios con animación al hacer scroll. Es perfecto para mostrar las opiniones de tus clientes o usuarios de manera visual y dinámica, sin depender de complementos…
En Pluginsweb.es llevamos unos días explorando cómo crear funcionalidades súper útiles directamente dentro de un bloque de HTML de Gutenberg, sin plugins de por medio. Más fácil y ligero, imposible. Ya hemos aprendido a crear: Y hoy vamos un paso más allá con algo que se ve en casi cualquier web corporativa o landing page: un carrusel de miembros del equipo con autoplay infinito y pausa al pasar el ratón.…
Hoy te voy a enseñar cómo crear una tabla de precios responsive para tu landing page o página de servicios utilizando únicamente HTML y CSS, directamente dentro de un bloque HTML de Gutenberg. Si solo necesitas mostrar una tabla sencilla de precios en tu página de inicio o en una sección concreta de tu web, no es necesario instalar un plugin adicional. Puedes conseguir un resultado muy profesional con unas…
Hoy te voy a enseñar cómo crear un slider de ancho completo para la página de inicio de tu web en WordPress, utilizando solo HTML, CSS y JavaScript, directamente dentro de un bloque de HTML de Gutenberg. Este slider permite añadir tantas diapositivas como necesites, cada una con su propio título, subtítulo, texto y botón, y todo sin necesidad de recurrir a plugins adicionales. ¿Por qué sin plugin? Si solo…
Si has llegado hasta aquí es porque probablemente eres de los que usan Gutenberg «a pelo» y, al crear tu página de Preguntas Frecuentes (FAQs), te has dado cuenta de que Gutenberg no trae ningún bloque nativo de acordeón. Bien, no te preocupes: no necesitas instalar ningún plugin adicional solo para mostrar unas simples preguntas y respuestas desplegables. Hoy te voy a enseñar cómo puedes crear un acordeón funcional solo…
Si utilizas Gutenberg como editor en WordPress, te habrás dado cuenta de que no existe un bloque nativo para crear pestañas (o «tabs») que te permitan mostrar diferentes contenidos dentro de la misma sección. Y si solo necesitas agregar pestañas en una entrada concreta o en un par de páginas específicas, no tiene mucho sentido instalar un plugin completo de bloques adicionales solo para esto. Afortunadamente, existe una solución mucho…
Agregar Comentario