Una guía para diseñar mejores botones para WordPress

Los botones y exhortaciones llenan relativamente poco bienes inmuebles, pero son algunos de los elementos de diseño más importantes de cualquier sitio web. Dada su importancia, obtener los botones y exhortaciones correctos es un gran tipo. Sin embargo, el diseño de los botones puede ser difícil. Hay muchos factores de diseño a considerar al diseñar los botones (tamaño, color, iconos, forma, ubicación y texto) y los botones de exhortación son aún más importantes para ser correctos. En esta publicación, cubriremos los elementos básicos del diseño de botones para su sitio de WordPress. También consideraremos los factores que debemos considerar cuando sus botones se usan como parte de un impulso. Finalmente, le dejaremos con el código que puede usar para crear botones y mostrarle cómo usar ese código de WordPress.
Tres principios para diseñar botones eficientes para sitios web comienzan con los elementos básicos. Si desea crear botones efectivos, debe seguir algunas buenas prácticas. Estas buenas prácticas pueden parecer sentido común y eso es porque realmente son. Sin embargo, si nunca antes ha pensado en el diseño de los botones, puede descubrir que ha violado algunos de estos principios. Principio #1: ¡Los botones deberían verse como, bueno, botones! Para que el diseño de un sitio web funcione de acuerdo con la intención, los botones deben ser fáciles de elegir. Echemos un vistazo a cómo Google hace esto en la página de destino para su producto de análisis.

Aunque no todos aman el diseño de material de Google, los botones en la imagen de arriba son inconfundibles. Los botones deben destacarse. Los botones que no son claramente son los botones pueden tener una tasa de clics significativamente más baja. Principio #2: Las acciones de los botones deben ser claras al diseñar los botones, la acción asociada con cada botón debe ser clara. Mira hacia atrás a la imagen de arriba. La acción asociada con cada botón es clara. Use el texto o los iconos en los botones para describir clara y brevemente las acciones para las cuales se diseñan cada botón. No tiene que hacer esto con el texto. A veces, los iconos pueden ser tan efectivos. Por ejemplo, mirando el mismo ejemplo, vemos este botón de estilo de icono en el lado derecho:
El icono en este botón comunica algo a este respecto: “¡Hola! ¡Hay más cosas aquí! Nos informa que hay opciones adicionales disponibles que se pueden ver haciendo clic en el botón. Principio #3: El diseño de los botones debe ser consistente en el tercero, al diseñar los botones, asegúrese de que todos los botones que realicen una acción similar tengan un diseño similar. Veamos a Google de nuevo.

En la imagen, hay tres modelos diferentes de botones. El diseño de cada botón hace algo diferente. Los botones verdes son una exhortación: le permiten registrarse para un servicio y son los más importantes. Las flechas azules le permiten obtener más información sobre cada servicio. El botón de icono muestra varias opciones disponibles en la misma página web. A lo largo de esta página web, este modelo es consistente:

Los botones de icono redondos realizan acciones en la página.
Los botones “Descubrir más” son azules e incluyen una flecha (y a veces algún texto). El impulso es cuadrado y verde.
A medida que diseña los botones para su sitio, desarrolle un sistema en el que diferentes modelos de botones tienen diferentes objetivos y sean consistentes en la aplicación de estos modelos.
Cómo resaltar los botones de acción para la acción incluida en los elementos del impulso (CTA) son un poco diferentes del resto de los botones de su sitio. Esto se debe al hecho de que los botones de CTA deben diseñarse para alentar alguna acción ., en lugar de servir simplemente como un elemento funcional de la interfaz de usuario. Para hacer los botones CTA de la manera más eficiente posible, tenga en cuenta estas reglas: use los colores que estén en un gran contraste con el color de fondo y se destaque en comparación con los otros botones de UI en su sitio.
Se utiliza un color audaz para el botón CTA de Inbound.org
Haga que los botones CTA sean fáciles de ver y encontrar, dimitándolos generosamente y dejando muchos espacios blancos alrededor de los botones CTA.

Kissmetrics deja que los botones CTA se destaquen dimensionándolos generosamente.
Use un idioma urgente al escribir una copia para sus botones CTA, especialmente si hace una oferta de tiempo limitado.

Los sitios de comercio electrónico como Baron Fig a menudo usan la palabra “ahora” para expresar emergencia.
Creación de botones de código Siempre puede usar un complemento para crear botones, pero al codificarlos solo tiene un control completo sobre la apariencia y el comportamiento de sus botones. Que puede crear tres modelos comunes de botones con código: botones de texto rectangulares, botones de icono circular y botones que combinan texto e iconos. Cómo crear botones de texto rectangulares con código

