Criar uma seção com largura total

Antes de seguir etapas específicas, você pode conferir este vídeo para ter uma demonstração geral de como definir a largura total para apresentação de slides, vídeo, imagem e outros elementos

Nesse artigo, você aprenderá como criar uma seção que se expande para a largura total da página.

3 passos para criar uma seção com largura totalClick to copy

Etapa 1: Adicionar o layout de seção completaClick to copy

Dentro do editor do PageFly, selecione Adicionar Elemento > Layout e arraste a Seção Completa.

creat a full-width section

Etapa 2: Desativar a opção Definir largura fixaClick to copy

Selecione a nova Seção criada que você acabou de arrastar no canvas ( A Linha Pontilhada no final da página irá mostrar exatamente qual elemento está selecionado). Na aba Geral da Seção, desabilite a opção Definir Largura Fixa.

Etapa 3: Carregar banner de imagemClick to copy

Na aba Estilo, busque a seção PLANO DE FUNDO.

  • Faça o upload do seu banner de imagem, vá para a guia Estilo, role para baixo até o parâmetro PLANO DE FUNDO e faça o upload da imagem de plano de fundo aqui, como na imagem abaixo:

Você pode fazer upload da imagem disponível no Image Manager ou fazer upload da Internet. Leia aqui para saber mais detalhes.

  • Quando a imagem for carregada, clique no botão Mais Configurações.
    • Mude a Posição do Plano de Fundo para combinar com o ponto de foco da imagem (essa configuração será usada para definir qual parte da sua imagem será exibida em visões responsivas)
    • Mude o Tamanho do Plano de Fundo para “Capa”.

creat a full-width section pagefly

Na aba Estilo, busque a seção ESPAÇAMENTO

  • Edite o Espaçamento de Topo e Espaçamento Inferior para mudar a altura da seção para ajustar a altura da sua imagem.
  • A pequena caixa no meio irá definir o mesmo valor para todos os lados do Espaçamento e da Margem.

Não se esqueça de Salvar & Publicar seu trabalho. É isso! Você completou todos os passos para criar uma fabulosa seção com largura total para sua página de Desktop/Laptop. Super fácil, não é mesmo?

Nota importante:Click to copy

Alguns temas do Shopify agrupam o conteúdo do seu site em uma largura fixa.

E com alguns temas, mesmo que você tenha seguido as etapas anteriores, ele ainda não está com largura total como esta

Portanto, você precisa seguir estas etapas:

  • Primeiro, abra a janela Adicionar código personalizado

  • Copie esse código
    • .main-content { max-width: 100%; padding: 0;}

OU este código:

    • .main-content .wrapper {
      width: 100%;
      max-width: 100%;
      padding: 0!important;
      }

e cole um desses códigos na seção Editor de código personalizado

Clique em Salvar alteração e publique sua página novamente

Por fim, verifique o resultado na Página ao vivo.

Neste exemplo, estamos usando o segundo código para o armazenamento de amostra que está usando o tema Brooklyn:

Lembre-se de Salvar e Publicar para ver a Visualização ao vivo

Se você adicionar um desses códigos, mas ele ainda não funcionar, não se preocupe e entre em contato conosco pela janela de bate-papo ao vivo para que possamos ajudá-lo a corrigi-lo. A explicação para este caso é que nem todos os temas do Shopify podem funcionar com esses códigos e precisamos verificar o tema que você está usando, para que possamos corrigi-lo.

Otimização para Dispositivos MóveisClick to copy

Você pode verificar o desenho para dispositivos móveis clicando na opção Dispositivos Móveis no menu superior.

Você pode ver o valor assignado anteriormente ao parâmetro bottom-padding de 350px, a imagem de plano de fundo ficou estreita e não ficou boa na versão móvel.

creat a full-width section 1

O PageFly permite a customização do dispositivo na aba Estilo (Ex. mudanças na aba estilo são únicas para cada dispositivo), então escolha a Seção > aba Estilo > ESPAÇAMENTO > defina o Padding-bottom para o valor desejado (0px no nosso caso)

create a full-width section with PageFly

Clique em Salvar & Publicar e verifique o resultado na página ao vivo em seu dispositivo móvel.

Você pode consultar este vídeo para saber detalhes sobre como definir a largura total para uma seção da sua página, bem como outros problemas relacionados ao conflito do tema

Thank you for your feedback!

Navigate this category

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!