Qué hace esta página

El Administrador de Estilo le permite personalizar el aspecto y la sensación de su sitio web sin escribir ningún código. Haga clic en cualquier elemento que vea en su sitio y cambie sus colores, fuentes, espaciamiento, sombras y más. Puede crear diferentes estilos para el modo de luz y modo oscuro, probar cómo las cosas se ven en dispositivos móviles y aplicar cambios a páginas específicas o a todo su sitio.

Piénsalo como un editor visual que se sienta en la parte superior de su sitio, permitiéndole apuntar y hacer clic para hacer cambios de diseño al instante.

[Screenshot: page-overview]

Cómo llegar aquí

Navigate a Panel de Admin Plantillas Style Manager

Comprender la página

Cuando abra por primera vez el Administrador de Estilos, verá dos áreas principales lado a lado:

Panel izquierdo: Editor de estilo

Este es su panel de control con siete pestañas para diferentes opciones de estilo:

• Colores - Colores y fondos de texto (incluyendo gradientes)
• Tipografía - Fuentes, tamaños y formato de texto
• Spacing - Bodas y márgenes
• Fronteras - Estilos de frontera, anchos, colores y sombras
• A ti - Configuración de visualización, posicionamiento y flexbox
• Efectos - Opacidad, transformaciones y filtros
• Tamaño - Proporción de ancho, altura y aspecto

Cuando selecciona un elemento en su sitio, este panel muestra los estilos actuales y le permite cambiarlos.

Panel derecho: Vista previa en vivo

Esto muestra su sitio web real en una ventana de vista previa. Puedes:

• Navegue a diferentes páginas
• Haga clic en elementos para seleccionar y estilo
• Toggle entre escritorio, tableta y vistas móviles
• Interruptor entre modos ligeros y oscuros
• Vea sus cambios al instante como usted los hace

Controles superiores

La barra de cabecera incluye:

• Modo de luz / Modo oscuro botones - Elija qué modo está editando
• Guardar todo - Guarda todos tus cambios de estilo
• Reset All - Quitar todos los estilos personalizados y empezar de nuevo

Tareas comunes

Cómo estilo un elemento

Este es el flujo de trabajo básico que usarás para todas las tareas de estilo.

1. Haga clic en Modo de edición botón (ícono del cursor) en la barra de herramientas de vista previa.
2. Un indicador verde "Edit Mode Active" aparece en la parte superior de la pantalla.
3. Mueva el ratón sobre elementos en la vista previa - que resaltarán con un esquema azul.
4. Haga clic en un elemento para seleccionarlo.
5. Verás información sobre el elemento seleccionado en la parte superior del panel izquierdo.
6. Utilice las pestañas (Colores, Tipografía, etc.) para cambiar cómo se ve.
7. Vea sus cambios aparecen instantáneamente en la vista previa.
8. Cuando estés contento con los cambios, haz clic Guardar cambios en el fondo del panel izquierdo.

[Screenshot: selecting-and-editing-element]

Cómo cambiar los colores

Después de seleccionar un elemento:

1. Haga clic en Colores ficha en el panel izquierdo.
2. Ampliar el Color de texto sección para cambiar el color del texto.
3. Haga clic en el reloj de color (cuadra color) para abrir un selector de color.
4. Elija un color o escriba un código hex en el campo de texto.
5. El elemento actualiza inmediatamente en la vista previa.

Para cambiar el fondo:

1. En el Colores pestaña, ampliar Antecedentes sección.
2. Elija Sólido para un solo color o Gradiente para una mezcla de color.
3. Para fondos sólidos, haga clic en el reloj de color y seleccione su color.
4. Check Transparent si no quieres ningún fondo.

[Screenshot: color-picker-interface]

Cómo crear un fondo de experiencia

Los ingredientes mezclan múltiples colores juntos sin problemas.

1. Seleccione su elemento y vaya al Colores tab.
2. Ampliación Antecedentes y haga clic en Gradiente Botón.
3. Elija una dirección haciendo clic en uno de los 8 botones de dirección (o introduzca un ángulo personalizado).
4. Verás al menos 2 paradas de color. Haga clic en cada reloj de color para elegir colores.
5. Ajuste los deslizadores de posición (0-100%) para controlar donde aparece cada color.
6. Haga clic + Add Stop para añadir más colores a tu gradiente.
7. Haga clic en el botón X junto a una parada de color para eliminarlo (debe mantener al menos 2).
8. Vea la actualización de la barra de previsualización gradiente mientras hace cambios.

[Screenshot: gradient-builder]

Cómo cambiar fuentes y texto

Después de seleccionar texto o cualquier elemento con texto:

1. Haga clic en Tipografía tab.
2. Ampliación Fuente Familia & Tamaño.
3. Elija una fuente de la Font Family deserción (Roboto, Inter, Montserrat, etc.).
4. Establecer el Tamaño de la fuente utilizando la entrada número y elegir la unidad (px, rem, em, o %).
5. Seleccione una Peso de la fuente para hacer el texto más delgado o más audaz (400 es normal, 700 es audaz).

Para el formato de texto:

