Personaliza tu página con CSS personalizado

LanderLab te permite diseñar quizzes de forma visual, pero si necesitas más control puedes usar Custom CSS para dar estilo a tu quiz más allá de los ajustes integrados. Es útil cuando quieres ajustar al detalle el aspecto de los elementos del quiz o aplicar estilos que no están disponibles en el editor.

Cómo funciona

LanderLab te permite inyectar CSS personalizado en tu flujo. Tu CSS se limita automáticamente al contenedor raíz .ll-quiz, así que los estilos solo afectan a tu quiz y nunca se filtran al resto de la página.

Dónde añadir el CSS

El panel Custom CSS dentro de Settings en el editor de quizzes de LanderLab

En el editor de LanderLab, abre Settings → Custom CSS y pega ahí tus reglas. Todos los selectores que escribas ya están dentro de .ll-quiz, así que no necesitas añadir ningún prefijo.

No puedes dar estilo al propio elemento raíz .ll-quiz (por ejemplo, background o font-family). Esas propiedades las controla el motor de temas. Apunta a los elementos hijos en su lugar.

Reglas de alcance

Todo tu CSS vive dentro de .ll-quiz. Las variables del tema (como --colorPrimary) son de solo lectura: las define el motor de temas y no se pueden sobrescribir. Para cambiar el aspecto de algo, escribe reglas CSS normales que apunten a los selectores que se describen en esta guía. ✓ Haz esto

.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}

✗ No hagas esto: las variables son de solo lectura

/* Esto NO funcionará */
.ll-quiz {
  --colorPrimary: #ff6600;
}

Referencia de selectores

Usa estos selectores para apuntar a los elementos que quieres modificar. Todos están limitados automáticamente a .ll-quiz.

Diseño y estructura

.ll-quiz-step Todos los pasos (visibles y ocultos) .ll-quiz-step[data-active-step=“true”] Solo el paso visible en ese momento .ll-quiz-header Zona fija de la cabecera superior .ll-quiz-footer Zona fija del pie inferior .ll-quiz-block Cualquier bloque, de cualquier tipo .ll-quiz-block—[type] Un tipo de bloque concreto (por ejemplo, --text-field)

Campos de entrada

.ll-quiz-block__input Todos los campos de texto y desplegables .ll-quiz-block__input-wrapper Div contenedor que envuelve los campos .ll-quiz-block__label Etiquetas de los campos .ll-quiz-block__decorator Iconos o texto de prefijo y sufijo

Botones

.ll-quiz-continue-button Botón Continue .ll-quiz-previous-button Botón Previous (atrás) .ll-quiz-submit-button Botón Submit .ll-quiz-default-button Botón de acción genérico .ll-quiz-button-text Texto dentro de cualquier botón .ll-quiz-button-description Subtítulo dentro de cualquier botón

Bloques de opciones

.ll-choice-option Una opción de opción múltiple .ll-choice-option:has(input:checked) Una opción seleccionada .ll-choice-option__text Texto dentro de una opción .ll-img-choice-option Tarjeta de una opción con imagen .ll-img-choice-option:has(input:checked) Tarjeta con imagen seleccionada .ll-choice-label Etiqueta del grupo de un bloque de opciones

Progreso y mensajes

.ll-quiz-progress__fill La parte rellena de la barra .ll-quiz-header__progress-fill Relleno de la barra de progreso de la cabecera .ll-quiz-block—has-error Un bloque que no ha superado la validación .ll-quiz-block-error El texto del mensaje de error .ll-quiz-variable Variables dinámicas dentro del texto (por ejemplo, el nombre)

Campos de entrada

Todos los campos de texto, desplegables, áreas de texto y similares comparten la misma estructura de clases. Apunta a .ll-quiz-block__input para darles estilo a todos a la vez, o filtra por tipo de bloque para controlarlos uno a uno.

Da estilo a todos los campos de entrada

CSS

.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

Apunta a un bloque concreto por su ID

Encontrarás el ID del bloque en la URL cuando lo editas en LanderLab (por ejemplo, text-field-abc123).

#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}

Da estilo a los prefijos y sufijos

.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}

Etiquetas

.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}

Botones

En LanderLab los botones se renderizan como elementos <a>, no como <button>. Usa el selector específico de cada tipo de botón o apunta a todos a la vez con una clase compartida.

Botón Continue

.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}

Botón Previous

.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}

Botón Submit

.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}

Da estilo a todos los botones a la vez

.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Subtítulo del botón (descripción)

.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

Bloques de opciones

Puedes dar estilo a las opciones de los bloques de opción múltiple y de elección con imágenes en sus estados normal, hover y seleccionado.

Da estilo a las opciones

.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Estado seleccionado */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}

Tarjetas de elección con imágenes

.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}

Oculta el icono de radio o casilla

.ll-choice-option__custom-input {
  display: none;
}

Barras de progreso

Hay dos ubicaciones para la barra de progreso: una dentro de los pasos y otra en la cabecera. Puedes darles estilo por separado o a la vez.

Barra de progreso dentro del paso

/* Pista */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Relleno */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}

Barra de progreso de la cabecera

.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}

Diseño adaptable

LanderLab usa container queries de CSS, no media queries. Usa siempre la sintaxis de contenedor que ves abajo: las consultas @media estándar no funcionan como esperas dentro del contenedor del quiz. El punto de corte es 490px: todo lo que sea más ancho se trata como escritorio y todo lo que sea más estrecho, como móvil. Sintaxis de las container queries

/* Escritorio (más de 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Móvil (490px o menos) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Oculta un bloque en móvil */
  #my-block-id {
    display: none;
  }
}

No uses media queries @media Usa @container quiz-container (...) en lugar de @media (...). El quiz es un componente contenedor y las media queries no reflejan su ancho real.

Estados y validación

Cuando un campo no supera la validación, recibe la clase .ll-quiz-block--has-error. Úsala para dar a los estados de error un estilo coherente con tu diseño.

Estilo de los errores

/* Resalta el contenedor del campo */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Da estilo al propio campo */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Da estilo al texto del mensaje de error */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}

Variables de texto dinámicas

Los bloques de texto pueden incluir variables en vivo como {{firstName}} que se actualizan mientras el usuario escribe. Se renderizan como elementos span con la clase .ll-quiz-variable.

.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}

Ejemplos completos

Pega cualquiera de estos ejemplos en tu panel Custom CSS para empezar rápidamente.

Ejemplo 1: tema minimalista y limpio

/* Campos de entrada */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Botón Continue */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Opciones */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}

Ejemplo 2: tema redondeado y colorido

/* Campos de entrada */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Botones Continue y Submit */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Progreso */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opción seleccionada */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}

Ejemplo 3: ajustes de diseño pensados para móvil

@container quiz-container (inline-size <= 490px) {
  /* Botones a ancho completo en móvil */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Zonas táctiles más grandes para las opciones */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Texto de los campos algo más grande */
  .ll-quiz-block__input {
    font-size: 16px; /* evita el zoom de iOS al enfocar */
  }
}

Lista de clases por tipo de bloque

Usa estos modificadores sobre .ll-quiz-block para apuntar a tipos de bloque concretos.

Clase modificadora	Tipo de bloque
`.ll-quiz-block--text-field`	Campo de texto
`.ll-quiz-block--email-field`	Campo de email
`.ll-quiz-block--phone-number-field`	Campo de teléfono
`.ll-quiz-block--number-field`	Campo numérico
`.ll-quiz-block--textarea-field`	Área de texto
`.ll-quiz-block--select-field`	Desplegable
`.ll-quiz-block--date-field`	Selector de fecha
`.ll-quiz-block--checkbox-field`	Casilla de verificación
`.ll-quiz-block--range-slider`	Control deslizante de rango
`.ll-quiz-block--multiple-choice`	Opción múltiple
`.ll-quiz-block--image-choice`	Elección con imágenes
`.ll-quiz-block--continue`	Botón Continue
`.ll-quiz-block--submit`	Botón Submit
`.ll-quiz-block--headline`	Texto de título
`.ll-quiz-block--paragraph`	Texto de párrafo
`.ll-quiz-block--progress`	Barra de progreso
`.ll-quiz-block--accordion`	Acordeón
`.ll-quiz-block--countdown`	Cuenta atrás

​Cómo funciona

​Dónde añadir el CSS

​Reglas de alcance

​Referencia de selectores

​Diseño y estructura

​Campos de entrada

​Botones

​Bloques de opciones

​Progreso y mensajes

​Campos de entrada

​Da estilo a todos los campos de entrada

​Apunta a un bloque concreto por su ID

​Da estilo a los prefijos y sufijos

​Etiquetas

​Botones

​Botón Continue

​Botón Previous

​Botón Submit

​Da estilo a todos los botones a la vez

​Subtítulo del botón (descripción)

​Bloques de opciones

​Da estilo a las opciones

​Tarjetas de elección con imágenes

​Oculta el icono de radio o casilla

​Barras de progreso

​Barra de progreso dentro del paso

​Barra de progreso de la cabecera

​Diseño adaptable

​Estados y validación

​Estilo de los errores

​Variables de texto dinámicas

​Ejemplos completos

​Ejemplo 1: tema minimalista y limpio

​Ejemplo 2: tema redondeado y colorido

​Ejemplo 3: ajustes de diseño pensados para móvil

​Lista de clases por tipo de bloque

Cómo funciona

Dónde añadir el CSS

Reglas de alcance

Referencia de selectores

Diseño y estructura

Campos de entrada

Botones

Bloques de opciones

Progreso y mensajes

Campos de entrada

Da estilo a todos los campos de entrada

Apunta a un bloque concreto por su ID

Da estilo a los prefijos y sufijos

Etiquetas

Botones

Botón Continue

Botón Previous

Botón Submit

Da estilo a todos los botones a la vez

Subtítulo del botón (descripción)

Bloques de opciones

Da estilo a las opciones

Tarjetas de elección con imágenes

Oculta el icono de radio o casilla

Barras de progreso

Barra de progreso dentro del paso

Barra de progreso de la cabecera

Diseño adaptable

Estados y validación

Estilo de los errores

Variables de texto dinámicas

Ejemplos completos

Ejemplo 1: tema minimalista y limpio

Ejemplo 2: tema redondeado y colorido

Ejemplo 3: ajustes de diseño pensados para móvil

Lista de clases por tipo de bloque