Como usar o cabeçalho, rodapé e o criador de layout de coluna do Avada

Nosso próprio construtor de páginas, o Avada Builder, agora está disponível em duas interfaces: Avada Builder, que é nosso construtor de páginas wireframe de back-end, e Avada Live, que é nosso construtor de front-end, que só foi introduzido recentemente com o Avada 6.0 .

Usando nosso sistema direto de contêineres, colunas e elementos, ambas as versões do Avada Builder permitem que você crie belos layouts de página para o seu site com facilidade. O Avada Builder é uma ferramenta fantástica para web designers modernos e proprietários de sites, pois dá a eles controle completo sobre todos os aspectos do conteúdo e layout da página. Ambas as versões do Avada Builder também geram o mesmo código. Eles são totalmente intercambiáveis, permitindo que você tenha o melhor dos dois mundos com o Avada Builder, que está disponível atualmente.

A página Layout Builder é onde você encontrará todos os seus Layouts e quaisquer Layouts condicionais que você queira construir, além do Layout Global criado por padrão. Também localizada aqui está a área onde você atribui Seções de Layout a seus Layouts e especifica as Condições para que seus Layouts Condicionais entrem em vigor.

O Layout Builder pode ser acessado a partir do Avada Dashboard selecionando Layouts> Layout Builder no menu suspenso. Uma das maneiras mais diretas de descrever layouts é dizer que eles são contêineres que hospedam as quatro seções de layout de uma página - a seção de cabeçalho, a seção da barra de título da página, a seção de conteúdo e a seção de rodapé. Você pode aprender mais sobre as diferenças entre Seções de Layout e Layouts lendo este documento: Compreendendo Layouts e Seções de Layout (PDF). Continue lendo para aprender mais sobre o que você pode fazer nesta página.

Duas partes estão localizadas na parte superior da página do Layout Builder. Uma técnica para preencher as Seções de Layout no Layout Global ou gerar Layouts Condicionais é descrita na primeira seção (dica: você pode fechar isso com o X), e no lado direito da tela está uma área da qual você pode crie diretamente novos Layouts (veja abaixo). Digite um nome para o seu novo Layout e clique em Criar Novo Layout para concluir o processo. Um Layout em branco é criado quando este método é usado; nenhuma seção de layout ou condições são especificadas.

Conforme você constrói Layouts, eles são importados automaticamente para a página Layout Builder. Você pode renomear um Layout clicando no botão Renomear na parte superior da página. Você também pode clicar no ícone de engrenagem para estabelecer as condições para o Layout e pode excluir um Layout clicando no ícone Lixeira na parte superior da página. Você também pode ver e atribuir critérios clicando na parte inferior de todos os Layouts, exceto o Layout Global.

Em cada Layout, você pode ver as quatro Seções de Layout atribuídas a um Layout específico, uma para cada um dos quatro layouts. Em cada Seção de Layout, você verá um ícone +, que permitirá que você atribua uma Seção de Layout a essa seção do Layout quando você mover o mouse sobre ela. Você tem a opção de atribuir uma Seção de Layout existente a esta seção ou criar uma seção totalmente nova.

Usando layout de seção

Como parte do Avada Layouts, agora você pode criar rodapés totalmente personalizáveis ​​para o seu site, aproveitando toda a capacidade criativa do Avada Builder para fazer isso.

Um Layout de Rodapé é uma Seção de Layout adicionada a um Layout. Para ex amp le, um rodapé personalizado requer um layout seção de rodapé, que pode ser adicionado a qualquer Global ou layout personalizado. Veremos como construir uma seção de layout de rodapé personalizado na próxima seção, mas, primeiro, vamos dar uma olhada em Apresentando os layouts do Avada.

Na barra lateral do WordPress ou no painel do Avada, selecione Avada> Layouts. Os layouts e seções de layout do Avada são criados e gerenciados aqui. Conforme mostrado abaixo, o Layout global está inicialmente vazio, sem seções de layout associadas.

Personalizando um Layout

Esta seção pode ser adicionada ao Layout Global ou Layout Condicional, mostrando apenas alguns tipos de postagem personalizados ou páginas únicas. O Layout Global já está presente, mas precisamos desenvolver um Layout Condicional primeiro.

Na página Layouts, adicione um nome e clique em Criar Novo Layout, conforme mostrado abaixo.

Crie uma Seção de Layout de Rodapé se desejar adicioná-la a um Layout existente ou Layout Global.

Na tela de layout Seção Builder, selecione o tipo de layout de seção, digite um nome (neste ex amp le, rodapé, possivelmente global rodapé) e clique em Criar Nova Seção Layout, como mostrado abaixo.

A imagem a seguir mostra como gerar uma Seção de Layout diretamente do Layout. As Seções de Layout do seu site devem ser adicionadas a um Layout. Inicialmente, existe apenas um Layout Global. Portanto, para criar um rodapé personalizado global, adicione-o a este layout. Seção de layout de rodapé personalizado e, em seguida, adicione condições à seção Layout de rodapé personalizado para fazer com que o layout apareça de acordo com os critérios.

Não há nada de errado com isso, mas é vital considerar a situação. Se o Layout estiver ativo no momento (ou seja, tiver condições ou for o Layout Global), todas as novas Seções do Layout ficarão imediatamente ativas e vazias. Faz mais sentido primeiro adicionar um rodapé personalizado a um layout global por meio da página Criador de seção de layout e, em seguida, adicioná-lo ao Layout global.

Como alternativa, podemos adicionar um rodapé, cabeçalho ou Seção de layout de coluna a um Layout condicional e, em seguida, criá-lo. As condições não são usadas até que as condições sejam adicionadas. Conforme ilustrado abaixo, podemos alterar a seção Layout do rodapé passando o mouse sobre ela e clicando no ícone de edição.

