Como transformar layouts Divi em wireframes reutilizáveis

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, mostraremos como transformar layouts em wireframes reutilizáveis ​​usando o Food Catering Layout Pack da Divi. Wireframes são ótimos para iniciar o processo de construção de um website. Eles ajudam você a decidir sobre a estrutura geral e o estilo de design de um site. Eles também podem ajudar a obter a opinião do cliente sobre um estilo de design sem ter que ajustar tudo com antecedência.

Vamos lá!

Antevisão

Antes de mergulharmos nisso, vamos dar uma olhada no resultado final que criaremos.

Transformar Layout em Wireframe

Abra a página inicial do Food Catering com o Visual Builder

Vá em frente e abra a página de destino que você criou usando o Food Catering Layout Pack da Divi.

Remova as imagens de fundo da seção e do cabeçalho de largura total, cores de fundo e fundos gradientes

O primeiro passo para criar um wireframe é remover todas as imagens de fundo, fundos gradientes e cores de fundo das seções em sua página e o Módulo de cabeçalho Fullwidth na seção de herói.

Em vez disso, dê às seções alternadas uma cor de fundo cinza

Para ajudar a determinar as diferentes seções em seu design de página, vá em frente e dê a cada uma das seções alternadas uma cor de fundo '# f9f9fb'. Posteriormente, ao usar um wireframe para criar uma página, você poderá usar o recurso Localizar e Substituir para adicionar a paleta de cores à sua página perfeitamente.

Remova todas as cores em elementos de design usando filtro de estilos modificados

Habilitar filtro de estilos modificados no módulo de botão

Também vamos nos livrar da paleta de cores que está sendo usada. Dessa forma, não seremos influenciados por ele ao construir uma página. Abra um dos Módulos de botão em sua página e ative o Filtro de Estilos Modificados para ver todas as configurações atuais.

Fundo escuro do módulo do botão e cor da borda

Altere a cor de fundo do botão e a cor da borda do botão para '# 2b2b2b'.

Copiar estilos de botão e aplicar a outros botões

Continue copiando os estilos de botão clicando com o botão direito nas configurações do botão e clicando em 'Copiar estilos de botão'. Em seguida, adicione os Estilos de botão a cada um dos módulos de botão restantes na página.

Remover configurações extras de design (como caixa de sombra)

Remover sombra da caixa de botão

Estamos removendo elementos adicionais, como Box Shadow, também. Abra o mesmo Módulo de botão em que estava trabalhando e remova a sombra da caixa completamente.

Copiar Configurações de Sombra da Caixa do Módulo do Botão

Copie os Estilos de sombra de caixa deste Módulo de botão e adicione-os também aos Módulos de botão restantes.

Remover Box Shadow manualmente na seção Hero & Contact

Os únicos dois botões que precisam de remoção manual do Box Shadow são os incluídos no Módulo de cabeçalho Fullwidth e no Módulo de contato. Esses botões fazem parte de um módulo com vários elementos de design, por isso precisamos removê-los manualmente.

Dê à seção realçada a mesma cor de fundo que CTAs

Em seguida, role para baixo até encontrar a seção 'destacada'. Aqui, use a cor de fundo da seção '# 2b2b2b'. A mesma cor foi usada para os CTAs.

Determinar as dimensões da imagem

Vá para a biblioteca de mídia

Para remover totalmente o tópico de layout de nosso layout, vamos substituir todos os Módulos de Imagem por espaços reservados contendo as dimensões de imagem necessárias. Para encontrar essas dimensões, vá para a sua Biblioteca de mídia.

Abra as imagens usadas individualmente

Abra cada uma das imagens incluídas em sua página separadamente.

Anote as diferentes dimensões das imagens na página

Depois de fazer isso, você poderá ver as dimensões daquela imagem em particular. Acompanhe todas as dimensões de que você precisa em sua página, anotando-as em algum lugar antes de ir para a próxima etapa.

Crie marcadores de posição com dimensões

Abra o Photoshop

