Advertisement
  1. Code
  2. WordPress
  3. Plugin Development

Easy Digital Downloads: Ajustes de Estilos

Scroll to top
Read Time: 3 min
This post is part of a series called The Beginner's Guide to Easy Digital Downloads.
Easy Digital Downloads: Email Settings, Part 2
Easy Digital Downloads: Tax Settings

() translation by (you can also view the original English article)

Ya hemos visto las tres primeras pestañas en los Ajustes de Easy Digital Downloads. En este artículo explicaré la cuarta, Estilos. En esta sección hay opciones para algunos ajustes por defecto y para distintos botones.

Ajustes de Estilos

Es extremadamente importante para ti como propietario de una tienda online que tu web tenga un buen aspecto y sea además sencilla de usar (user-friendly). Esta combinación es difícil de lograr, pero EDD ha resuelto este problema, y ahora aplicar estilo a tu tienda se consigue con unos pocos clics. Esta pestaña te permite configurar distintos Estilos de forma que tu web consiga tener una apariencia atractiva. Podrás habilitar y deshabilitar distintos estilos del plugin desde aquí.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

La cuarta pestaña de esta sección de los ajustes es para los Estilos. Para acceder a esta zona del plugin, dirígete a Descargas > Ajustes > Estilos.

Aquí se enumeran distintas opciones de configuración. Vamos a ver cada una de ellas por separado.

Desactivar Estilos

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

La primera opción es una casilla de verificación para Desactivar los estilos. Cuando marcas esta casilla, se desactivará cualquier clase de estilo incluido en el plugin, y así podrás añadir tus propios estilos mediante CSS más fácilmente.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Por ejemplo, si marco esta opción desaparecerán todos los estilos en el front-end. La imagen de arriba basta para mostrar el efecto de este ajuste. Se puede ver con claridad como todas las palabras clave como precio del producto, el botón de compra, etc, están escritos en texto sin formato y no se diferencian entre si.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Si ahora desmarco la casilla, cambiarán en consecuencia los resultados del front-end. La imagen de arriba muestra una versión del producto digital con los estilos aplicados. Ahora el precio y la opción para comprar están enmarcadas limpiamente en un botón. Estos estilo mejoran la legibilidad así que, en mi opinión, deberías mantener los ajustes predeterminados a menos que planees aplicar tus propios estilos mediante el lenguaje de programación CSS.

Botones

Después tenemos en la pestaña Estilos una sección separada para los Botones. Aquí puedes ver dos opciones distintas de configuración.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings
  1. Estilo por Defecto del Botón
  2. Color por Defecto del Botón

Echémosles un vistazo.

Estilo por Defecto del Botón

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Aquí indicas el Color por defecto del botón. Se trata de un menú desplegable que ofrece dos opciones:

  • Botón
  • Texto Plano
Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Por defecto, aparece seleccionado Botón. La imagen de arriba muestra el resultado en el front-end donde ahora aparece la correspondiente línea alrededor de los botones de la etiqueta del precio y de la de compra.

Escojamos ahora Texto plano para ver los resultados.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Con esta configuración, comprobarás que la línea que podíamos ver alrededor del área de compra ha desaparecido.

El objetivo de las configuraciones de este ajuste es asegurarnos de que un estilo concreto para los botones sea aplicado en todo el sitio, sin importar qué parte de la web estés visitando. Normalmente prefiero dejar los valores predeterminados, la opción botón, porque proporciona un aspecto ordenado y claro.

Color por Defecto del Botón

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

La última opción es una pestaña que te permite elegir el Botón por defecto desde un menú desplegable. De forma predeterminada está seleccionado Blanco, pero puedes escoger un color distinto en la lista. Este color se mostrará en lugares como el botón comprar, el botón añadir al carrito, etc.

Permíteme mostrarte los resultados que producen algunos ajustes personalizados, por ejemplo, Rojo.

Easy Digital Downloads Styles SettingsEasy Digital Downloads Styles SettingsEasy Digital Downloads Styles Settings

Con este color seleccionado, comprobarás como todos los botones de tu web cambian ahora a Rojo. Yo prefiero usar un color claro y vibrante en los botones porque son una parte importante en tu web y deben destacar sobre los demás elementos.

Hay otra forma mediante la cual podrás aplicar cualquier color además de las que ya hemos mencionado. Añadiendo el shortcode "[purchase_link]" en el back-end podrás reemplazar el color seleccionado y sustituirlo fácilmente por uno de la paleta de colores.

Tras configurar estos ajustes en la pestaña Estilos, pulsa el botón Guardar cambios para conservarlos.

Conclusión

Hasta ahora he explicado cuatro pestañas de los Ajustes. En mi próximo artículo, explicaré la próxima pestaña, Impuestos. Espero que no te hayas encontrado con ningún problema mientras configuras los ajustes básicos de EDD.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.