Los botones de texto son muy fáciles de crear y si escribe el código usted mismo, puede ajustarlos bien para verlos exactamente como desee. Comencemos con la marca HTML para un botón de texto simple.
Cargue el esencial JPEN365/F06ADDDE126759535C813BA5AEF29BC2#file-TIXT-BUTTON-HTML

Para atar este botón a una página, agregue la URL al elemento de anclaje que limpia el letrero de lire y lo reemplaza con la URL, de la siguiente manera: href = “http://example.com/page-to-link-to”. El texto del botón se puede cambiar reemplazando la compra ahora en el marcado del botón de copia favorito. Bajo esto, un intervalo contiene un texto más pequeño de detalles. Simplemente elimine el texto completo de la gama si no desea mostrar el texto detallado.

Luego necesitamos agregar algunos CSS para estilizar el botón:
Cargue el esencial jpen365/f06addde126759535c813ba5aef29bc2#file-text-button-cssss
Para cambiar el aspecto de cada botón, simplemente edite el CSS en los puntos indicados por los comentarios. El CSS anterior creará un botón verde con un borde gris y esquinas redondeadas, como se muestra en la imagen de arriba. Cómo crear botones con icon círculo con código
Estos botones están inspirados en los botones de icono de Google Analytics. Afortunadamente, son bastante fáciles de crear. Primero, debemos agregar una fuente de icono a nuestro sitio. Podemos hacer esto de diferentes maneras. Si crea botones en un documento HTML simple, simplemente coloque este enlace en el documento para importar Font Awesome.
Por otro lado, si agrega los botones directamente a WordPress, y su tema no incluye iconos impresionantes de fuentes, entonces puede colocarlos en la cola instalando el CDN enwesome, un complemento gratuito de WordPress. Ahora, podemos escribir la marca que usaremos para nuestros iconos. Para crear los cuatro iconos en la imagen de arriba, usaríamos este código:
Cargue el esencial JPEN365/F06ADDDE126759535C813BA5AEF29BC2#file-icon-buttons-html

La clase Fa-Agule-izquierda aplicada al primer elemento I es el que cobra el icono. Así es como los iconos se cargan con Font Awesome y puede ver una lista completa de iconos en el sitio web Font Awesome.
Este código se puede utilizar para generar botones que incorporen cualquiera de los iconos increíbles de fuentes. Por ejemplo, para crear un icono de Facebook, usaría el siguiente código:
Cargue el esencial JPEN365/F06ADDDE126759535C813BA5AEF29BC2#File-FacBook-Icon-HTML
Finalmente aplicamos algunos CSS para convertir nuestras marcas en botones:
Cargue el esencial JPEN365/F06ADDDE126759535C813BA5AEF29BC2#File-icon-Button-CSSSS
Si desea usar este código en su propio sitio, los comentarios en el CSS anterior lo ayudarán a ajustar la apariencia de los botones. Tenga en cuenta que puede cambiar la alineación del icono de un icono a otro. Para hacer esto, deberá agregar la clase apropiada al icono como se muestra en la marca HTML y ajustar el relleno aplicado al icono utilizando la última sección de CSS. Para centrar el icono, no agregue ninguna de las clases prefijadas con Move-. Cómo crear botones cuadrados con texto e icotogramas CSS ya existentes en los botones de icono y texto, crear botones que combinen texto e iconos es simple. Todo lo que tenemos que hacer es agregar un icono al botón de texto, de la siguiente manera:
Cargue el esencial JPEN365/F06ADDDE126759535C813BA5AEF29BC2#file-text-icon-button-html
Como puede ver, utilicé un nuevo icono y reutilicé una clase del botón de icono, se mueve izquierda, para crear un espacio entre el icono y el texto cercano. Agregar botones a WordPress Hay dos pasos a seguir para agregar botones a un sitio web de WordPress. En primer lugar, tienes que cargar el CSS. En segundo lugar, agregue el marcado en la publicación o página donde desea que aparezca el botón. Tiene algunas opciones para agregar CSS a su sitio web.
Puede usar un tema infantil y agregar CSS al archivo style.css del niño.
Ahora que se ha lanzado WordPress 4.7, puede agregar CSS a la sección CSS adicional de WordPress Customizer.

Puede usar un complemento CSS personalizado.
Conclusión La codificación de los botones para su sitio de WordPress es bastante simple y le brinda la oportunidad de probar diferentes colores, copia de botones, iconos y modelos para maximizar la efectividad de IU y urgencia. ¿Qué consejos tiene para crear efectivos botones y exhortaciones?¡Comparta su sabiduría y experiencia en la sección de comentarios a continuación!
Etiquetas:
botones
llamada a la acción
IU