Como criar designs adesivos personalizados “Voltar ao topo” com Divi

Publicados: 2019-06-19

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, vamos mostrar como criar designs adesivos personalizados de volta ao topo com o Divi e o Green Energy Layout Pack. Essa técnica o ajudará a melhorar a experiência do usuário em suas páginas, enquanto aproveita as vantagens das opções integradas do Divi no lado do design. Esperamos que este tutorial inspire você a criar seus próprios designs alternativos de volta ao topo e usá-los em seu próximo site!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado deste tutorial.

GIF

de volta ao topo

Exemplo 1

de volta ao topo

Exemplo # 2

de volta ao topo

Exemplo # 3

de volta ao topo

1. Adicionar Smooth Scroll to Page HTML

Faça upload da página inicial de energia verde para uma nova página

A primeira coisa que você precisa fazer é criar uma nova página e carregar a página de destino do Pacote de Layout de Energia Verde.

de volta ao topo

Abra as configurações da página

Abra as configurações da página clicando no ícone marcado na tela de impressão abaixo:

de volta ao topo

Adicionar Smooth Scroll para Custom CSS Box

Vá para a guia avançada e adicione um comportamento de rolagem suave a toda a página, adicionando o seguinte código CSS à caixa CSS personalizada:

html {
scroll-behavior: smooth;
}

de volta ao topo

2. Adicionar CSS ID à seção Hero

Seção Open Hero

O design de volta ao topo redirecionará os visitantes para a seção de heróis. Para fazer isso, você precisará abrir as configurações da seção do herói primeiro.

de volta ao topo

Adicionar CSS ID

Em seguida, vá para a guia avançada e adicione um ID CSS à seção. Posteriormente nesta postagem, adicionaremos um link de âncora que levará os visitantes a esta seção.

ID CSS: seção-1

de volta ao topo

3. Adicionar nova seção ao final da página com o design "Voltar ao início"

Passos Gerais

Adicionar nova seção regular ao final da página

Como você pode notar na prévia deste post, vamos recriar três exemplos de design diferentes. Para agilizar o processo, começaremos com algumas etapas gerais primeiro e nos concentraremos em cada exemplo de design individualmente mais tarde na postagem. Adicione uma nova seção regular ao final de sua página.

de volta ao topo

Espaçamento

Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.

Preenchimento superior: 0 px
Preenchimento inferior: 0 px

de volta ao topo

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

de volta ao topo

Adicionar link âncora

Assim que alguém clicar em toda a linha, queremos que ele seja redirecionado para o topo da página. Para fazer isso, vamos adicionar um link que redireciona para a seção herói da página.

URL do link da linha: yourwebsite.com/page/#section-1

de volta ao topo

Alinhamento de linha

Também estamos colocando a linha no lado direito do contêiner da seção.

Alinhamento de linha: direita

de volta ao topo

Posição fixa

Em seguida, estamos corrigindo toda a linha acessando a guia avançada da linha e atualizando as seguintes opções de posição:

Cargo: Fixo
Deslocamento vertical: 30px
Deslocamento horizontal: 30px
Índice Z: 99

Além de tornar a linha fixa, garantimos que a linha se sobreponha a todo o conteúdo da página, aumentando o índice z.

de volta ao topo

Recriar o exemplo de design # 1

de volta ao topo

Configurações de linha

Alterar Estrutura da Coluna

Agora que passamos por todas as etapas gerais, vamos recriar os três exemplos diferentes que você pôde ver no início deste post. Vamos começar com o primeiro! Altere a estrutura da coluna da linha:

de volta ao topo

Cor de fundo

Continue abrindo as configurações de linha e adicione uma cor de fundo branca.

Cor de fundo: #ffffff

de volta ao topo

Dimensionamento

Vá para a guia de design e altere as configurações de dimensionamento.

Use largura de calha personalizada: 1
Largura: 9vw (desktop), 23vw (tablet), 35vw (telefone)

de volta ao topo