Como usar o construtor de cabeçalho, rodapé e layout de coluna 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 back-end, e Avada Live, que é nosso construtor front-end, que foi introduzido recentemente com o Avada 6.0 .

Usando nosso sistema simples de contêineres, colunas e elementos, ambas as versões do Avada Builder permitem que você crie facilmente belos layouts de página para o seu site. Avada Builder é uma ferramenta fantástica para web designers modernos e proprietários de sites, pois lhes dá controle total 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 completamente 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 aos seus Layouts e especifica Condições para que seus Layouts Condicionais entrem em vigor.

O Layout Builder pode ser acessado no painel Avada selecionando Layouts > Layout Builder no menu suspenso. Uma das maneiras mais diretas de descrever Layouts é dizer que eles são contêineres que abrigam 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: Noções básicas sobre layouts e seções de layout (PDF). Continue lendo para saber mais sobre o que você pode fazer nesta página.

Duas partes estão localizadas no topo 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 há uma área a partir da qual você pode criar 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 ou condição de layout é especificada.

À medida que você cria Layouts, eles são automaticamente importados para a página do 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 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.

Dentro de 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á atribuir uma seção de layout a essa seção do layout quando você passar 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 do zero.

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. Por amp , um rodapé personalizado requer uma seção de layout de rodapé, que pode ser adicionada ao layout global ou personalizado. Veremos como construir uma seção de layout de rodapé personalizado na próxima seção, mas primeiro, vamos dar uma olhada em Introdução aos layouts 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 ao Layout Condicional, sendo exibida apenas em determinados tipos de postagem personalizados ou páginas únicas. O Layout Global já está presente, mas primeiro precisamos desenvolver um Layout Condicional.

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 ao layout global.

Na tela Layout Section Builder, selecione o tipo de Seção de Layout, insira um nome (neste amp , Rodapé, possivelmente Rodapé Global) e clique em Criar Nova Seção de Layout, conforme 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 simplesmente 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 o layout aparecer de acordo com os critérios.

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

Alternativamente, podemos adicionar uma seção de layout de rodapé, cabeçalho ou coluna a um layout condicional e então 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.

Edição de layout personalizado

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

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

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

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ó precisasse de um rodapé personalizado em algumas páginas do seu site, como artigos únicos de blog, seria necessário usar um layout condicional.

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

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 Layout, as páginas que atendem à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 aparece, conforme mostrado abaixo. Para obter mais informações sobre layouts condicionais, consulte Noções básicas sobre layouts condicionais, mas para este amp , selecionaríamos Todas as postagens na guia Condições das postagens, conforme visto abaixo.

Adicionando colunas do construtor Avada Layout

O Elemento Coluna, assim como o Elemento Container, é 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 contêiner, você será solicitado a selecionar uma coluna ou layout de coluna. Você pode criar um contêiner vazio, mas normalmente adiciona colunas nesta etapa.
  • Para adicionar novas colunas a um contêiner existente, passe o mouse sobre o contêiner 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 amp uma coluna 1/4 aparecerá como '1/4 ' na opção Redimensionar coluna.
  • Arraste e solte colunas para reorganizá-las. Você também pode arrastar e soltar colunas em contêineres.

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

No Avada, você pode definir larguras de colunas (e mais) separadamente em layouts grandes, médios e pequenos. Como definir a ordem de exibição e o tamanho das colunas em layouts responsivos explica como usar esse 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.

Avada também adiciona conjuntos de opções responsivas 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 Front-End Builder mostra os ícones responsivos nas opções.

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

Conclusão

Graças ao Avada Layouts, a capacidade de criar rodapé e cabeçalho personalizados e adicionar colunas agora é uma realidade e uma opção quase ilimitada. Você não apenas 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 personalizado ou qualquer combinação de critérios que você pode imaginar usando o Avada Builder.

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

Hanson F.

Postagens recentes

Como usar cabeçalhos e rodapés com Elementor

Os cabeçalhos e rodapés de um site são elementos essenciais. Na maioria dos casos, o cabeçalho fornece navegação…

6 de janeiro de 2022

Comparação de temas WordPress: Astra vs OceanWP

Dois dos temas WordPress mais populares do mercado são Astra e OceanWP. Profissional…

2 de janeiro de 2022

Comparação de temas de notícias do WordPress: Jornal vs. Astra

Criar um excelente site de notícias não exige que você se torne um web designer. Nós…

25 de outubro de 2021

Crie um site relacionado a notícias com tema de jornal

O tema Jornal é um dos temas WordPress mais importantes desenvolvido por tagDiv, um…

18 de outubro de 2021

Como construir um comércio eletrônico com o construtor Avada WooCommerce

Quando se trata de abrir uma loja online, WooCommerce é o plugin ideal. Isto…

4 de outubro de 2021

Como usar cabeçalho fixo e efeitos de rolagem com Elementor

Um cabeçalho geralmente é a primeira coisa que uma pessoa vê quando visita seu site,…

21 de setembro de 2021