Design e layout.

RECURSOS DE DESIGN

Crie experiências web dinâmicas para todos os tamanhos de tela.

Design e layout

Interações e efeitos

Recursos de design e mídia

Breakpoints personalizados

Adicione diversos breakpoints personalizados para criar e otimizar sites em qualquer tamanho de tela.

resize handle
resize handle
resize handle
Imagem de um site de uma revista de design chamada Daylong sendo exibida no breakpoint do tablet. Há duas imagens quadradas alinhadas horizontalmente com texto branco no topo de cada uma. A imagem à esquerda é de um gradiente digital colorido e a imagem à direita é de uma mulher em um vestido rosa.
Imagem do site de uma revista de design chamada Daylong exibida no breakpoint mobile. Há uma imagem quadrada de uma mulher em um vestido rosa e um texto branco em cima.
Imagem de um texto azul sobre um fundo branco que diz adicionar breakpoint.
Imagem do um site de uma revista de design chamada Daylong sendo exibida no breakpoint do desktop. Há três imagens quadradas alinhadas horizontalmente com texto branco no topo de cada uma. A imagem à esquerda é de um gradiente digital colorido, a imagem central é de uma mulher em um vestido rosa e a imagem à direita é de um desenho multicolorido pixelizado.
Imagem de um site de uma revista de design chamada Daylong sendo exibida no breakpoint do tablet. Há duas imagens quadradas alinhadas horizontalmente com texto branco no topo de cada uma. A imagem à esquerda é de um gradiente digital colorido e a imagem à direita é de uma mulher em um vestido rosa.
Imagem do site de uma revista de design chamada Daylong exibida no breakpoint mobile. Há uma imagem quadrada de uma mulher em um vestido rosa e um texto branco em cima.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
Imagem de uma mulher segurando fones de ouvido sobre a cabeça em um fundo gradiente vermelho. O menu de unidades de medida está aberto e Mín/Máx foi selecionado.
Imagem de uma mulher segurando fones de ouvido sobre a cabeça em um fundo gradiente vermelho. O menu de unidades de medida está aberto e Mín/Máx foi selecionado.
Imagem de uma mulher segurando fones de ouvido sobre a cabeça em um fundo gradiente vermelho. O menu de unidades de medida está aberto e Mín/Máx foi selecionado.
Imagem de uma mulher segurando fones de ouvido sobre a cabeça em um fundo gradiente vermelho. O menu de unidades de medida está aberto e Mín/Máx foi selecionado.

Grade CSS

Crie layouts complexos e sobrepostos em um espaço bidimensional com controle preciso sobre o posicionamento dos elementos em cada breakpoint.

Duas imagens sobrepostas em um fundo gradiente azul. A imagem da frente é de um site de portfólio exibindo três fotos sobre um fundo amarelo. A imagem no fundo mostra o sistema de gerenciamento de conteúdo do Editor X.
Duas imagens sobrepostas em um fundo gradiente azul. A imagem da frente é de um site de portfólio exibindo três fotos sobre um fundo amarelo. A imagem no fundo mostra o sistema de gerenciamento de conteúdo do Editor X.

Repetidores

Use esta ferramenta de layout flexível para exibir conteúdo exclusivo em várias caixas com um estilo uniforme. Conecte repetidores a um CMS integrado para criar facilmente perfis de equipe, listagens de recursos ou galerias de projetos.

Layouter

Crie layouts modulares flexíveis com caixas responsivas que se encaixam perfeitamente em cada janela de visualização. Você pode escolher de wireframes em branco personalizáveis a sugestões de layouts completos.

Imagem de um homem com uma jaqueta metálica e uma mochila. À esquerda está a seção Encaixe e Margens do painel de inspeção do Editor X.
Imagem de um homem com uma jaqueta metálica e uma mochila. À esquerda está a seção Encaixe e Margens do painel de inspeção do Editor X.

Encaixe (Docking)

Com o encaixe inteligente, os elementos são anexados automaticamente às bordas mais próximas de seu contêiner principal. Você também pode ajustar manualmente o encaixe para criar layouts precisos em cada janela de visualização.

Imagem de um contêiner criado com texto e uma captura de tela do painel Camadas à esquerda, sobre um plano de fundo texturizado azul.

Camadas

Use o painel de camadas para visualizar e gerenciar a ordem de todos os elementos de uma página e verificar a relação entre eles. Você também pode renomear suas camadas para mantê-las organizadas.

Escala de texto

Defina um tamanho de fonte mínimo e máximo para garantir que o texto seja gradualmente escalonado em relação ao tamanho da tela.

Mais recursos de design e layout:

Uma imagem ampliada da parte superior esquerda da tela com o cabeçalho destacado em verde.

Mestres

Salve e reutilize cabeçalhos, seções e rodapés em várias páginas. Para agilizar seu fluxo de criação, as alterações feitas em um elemento mestre serão aplicadas em todos os locais do site onde o mesmo for utilizado.

