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

VER CURSOS

 

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.

 

 

 

 

1.- Instalación del plugins MaxButtons para crear botones para web WordPress

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”.

 

2.- Administración del plugin MaxButtons para crear botones para web WordPress

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

 

Aún no conoces la plantilla Divi, la mejor plantilla para WordPress: Todo sobre Divi

 

 

3.- Crear un Nuevo botón para web con MaxButtons para WordPress

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.

Botones para web WordPress: editar el texto del botón

 

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.

boton para web utilizando un plugin para wordpress

 

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.

Botones para web, insertar con un shortcode

 

Compártelo ya!!