Trabajar con preajustes de estilo

En este artículo se describe cómo trabajar con valores preestablecidos de estilo de sitio en Microsoft Dynamics 365 Commerce generador de sitios.

Un estilo preestablecido es un conjunto almacenado de todos los valores de estilo autorizables en el tema de un sitio. Use un valor preestablecido de estilo para cambiar inmediatamente el aspecto de un sitio desde el generador de sitios. Los preajustes de estilo permiten a los creadores de sitios web de Commerce cambiar, previsualizar y activar rápidamente un conjunto de valores de estilo en su sitio, sin tener que usar Hojas de estilo en cascada (CSS) ni desplegar temas. Los estilos de fuente, los estilos de botón y los colores del sitio son ejemplos típicos de variables de estilo que puede administrar a través de valores preestablecidos de estilo.

La biblioteca de temas y módulos que se implementa en el inquilino de un sitio determinan el conjunto de variables de estilo que están disponibles en un sitio. El Dynamics 365 Commerce kit de desarrollo de software en línea (SDK) permite a los desarrolladores implementar tantas variables de estilo autor (o tan pocas) como necesiten para un tema determinado. Al habilitar más variables de estilo, un desarrollador de temas puede poner las decisiones finales sobre los estilos de sitio en manos de los autores del creador de sitios. Por lo tanto, los no desarrolladores pueden actualizar y obtener una vista previa de los estilos de sitio mediante el conjunto de herramientas. La funcionalidad también es útil para cualquier escenario en el que los cambios directos en temas o CSS provocarían una sobrecarga innecesaria.

Los temas en los que se habilitan las variables de estilo autorizables requieren un estilo predeterminado. Opcionalmente, pueden incluir más opciones preestablecidas como parte de un paquete de temas implementado. Por ejemplo, se puede implementar un tema que tenga un solo valor predeterminado de estilo "luz moderna". Como alternativa, puede incluir más opciones preestablecidas de estilo además del valor preestablecido predeterminado, como "oscuro moderno", "luz vintage" o "oscuro vintage". Los desarrolladores crean estos valores preestablecidos de temas integrados y los autores pueden usarlos como puntos de partida para los nuevos diseños de sitio.

En el creador de sitios, los autores pueden seleccionar entre los ajustes preestablecidos integrados de un tema, o pueden crear sus propios ajustes preestablecidos de estilo y personalizaciones utilizando las variables de estilo habilitadas. Los autores pueden obtener una vista previa de un valor preestablecido de estilo en el generador de sitios antes de activarlo en el sitio activo. Una vez revisados los cambios de estilo de un autor, establezca el valor preestablecido de estilo en "activo" para el sitio activo.

Vista previa de un estilo preestablecido

Para obtener una vista previa de un valor preestablecido de estilo en el sitio en el generador de sitios, siga estos pasos:

1. En el panel de navegación izquierdo de su sitio, vaya a Configuraciones del sitio > Diseño.

2. En la pestaña Ajustes predeterminados de estilo de la parte superior del editor de diseño, en la lista Ajustes predeterminados disponibles, seleccione un preajuste y luego seleccione Ver para ir al editor preestablecido.

   Si la lista Valores preestablecidos disponibles está vacía, vea Crear un valor preestablecido de estilo personalizado para obtener información sobre cómo crear un valor preestablecido de estilo personalizado.

   Nota

   Los valores preestablecidos que incluye el tema se indican mediante una etiqueta Integrado. Estos preajustes integrados son de solo lectura. Para copiar un preajuste incorporado como un nuevo preset personalizable, seleccione el botón de puntos suspensivos (...) para el preajuste y luego seleccione Guardar como.

3. En la barra de comandos, seleccione Vista previa.

4. Seleccione una URL de su sitio para usarla para obtener una vista previa del estilo preestablecido y luego seleccione Aceptar.