Três vetores de layout e uma forma de botão sobre um fundo cinza.

Recursos de design

Crie e salve seções inteiras como recursos de design e reutilize-as em vários sites. Você pode salvar os recursos de design no próprio site ou em uma biblioteca de design compartilhada para acessá-los a partir de qualquer site de uma mesma conta.

Imagem de dois títulos sobre um fundo branco e um ícone de lápis ao lado de cada um.

Gestor de temas

Visualize e edite a tipografia e os temas de cores de um site. Este é o local onde você pode personalizar o estilo do texto e as paletas de cores do site.

 Imagem de ícones retangulares e em forma de botão em branco alinhados horizontalmente sobre um fundo cinza.

Menus personalizados

Crie e gerencie menus exclusivos para cada página do site. Escolha o design do menu, selecione os itens que aparecerão em cada um deles, associe-os a diferentes destinos e personalize cada menu por breakpoint.

 Imagem de um quadrado cinza com a medida de 100 da altura da janela de visualização.

Altura da janela de visualização

Configure qualquer seção de um site para 100% da altura da janela de visualização. Desta forma, ele sempre ocupará toda a altura da tela, independentemente do dispositivo em que estiver sendo visualizado.

 Imagem de um toggler mostrando as palabras Fixo e Fluido dentro de um contêiner sobre um fundo cinza.

Fixo, fluido e escala

Controle como os elementos se comportam conforme a tela é redimensionada. Escolha um tamanho fixo, fluido ou configure de forma que as imagens e o texto se ajustem proporcionalmente à janela de visualização.

Uma imagem ampliada da parte superior direita da tela e um texto branco sobre uma forma cilíndrica cinza.

Alças de redimensionamento

Use as alças de redimensionamento em ambos os lados da tela para visualizar e criar um site em qualquer largura da janela de visualização.

Imagem de um contêiner selecionado com um design de layout delineado graficamente.

Pilha (Stack)

Mantenha as margens verticais entre os elementos em qualquer janela de visualização e evite a sobreposição em telas menores.

Imagem de um contêiner selecionado com um quadrado branco cercado por um fundo verde claro.

Preenchimento do contêiner

Adicione espaçamento ao redor de qualquer contêiner para que sempre seja mantida uma distância definida de suas bordas.

Imagem de ícones azuis do desktop, tablet e celular alinhados verticalmente com uma seta para baixo à esquerda.

Padrão em cascata

Quaisquer alterações de estilo feitas em um breakpoint serão propagadas em cascata para breakpoints menores, mas não o contrário.

 Imagem do desktop, tablet e ícones mobile alinhados horizontalmente indicando que o ícone do desktop está selecionado.

Copiar para breakpoint

Copie o layout e as propriedades de estilo de um breakpoint para outro. Por exemplo, você pode aplicar o estilo de um elemento que aparece em um celular para o mesmo elemento em um tablet com apenas alguns cliques.

 Imagem de duas caixas quadradas com designs de layout delineados graficamente sobre um fundo cinza.

Copiar formato

Copie os atributos de design de um elemento para outro e aumente a eficiência. Escolha copiar como um elemento é estilizado em um breakpoint específico ou copie a forma como ele é estilizado em todos os breakpoints.

Imagem dos ícones da página e âncora alinhados verticalmente sobre um fundo branco.

Âncoras

Ajude os visitantes a navegar em um site com marcadores de posição invisíveis. Converta qualquer elemento em uma âncora e vincule-o a botões ou itens do menu em todo o site.

Imagem de linhas horizontais cinzas e texto azul sobre um fundo branco.

Upload de fontes

Faça o upload de suas próprias fontes e use-as em qualquer site.

 Imagem de ícones de fração, porcentagem e unidade de medida de pixel alinhados horizontalmente.

Unidades de medida

Dimensione seus elementos em pixels, porcentagens ou de acordo com a altura ou largura da janela de visualização. Você também pode dimensionar as colunas e linhas de sua grade usando fr, calc e muito mais.

See all →

E isso é só o começo.

Explore mais recursos avançados para criar, gerenciar e publicar sites sofisticados com o Editor X.

Trabalho em equipe otimizado

Simplifique seu fluxo de trabalho e otimize a colaboração em equipe com funções e permissões avançadas, contas de equipe, bibliotecas de design compartilháveis ​​e muito mais.

Programação

Crie aplicativos web avançados usando JavaScript e APIs personalizadas no Velo, uma plataforma de desenvolvimento aberta integrada.

CMS sem programação

Use a coleta de dados para gerenciar facilmente o conteúdo dinâmico nos bastidores do site sem precisar alterar o design.

Marketing e SEO

Use integrações de marketing avançadas para avaliar campanhas online, direcionar o tráfego e coletar informações valiosas sobre os visitantes.

Soluções de negócios

Atenda às necessidades de qualquer negócio com ferramentas avançadas de eCommerce, desde lojas online robustas até assinaturas e sistemas de reserva.

resize handle
resize handle

Editor X

Design avançado em suas mãos