Saltar al contenido principal

Cambios de estilo y diseño

Última actualización el 24 mar 20263 min de lectura
Índice de contenidos

En resumen​

Los cambios de estilo y diseño se pueden realizar directamente con el editor flotante. Esto es visible de inmediato después de que Varify.io se carga en tu página. Simplemente haz clic en el elemento que quieres optimizar y establece el cambio a través del menú desplegable o escribiendo la opción de estilo deseada.

Panel de estilo de Varify con «Edit element», los campos para dimensiones y posición y la configuración de tipografía

Opciones de estilo y diseño​

Las siguientes opciones están disponibles con el Floating Editor:

  • Dimensiones: Ancho y alto de un elemento
  • Ubicación: Posicionamiento de un elemento en la página web
  • Tipografía:
    • font-family: Fuente
    • font-size: Tamaño de fuente
    • font-weight: Grosor del trazo de la fuente
    • text-align: Alineación horizontal del texto
    • color: Define el color del texto.
    • text-decoration: El texto puede subrayarse o tacharse, por ejemplo.
    • line-height: Es la altura de una línea.
    • word-spacing: Esta opción aumenta o disminuye el ancho de la fuente.
    • white-space: Mediante white–space se determina cómo se muestran en el navegador los saltos de línea y los espacios contenidos en el texto de origen.
  • Fondo:
    • background-color: Es el color del fondo de un elemento.
    • background-image: Imagen de fondo de un elemento. El formato de archivo de la imagen de fondo puede ser JPG, PNG, SVG, webP o GIF.
    • background-style: Si no especificas nada, la gráfica de fondo se carga en su tamaño completo en el fondo. Si el elemento es más pequeño en altura o anchura que la gráfica de fondo, esta se recorta automáticamente.
    • background-repeat: Es el comportamiento de repetición de una gráfica de fondo incluida
  • Borde:
    • margin: Descripción de la distancia exterior de un elemento respecto a los elementos que lo rodean.
    • padding: Describe la distancia interior de un elemento respecto a su marco.
    • border-style: La propiedad CSS border-style establece el estilo de los cuatro lados de los bordes de un elemento.
    • border-width: La propiedad border-width determina todos los anchos de borde de un elemento.
    • border-color: La propiedad border-color determina todos los colores de borde de un elemento.
    • border-radius: La propiedad border-radius determina el radio con el que se redondean las esquinas de un elemento.
  • Diseño:
    • float: Con esto indicamos a un elemento que se desplace hacia el borde izquierdo o derecho de su elemento padre. Esto tiene efecto no solo sobre el propio elemento, sino especialmente sobre otros elementos relacionados con el elemento "flotado".
    • vertical-align: Alinea imágenes y texto en celdas de tabla y texto respecto a una línea base. La línea base, o baseline, es una línea invisible sobre la que se asientan la mayoría de las letras de una línea.
    • overflow: Cuando los elementos son demasiado grandes para caber en el bloque contenedor, su contenido desborda el bloque contenedor sin ninguna consideración. CSS overflow oculta las partes desbordantes del elemento para que la parte restante encaje en el bloque contenedor.
    • opacity: Opacidad de un elemento. Los valores pueden estar entre 0 y 1. 0 significa completamente transparente. 1 significa completamente visible.
    • z-index: La propiedad z-index especifica el orden en que se disponen los elementos de atrás hacia adelante en el medio de salida. Esto es importante si los elementos se superponen. Los elementos con un z-index mayor están más cerca del espectador y pueden superponerse a elementos con un z-index menor.
En esta página