Elementor Styleguide
A complete styleguide plugin for Elementor Pro with color management and typography
by zard labs · github.com/joaoterceiro/elementor-styleguide · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/joaoterceiro/elementor-styleguide/archive/refs/heads/main.zipReadme
Guia de Uso Como Usar as Cores Adicione estas classes aos elementos do Elementor:
color-primary, color-primary-light, color-primary-dark - Para cores de texto primárias color-secondary, color-secondary-light, color-secondary-dark - Para cores de texto secundárias color-accent, color-accent-light, color-accent-dark - Para cores de destaque color-success, color-warning, color-danger, color-info - Para cores de status bg-primary, bg-primary-light, bg-primary-dark - Para cores de fundo primárias bg-secondary, bg-secondary-light, bg-secondary-dark - Para cores de fundo secundárias bg-accent, bg-accent-light, bg-accent-dark - Para cores de fundo de destaque bg-success, bg-warning, bg-danger, bg-info - Para cores de fundo de status color-gray-100 até color-gray-900 - Para tons de cinza em texto bg-gray-100 até bg-gray-900 - Para tons de cinza em fundo border-primary, border-secondary, etc. - Para bordas coloridas Como Usar a Tipografia Classes de tamanho de fonte:
display-large - 80px (64px tablet, 48px mobile) display-small - 72px (56px tablet, 40px mobile) heading-h1 até heading-h6 - Títulos hierárquicos text-xl - 18px text-lg - 16px text-md - 14px text-sm - 12px Classes de peso da fonte:
font-regular - Peso 400 font-medium - Peso 500 font-semibold - Peso 600 font-bold - Peso 700 Classes de altura de linha:
lh-tight - Altura de linha 1.2 lh-normal - Altura de linha 1.5 lh-loose - Altura de linha 1.8 Classes de alinhamento de texto:
text-left, text-center, text-right, text-justify Como Aplicar No editor do Elementor, selecione o elemento que deseja estilizar Na aba "Avançado", encontre o campo "Classes CSS" Adicione as classes desejadas (por exemplo: "color-primary font-bold") Exemplos de Uso Para um título grande em cor primária:
heading-h1 color-primary font-bold Para um botão secundário:
bg-secondary text-lg font-semibold Para um alerta ou aviso:
bg-warning color-gray-900 text-md lh-normal Dicas e Melhores Práticas Mantenha consistência usando as mesmas variantes de cores em todo o site Use as cores em tons de cinza para a maioria do conteúdo e as cores de destaque com moderação Combine várias classes para obter o estilo desejado Use as cores de status de forma apropriada para transmitir significado (sucesso, aviso, etc.)