1. Ampliar el Formato de texto sección.
2. Haga clic en botones de alineación para alinear izquierda, centro, derecha o justificado.
3. Elija Transformación de texto para hacer texto UPPERCASE, minúscula o Capitalizada.
4. Elija Decoración de texto para añadir líneas de apoyo, huelgas o líneas generales.

[Foto: tipografía-opciones]

Cómo añadir el espacio

El espaciamiento controla el espacio vacío alrededor y dentro de elementos.

1. Seleccione su elemento y haga clic en Spacing tab.
2. Ampliación Padding e introduzca un número para añadir espacio dentro del elemento.
3. Ampliación Margin e introduzca un número para añadir espacio fuera del elemento.

Cómo agregar fronteras y sombras

Después de seleccionar un elemento:

1. Haga clic en Fronteras tab.
2. Ampliación Frontera para personalizar la frontera.
3. Elija un Estilo de frontera (Solid, Dashed, Dotted, etc.).
4. Establecer el Ancho fronterizo en píxeles.
5. Haga clic en Color de la frontera swatch para elegir un color.
6. Set Radius fronterizo para redondear las esquinas.

Para añadir una sombra:

1. Ampliar el Box Shadow sección.
2. Haga clic en un botón de configuración de sombras (None, SM, MD, LG, XL) para estilos de sombra comunes.
3. O escriba un valor de sombra personalizado en el Custom Shadow campo.

[Screenshot: controles de frontera y sombra]

Cómo Estilo Efectos Hover

Efectos del audífono desencadenan cuando alguien mueve su ratón sobre un elemento (como botones).

1. Seleccione el elemento a el que desea añadir efectos de manguera.
2. Busquen la Selector de Estado barra debajo de la información del elemento.
3. Haga clic en :hover Botón.
4. Las actualizaciones de la pantalla selectora para mostrar que está editando estilos de arrastre.
5. Haga sus cambios - trate de cambiar el color de fondo o agregar una transformación.
6. Mueva el ratón sobre el elemento en la vista previa para ver el efecto del tubo.
7. Haga clic Guardar cambios cuando se hace.

[Screenshot: state-selector-hover]

Cómo estilo para la luz y el modo oscuro

Su sitio puede verse diferente en modo de luz versus modo oscuro.

1. Haga clic Modo de luz en el encabezado para editar estilos de modos de luz.
2. Seleccione elementos y personalizarlos según se desee.
3. Haga clic Guardar cambios para cada elemento.
4. Haga clic Modo oscuro en el encabezado para cambiar a la edición del modo oscuro.
5. La vista previa cambia automáticamente al modo oscuro para que puedas ver lo que estás editando.
6. Seleccione los mismos elementos y personalizarlos para modo oscuro.
7. Guarda tus cambios en el modo oscuro.

Cómo aplicar estilos a páginas específicas

Por defecto, los estilos se aplican a todo su sitio. Pero puedes hacer estilos que sólo aparecen en ciertas páginas.

El Administrador de Estilo detecta automáticamente qué página está viendo:

Para aplicar estilos específicos de página:

1. Utilice la navegación previa para ir a la página que desea personalizar.
2. Haga clic Modo de edición y seleccionar elementos en esa página.
3. Haz que tu estilo cambie.
4. Haga clic Guardar cambios.
5. Estos estilos sólo se aplicarán a esa página específica.

Cómo restablecer estilos

Reset a Single Element:

1. Seleccione el elemento que desea restablecer.
2. Haga clic Reset Element en el fondo del panel izquierdo.
3. Confirmación haciendo clic OK en el popup.
4. Todos los estilos personalizados para ese elemento se eliminan.
5. El elemento vuelve a su aspecto original.

Reiniciar todo:

1. Haga clic Reset All en la cabecera.
2. Lea la advertencia cuidadosamente - esto elimina TODOS sus estilos personalizados.
3. Haga clic OK para confirmar.
4. Todos los estilos personalizados en todo su sitio son eliminados.
5. Su sitio vuelve a la apariencia predeterminada.

Controles de vista previa

Barra de herramientas de navegación

La barra de herramientas en la parte superior de la vista previa le permite navegar y controlar la vista previa:

Vista previa del dispositivo

Prueba cómo tus estilos se ven en diferentes tamaños de pantalla haciendo clic en estos botones en el encabezado de vista previa:

La vista previa se encoge al tamaño seleccionado con un borde de sombra para que pueda ver exactamente cómo los usuarios móviles verán su sitio.

[Screenshot: responsive-preview-modes]

Modo oscuro Toggle

El icono de luna en el encabezado de previsualización mueve la vista previa entre modo ligero y oscuro. Esto está separado de los botones de modo en el encabezado principal:

• Botones de modo de encabezado - Controla qué estilos estás SAVING (luz o oscuridad)
• Previsualizar botón de luna - Controla el modo que estás viendo

Comprender las pestañas de estilo

Cada pestaña del panel izquierdo se centra en diferentes propiedades visuales.

Colores Tab

• Color de texto - El color del texto dentro del elemento
• Antecedentes - Color sólido, gradiente o fondo transparente
• Gradient Builder - Crear mezclas de color suave con múltiples paradas de color