É hora de criar os espaços reservados! Abra o Photoshop ou qualquer outro software de edição de imagem.

Criar novos projetos para dimensões

Crie um novo projeto para cada conjunto de dimensões que você tem em sua página. Em nosso caso, precisaremos de projetos separados para cada uma das seguintes dimensões:

• 800 x 1029
• 400 x 400
• 48 x 48

Escolha a cor cinza

Escolha '# e7e8ed' como sua cor.

Desbloquear camada de fundo

Desbloqueie sua camada de fundo também.

Selecione a ferramenta Balde de tinta e adicione cor à camada

Em seguida, use a ferramenta Lata de tinta para colorir a tela de cinza.

Adicionar Texto com Dimensões

Para ajudá-lo a controlar as dimensões da imagem, você também pode adicionar as dimensões no meio do seu espaço reservado. Dessa forma, você saberá quais dimensões de imagem precisará para sua página, uma vez que estiver editando as imagens pelas quais as substituirá.

Salvar para a web

Quando terminar, salve o marcador de posição de imagem para a web.

Repita para cada uma das dimensões da imagem na página

Repita essas etapas para cada um do conjunto de dimensões em sua página. Para esta página, você precisará de três conjuntos diferentes no total:

• 800 x 1029 (seção sobre nós
• 400 x 400 (seção da galeria)
• 48 x 48 (ícones)

Substituir imagens por marcadores de posição

Depois de exportar todos os marcadores de posição de imagem, vá em frente e substitua as imagens.

Tornando o Wireframe Facilmente Reutilizável

Crie um mapa de wireframe no computador

Depois de criar um wireframe, é recomendável salvar a aparência dele em algum lugar. Crie uma nova pasta em algum lugar do seu computador.

Layout de captura de tela e salvar localmente

Em seguida, use o complemento / extensão de captura de tela de sua escolha para capturar sua página. Nas imagens abaixo, usamos o add-on FireShot para Mozilla Firefox. Certifique-se de que, ao salvar sua captura de tela, dê a ela um nome apropriado.

Salvar layout na biblioteca com o mesmo nome

Use o mesmo nome que você usou para sua captura de tela para salvar o layout de wireframe em sua biblioteca Divi. Isso permite que você dê uma olhada no wireframe em seu computador antes de enviá-lo para uma de suas páginas.

Alterar configurações de design para wireframes personalizados

Adicionar divisores de seção

Você não está limitado a criar um wireframe por página. Você pode facilmente ajustar as configurações de design para criar novos wireframes. Você pode brincar com os divisores de seção, por exemplo, para criar designs exclusivos.

Brinque com a tipografia

Habilitar Localizar e Substituir na Fonte do Título

Ou você também pode brincar com a tipografia. Abra o Módulo de cabeçalho Fullwidth em sua seção de herói e clique com o botão direito em Title Font. Continue ativando o recurso Localizar e Substituir.

Mudar fonte

Mude a fonte que está sendo usada em sua página para outra e você terá um novo wireframe!

Salvar elementos de design separados usando categorias

Clique no ícone 'Adicionar à Biblioteca'

Outra coisa que você pode fazer é salvar elementos de design específicos em sua página separadamente. Digamos, por exemplo, que você queira criar uma coleção de seções de heróis, você pode adicionar facilmente sua seção de heróis à sua Biblioteca Divi.

Adicionar nova categoria e dar um nome ao elemento de design

Para ter uma estrutura mais organizada, continue adicionando uma nova categoria de seções chamada 'Seções de Herói' para que você possa encontrar facilmente a seção de herói de sua escolha e explorar todos os designs que você tem em estoque.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final.

Pensamentos finais

Nesta postagem de blog de caso de uso, mostramos como transformar layouts Divi em wireframes reutilizáveis. Transformar layouts em wireframes ajuda a manter a visão geral de como deseja a aparência da estrutura de um site. Eles também são excelentes para informar o estilo de design de um cliente no primeiro estágio do processo de construção do site. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários!