Personalize sua página com CSS personalizado

O LanderLab permite criar o design dos quizzes visualmente, mas, se você precisar de mais controle, pode usar o Custom CSS para estilizar seu quiz além das configurações nativas. Isso é útil quando você quer ajustar os detalhes da aparência dos elementos do quiz ou aplicar estilos que não estão disponíveis no editor.

Como funciona

O LanderLab permite inserir CSS personalizado no seu fluxo. Seu CSS fica automaticamente restrito ao contêiner raiz .ll-quiz, então os estilos afetam apenas o quiz e nunca vazam para o restante da página.

Onde adicionar o CSS

O painel Custom CSS em Settings, no editor de quiz do LanderLab

No editor do LanderLab, abra Settings → Custom CSS e cole suas regras ali. Todo seletor que você escrever já fica dentro de .ll-quiz — não é preciso adicionar nenhum prefixo.

Não é possível estilizar o próprio elemento raiz .ll-quiz (por exemplo, background, font-family). Essas propriedades são controladas pelo mecanismo de temas. Em vez disso, aplique os estilos aos elementos filhos.

Regras de escopo

Todo o seu CSS fica dentro de .ll-quiz. As variáveis do tema (como --colorPrimary) são somente leitura — elas são definidas pelo mecanismo de temas e não podem ser sobrescritas. Para mudar a aparência de algo, escreva regras CSS comuns usando os seletores descritos neste guia. ✓ Faça assim

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

✗ Não faça assim - as variáveis são somente leitura

/* This will NOT work */
.ll-quiz {
  --colorPrimary: #ff6600;
}

Referência de seletores

Use estes seletores para selecionar os elementos que você quer estilizar. Todos eles ficam automaticamente restritos a .ll-quiz.

Layout e estrutura

.ll-quiz-step Todas as etapas (visíveis + ocultas) .ll-quiz-step[data-active-step=“true”] Apenas a etapa visível no momento .ll-quiz-header Área fixa do cabeçalho, no topo .ll-quiz-footer Área fixa do rodapé, na parte inferior .ll-quiz-block Todos os blocos, de qualquer tipo .ll-quiz-block—[type] Um tipo de bloco específico (por exemplo, --text-field)

Campos

.ll-quiz-block__input Todos os campos de texto e selects .ll-quiz-block__input-wrapper Div que envolve os campos .ll-quiz-block__label Rótulos dos campos .ll-quiz-block__decorator Ícones ou textos de prefixo/sufixo

Botões

.ll-quiz-continue-button Botão Continue .ll-quiz-previous-button Botão Previous (voltar) .ll-quiz-submit-button Botão Submit .ll-quiz-default-button Botão de ação genérico .ll-quiz-button-text Rótulo dentro de qualquer botão .ll-quiz-button-description Sub-rótulo dentro de qualquer botão

Blocos de escolha

.ll-choice-option Uma opção individual de múltipla escolha .ll-choice-option:has(input:checked) Uma opção selecionada .ll-choice-option__text Rótulo de texto dentro de uma opção .ll-img-choice-option Um card de opção de escolha com imagem .ll-img-choice-option:has(input:checked) Card de escolha com imagem selecionado .ll-choice-label Rótulo do grupo do bloco de escolha

Progresso e feedback

.ll-quiz-progress__fill A parte preenchida da barra .ll-quiz-header__progress-fill Preenchimento da barra de progresso do cabeçalho .ll-quiz-block—has-error Um bloco que não passou na validação .ll-quiz-block-error O texto da mensagem de erro .ll-quiz-variable Variáveis dinâmicas no texto (por exemplo, o primeiro nome)

Campos de entrada

Todos os campos de texto, selects, textareas e campos semelhantes compartilham a mesma estrutura de classes. Use .ll-quiz-block__input para estilizar todos de uma vez ou filtre por tipo de bloco para ter um controle individual.

Estilize todos os 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);
}

Selecione um bloco específico pelo ID

Encontre o ID do bloco na URL ao editar um bloco no LanderLab (por exemplo, text-field-abc123).

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

Estilize os decoradores de prefixo/sufixo

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

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

Rótulos

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

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

Botões

No LanderLab, os botões são renderizados como elementos <a>, e não <button>. Use o seletor específico de cada tipo de botão ou selecione todos os botões de uma vez com uma classe compartilhada.

Botão 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ão 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ão 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;
}

Estilize todos os botões de uma 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;
}

Sub-rótulo do botão (description)

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

Blocos de escolha

As opções de múltipla escolha e de escolha com imagem podem ser estilizadas nos estados padrão, hover (ao passar o mouse) e selecionado.

Estilize as opções

.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;
}

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

Cards de escolha com imagem

.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);
}

Oculte o ícone de radio/checkbox

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

Barras de progresso

A barra de progresso pode aparecer em dois lugares — uma inline, nas etapas, e outra no cabeçalho. Estilize-as separadamente ou em conjunto.

Barra de progresso inline

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

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

Barra de progresso do cabeçalho

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

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

Design responsivo

O LanderLab usa CSS container queries, e não media queries. Use sempre a sintaxe de contêiner abaixo — as queries @media padrão não funcionam como esperado dentro do contêiner do quiz. O breakpoint é 490px: tudo o que for mais largo é tratado como desktop, e tudo o que for mais estreito, como mobile. Sintaxe de container query

/* Desktop (wider than 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Mobile (490px and below) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Hide a block on mobile */
  #my-block-id {
    display: none;
  }
}

Não use queries @media Use @container quiz-container (...) em vez de @media (...). O quiz é um componente de contêiner, e as media queries não refletem a largura real dele.

Estados e validação

Quando um campo não passa na validação, ele recebe a classe .ll-quiz-block--has-error. Use essa classe para estilizar os estados de erro de forma consistente com o seu design.

Estilo de erro

/* Highlight the input wrapper */
.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);
}

/* Style the input itself */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Style the error message text */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}

Variáveis de texto dinâmicas

Os blocos de texto podem incluir variáveis dinâmicas, como {{firstName}}, que são atualizadas conforme o usuário digita. Elas são renderizadas como spans .ll-quiz-variable.

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

Exemplos completos

Cole qualquer um destes exemplos no painel Custom CSS para começar rapidamente.

Exemplo 1 — Tema minimalista e limpo

/* Inputs */
.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;
}

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

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

Exemplo 2 — Tema colorido e arredondado

/* Inputs */
.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;
}

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

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

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

Exemplo 3 — Ajustes de layout mobile-first

@container quiz-container (inline-size <= 490px) {
  /* Full-width buttons on mobile */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Larger tap targets for choices */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Slightly larger input text */
  .ll-quiz-block__input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

Lista de classes por tipo de bloco

Use estes modificadores em .ll-quiz-block para selecionar tipos de bloco específicos.

Classe modificadora	Tipo de bloco
`.ll-quiz-block--text-field`	Campo de texto
`.ll-quiz-block--email-field`	Campo de e-mail
`.ll-quiz-block--phone-number-field`	Campo de telefone
`.ll-quiz-block--number-field`	Campo numérico
`.ll-quiz-block--textarea-field`	Textarea (área de texto)
`.ll-quiz-block--select-field`	Menu suspenso (select)
`.ll-quiz-block--date-field`	Seletor de data
`.ll-quiz-block--checkbox-field`	Checkbox
`.ll-quiz-block--range-slider`	Range slider
`.ll-quiz-block--multiple-choice`	Múltipla escolha
`.ll-quiz-block--image-choice`	Escolha com imagem
`.ll-quiz-block--continue`	Botão Continue
`.ll-quiz-block--submit`	Botão Submit
`.ll-quiz-block--headline`	Texto de título (headline)
`.ll-quiz-block--paragraph`	Texto de parágrafo
`.ll-quiz-block--progress`	Barra de progresso
`.ll-quiz-block--accordion`	Accordion
`.ll-quiz-block--countdown`	Contador regressivo (countdown)

​Como funciona

​Onde adicionar o CSS

​Regras de escopo

​Referência de seletores

​Layout e estrutura

​Campos

​Botões

​Blocos de escolha

​Progresso e feedback

​Campos de entrada

​Estilize todos os campos de entrada

​Selecione um bloco específico pelo ID

​Estilize os decoradores de prefixo/sufixo

​Rótulos

​Botões

​Botão Continue

​Botão Previous

​Botão Submit

​Estilize todos os botões de uma vez

​Sub-rótulo do botão (description)

​Blocos de escolha

​Estilize as opções

​Cards de escolha com imagem

​Oculte o ícone de radio/checkbox

​Barras de progresso

​Barra de progresso inline

​Barra de progresso do cabeçalho

​Design responsivo

​Estados e validação

​Estilo de erro

​Variáveis de texto dinâmicas

​Exemplos completos

​Exemplo 1 — Tema minimalista e limpo

​Exemplo 2 — Tema colorido e arredondado

​Exemplo 3 — Ajustes de layout mobile-first

​Lista de classes por tipo de bloco

Como funciona

Onde adicionar o CSS

Regras de escopo

Referência de seletores

Layout e estrutura

Campos

Botões

Blocos de escolha

Progresso e feedback

Campos de entrada

Estilize todos os campos de entrada

Selecione um bloco específico pelo ID

Estilize os decoradores de prefixo/sufixo

Rótulos

Botões

Botão Continue

Botão Previous

Botão Submit

Estilize todos os botões de uma vez

Sub-rótulo do botão (description)

Blocos de escolha

Estilize as opções

Cards de escolha com imagem

Oculte o ícone de radio/checkbox

Barras de progresso

Barra de progresso inline

Barra de progresso do cabeçalho

Design responsivo

Estados e validação

Estilo de erro

Variáveis de texto dinâmicas

Exemplos completos

Exemplo 1 — Tema minimalista e limpo

Exemplo 2 — Tema colorido e arredondado

Exemplo 3 — Ajustes de layout mobile-first

Lista de classes por tipo de bloco