fbpx

Botones Web

Los botones son fundamentales para que los usuarios naveguen de manera intuitiva y realicen las acciones necesarias en un sitio web, como realizar una compra, completar un formulario, y más.

1. Personalidad de Botones

Los elementos de un sitio web poseen carácter y personalidad. La elección de un estilo determinado les dará a tus usuarios un estilo de mensaje o la forma en que te comunicarás con ellos.

2. Jerarquía

Cuanto más sólido sea el botón, más importancia tendrá. Utiliza:

 

  • Formatos compactos para acciones principales
  • Contorneados para acciones secundarias
  • Botones sin enmarcar para aquellas que no sean relevantes.

3. Area de Clic

Cada vez más personas usan sus móviles para navegar y realizar acciones en páginas web.

En las versiones móviles, los elementos de la interfaz se reducen, lo que dificulta su uso.

Por eso, es recomendable ampliar el área de clic.

Así es más fácil seleccionarlo y puedes tocarlo sin cubrirlo completamente con el dedo.

4. Incluir Símbolos

En ciertas ocaciones se puede agregar iconos para resaltar aun más un botón.

Pero usa estos iconos o símbolos sabiamente para no saturar visualmente la página.

5. Copywriting

En vez de utilizar textos genéricos como «OK» o «Cancelar».

Es más recomendable emplear palabras o frases breves que ayuden a comprender claramente la acción que se realizará.

6. Contraste

Este último consejo es válido para toda la página web.

Es crucial contar con un buen contraste que facilite la legibilidad y el uso de todos los elementos.

Configurar Botones en WordPress y Divi

 

1. WordPress

En la configuración de APARIENCIA

2. Módulo Botón

Seleccionar el Módulo Botón

3. Módulo Texto

Seleccionar el Módulo Texto

Botón con Texto

4. Módulo Anuncio

Seleccionar el Módulo Anuncio

Botón Anuncion

Crear Tipos de Botones

 

1. Botón Cuadrado

2. Botón Redondo

3. Botón Sin Relleno

4. Botón Solo Texto

5. Botón Con Icono

Crear Tipos de Hovers

 

1. Hover Blanco

2. Hover Color

3. Hover Texto

4. Hover Borde

Cómo Guardar Botones

 

1. Guardar Botones en Librería

2. Botones Modo Global

g

3. Presets Botones

4. Convertir Botón Por Defecto

5. Guardar en Divi Cloud