Botones para web: En esta entrada de blog vamos a ver un fantástico plugin para WordPress que nos va a servir para crear botones personalizados para nuestra página web.
El plugin se denomina “MaxButtons”. Aquí tienes un enlace a la página de wordpress.org dedicada a este plugin. Ir a MaxButtons
En el momento de redacción de esta entrada de blog, el plugin es compatible con la última versión de WordPress y ha sido actualizado recientemente. Acumula más de 40.000 descargas activas.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
Las plantillas para wordpress o los page builder habitualmente traen botones con una serie de diseños predefinidos y difícilmente personalizables. No hace mucho tiempo me surgió la necesidad de crear una serie de botones muy personalizados para la página web de un cliente. MaxButtons fue el plugins para crear botones personalizados para WordPress que más me convenció. Su versión gratuita, que es la que vamos a ver, tiene una gran capacidad de personalización.
ÍNDICE AÑADIR BOTONES WORDPRESS
-
Botones para web: En esta entrada de blog vamos a ver un fantástico plugin para Wordpress que nos va a servir para crear botones personalizados para nuestra página web.
- 1.- Instalación del plugins MaxButtons para crear botones para web Wordpress
- 2.- Administración del plugin MaxButtons para crear botones para web Wordpress
-
3.- Crear un Nuevo botón para web con MaxButtons para Wordpress
- 3.1.- Bloque Basics (elementos básicos del botón para web)
- 3.2.- Bloque Dimensions (dimensiones del botón para la web)
- 3.3.- Bloque Text (texto del botón para web)
- 3.4.- Bloque colors
- 3.5.- Bloque Border del botón para web
- 3.6.- Bloque Gradients and Opacity
- 3.7.- Bloque Container
- 3.8.- Bloque Advanced
- 4.- Insertar botón en la página web
La forma más rápida de instalar el plugin MaxButtons es ir al menú lateral izquierdo del panel de administración de WordPress y pulsar: “Plugins > Añadir nuevo”. En el cajón de búsqueda que aparece en la parte superior del lateral derecho escribir el nombre del plugin: “MaxButtons” y pulsar enter.
Una vez localizado el plugin pulsar en: “Instalar” y posteriormente en: “Activar”.
Una vez instalado el plugin nos aparece en el menú lateral izquierdo de nuestro panel de administración de WordPress un nuevo elemento con el nombre:”MaxButtons”.
Dentro de dicha categoría nos aparecen las siguientes subcategorías:
- a.- Buttons: nos aparecen todos los botones que hemos creado con el plugin MaxButtons. Desde aquí podemos editarlos, duplicarlos o enviarlos a la papelera.
- b.- Add new: Para crear un Nuevo botón. Al pulsarlo nos aparece el formulario de creación y personalización de un nuevo botón.
- c.- Upgrade to pro: Para adquirir la versión de pago del plugin
- d.- Settings: Configuración general
- e.- Support: soporte
Como antes hemos indicado para crear un nuevo botón para web debemos hacer “clic” sobre el ítem de menú: “MaxButtons > Add new”.
En la parte superior de la interface tenemos 4 botones:
- i.- Save: guardar botón
- ii.- Copy: duplicar botón
- iii.- Move to trash: mover botón a la papelera
- iv.- Delete permanently: eliminar botón
A continuación tenemos una serie de bloques para configurar cada uno de los elementos del botón: Basics, Dimensions, Text, Colors, Border, Gradients and Opacity, Container, Advanced y Responsive Settings.
En el lateral derecho aparece una vista previa como una ventana emergente que podemos desplazar al lugar que queramos de la interface.
3.1.- Bloque Basics (elementos básicos del botón para web)
- Name: nombre para identificar el botón con respecto a otros botones que vayamos a crear.
- Description: descripción opcional del botón.
- URL: ulr a la que irá la página web cuando se pulse el botón.
- Open in New Window: chequear si queremos que al pulsar el botón la página web de destino se abra en una nueva pestaña.
- Use rel=”nofolollow”: Chequear si no queremos que Google y otros buscadores sigan el enlace (opción de SEO).
3.2.- Bloque Dimensions (dimensiones del botón para la web)
- Button Width: Anchura botón en píxeles
- Button Height: Altura del botón en píxeles
Nota: si no rellenamos anchura y altura el botón se ajustará a la dimensión mínima necesaria para poder contener el texto que introduzcamos en su interior.
3.3.- Bloque Text (texto del botón para web)
- Text: texto que queremos que aparezca en el botón.
- Font: fuente a utilizar en el texto
- Size: tamaño del texto del botón
- Style: estilo del texto: normal o itálica
- Weight: grosor de las letras del texto: normal o bold (grueso).
- Shadow Offset Left: desplazamiento hacia la izquierda de la sombra del texto (valor por defecto -1)
- Shadow Offset top: desplazamiento hacia la parte superior de la sombra del texto (valor por defecto -1)
- Shadow Width: grado de difuminado de la sombra del texto. Valor por defecto el 0. Valores positivos.
- Padding: esta característica nos da el margen interior que debe haber entre el texto y el borde del botón. Será necesario definir cuatro márgenes. La unidad será el pixel (px). Top: margen superior del botón, Bottom: margen inferior del botón, Left: margen izquierdo del botón y Right: margen derecho del botón. El valor por defecto para los márgenes laterales es de 25 px mientras que para los márgenes superior e inferior es de 15 px.
3.4.- Bloque colors
En este bloque podemos definir los colores del botón en su estado normal y cuando el ratón se posiciona sobre él. Podemos definir gradientes y colores de sombras.
- Normal: Botón en estado normal
- Hover: Botón cuando el ratón se posiciona sobre él.
- Text: Color del texto del botón
- Text Shadow: Color de la sombra del texto
- Gradient Start: color inicial del gradiente del botón WordPress.
- Gradient End: color final del gradiente del botón.
- Border: color del borde del botón WordPress.
- Border Shadow: color de la sombra del botón.
3.5.- Bloque Border del botón para web
En este bloque se define con todo lujo de detalles las características del borde del botón realizado con este plugin para WordPress.
- Radius: define el radio de cada esquina del botón WordPress. Top left (esquina superior izquierda), Top right (esquina superior derecha), Bottom left (esquina inferior izquierda), Bottom right (esquina inferior derecha). El valor por defecto para el curvado de cada esquina del botón es de 4px.
- Style: estilo de la línea (solida, puntos, rayas, etc.)
- Width: grosor de la línea de borde del botón
- Shadow offset left: sombra lateral del botón (se pueden poner valores negativos)
- Shadow offset right: sombra superior e inferior del botón (se pueden poner valores negativos)
- Shadow width: grado difuminado de la sombra.
3.6.- Bloque Gradients and Opacity
En este bloque se van a definir los grados de opacidad de los colores que forman el gradiente del botón WordPress.
- Gradient start opacity: opacidad del gradiente inicial del botón normal
- Gradient end Opacity: opacidad del gradiente final del botón normal
- Gradient start Opacity Hover: opacidad del gradiente inicial del botón cuando el ratón se posiciona sobre él.
- Gradient end Opacity Hover: opacidad del gradiente final del botón cuando el ratón se posiciona sobre él.
3.7.- Bloque Container
Bloque para definir las características del bloque contenedor del botón WordPress.
- Use container: usar el contenedor
- Wrap with center div: centrar
- Width: anchura del bloque contenedor del botón
- Margin top: margen superior del bloque contenedor del botón.
- Margin Right: margen lateral derecho del bloque contenedor del botón WordPress.
- Margin Bottom: margen inferior del bloque contenedor del botón.
- Margin Left: margen lateral izquierdo del bloque contenedor del botón WordPress.
- Alignment: alineación
El cambio de estas características no se verán reflejadas de manera automática en la vista previa del botón ya que estas características estan relacionadas con la interacción del botón con los elementos que le rodean.
3.8.- Bloque Advanced
- Use ¡important: usar en caso de que veamos que el diseño que vemos del botón no se corresponde con el que hemos diseñado.
- Use external css: En caso de que queramos que el diseño del botón se añada a la hoja de estilos de la plantilla o tema WordPress que estemos utilizando.
4.- Insertar botón en la página web
Una vez creado el diseño de un botón debemos ir a la opción del menú lateral izquierdo: “MaxButtons > Buttons”.
En esta pantalla nos aparecerán todos los botones creados y dos shortcodes para introducirlos en la página o entrada de blog que queramos.
Tenemos un shortcode relacionado con el número ordinal del botón ()y otro con el nombre del botón (). Cualquiera de los dos es válido.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola
sabes cuando hjagon el boton me queda muy bien, lo unico es que el texto queda subrayado, donde lo arreglo?
Hola Catalina.
Revisa la configuración del botón. Seguramente habrás seleccionado alguna opción de subrayado.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
hola Joaquín … mi problema es q al ingresar en la vista rapida de mi producto(foto) el boton aparece sin su formato solo sale letras ,,
hay alguna solucion? uso el tema oceanwp
Hola Álvaro,
Tendrás que mirar en las opciones de Oceanwp. En caso contrario, pues ya tendrías que hacerlo vía css directamente, o a través de algún plugin de css como CSS Hero. En este post puedes ver como se usa: https://www.tiendaonlinemurcia.es/como-cambiar-texto-y-color-boton-anadir-al-carrito-woocommerce/ Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, plantillas wordpress como flatsome, Divi, Astra pro, cursos Analytics ecommerce, seo general, SEO tiendas online, etc. etc.
Hola joaquín, desde hace un tiempo ando buscando un plugin que me permita añadir varios enlaces o links en un solo boton, para que cuando se le de click habra alguno de los enlaces de manera aleatoria.
Hola René, Lo siento, pero no conozco ningún plugin que permita añadir un botón con enlaces aleatorios. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Aunque, si utilizas una imagen (en forma de botón) donde cada zona tenga un enlace diferente, al final funcionaría un enlace u otro según donde hiciera clic el usuario. Sería en cierto modo, aleatorio. Ya que el visitante no conoce que cada zona del botón lleva a un enlace diferente.
Aquí tienes un post sobre esto de poner varios enlace en una imagen: Poner varios enlaces en una imagen
Enhorabuena por este detalladísimo post. ¿Sabes cómo podría poner un botón en una página que sirva para hacer una nueva entrada en el blog?
Muchas gracias!
Buenas
Pues, tendrías que poner la url del menú «Entradas > añadir nueva» que es: «
https://www.mipaginaweb.es/wp-admin/post-new.php«. Pero, claro si el usuario tendrá que haber iniciado sesión y tener los permisos necesarios para poder crear una entrada de blog. Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Curso diseñador web freelance, Cursos sobre SEO, Analytics, sobre Mailchimp, blog WordPress, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, etc. etc.****Hola buenas tardes, ya sé que hace tiempo que no se habla por aquí, pero quería hacerte una pregunta. ¿Hay alguna forma de crear un botón portapapeles en wordpress? He estado buscando y no encuentro nada. Yo lo que quiero hacer es un botón portapapeles para que copie un codigo de descuento. Un cordial saludo y espero su respuesta.
Hola Pablo.
No he trabajado nunca ese tema.
Mira a ver si alguno de estos plugins te pudieran servir: Plugins Clipboard
Échale un vistazo también a este post: An Easy Plugin to Copy to Clipboard in WordPress
Hola Joaquin, conoces algún plugin para que el botón aparezca después de un tiempo determinado?
Hola Eduardo.
No conozco ningún plugin para eso. Tendrías que ver si en el page builder que usas en tu web hay posibilidad de añadir una animación con un retardo sobre los elementos del constructor e insertar el botón en un elemento de ese tipo.
Hola Joaquin,
Te escribí en otro de tus articulos pero este creo que es más cercano a lo que busco. ¿Sabes cómo puedo mover de posición un botón del encabezado de mi plantilla? por ejemplo, el botón color rosa llamado «Contáctanos» quiero moverlo de lugar y situarlo en la parte superior derecha de la página?. Si no se puede mover, ¿Cómo puedo crear uno nuevo y situarlo donde te digo?
Por otro lado, Sabes si hay manera de fijar el menú? es decir, que al usar el scrolldown del ratón, el menú se mantenga siempre fijo y no se desplace..
Esta es mi web: http://www.itamexsa.mx/
Mil gracias!!
Buenas.
Ambas cosas dependen de la plantilla que estés utilizando.
Yo te podría indicar si estás utilizando la plantilla Divi, pero si usas otra, has de consultar al soporte de tu plantilla
Hola Joaquin
Estoy aprendiendo como hacer una pagina web, una tienda, con WooCommerce.
Estoy buscando un plugin, aunque sea de pago, que me permita modificar el diseño del botón de subida (scroll top?). O sea, cambiar la flecha habitual por una botella, por ejemplo.
Gracias
Hola Alexandra.
No conozcon ningún plugin para ello. Ten en cuenta que ese botón depende de la plantilla y no de WordPress.
Por lo que el plugin debería ser compatible con la plantilla que estés utilizando.
Buenas tardes quisiera saber si este plugin me sirve para añadir unos botones flotantes de whatsapp, correo y telefono?
Hola Paola,
No te sirve para eso. Pero echa un vistazo a este post: Boton de llamada móviles
Hola Joaquin Gracias por el Post.
Apenas comienzo en el mundo de wordpress, quisiera saber si con éste plugin puedo crear botones de paginación, es decir ver siguiente o anterior post, Es que estoy utilizando un plugin llamado The Post Grid y no se como agregar éstos botones o que me recomiendas para poderlos agregar, Muchas gracias
Buenas Jorge.
Este plugin sirve para crear botónes de acción. NO sirve para enlaces de paginación.
En teoría, tu plantilla debería mostrar la paginación en entradas cuando sea necesario
Hola Joaquín. Tengo una duda que no consigo responder. ¿Cómo se centran los botones en el texto del post? Llevo probando un buen rato y no lo consigo.
Gracias
Hola Kris,
Prueba a seleccionar el shortcode del botón y pulsar el botón de centrar del editor de WordPress.
Hola, me podrías ayudar por favor, veo que este plugin no tiene responsive en todas las medidas , entonces cuando llega la pantalla bien pequeña, como para dispositivos mobiles los botones quedan amontonados o unos sobre otros y eso no se ve bien. Te agradecería por favor me orientes , donde puedo agregar el responsive para las demás medidas.
Buenas,
Eso va a depender más del page builder que estés utilizando para la creación de la página. Es en los bloques del constructor donde incluyas los botones tendrás que establecer márgenes específicos para cuando se visualiza en móviles.
Si no puedes hacer esto con tu constructor pues solo tienes la opción de usar el apartado «Container» del botón donde puedes establecer el margin top, margin bottom, etc.
Hola.. Tengo un p`roblema quiero insertar mis post en instagram, para que mi publicaciones de Word se tranladen inmediantamente a instagram, ¿como le hago?
Buenas,
Pues necesitarás un plugin que te añada la funcionalidad de publicar autómaticamente en instagram. Algún plugin de este tipo: Auto-Post WordPress To Instagram
Como le pongo un icono o imagen a un boton de maxbuttons en su version gratuita? Gracias. Por ejemplo en el boton de llamar un icono de un telefonito?
Buenas,
En principio el plugin en su versión gratuita no dispone de opciones para añadir iconos. Pero puedes probar a añadir el código de un icono en el campo donde se pone el texto que debe mostrar el icono.
Prueba con la fuente Awesome. En el siguiente post mira los puntos 2, 4.1 y 4.2 que explican como implemnetar esa fuente de iconos y como añadirlos a wordpress: Añadir iconos fuente Awesome a WordPress
Hola muy buenas, Alguien podría ayudarme?. Tengo en una web que he creado por WordPress un banner en la página de inicio y me gustaría saber como puedo añadirle un botón de descarga para que me lleve a otra página y puedan descargarlo.
Gracias.
Un saludo.
Buenas,
yo lo que haría sería:
1.- comprimir la imagen que quieres que se puedan descargar los usuarios.
2.- Subir la imagen comprimida a wordpress a través de «Medios > Añadir nuevo»
3.- Hacer clic sobre la imagen comprimida en la biblioteca de medios y copiar su URL
4.- Pegar la url en el enlace del botón.
(NOTA: Mira antes este post que te puede ser de interés: Subir pdf u otro archivo a wordpress)
Yo tengo un problema con el botón de enviar comentarios. No se ve. Uso DIVI y no doy con la tecla de donde configurar el botón enviar comentarios de las entradas del blog. Espero que puedas ayudarme. Un saludo y gracias por tus excelentes explicaciones.
Buenas,
No hay una opción específica para configurar el botón de enviar de los comentarios.
En Divi hay una opción general para botones que está en: «Divi > Personalizador de temas > Botones».
Pero veo que en tu web el botón de enviar comentarios se ve correctamente
Muchas gracias por el post Joaquín, me ha sido de gran ayuda para poder poner ´rápidamente un botón en un post.
Un saludo
Gracias Joaquín,
me está funcionando muy bien MaxButtons. Estaba algo desesperado pensando que la única forma de editar el formato de los menús era pagando.
Un saludo y gracias.
hola, profe me ayudas en algo fácil pero que no me aclaro?
te cuento tengo una web, «wordpress» a la que quiero poner un botón con .jpg
con o sin pluging… en un banner.
el tema esta en un banner con dos logos distintos que dan acceso a dos sitios diferentes…
Hola Jorge,
no entiendo bien a que te refires. Pero con divi puedes añadir una imagen de fondo a una sección que sería el banner y luego incluir dos imágenes cada una con su url de enlace o dos botones cada uno con su url de enlace.
Un saludo
Gracias. quizás no me exprese bien. disculpa
la duda?
tengo——> un banner con UN logo.
necesito—> en ese banner, DOS logos que accedan a dos sitios distintos.
????
gracias.
Hola Jorge,
vamos a ver en primer lugar, que yo sepa no puedes tener varios enlace en una única imagen. Por lo que no se podría tener una sola imagen en la que hubiera varios enlaces.
La única opción que veo es usando el constructor de Divi y utilizar la imagen que comentas como una imagen de fondo en una sección y luego insertar varios módulos de imagen encima, cada uno con una url de destino (enlace) diferente.
gracias
Un saludo