Diseños de apariencia de edificios
Contenidos de la página
Acerca de los diseños de apariencia de edificios
Consejo Q: Las secciones de esta página describen cómo editar un diseño de superposición dentro de Appearance Studio. Para obtener información sobre cómo editar un diseño incrustado, consulte Creativos integrados.
Esta página explica cómo crear un diseño de apariencia para una intercept digital . Un diseño se compone de múltiples elementos. Cada elemento individual es un componente diferente de su intercept digital . Esto incluye cuadros de texto, gráficos, encuestas integradas y mucho más.
Construirás el diseño de tu apariencia en el Construir pestaña de Estudio de Apariencia.
Los siguientes elementos están disponibles para personalizar su diseño:
- Texto: Añadir un cuadro de texto.
- Gráfico: Añade un gráfico.
- Botón: Añade un botón para que los visitantes hagan clic y que inicie una encuesta o abra un enlace externo.
- Conexión integrada: Incruste una encuesta o un agente directamente en la intercept.
- Botón de Opinión: Añadir un botón de opinión para que los usuarios hagan clic y abran la intercept.
- FilaAgrupa los elementos en filas para que aparezcan horizontalmente en lugar de verticalmente.
- espaciador: Añade espacio vacío entre los demás elementos.
Deshacer ediciones y guardar cambios
Appearance Studio es un editor flexible que te permite controlar cómo guardar y revertir los cambios en el diseño de tu apariencia. Mientras editas tu diseño, puedes usar el Deshacer y Rehacer botones para revertir y restaurar acciones según sea necesario (por ejemplo, si eliminó accidentalmente un elemento de cuadro de texto).
Sus ediciones no se finalizarán hasta que haga clic en el botón Guardar apariencia botón en la parte inferior del editor.
AtenciónUna vez guardado, ya no podrá deshacer ni rehacer las acciones realizadas antes de guardar. Tenga en cuenta que no puede revertir tu diseño a una versión guardada previamente.
Tras guardar la apariencia, puedes probar el nuevo aspecto en tu sitio web y, a continuación, publicar los cambios en la intercept en vivo. Esto funciona igual que publicar cualquier cambio en una intercept en vivo. Consulte las siguientes páginas para obtener más información:
Traslado de elementos
Los elementos aparecerán en una lista vertical en el Estudio de Apariencia. El orden en que aparecen los elementos en esta lista determina el orden en que aparecen en su diseño. El elemento superior estará situado más a la izquierda, mientras que el elemento inferior estará más a la derecha, y todo lo demás aparecerá en una posición intermedia.
La forma más sencilla de reorganizar los elementos es hacer clic sobre ellos con el ratón y arrastrarlos a una nueva posición en la lista.
Sin embargo, puede gestionar un elemento individual colocando el ratón sobre él y eligiendo una opción:
- Copiar: Crea una duplicar del elemento.
- Borrar: Elimina el elemento.
- Muévase a la parte superior de la estructura.: Mueve el elemento a la parte superior de la lista de elementos.
- Mover elemento hacia arriba: Mueve el elemento 1 posición hacia arriba en la lista de elementos.
- Mover el elemento hacia abajo: Mueve el elemento 1 posición hacia abajo en la lista de elementos.
- Muévase a la parte inferior de la estructura.: Mueve el elemento al final de la lista de elementos.
Configuración del contenedor de Intercept
El contenedor alberga todos los elementos de tu intercept y determina cómo aparecen en tu sitio web. Todos los elementos estarán anidados dentro del contenedor.
Consejo QUn único contenedor admite hasta 15 elementos. El botón de Opinión está excluido de este límite.
Haz clic en un contenedor para abrir su configuración. Luego puedes personalizar lo siguiente:
Descartar Intercept ajustes:
- Permitir Incluir un icono para descartar Si desea incluir una 'X' para descartar su intercept. Tenga en cuenta que no es necesario incluir una "X". Puedes agregar un botón que descarta la intercept en su lugar.
- Establecer el Color del icono.
- Determinar el vertical y desplazamiento horizontal, en píxeles.
El Disposición Los ajustes controlan lo siguiente:
- Tipo de pantalla: Determina la ubicación diseño . Elige entre Superposición (flota sobre el contenido del sitio) o Integración (se incrusta en la página, desplazando el contenido hacia arriba o hacia abajo).
- Ancho (px): Controla el ancho máximo de la apariencia, en píxeles. También puedes alternar Ancho completo, de modo que el contenedor siempre ocupe todo el ancho de su página web.
- Espaciado entre elementos (px): Define el espacio vertical predeterminado entre los elementos apilados dentro del contenedor.
- Relleno (px): Controla el tamaño del margen dentro del borde del contenedor, empujando todos los elementos internos hacia adentro. Seleccione "Usar relleno igual" para aplicar el mismo valor a los cuatro lados, o desactívela para configurar el relleno superior, inferior, izquierdo y derecho individualmente.
Si su tipo de visualización está configurado en Superposición, entonces elija la Posición del contenedor en la página web configurando las alineaciones horizontal y vertical, y seleccionando si desea incluir un margen.
Bajo EstiloPersonaliza la apariencia del contenedor:
- color de fondo: Elija un color o introduzca el valor HEX o RGBA. También puedes seleccionar la opción transparente utilizando la opción "Sin color".
- Borde: Define el ancho del borde (px) y el color del borde.
- Esquina redondeada (px): Aumenta la curva de las esquinas exteriores de la intersección. Seleccione "Usar esquinas redondeadas personalizadas" para definir diferentes curvas para la parte superior, inferior, izquierda y derecha, o seleccione "Usar esquinas redondeadas iguales" para aplicar la misma configuración a cada esquina.
- Sombra paralela: Aplica una sombra detrás del marco de intercept . Elige entre Ninguno, Ligero, Medio o Intenso.
Consejo Q: Permitir Mostrar pautas de espaciado Para mostrar el espaciado y el relleno del elemento seleccionado, resaltado en rosa. Puede ver las directrices de espaciado a nivel de contenedor, a nivel de fila y a nivel de elemento individual. Las pautas de espaciado pueden ayudarte a visualizar cómo se distribuyen los elementos entre sí.
Formato de texto
Puedes personalizar el texto en tu diseño. Esto incluye elementos de texto y otros elementos que contienen componentes de texto, como botones y botones de opinión .
Esta sección explicará cómo agregar un elemento de texto, pero los principios generales de edición de texto aplicar a cualquier lugar donde se pueda editar texto en Appearance Studio.
Hacer clic Agregar al contenedor.
Seleccionar Texto.
Escribe tu texto en el cuadro de texto. Resaltado el texto al que desee aplicar formato.
Utilice la barra de herramientas para ajustar el formato del texto:
- Familia tipográfica: La tipografía utilizada. Seleccione "Predeterminado del sistema" para heredar automáticamente la fuente del sitio web donde se implementa la intercept .
- Tamaño de fuente: El tamaño del texto en píxeles. El valor predeterminado es 12.
- Formato de textoLas opciones incluyen negrita, cursiva, subrayado, color del texto y color de Resaltado .
- Alineación: Alinea el texto a la izquierda, al centro o a la derecha de su bloque contenedor.
- Hiperenlace: Enlace a una URL externa o inicie su encuesta conectada.
- Formato de tira: Elimina el formato del texto seleccionado y restablece la configuración predeterminada.
Puedes ajustar el tamaño del cuadro de texto en Disposición con la siguiente configuración:
- Ancho: Ajusta el ancho de la caja.
- Porcentaje (%): Ajusta el tamaño del cuadro de texto en relación con su contenedor.
- Fijo (px): Ancho fijo en píxeles del cuadro de texto.
- Relleno (px): Ajusta el relleno para añadir espacio dentro del fondo del bloque de texto. Puedes usar un relleno igual o personalizado para los lados superior, inferior, izquierdo y derecho.
Si el cuadro de texto es menor al 100% del ancho del contenedor, puede configurar su Posición eligiendo una alineación izquierda, central o derecha.
El Estilo La configuración le permite personalizar lo siguiente:
- Fondo y borde: Aplicar un color de fondo, un ancho de borde y un color de borde específicos.
- Esquinas redondeadas: Ajusta el redondeo de las esquinas del cuadro de texto, independientemente del contenedor de apariencia general. Puedes usar esquinas redondeadas iguales o personalizadas para las 4 esquinas.
Agregar gráficos
Puedes insertar imágenes en el diseño de tu apariencia usando el Gráfico elemento.
Consejo QLos tipos de archivo compatibles son JPEG, PNG y GIF. El tamaño máximo de archivo es de 25 MB.
Click Add to container.
Seleccionar Gráfico.
Hacer clic Elige el gráfico y selecciona cualquier imagen a la que tengas acceso.
Consejo Q: Para agregar un nuevo gráfico, seleccione Ir a la biblioteca y luego sube el gráfico a tu biblioteca.
Configure el tamaño de la imagen en la sección Disposición sección:
- Ancho: Seleccionar Fijo (px) para establecer la imagen a un ancho de píxeles específico. Seleccionar Porcentaje (%) para escalar la imagen en relación con su contenedor.
- Relleno (px): Ajusta el relleno para crear un marco alrededor de la imagen. Puedes aplicar el mismo relleno a cada lado de la imagen o hacer clic en "Usar relleno personalizado" para establecer un ancho de relleno independiente para cada lado.
Si la Imagen es menor al 100% del ancho del contenedor, puede configurar su posición en el Posición sección. Establezca la alineación de la imagen en Izquierda, Centro o Derecha.
El Estilo Esta sección te permite configurar un borde y una sombra paralela:
- Borde, color del borde y esquinas redondeadas: Añade un borde de color al gráfico y ajusta el radio de las esquinas para crear imágenes redondeadas o circulares.
- Sombra paralelaAplica un efecto de sombra. Las opciones incluyen Ninguna, Ligera, Media o Intensa.
Elementos de botón
Botones impulsar la actividad de los visitantes. Puedes añadir un botón a tu diseño de apariencia y definir qué sucede cuando se hace clic en él, personalizando su aspecto en diferentes estados interactivos.
Click Add to container.
Seleccionar Botón.
Personaliza el texto de tu botón. Utilice la barra de herramientas superior para configurar la fuente, el tamaño y añadir formato adicional, como un icono. Ver Personalización de texto Para obtener más información.
Consejo QSeleccione “Predeterminado del sistema” para heredar automáticamente la fuente del sitio web donde se implementa la intercept . Para accesibilidad, el texto y el icono del botón deben compartir el mismo color, por lo que no es posible aplicar formato de color por palabra o por letra en los botones.
Elige el Tipo de botón y configure las opciones adicionales:
- Iniciar conexión: Abre una conexión vinculada de Qualtrics establecida en la intercept configuración de conexión. Puedes optar por abrir la conexión en una pestaña nueva, una ventana nueva, la ventana actual o en una nueva superposición.
Consejo Q: Está limitado a 1 conexión por intercept. Esto significa que, si bien puedes agregar tantos botones de conexión como desees, esos botones solo pueden enlazar con un único destino de conexión. Esta es la misma conexión a la que hace referencia el elemento Embed Connection.
- Enlace externo: Redirige al usuario a una URL específica. Introduzca la URL completa de la página. Puedes optar por abrir la URL en una pestaña nueva, una ventana nueva o la ventana actual.
- Despedir: Cierra la intercept.
Configurar el Disposición para el botón:
- Ajustar el Ancho del botón. Elegir Ancho (%) para ajustar el ancho del botón en relación con su contenedor. Elegir Utilice ancho fijo (px) para fijar el botón a un ancho de píxeles específico.
- Cambiar el Relleno (px), que controla el espacio entre el texto del botón y el borde. Hacer clic Utilice el relleno personalizado para ajustar el espacio a cada lado del botón de forma individual.
Si el botón es menor al 100% del ancho del contenedor, puede configurar su Posición. Seleccione un Alineación desde la izquierda, el centro o la derecha.
Puedes personalizar el aspecto de cada uno. Estado del botón individualmente:
- Por defecto: Así se ve el botón antes de que el usuario interactúe con él.
- Flotar: Cómo se ve el botón cuando el usuario coloca el cursor sobre él.
- Activo: Cómo se ve el botón al hacer clic.
Establece la apariencia de tu botón para el estado seleccionado.
- Bandera: Define el color de fondo, el color del texto y el color del icono (si se utiliza un icono).
- Borde y esquinas: Establezca el ancho del borde, el color del borde y el radio de las esquinas redondeadas (px) (por ejemplo, establezca un radio de esquina grande para crear botones con forma de píldora).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Consejo QPuedes configurar el color de fondo, el color del texto y el borde para cada estado de forma independiente. Para ahorrar tiempo con una experiencia consistente en todos los estados, configure el estado predeterminado y luego haga clic en la opción para Aplicar estilo a todos los estados de los botones.
Consejo QPuedes reemplazar el texto del botón con un gráfico haciendo clic aquí. Usa mi propio botón y luego elegir una imagen de su biblioteca de gráficos.
Conexión integrada
El El elemento de conexión incrustado le permite incrustar un encuesta, agenteo un sitio externo dentro de tu diseño. Este elemento se puede colocar, redimensionar y mover en tu diseño como cualquier otro elemento.
Consejo Q: ¿Quieres insertar una encuesta vinculada a un botón (un botón de opinión o un slider)? Utilice el Botón de Opinión elemento en su lugar.
Primero, deberá agregar una conexión a su diseño. En el Configuración de intercept guiada, haga clic Agregar conexión y seleccione el recurso que desea visualizar.
A continuación, sigue estas instrucciones para añadir el elemento a tu diseño:
Click Add to container.
Seleccionar Conexión integrada.
Cierre automático tras la finalización de la encuesta : Cuando está habilitada, la intercept intentará cerrarse automáticamente una vez que el usuario llegue al mensaje de fin de la encuesta.
El Comportamiento Esta sección muestra lo que se exhibirá a los visitantes. Hacer clic Ver encuesta Para ver la encuesta en el editor de encuesta .
Disposición: Ajusta cómo quieres que el elemento se adapte al diseño:
- Ancho: Elija entre Relleno, Fijo (px) o Porcentaje (%).
- Llenar: Rellena completamente el espacio en el que se encuentra la encuesta . Si está en una fila, ocupa todo el ancho disponible en esa fila. Si la conexión no está en una fila, ocupa el 100% del ancho establecido para la apariencia (ya sea que la apariencia esté configurada a ancho completo, 500px, etc.).
- Fijado (px): Establece la conexión a un ancho de píxeles específico. Solo se puede establecer un ancho en píxeles menor que el ancho de apariencia o menor que el ancho de la columna en la que se coloca la conexión.
- Por ciento (%): Establece el ancho de la conexión en relación con su contenedor (1–100%). Si se encuentra en una fila, este valor representa un porcentaje del ancho de columna disponible en esa fila. Si no está en una fila, es un porcentaje del ancho de apariencia disponible.
Consejo QComience con "Rellenar" a menos que necesite una personalización más detallada del tamaño y el espaciado en función de otras restricciones de diseño.
- Altura: Elija entre Automático o Altura (px):
- Auto: Establece el tamaño de la conexión en función de la configuración de la encuesta (por ejemplo, una encuesta de una pregunta produce una altura automática menor que una encuesta de 3 a 4 preguntas). La función de ajuste automático de altura intenta mostrar todas las preguntas y el botón "Siguiente". Si la altura de la encuesta supera la altura de la página web, la encuesta se reducirá al tamaño de la página web.
- Altura (px): Establezca manualmente una altura de píxeles específica para la conexión, pero tenga en cuenta la altura de su encuesta . Si su encuesta supera la altura establecida, se añadirá una barra de desplazamiento. Si su encuesta es más corta que la altura establecida, se añadirá espacio en blanco adicional.
Posición: Elija la alineación para el elemento (izquierda, centro o derecha). Si la conexión incrustada es menor al 100 % del ancho (sin usar Fill, y menor al 100 % cuando se usa %), puede configurar su alineación.
Estilo: Añade un borde de color al elemento.
Optimización para Encuestas integradas
Las Encuestas añadidas a tu diseño de apariencia también tienen su propia edición, colores y configuración. dentro del editor de encuesta. Esto te permite crear encuestas sólidas y altamente personalizadas, pero debes care de mantener la coherencia entre tu imagen y tu encuesta. Aquí tienes algunos consejos y trucos a seguir:
- Añade tu logotipo en un solo lugar. Si su encuesta tiene un logotipo, probablemente no necesite uno en su imagen corporativa, y viceversa.
- Utilice el mismo código hexadecimal principal de su encuesta en la apariencia del texto, botones, contornos, etc.
- Para que una encuesta sea más compacta en un sitio web o en un dispositivo móvil, prueba estas configuraciones de tema :
- espaciado entre preguntas configurado en “Compacto”.
- Ancho del texto a mostrar configurado en “Ancho completo”.
- Puedes añadir CSS personalizado a su encuesta para personalizar aún más su apariencia.
Atención:Las funciones de codificación personalizadas se proporcionan tal como están y requieren conocimientos de programación para implementarlas. El soporte técnico de Qualtrics no ofrece asistencia o consultoría sobre codificación personalizada. Siempre puedes intentar preguntar a nuestros en lugar de una comunidad de usuarios dedicados. Si desea obtener más información sobre nuestros servicios de codificación personalizada, póngase en contacto con su Ejecutivo de Cuenta de Qualtrics.
EjemploEste CSS puede reducir el espacio entre las preguntas y el botón “Siguiente”:
#navigación { relleno inferior: 0rem; relleno superior: 1rem; }Este CSS puede eliminar el contenedor del encabezado (oculta todo lo que esté configurado en el encabezado del tema ):
#header-container { display: none !important; }
Consejo Q: Puede presentar una encuesta de tres maneras: incrustarla directamente en la apariencia usando el elemento Embed Connection, vincularla como Launch Connection a través de un botón o agregarla como una URL externa (con el enlace anónimo). Configurar la encuesta como una conexión integrada es la mejor práctica, ya que es más fácil editarla, cambiarla y administrarla desde la tarjeta de conexión predefinida.
Botón de opinión
El Botón de Opinión es un elemento especial que puedes añadir a tu apariencia. Agrega un botón al costado de tu diseño que los usuarios pueden pulsar para abrir la intercept.
AtenciónAgregar un botón de opinión a su diseño eliminará cualquier contenido existente.
Click Add to container.
Seleccionar Botón de Opinión.
Customize the text for your button. Use the toolbar at the top to set the font, size, and add additional formatting like an icon. See Customizing Text for more information.
Qtip: Select “System Default” to automatically inherit the font of the website where the intercept is deployed. For accessibility, the button text and icon must share the same color, so per-word or per-letter color formatting isn't available on buttons.
Se añadirá automáticamente una conexión externa al botón de opinión . Aquí puedes revisar lo que está conectado. Si no desea establecer una conexión, puede eliminar el elemento de conexión Embed.
Qtip: You are limited to 1 connection per intercept. This means that while you can add as many connection buttons as you like, those buttons can only link to the single connection destination. This is the same connection referenced by the Embed Connection element.
Configurar el Disposición para el botón:
- Adjust the Width of the button. Elegir Ancho (%) para ajustar el ancho del botón en relación con el tamaño total de la página. Elegir Utilice ancho fijo (px) para fijar el botón a un ancho de píxeles específico.
Consejo QRecomendamos un ancho de entre el 15 y el 30%.
- Change the Padding (px), which controls the space between the button text and border. Hacer clic Utilice relleno personalizado para ajustar el espaciado a cada lado del botón individualmente.
Configurar el botón Posición que determina dónde aparecen el botón y la intercept en su sitio:
- Colocación: Elija si el botón está a la derecha, a la izquierda o en la parte superior de la intercept. Esto afectará la ubicación del intercept en la página (por ejemplo, si el botón está en la parte superior y centrado, el intercept aparecerá en la parte inferior de la página).
- Alineación: Elija entre izquierda, centro y derecha, o una alineación personalizada.
Puedes personalizar el aspecto de cada uno Estado del botón individualmente:
- Default: How the button looks before the user interacts with it.
- Hover: How the button looks when the user hovers their cursor over it.
- Active: How the button looks when clicked.
Configura la apariencia de tu botón para el estado seleccionado:
- Colors: Define the Background color, Text color, and Icon color (if an icon is used).
- Border & Corners: Set the Border width, Border color, and Rounded corner (px) radius (e.g., set a high corner radius to create pill-shaped buttons).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qtip: You can set the Background color, Text color, and Border for each state independently. Para ahorrar tiempo con una experiencia consistente en todos los estados, configure el estado predeterminado y luego haga clic en la opción para Aplicar estilo a todos los estados de los botones.
Haz clic en el Recipiente y elige un Método de visualización para el botón:
- Slider: El contenedor está conectado al botón. Cuando los usuarios hacen clic en el botón, el contenedor se desliza hacia afuera, debajo o al siguiente del mismo.
- Cubrir: El contenedor no está conectado al botón. Cuando los usuarios hacen clic en el botón, aparece una ventana superpuesta en el centro de la página. La función Overlay también permite elegir un fondo difuminado detrás de la ventana de superposición.
- Nueva ventana: Abre el contenedor en una nueva ventana del navegador.
Consejo Q: Debido a que se trata de una nueva ventana del navegador, solo se puede colocar una conexión incrustada en el contenedor. Otros elementos (texto, gráfico, botón, fila, espaciador) no son compatibles con las nuevas ventanas. Los controles de diseño, altura y estilo tampoco están disponibles, ya que la ventana del navegador los controla.
Si se muestra el contenedor como un slider o superposición, puede personalizarlo. Disposición y Estilo:
- Ancho y alto: Elija el ancho del contenedor como un porcentaje de la página o un ancho fijo en píxeles, y elija una altura fija en píxeles o basada en porcentaje.
- Relleno / Espaciado entre elementos: Igual que los controles de contenedor estándar.
- Relleno (px): Controla el espaciado del margen dentro del borde del contenedor, empujando los elementos internos hacia adentro.
Consejo QHaga clic en "Usar relleno igual" para aplicar el mismo valor a los cuatro lados, o puede configurar Superior, Inferior, Izquierda y Derecha individualmente.
- Element spacing (px): Defines the default vertical gap between elements stacked within the container.
- Colores, fondo, redondeo de esquinas y sombra paralela: Igual que los controles de contenedor estándar.
Puedes añadir elementos adicionales a tu botón de opinión (por ejemplo, añadir texto para incluir una política de privacidad).
Versión móvil
Puedes personalizar individualmente la ubicación y la alineación del botón de opinión para dispositivos móviles:
Habilitar el Vista móvil.
Hacer clic Opinión botón Para editar la siguiente configuración:
- Colocación: Elige dónde aparece el botón de opinión en el elemento.
- Alineación: Elige dónde aparece el botón de opinión en la pantalla.
- Ocultar elemento en dispositivos móvilesHabilita esta opción para ocultar completamente el botón de opinión en dispositivos móviles.
Hacer clic Recipiente editar el Método de visualización que determina cómo aparece el botón de opinión en dispositivos móviles:
- Dominadas: El contenedor se desliza hacia arriba desde la parte inferior de la pantalla. Elige el porcentaje de la pantalla del móvil que debe ocupar el menú desplegable.
- Nueva pestañaAl pulsar el botón de opinión , el contenido del contenedor se abre en una nueva pestaña del navegador en lugar de como un slider o una superposición.
Consejo Q: Ver Ocultar elementos para dispositivos móviles para obtener información sobre cómo ocultar elementos individuales en dispositivos móviles (por ejemplo, un gráfico).
Filas
Por defecto, Appearance Studio apila los elementos verticalmente dentro de tu diseño. Sin embargo, puede reorganizar los elementos horizontalmente agrupándolos dentro de un Fila. Puedes pensar en la fila como un subcontenedor debajo del cual colocas los elementos para disponerlos horizontalmente.
Consejo Q: Si los elementos se colocan en una fila, el elemento en sí no tendrá capacidad de tamaño en la sección Diseño. En cambio, el tamaño de un elemento en una fila se establece a nivel de fila.
Para agregar elementos en una fila:
Click Add to container.
Seleccionar Fila.
Para agregar un nuevo elemento a la fila, haga clic Agregar a la fila. Puedes añadir Texto, Gráfico, Botón, y espaciador elementos dentro de una fila. Consulte la sección enlazada para obtener más información sobre cómo personalizar estos elementos.
Puedes mover los elementos existentes arrastrándolos y soltándolos dentro del contenedor de la fila.
Consejo Q: Puede tener hasta 5 elementos dentro de una fila. Los elementos aparecerán de izquierda a derecha en el diseño , en el mismo orden en que aparecen listados en el editor.
Haz clic en la fila para abrir un panel lateral que te permitirá personalizar su apariencia. Las siguientes opciones están disponibles para gestionar la fila:
- Fila desagrupada: Desagrupe los elementos y elimine el elemento de la fila.
- Copiar: Crea una copia de la fila y de todos los elementos que contiene. Esta opción es perfecta para crear una cuadrícula uniforme de elementos.
- BorrarElimina la fila y todos los elementos que contiene.
AtenciónAl eliminar una fila, se borra todo el contenido que contiene. Si es necesario, puede deshacer los cambios inmediatamente.
El Disposición Las opciones incluyen las siguientes configuraciones para personalizar la disposición de los elementos dentro de la fila:
- Ancho: Ajusta el ancho total de la fila:
- Fijo (px): Establezca un ancho específico en píxeles para la fila.
- Porcentaje (%): Escalar la fila en relación con el contenedor diseño .
- Ancho del elemento: Ajusta el ancho de los elementos individuales en la fila:
- Ancho igual: El ancho de la fila se dividirá equitativamente entre los elementos.
- Costumbre: Establezca porcentajes de ancho personalizados para cada elemento. El porcentaje total no puede exceder el 100%, pero puede ser inferior al 100%. Si el porcentaje es inferior al 100%, Qualtrics lo ajustará y añadirá espacio entre los elementos cuando sea necesario.
- Espaciado: Ajusta el espaciado de los elementos dentro de la fila:
- Espaciado entre elementos (px): Controla directamente el espacio horizontal entre los elementos situados uno al lado del otro. Aumente este valor si los elementos parecen estar demasiado juntos.
- Relleno (px): Agrega espacio dentro de la fila, empujando todos los elementos internos lejos del límite exterior de la fila.
Seleccione el Alineación de elementos, que determina cómo se alinea verticalmente cada elemento dentro de la fila. Puedes elegir entre Arriba, Medio o Abajo.
Consejo Q: El posicionamiento vertical solo afecta a los elementos que son más cortos que la altura total de la fila. Un elemento con una altura del 100% llena la fila y no se ve afectado.
Configure la apariencia de su fila con el Estilo opciones:
- Defina el color de fondo.
- Bordes y esquinas: Establezca el ancho del borde, el color del borde y el radio de las esquinas redondeadas (px) (por ejemplo, establezca un radio de esquina grande para crear una fila en forma de píldora).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Consejo QLos colores y las ediciones en las filas anulan los colores establecidos en el contenedor. Si desea que la fila sea transparente y herede el color del contenedor, configure la fila como 'Sin color'.
Consejo QLas filas y su estilo se pueden usar para crear diferentes cuadros y secciones dentro del diseño de apariencia. Por ejemplo, si quisieras que tu apariencia fuera mitad blanca y mitad azul, puedes agregar 2 filas y establecer sus respectivos colores.
espaciadores
espaciador Los elementos añaden espacios verticales precisos entre otros elementos. Añádelos a una fila para crear un espacio horizontal entre los elementos de la misma fila.
Hacer clic Agregar al contenedor.
Seleccionar espaciador.
Ajustar el Altura (px) del espaciador, en píxeles. El valor predeterminado es 50 píxeles.
Consejo Q: Si el espaciador está en una fila, entonces esto se controla mediante la configuración de la fila.
Personalización de experiencias para dispositivos móviles
Puedes personalizar la experiencia para dispositivos móviles ocultando elementos específicos solo en móviles.
Permitir Vista móvil.
- Haga clic en la opción para Ocultar elemento en dispositivos móviles.
Consejo QLa vista móvil muestra una vista previa adaptable de tu diseño , además de un conjunto específico de controles exclusivos para móviles (ocultar elementos y la ubicación, alineación y visualización del botón de Opinión ). Todas las demás modificaciones de diseño y estilo deben realizarse en la vista previa de escritorio.
Plantillas de diseño
Tienes a tu disposición una variedad de plantillas de diseño para ayudarte a jumpstart a crear tus diseños. Puedes optar por comenzar con una plantilla o cambiar a otra más adelante.
Para cambiar el diseño, haga clic en el menú de tres puntos que siguiente al botón "Agregar al contenedor" y, a continuación, elija una opción:
- Restablecer el diseño actualSi comenzaste con una plantilla, esto la revertir a su configuración original.
- Seleccione un nuevo diseño: Cambia a una plantilla de diseño diferente. Elegir una plantilla anula cualquier configuración que tenga actualmente en su diseño.
- Eliminar toda la configuración: Comienza con una apariencia vacía.
Atención: Si eliminas o sobrescribes tu diseño con un restablecimiento o cambiando a un diseño diferente, no podrás recuperar la versión anterior.
Plantillas de superposición predeterminadas
Los siguientes diseños preconfigurados incluyen:
- Ventana emergente central: Una superposición de alta visibilidad que flota sobre el contenido de su sitio para centrar la atención de los usuarios en un único mensaje.
- Barra de información: Una franja de ancho completo que se sitúa en la parte superior o inferior del contenido de la página o que puede desplazar el contenido de la página hacia arriba o hacia abajo.
- Notificación de esquina: Una notificación discreta que se desliza hacia la esquina de la ventana gráfica. Notifica a los usuarios sin bloquear su vista principal.
- Encuesta integrada: Una barra lateral superpuesta que se abre en el edge de la pantalla para capturar la información del usuario a través de una encuesta totalmente integrada.
- Botón Slider de Opinión: Un botón anclado a uno de los lados de la ventana del navegador. Al hacer clic, se desliza desde la página hacia una conexión.
- Superposición del botón de Opinión: Un botón anclado a uno de los lados de la ventana del navegador. Las conexiones se abren en una ventana superpuesta al hacer clic en el botón.
Plantillas incrustadas predeterminadas
Los siguientes diseños preconfigurados están disponibles para creativos integrados:
- Encuesta en línea: Una encuesta integrada directamente en tu sitio web que permite a los usuarios responder sin interrumpir su navegación.
- Llamada a la acción: Un mensaje emergente en línea en su sitio web que permite a los usuarios interactuar dentro de la página.
- Tarjeta de llamada: Una tarjeta integrada en el contenido de tu página que resalta los mensajes clave sin alterar el diseño circundante.
Creativos integrados
Esta sección describe cómo editar un diseño incrustado y las opciones disponibles específicamente para los elementos creativos incrustados. Para editar un diseño incrustado en Appearance Studio, seleccione Incorporado como el tipo de intercept cuando creando una intercept guiada. Para obtener información sobre cómo editar elementos creativos de superposición, consulte las demás secciones de esta página.
Diseños de apariencia
Dentro del editor de apariencia puedes elegir entre una existente plantilla de diseño, crea un diseño desde cero o elige opinión con plantilla.
Consejo Q: Puedes cambiar entre diferentes diseños después de la creación, a menos que elijas la opinión con plantilla. La opinión mediante plantillas crea automáticamente una encuesta vinculada a la intercept y la apariencia. Si comienzas con una plantilla de opinión y luego la eliminas, no podrás recuperar la apariencia original ni la encuesta vinculada.
Diferencias de apariencia integradas
Las apariencias incrustadas se construyen de la misma manera que las apariencias superpuestas, utilizando contenedores, filas y elementos. Tenga en cuenta los siguientes consejos al editar la apariencia de un diseño incrustado:
- Fondo del contenedor: Establezca el color de fondo del contenedor en Sin color Si quieres que la apariencia herede el fondo de tu página web.
- Borde del contenedor: Si desea que el contenedor parezca una tarjeta independiente en la página, añada un borde.
- Elementos no compatibles: Los siguientes elementos no están disponibles en las apariencias integradas:
- Un botón de cierre en el contenedor
- Una sombra paralela en el contenedor
- Animaciones de entrada/salida o temporizadores de visualización
- Elementos de botón/ Slider Opinión
Agregar un selector CSS
Los interceptores integrados utilizan un selector CSS para determinar en qué parte de la página web aparecerá el elemento de apariencia.
Abre las herramientas para desarrolladores de tu navegador y busca el elemento en la página que debería contener la apariencia incrustada.
Haz clic con el botón derecho en el elemento y copia su selector.
Hacer clic Seleccione el selector CSS dentro del estudio de apariencia.
Pega el selector en el campo Selector CSS .
Si lo desea, puede configurar cuántas veces se mostrará la intercept en la página si su selector coincide con varios elementos. Por ejemplo, puedes insertar la misma apariencia después de cada sección de artículo en una página.
Hacer clic Guardar selector CSS.
Consejo Q: La apariencia incrustada siempre se agregará al final del elemento que coincida con su selector CDSS. No puedes insertarlo en una posición diferente dentro del elemento.
Dimensionamiento integrado
El ancho y la altura de las apariencias incrustadas ofrecen más opciones de personalización que las apariencias superpuestas. Estos ajustes determinan cómo cambia el tamaño de la apariencia dentro del elemento al que apunta su selector CSS .
Ancho:
- Llenar: El contenedor tendrá el 100% del ancho del elemento padre.
- Fijado: El contenedor tendrá un ancho fijo.
Altura:
- Auto: La altura del contenedor se ajustará en función de su contenido. Por ejemplo, una encuesta con una sola pregunta tendrá una altura menor que una encuesta con 3 o 4 preguntas.
- Altura: El contenedor tendrá una altura fija.
Consejo Q: Si va a integrar un agente, se recomienda una altura fija. Dado que las respuestas de los agentes pueden variar, es preferible mantener un tamaño constante al escalado automático de altura. Si va a insertar contenido que deba ajustarse dinámicamente a todos los tamaños de pantalla o expandirse para acomodar el contenido, se recomienda el uso de altura y anchura automáticas.
¡Genial! ¡Gracias por tus comentarios!
¡Gracias por tus comentarios!