Tipografía Tab

• Font Family - Elija de fuentes web profesionales
• Tamaño de la fuente - Tamaño de texto con unidades flexibles (px, rem, em, %)
• Peso de la fuente - Qué delgado o audaz aparece el texto
• Altura de línea - Espacio entre líneas de texto
• Letter Spacing - Espacio entre letras individuales
• Formato de texto - Alineación, capitalización, sublíneas, etc.

Tab de espaciamiento

• Padding - Espacio dentro del elemento (entre contenido y frontera)
• Margin - Espacio fuera del elemento (entre el elemento y los vecinos)

Borders Tab

• Estilo de frontera - Líneas sólidas, destrozadas, punteadas o decorativas
• Ancho fronterizo - Qué grosero es la frontera.
• Color de la frontera - Color de la línea fronteriza
• Radius fronterizo - Qué redondeadas están las esquinas
• Box Shadow - Dejar sombras para crear profundidad

Traje a Tab

• Visualización - Cómo se comporta el elemento (block, inline, flex, grid, etc.)
• Posición - Cómo se posiciona el elemento (estático, relativo, absoluto, etc.)
• Flexbox - Controles para organizar elementos infantiles en filas o columnas

Efectos Tab

• Opacity - Cuán transparente es el elemento (0% = invisible, 100% = sólido)
• Transformación - Escalar, rotar o mover el elemento
• Filtros - Efectos de coloración, brillo, contraste y escala gris

Tab de tamaño

• Width - Cuán ancho es el elemento
• Altura - Qué alto es el elemento
• Min/Max Width ' Altura - Limitaciones de tamaño
• Objeto Fit - Cómo encajan las imágenes y vídeos dentro de sus contenedores
• Aspect Ratio - Mantener proporciones (cuadra, 16:9, etc.)

Consejos para nuevos usuarios

Solución de problemas

La vista previa no se carga ni muestra una página en blanco

Lo que ves: El panel derecho está vacío, blanco o muestra un error.

Cómo arreglarlo:

1. Haga clic en Refresh botón en la barra de herramientas de vista previa.
2. Comprueba si tu sitio está funcionando abriéndolo en una nueva pestaña del navegador.
3. Si el sitio funciona pero la vista previa no, contacte con su administrador del sitio - esto puede ser un problema de configuración.

No puedo seleccionar elementos cuando los haga clic

Lo que ves: Hacer clic en elementos en la vista previa no hace nada.

Cómo arreglarlo:

1. Asegúrese de que Modo de edición botón (ícono del cursor) se destaca en verde.
2. Pruebe refrescar la vista previa utilizando el botón de actualización.
3. Algunos elementos muy pequeños (smaller que 5x5 píxeles) no se pueden seleccionar - intentar hacer clic en elementos cercanos.

Mis cambios no aparecen en el sitio en vivo

Lo que ves: Los cambios muestran en la vista previa pero no en el sitio real.

Cómo arreglarlo:

1. Asegúrate de hacer clic Guardar cambios en la parte inferior del panel izquierdo (no sólo Guardar todo).
2. Limpiar el caché del navegador y refrescar el sitio en vivo.
3. Si está viendo el sitio en un modo diferente (ligero vs oscuro), cambie los modos para ver si sus cambios se aplican allí.

Los efectos de la fiebre no funcionan

Lo que ves: Estudiaste el estado :hover pero no pasa nada cuando te mueves.

Cómo arreglarlo:

1. Asegúrese de hacer clic en el :hover botón en el Selector Estatal antes de hacer cambios.
2. Los efectos de la máquina solo funcionan con un ratón - los usuarios móviles no los verán.
3. Revise si sus estilos originales del sitio tienen efectos contradictorios que anulan los suyos.

Los colores se ven mal o no coinciden con lo que elegí

Lo que ves: El selector de color muestra un color pero el elemento muestra otro.

Cómo arreglarlo:

1. Haga clic nuevamente en el elemento para reelegirlo y refrescar los valores de color actuales.
2. Asegúrese de que está editando la propiedad correcta - Color de texto está separado de Antecedentes.
3. Guardar y refrescar la vista previa para ver el resultado final.

No puedo guardar mis cambios (el botón Guardar está apagado)

Lo que ves: Los botones Guardar todo y Reiniciar Todos los botones están desactivados y se engrasan.

Cómo arreglarlo:
Un banner naranja en la parte superior de la página indica que el modo de demostración está habilitado. El modo Demo evita cambios de ahorro. Si necesita guardar cambios, comuníquese con su administrador del sitio para desactivar el modo demo.

Mi gradiente no aparece

Lo que ves: Usted creó un gradiente pero el elemento todavía muestra un color sólido.

Cómo arreglarlo:

1. Asegúrese de hacer clic en el Gradiente botón (no sólido) en la sección de fondo.
2. Compruebe que tiene al menos 2 paradas de color con diferentes colores.
3. Guarda tus cambios y refresca la vista previa.

Páginas relacionadas

Esta guía es para los propietarios y operadores del sitio ComusThumbz. Se centra en el uso de la interfaz Style Manager para personalizar la apariencia de su sitio sin codificación.