5. Seleccione la variante de URL específica del canal y del ambiente local para obtener una vista previa seleccionando el nombre de la variante. Se abre una nueva ventana del explorador de vista previa, donde se aplica el valor preestablecido de estilo seleccionado a la página especificada.

Crear un estilo preestablecido personalizado

Para crear un valor preestablecido de estilo personalizado en el generador de sitios, siga estos pasos:

1. En el panel de navegación izquierdo de su sitio, vaya a Configuraciones del sitio > Diseño.
2. En la pestaña Preajustes de estilo de la parte superior del editor de diseño, en la barra de comandos, seleccione Nuevo preajuste.
3. Introduzca un nombre y una descripción para el nuevo preajuste y luego seleccione Guardar. Crea un nuevo valor preestablecido personalizable que usa los valores predeterminados del tema como punto de partida.

Modificar valores de estilo de tipo global y de módulo

Algunas de las variables de estilo de un tema se comparten entre varios tipos de módulos. Estas variables de estilo son variables de estilo global . Como ejemplos pueden citarse colores primarios del sitio, estilos de fuente predeterminados y estilos de botones. Al establecer variables globales, puede cambiar la apariencia en muchos tipos de módulos diferentes.

Algunos valores de estilo pueden ser únicos para un tipo de módulo, o pueden invalidar opcionalmente un valor global predeterminado. Si el tema de un sitio implementa variables de estilo de tipo de módulo, los autores del generador de sitios pueden personalizar el estilo de un tipo de módulo independientemente de la configuración global. Las variables de tipo módulo pueden aumentar o anular las variables de estilo global en un tema.

Para cambiar los valores de tipo global o de módulo de un valor preestablecido de estilo en el generador de sitios, siga estos pasos:

1. En el panel de navegación izquierdo de su sitio, vaya a Configuraciones del sitio > Diseño.
2. En le pestaña Preajustes de estilo de la parte superior del editor de diseño, seleccione Ver para que cualquier estilo preestablecido vaya al editor de preajustes.
3. Seleccione Vista previa y luego siga los pasos de selección de URL para abrir una vista previa de la ventana completa del navegador para su preajuste. Deje abierta esta ventana del navegador de vista previa.
4. En el editor preestablecido, seleccione Editar en la esquina superior derecha.
5. Use los controles de variables de estilo en el editor para cambiar algunos valores de estilo globales.
6. En la parte superior del editor, en la pestaña Módulos a la derecha de la pestaña Global , seleccione un tipo de módulo al que desea aplicar estilo.
7. Use los controles de estilo para cambiar algunos valores para el tipo de módulo.
8. Cuando esté listo para previsualizar sus cambios, seleccione Guardar en la barra de comandos.
9. Vuelva a la ventana abierta del navegador de vista previa y actualícela. La vista previa de la ventana completa del navegador es útil para verificar los cambios de estilo en diferentes puntos de vista, en diferentes navegadores y en diferentes plataformas de dispositivos.
10. Cuando se completen y validen todos los cambios, seleccione Finalizar edición en la esquina superior derecha del editor.

Active un nuevo estilo preestablecido en su sitio en vivo

Para establecer un valor preestablecido de estilo como valor preestablecido activo en el sitio, siga estos pasos:

• Seleccione Establecer como botón activo en uno de estos lugares:

  • La barra de comandos del editor de estilos preestablecidos
  • El menú de puntos suspensivos (...) para cualquier preajuste disponible en la vista principal de la pestaña Preajustes de estilo en Configuraciones del sitio > Diseño

Los valores de estilo del ajuste preestablecido están activos en tu sitio web público.

Recursos adicionales

Agregar un logotipo

Seleccionar un tema de sitio

Trabajar con archivos de anulaciones de CSS

Agregar un icono de favoritos

Agregar un aviso de derechos de autor

Agregar idiomas al sitio

Agregar secuencia de comandos a páginas del sitio para admitir telemetría