Adicionando seção de layout de rodapé ao layout condicional

Edição de layout personalizado

O Editor WordPress padrão aparece ao editar uma nova Seção de Layout; você pode usar o Avada Builder ou o Avada Live daqui. Seções de layout personalizado são criadas aqui. Para obter informações adicionais, consulte Criando conteúdo da seção de layout, mas em resumo, você pode construir qualquer coisa aqui.

Seu rodapé personalizado pode conter qualquer coisa que você possa construir no Avada Builder. Você pode ter várias colunas, fotos, etc .; Isso permite uma flexibilidade imensa. A seção Layout é onde o material do rodapé aparecerá. O material vem do Builder e sua criatividade é a única restrição.

Veja o rodapé original construído para a demonstração do táxi abaixo; Isso foi feito alterando as opções de tema e widgets de rodapé.

Taxi Demonstração> Rodapé Basic”src =” https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBxO4AMKlY2tuxFbek-S0Z1PY3oQTE2UmjI4QzZydYbWqscpkwNbIpjTQ=s0 "> Veja o rodapé global personalizado do Avada Layouts.

A versão Desktop deste cabeçalho personalizado é mostrada aqui, mas para compreender corretamente o escopo deste cabeçalho personalizado, você deve visitar o site ativo, que pode ser acessado aqui.

Design de layout condicional

Sem condições em um layout global. Adicionar seções de layout a ele será usado em todas as páginas porque é global. Se você só precisar de um rodapé personalizado em algumas páginas do seu site, como artigos de blog individuais, precisará usar um Layout condicional.

Um Layout Condicional só pode conter Seções de Layout existentes. Em seguida, na aba Selecionar Rodapé do Layout, role até Existente, onde você pode adicionar a Seção de Layout, conforme visto abaixo.

Atribuindo uma seção de layout personalizado

Você deve definir as condições para qualquer Layout Condicional. O Layout fica ativo assim que as condições são especificadas; portanto, se você fizer isso antes de estabelecer a Seção de layout, as páginas que correspondem às condições ficarão vazias.

Para adicionar uma condição, selecione Adicionar uma condição no menu inferior do Layout. Uma caixa de diálogo é exibida, conforme mostrado abaixo. Para mais informações sobre condicionais Layouts, consulte Compreendendo Layouts condicionais, mas para este ex amp le, gostaríamos de selecionar Todas as mensagens na aba Mensagens Condições, como visto abaixo.

Adicionando colunas do construtor Avada Layout

O elemento de coluna, como o elemento de contêiner, é um componente estrutural essencial ao projetar um site Avada.

Adicionar colunas é relativamente fácil com o construtor Avada Layout.

  • Clique no botão ' + Container ' para adicionar um Container à página. Ao inserir um Container, você será solicitado a selecionar uma coluna ou layout de coluna. Você pode criar um Container vazio, mas normalmente você adiciona Colunas nesta etapa.
  • Para adicionar novas colunas a um Container existente, passe o mouse sobre o Container e clique no botão ' + Coluna '. Para adicionar uma nova coluna, clique aqui.
  • No canto superior esquerdo de uma coluna, clique no ícone 'Redimensionar coluna'. Será do mesmo tamanho da sua coluna agora. Por exemplo , uma coluna de 1/4 aparecerá como '1/4 amp Column.
  • Arraste e solte as colunas para reorganizá-las. Você também pode arrastar e soltar colunas em Containers.

Uma coluna só pode ser colocada dentro de um elemento de contêiner com a mesma largura; Geralmente é a largura do site que você definiu para o site. Portanto, se você definir a largura do site como 1200 px, uma coluna de 1/2 terá 600 px de largura. Tamanhos de coluna predefinidos são mostrados abaixo quando adicionados a uma página.

No Avada, você pode definir larguras de coluna (e mais) separadamente em layouts grandes, médios e minúsculos. Como definir a ordem de exibição e o tamanho das colunas em layouts responsivos explica como usar este excelente novo recurso com colunas.

As larguras personalizadas estão em Colunas > Design > Largura . Conforme mostrado abaixo, a utilização de um número percentual permite especificar uma largura personalizada. Assim, o posicionamento é irrestrito

Auto é uma nova opção de largura. Em vez de uma largura fixa, a coluna ocupará o espaço do elemento mais significativo dentro dela. Portanto, só funciona em alguns casos. Você pode alterar a coluna pai para Auto, e a coluna será redimensionada para a largura do elemento.

O Avada também adiciona conjuntos de opções responsivos para contêineres e colunas. No back-end do Builder, você pode ver os ícones responsivos em qualquer coluna, como pode ser visto na imagem abaixo. O Construtor de front-end mostra os ícones responsivos nas opções.

Apenas os novos Flex Containers mostram conjuntos de opções responsivos. Colunas em contêineres herdados não estão disponíveis.

Conclusão

Graças ao Avada Layouts, a capacidade de criar um rodapé personalizado, cabeçalho e adicionar colunas agora é uma realidade e uma opção quase ilimitada. Você não só pode utilizar o poder do Avada Builder para construir praticamente qualquer rodapé ou cabeçalho que possa imaginar, mas também pode aproveitar o poder dos layouts condicionais para mostrá-los ou ocultá-los em qualquer página, categoria, tipo de postagem personalizada ou qualquer combinação de critérios que você pode pensar em usar o Avada Builder.

Quando se trata de layouts WordPress, Avada Layouts é uma virada de jogo no sentido mais literal. O fato de permitir essa liberdade de design e flexibilidade de implantação significa que o processo de criação de rodapés nunca mais será o mesmo.

Deixe um comentário

Seu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *