Style Guide — Divi

Framework

Global Presets UI Style Guide

01. Paleta de Cores

Nesta parte do guia de estilo, você pode modificar cada cor dentro das configurações de plano de fundo do Módulo de texto. Use esse mesmo código de cores dentro do Módulo de Texto abaixo dele para ter uma versão escrita do código de cores também. Use esses códigos de cores dentro da paleta de cores padrão do Divi Theme Builder depois.
#282a2d
#080059
#0e94f7
#ffffff
#cdcdd2
#eeeeee
Transparent
#ff0000
#080059
#0e94f7
#080059
#282a2d

02. Estilo de textos

Na segunda parte deste wireframe do guia de estilo, você pode estilizar seus diferentes tipos de texto. Você também recebe uma opção primária, secundária e terciária, cada uma das quais você pode posteriormente transformar em presets individuais.
Headers, Links, Body, & Lists
Primário
Secundário

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

03. Módulos

A última parte deste guia de estilo trata de alguns dos módulos mais usados dentro do Divi. Aqui, também fornecemos uma versão primária, secundária e terciária de cada módulo que você pode estilizar e adicionar como uma predefinição global. Sinta-se à vontade para criar mais designs alternativos para cada módulo.
Primário
Secundário
Botão

Tagline aqui

Tagline aqui

Blurb

Seu título vai aqui

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.

Seu título vai aqui Seu título vai aqui

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Email optin
Formulário

15 + 8 =

Imagem
Call to action

Seu título vai aqui

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.

Seu título vai aqui

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Divider
Pessoas
Nome vai aqui

Nome vai aqui

Cargo

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Nome vai aqui

Nome vai aqui

Cargo

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Siga nas Mídias Sociais
Toggle
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Depoimentos
Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Nome vai Aqui

Seu conteúdo vai aqui. Edite ou remova este texto inline ou nas configurações de conteúdo do módulo. Você também pode estilizar todos os aspectos desse conteúdo nas configurações de design do módulo e até mesmo aplicar CSS personalizado a esse texto nas configurações avançadas do módulo.
Nome vai Aqui

Acordeão
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.