Creación de botón personalizado en editor Gutenberg

ramones33 · 21 Jul 2023

Ya probé con varios bloques de botones, definitivamente no tienen lo que estoy buscando.

Quiero crear mi propio botón, antes lo creaba por medio de CSS y lo llamaba desde el modo html del editor clásico, ¿Cómo lo puedo hacer en Gutenberg? ¿Tengo que crear mi propio bloque? ¿Existe algún bloque que me permita lo que hacía en el editor clásico de agregar un poco de html acompañado del CSS en style.css que me permita agregar mi botón personalizado? ¿Otra opción?

BotBeta · 21 Jul 2023

Puedes crear tu propio botón personalizado en Gutenberg de varias maneras:

1. Crea tu propio bloque: Esto requiere conocimientos sólidos de JavaScript, especialmente React, y el uso de la API de bloques de Gutenberg. Pero te dará un control total sobre cómo se ve y funciona tu botón personalizado.

2. Usa un bloque personalizado HTML: Con este bloque, puedes agregar tu propio HTML y CSS igual que en el editor clásico. Simplemente agrega tu código HTML en el bloque "Custom HTML" y tu CSS en tu archivo style.css.

3. Usa un plugin: Existen varios plugins que te permiten añadir botones personalizados a Gutenberg, como "Advanced Gutenberg", "Stackable", o "Kadence Blocks". Estos plugins vienen con bloques de botones personalizables.

Recuerda, si usas código personalizado, siempre es una buena idea probarlo en un entorno de desarrollo antes de implementarlo en tu sitio en vivo.

ramones33 · 21 Jul 2023

BotBeta Informador dijo:
🔔 ¡Hola @Carlos Arreola! Te aviso que hay un tema en el foro que podría estar fuera de lugar. El usuario está buscando ayuda con Gutenberg y cómo crear su propio botón. ¿Podrías revisarlo y ver si es necesario moverlo a la sección correspondiente? ¡Gracias! 🔔

Gutenberg es el nombre del editor de bloques de WordPress y esta es la sección de Wordpress del foro.

juniorav · 21 Jul 2023

ramones33 dijo:
Gutenberg es el nombre del editor de bloques de WordPress y esta es la sección de Wordpress del foro.

Agrega un elemento html y pega esto:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-button {
      background-color: #4CAF50; /* Color de fondo */
      border: none; /* Sin borde */
      color: white; /* Color del texto */
      padding: 10px 20px; /* Espacios internos */
      text-align: center; /* Alineación del texto */
      text-decoration: none; /* Sin decoración de texto */
      display: inline-block; /* Visualización en línea */
      font-size: 16px; /* Tamaño de fuente */
      margin: 4px 2px; /* Márgenes externos */
      cursor: pointer; /* Cambio de cursor al pasar el ratón */
      border-radius: 4px; /* Bordes redondeados */
    }
  </style>
</head>
<body>
  <button class="my-button">Haz clic aquí</button>
</body>
</html>

Hay puedes jugar con los estilos del boton.

ramones33 · 21 Jul 2023

juniorav dijo:

Agrega un elemento html y pega esto:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-button {
      background-color: #4CAF50; /* Color de fondo */
      border: none; /* Sin borde */
      color: white; /* Color del texto */
      padding: 10px 20px; /* Espacios internos */
      text-align: center; /* Alineación del texto */
      text-decoration: none; /* Sin decoración de texto */
      display: inline-block; /* Visualización en línea */
      font-size: 16px; /* Tamaño de fuente */
      margin: 4px 2px; /* Márgenes externos */
      cursor: pointer; /* Cambio de cursor al pasar el ratón */
      border-radius: 4px; /* Bordes redondeados */
    }
  </style>
</head>
<body>
  <button class="my-button">Haz clic aquí</button>
</body>
</html>

Hay puedes jugar con los estilos del boton.

Ok, a probar, gracias

ramones33 · 21 Jul 2023

juniorav dijo:

Agrega un elemento html y pega esto:

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-button {
      background-color: #4CAF50; /* Color de fondo */
      border: none; /* Sin borde */
      color: white; /* Color del texto */
      padding: 10px 20px; /* Espacios internos */
      text-align: center; /* Alineación del texto */
      text-decoration: none; /* Sin decoración de texto */
      display: inline-block; /* Visualización en línea */
      font-size: 16px; /* Tamaño de fuente */
      margin: 4px 2px; /* Márgenes externos */
      cursor: pointer; /* Cambio de cursor al pasar el ratón */
      border-radius: 4px; /* Bordes redondeados */
    }
  </style>
</head>
<body>
  <button class="my-button">Haz clic aquí</button>
</body>
</html>

Hay puedes jugar con los estilos del boton.

Quizás está demás preguntar pero con elemento te refieres a un bloque "Custom HTML"?

juniorav · 21 Jul 2023

ramones33 dijo:
Quizás está demás preguntar pero con elemento te refieres a un bloque "Custom HTML"?

Si

venezuelagod · 2023-08-07T00:43:20-0600

Para agregar un botón personalizado en Gutenberg, te recomiendo crear tu propio bloque personalizado usando HTML, CSS y JavaScript para mayor control y flexibilidad. Hay tutoriales disponibles para guiar el proceso.

Creación de botón personalizado en editor Gutenberg

ramones33

BotBeta

ramones33

juniorav

ramones33

ramones33

juniorav

venezuelagod

Temas similares