Como Criar uma Landing Page Virtual Summit com Divi
Publicados: 2020-07-02A promoção de um evento virtual envolve uma série de estratégias promocionais. Criar uma página de destino convidativa é um deles. Criar uma página de destino para seu encontro virtual é a maneira perfeita de deixar seu público curioso. Com a combinação certa de seções, você pode convidar, informar e reunir participantes registrados. Hoje vamos mostrar a você como criar uma página de destino de cúpula virtual com cinco seções. O design inclui imagens duotônicas e divisores de seção de rolagem. Também incluímos um arquivo JSON para download se você quiser pular o tutorial passo a passo. Na pasta, você também encontrará os gráficos de cabeçalho e rodapé em PNG e AI.
Vamos lá!
Antevisão
Vamos dar uma olhada no design da página de destino em diferentes tamanhos de tela.
Área de Trabalho
Tábua
Móvel
Baixe a página de destino do Virtual Summit GRATUITAMENTE
Para colocar as mãos no layout da página de destino do encontro virtual gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Seções da página inicial do Virtual Summit
Para que sua página de destino faça seu trabalho, ela precisa de um conjunto específico de seções. Além de chamar a atenção do visualizador, as páginas de destino também devem ser convertidas. Uma página de destino de cúpula virtual, por exemplo, precisa incluir informações relevantes e uma frase de chamariz. Todas as seções devem fluir de uma para a outra perfeitamente para que o visualizador se sinta inspirado a agir e se inscrever.
Incluímos as seguintes seções na página inicial do Virtual Summit:
Cabeçalho
A seção de cabeçalho inclui informações importantes como o título da cúpula e a data do evento. Esta é a informação mais importante, por isso está no topo. Nenhum cabeçalho está completo sem uma frase de chamariz e fácil navegação para o resto da página.
Em nosso design, incluímos dois botões com links de âncora que navegam para os palestrantes e seções de programação. Mais importante, incluímos um botão com um link para a seção de registro. Ao longo da página, todos os botões de “cadastro” têm a mesma aparência, de forma a ter unidade visual no design.
Em formação
A segunda seção é uma seção informativa que incita o espectador a considerar a possibilidade de participar do encontro virtual. No design, adicionamos quatro sinopses e uma imagem que pode ser facilmente transformada em um vídeo. As sinopses listam quatro motivos para comparecer à cúpula e a imagem (ou vídeo) é o visual para apoiar a decisão.
Os auto falantes
Na próxima seção, você encontrará um conjunto de módulos de seis pessoas. É aqui que você apresenta os palestrantes que participarão da cúpula. Cada módulo inclui os seguintes elementos:
- Imagem
- Nome
- Posição
- Descrição
- Links de mídia social
Certifique-se de inserir todas as informações relevantes para cada alto-falante. Além disso, tente usar a mesma quantidade de linhas no corpo do texto para manter o design com uma aparência nítida. Como você pode ver, usamos um efeito de cor duotônica nas fotos de todos os alto-falantes para dar ao design uma aparência e um toque interessantes. Abaixo segue um tutorial passo a passo sobre como conseguir este efeito no Photoshop.
Se você tiver mais de seis alto-falantes, simplesmente duplique a linha ou clone os módulos em linhas com mais ou menos colunas.
O horário
A seção de programação é a próxima. Nesta área, compartilhamos elegantemente a programação da cúpula e nos certificamos de que seja estrutural. Para manter o estilo do design do texto, certifique-se de alterar o conteúdo, mas não os níveis do título. Tente manter o conteúdo com aproximadamente o mesmo comprimento para que o design permaneça limpo.
As linhas são organizadas por dias com uma imagem de título e um grupo de sinopses. No final da última coluna, você encontrará um botão de call to action para o público se registrar.
Registro
Por último, mas não menos importante, está a seção de registro. Incluímos um cronômetro de contagem regressiva para adicionar um senso de urgência. O formulário de contato deve estar diretamente vinculado à sua lista de RSVP para que cada convidado seja registrado automaticamente.
Em todo o design da página de destino da cúpula virtual, você encontrará três botões que navegam até esta seção para geração otimizada de leads.
Crie um mapa de gradiente duotônico com o Photoshop
Abrir imagem no Adobe Photoshop
Se você quiser imitar as imagens duotônicas em nosso design, siga as etapas abaixo. Primeiro, abra uma imagem no Photoshop.
Abra Ajustes e selecione Mapa de Gradiente
Abra a barra de ferramentas de ajustes e clique no mapa de gradiente. Na guia de propriedades, clique duas vezes na barra de gradiente para abrir o pop-up de configurações.
Ajustar cores de gradiente
Nas configurações de gradiente, clique duas vezes em cada cor para personalizar as configurações.
Para obter o efeito do nosso design, ajuste o gradiente da seguinte forma:
- Tipo de gradiente: sólido
- Suavidade: 100%
- Opacity Stop # 1: 100%
- Color Stop # 2
- Roxo Escuro # 202060
- Cargo: 19%
- Ponto médio:
- Ponto médio de opacidade: 85%
- Ponto médio da cor: 50%
- Opacity Stop # 2: 55%
- Color Stop #
- Violeta # f895f8
- Posição: 100%
Salvar como um mapa de gradiente personalizado
Adicione um nome para o gradiente e clique em novo para salvá-lo. Em seguida, ele será armazenado em sua biblioteca de gradientes. Salve a imagem para a web com 700 px de altura. Repita o processo com quantas imagens você precisar. Depois de aplicar o mapa de gradiente, selecione o gradiente salvo.
1. Crie a seção do cabeçalho
Adicionar nova seção
Fundo
Vamos começar a recriar a página de destino virtual da cúpula. Crie uma nova página e abra-a com o Divi Builder. Antes de adicionar linhas, adicione uma imagem de fundo e gradiente a uma nova seção. Você encontrará o gráfico de plano de fundo na pasta para download acima.
- Gradiente de Fundo
- Cor 1: # 1f4068
- Cor 2: # 202040
- Imagem de fundo: gráfico do cabeçalho
Dimensionamento
Ajuste a altura mínima a seguir.
- Altura mínima: 1.050 px
Espaçamento
O espaçamento também.
- Preenchimento superior e inferior
- Mesa e telefone: 90px
Visibilidade
Finalmente, ajuste as configurações de visibilidade na guia avançada.
- Excesso horizontal e vertical: oculto
Adicionar nova linha
Estrutura da Coluna
Adicione uma linha com três colunas. Selecione a estrutura de coluna 1/2, 1/4, 1/4.
Dimensionamento
Ajuste o tamanho da linha da seguinte forma:
- Largura: 90%
- Largura máxima: 1800 px
- Alinhamento: Centro
Espaçamento
\ Adicione alguma margem superior também.
- Margem superior: 200px
Coluna 2, 3 Configurações
Espaçamento
Ajuste as configurações para as colunas 2 e 3. Primeiro o espaçamento
- Margem superior: 30px
Visibilidade
Em seguida, oculte as colunas no telefone.
- Desativar em: telefone
Adicionar 1º Módulo de Texto à Coluna 1
Texto
Adicione um primeiro módulo de texto na coluna 1. Insira o título como conteúdo H1.
- Corpo: Conteúdo H1
Texto do Título
Na guia de design, defina o estilo do texto do título a seguir.
- Nível de direção: H1
- Fonte: Alata
- Peso: Negrito
- Alinhamento: Centro
- Cor: Off White #eaea
- Tamanho
- Desktop: 85px
- Tablet: 70px
- Telefone: 44px
- Espaçamento entre letras: 2px
- Altura da linha: 1,1em
- Sombra do Texto: 1ª Opção
- Cor da sombra: rgba (o, 0,0,0.26)
Adicione o 2º Módulo de Texto à Coluna 1
Texto
Adicione um segundo módulo de texto. Insira a data como conteúdo H2.
- Corpo: H2 Content, 15 e 16 de julho de 2020
Texto do Título
Defina o estilo do texto do título a seguir.
- Nível de direção: H2
- Fonte: Alata
- Peso: Regular
- Alinhamento: Centro
- Cor: Fucshia # b030b0
- Tamanho
- Computador e tablet: 60px
- Telefone: 45 px
- Altura da linha: 1,3em
Espaçamento
Adicione algum espaçamento também.
- Preenchimento inferior: 20 px
Adicionar Módulo de Botão à Coluna 1
Texto
Adicione um módulo de botão para a frase de chamariz.
- Botão: Registrar
Ligação
Adicione o link de âncora.
- URL do link: #Register
Alinhamento
Vá para a guia de design e defina o alinhamento.
- Alinhamento do botão: Centro
Estilos personalizados de botão
Defina também o estilo do botão.
- Tamanho do texto
- Desktop: 30px
- Tablet: 25 px
- Telefone: 20px
- Cor do Texto: Branco #ffffff
- Plano de fundo: Roxo # 602080
- Raio da borda: 35px
- Espaçamento entre letras: 1px
- Fonte: Alata
Espaçamento
Finalmente, ajuste o espaçamento.
- Margem Superior
- Tablet e telefone: 15px
- Enchimento superior: 2 px
Adicionar Módulo de Botão à Coluna 2
Texto
Passe para a coluna 2 e adicione um módulo de botão. Adicione a cópia de sua escolha.
- Botão: Alto-falantes
Ligação
Em seguida, adicione um link de âncora.
- URL do link: #Speakers
Alinhamento
Na guia de design, defina o alinhamento.
- Alinhamento de Botão
- Desktop: Right
- Tablet e telefone: centro
Estilo personalizado do botão
Ajuste os estilos de botão personalizados também.
- Tamanho do texto: 24px
- Cor do Texto: Branco #ffffff
- Fundo: Transparente
- Espaçamento entre letras: 1px
- Fonte do botão: Alata
- Raio da borda: 0px
Sombra da caixa
Finalmente, adicione uma sombra de caixa.
- Sombra da caixa: 4ª opção
- Posição horizontal: 0px
- Posição vertical: 5 px
- Cor da sombra: fúcsia: # b030b0
Clonar Módulo de Botão para a Coluna 3
Botão Clone
Clone o botão na coluna 2 e coloque o módulo duplicado na coluna 3.
Módulo de botão de ajuste
Texto
Altere o texto no botão clonado.
- Botão: Programar
Ligação
Altere o link de âncora também.
- URL do link: #Schedule
Alinhamento
Não se esqueça de alterar o alinhamento também.
- Alinhamento de Botão
- Esquerda da Área de Trabalho
Adicionar nova linha
Estrutura da Coluna
Adicione uma nova linha com duas colunas iguais.
Dimensionamento
Ajuste a largura da calha primeiro.
- Largura de calha personalizada: 2
Espaçamento
Adicione espaçamento a seguir.
- Margem Superior
- Telefone: -35px
Visibilidade
Em seguida, ajuste a visibilidade da linha.
- Desativar em: Tablet e Desktop
Clonar Módulo de Botão e Colocar Duplicado na Coluna 1
Botão Clone
Clone o módulo de botão na coluna 2 da linha anterior e coloque o módulo duplicado na coluna 1 da nova linha.
Módulo de botão de ajuste
Estilo personalizado do botão
Ajuste o texto no novo botão.
- Tamanho do texto: 20px
Sombra da caixa
Modifique a sombra da caixa também.
- Posição vertical: 4px
Adicionar Módulo de Botão Clonado à Coluna 2
Botão Clone
Duplique o módulo de botão da coluna 3 na linha anterior. Cole-o na coluna 2 desta linha.
Módulo de botão de ajuste
Texto
Ajuste o conteúdo do texto no botão clonado.
- Texto: Programação
2. Criar seção de informações
Adicionar nova seção
Fundo
Para criar a seção de informações, adicione uma nova seção e estilize o plano de fundo primeiro.
- Gradiente de Fundo
- Cor 1: # 202040
- Cor 2: # 202060
Espaçamento
Adicione um pouco de preenchimento também.
- Enchimento superior: 170px
- Preenchimento inferior: 5 px
Visibilidade
Finalmente, ajuste as configurações de visibilidade na guia avançada.
- Excesso horizontal e vertical: oculto
Adicionar nova linha
Estrutura da Coluna
Adicione uma nova linha com uma coluna. Chamaremos isso de linha do título.
Dimensionamento
Defina o tamanho a seguir.
- Largura: 80%
- Largura máxima: 1800 px
Adicionar Módulo de Texto
Texto
Adicione um módulo de texto.
- Corpo: H2 Content - Por que participar do Digital Marketing Virtual Summit?
Texto do Título
Na guia de design, defina o estilo do texto do título.
- Nível de direção: H2
- Fonte: Alata
- Cor do Texto: Branco #ffffff
- Tamanho
- Desktop: 55px
- Tablet: 45px
- Telefone: 40px
- Espaçamento entre letras: 2px
- Altura da linha: 1,1 em
Adicionar Módulo Divisor
Linha
Agora adicione um módulo divisor e estilize a linha na guia de design.
- Cor da linha: fúcsia # b030b0
Dimensionamento
Ajuste o tamanho a seguir.
- Peso do divisor: 50px
- Altura máxima: 50px
Efeitos de rolagem
Na guia avançada, adicione um efeito de rolagem horizontal.
- Habilitar Movimento Horizontal
- Área de Trabalho
- Compensação inicial: -6
- Offset médio: 50% / 0
- Compensação final: 6
- Tablet e telefone
- Afirmando o deslocamento: -4
- Offset médio: 50% / 0
- Compensação final: 4
Adicionar nova linha
Estrutura da Coluna
Agora adicione uma nova linha com três colunas. Selecione a estrutura de coluna 1/2, 1/4, 1/4.
Dimensionamento
Antes de adicionar módulos, ajuste o tamanho da linha.
- Largura: 80%
- Largura máxima: 1800 px
Configurações da coluna 1
Espaçamento
Além disso, ajuste o espaçamento da primeira coluna.
- Enchimento superior: 20 px
Adicionar Módulo de Imagem à Coluna 1
Imagem
Agora adicione um módulo de imagem à coluna 1. Use uma de suas imagens com o efeito duotônico.
- Imagem: Foto com efeito duotônico
Fronteira
Ajuste as bordas também.
- Cantos arredondados: 15px
Adicionar Módulo Blurb à Coluna 2
Texto
Passe para a coluna 2 e adicione um módulo de sinopse. Insira o conteúdo.
- Título: Faça novas conexões
- Corpo: Conteúdo Descritivo
Imagem
Faça upload da imagem número 1 que você pode encontrar na pasta para download.
- Imagem: PNG de # 1
Imagem e ícone
Ajuste o posicionamento da imagem a seguir.
- Posicionamento: Top
- Alinhamento: Esquerda
Texto do Título
Defina também o estilo do texto do título.
- Nível de direção: H4
- Fonte: Alata
- Cor: Branco #ffffff
- Tamanho: 23px
Texto de corpo
Não se esqueça de estilizar o corpo do texto.
- Fonte: Open Sans
- Cor: Branco #ffffff
- Tamanho: 14px
- Espaçamento entre letras: 1px
CSS customizado
Por fim, adicione um pouco de preenchimento extra com CSS personalizado ao título da sinopse na guia avançada.
- Blurb Title: padding-bottom: 15px;
padding-bottom: 15px;
Clone o módulo do Blurb e coloque a duplicata na coluna 2
Clone Blurb
Duplique a primeira sinopse na coluna 2.
Contente
Atualize o conteúdo.
- Título: Novo Título
- Corpo: Novo Texto Descritivo
Imagem
Em seguida, altere a imagem do número. Você pode encontrar o novo na pasta para download.
- Imagem: PNG de # 2
Excluir Coluna 3 e Clonar Coluna 2
Coluna Clone
Nas configurações de linha, exclua a 3ª coluna e duplique a 2ª. Certifique-se de retornar a estrutura da coluna para 1/2, 1/4, 1/4.
Ajuste o Blurb 1 na coluna 3
Contente
Atualize o conteúdo do texto na sinopse clonada.
- Título: Novo Título
- Corpo: Novo Texto Descritivo
Imagem
Altere a imagem do número também.
- Imagem: PNG de # 3
Ajuste o Blurb 2 na coluna 3
Contente
Modifique o conteúdo desta sinopse também. Primeiro o texto.
- Título: Novo Título
- Corpo: Novo Texto Descritivo
Imagem
Em seguida, altere a imagem do número.
- Imagem: PNG de # 4
3. Criar seção de alto-falantes
Adicionar nova seção
Fundo
Passando para a seção dos alto-falantes. Adicione uma nova seção e estilize o plano de fundo.
- Gradiente de Fundo
- Cor 1: # 202060
- Cor 2: # 162447
Visibilidade
Ajuste as configurações de visibilidade na guia avançada.
- Excesso horizontal e vertical: oculto
Clone a linha do título e coloque a duplicata na nova seção
Linha Duplicada
Duplique a linha do título da seção acima e coloque a duplicata na seção clonada. Chamaremos isso de linha de título 2.
Ajustar Módulo de Texto
Texto
Em seguida, defina o estilo das configurações de texto H3 na guia de design. Ajuste o CSS ID no módulo de texto clonado também. Em seguida, altere a cor da linha do módulo divisor. Agora adicione uma nova linha com 5 módulos de tamanhos iguais. Ajuste o tamanho da linha da seguinte forma: Adicione algum espaçamento também. Adicione o módulo de primeira pessoa à coluna 1. Faça upload da imagem do locutor com o efeito de cor. Recomendamos um tamanho de imagem de 550 x 770 px. Adicione alguns cantos arredondados à imagem a seguir. Em seguida, defina o estilo do texto do título. Defina também o estilo do corpo do texto. Não se esqueça do texto da posição. Finalmente, adicione CSS customizado para preenchimento extra. Nas configurações de linha, exclua as colunas 2-5. Duplique a coluna 1 quatro vezes. Atualize o conteúdo em todos os módulos clonados. Primeiro o texto. Então a imagem. Agora vamos criar a seção de programação. Adicione uma nova seção e estilize o plano de fundo da seguinte maneira: Ajuste as configurações de visibilidade na guia avançada. Clone a linha do título da seção acima e cole nesta seção. Altere o conteúdo do título. Altere o ID CSS no módulo de texto clonado. Altere também a cor da divisória. Agora, adicione uma nova linha com três colunas de tamanhos iguais. Ajuste o tamanho da linha. Adicione algum espaçamento também. Adicione um módulo de texto à primeira coluna. Insira o conteúdo. Vá para a guia de design e estilize o texto do título. Adicione um pouco de espaçamento a seguir. Agora adicione um módulo de apelo à ação com algum conteúdo à sua escolha. Adicione uma imagem de fundo também. Na guia de design, defina o estilo do texto do título. Em seguida, defina o estilo do corpo do texto. Adicione algum espaçamento também. Em seguida, estilize a borda. Finalmente, adicione CSS personalizado para um estilo extra. Passe para a coluna 2 e adicione um módulo de texto. Siga esta estrutura de conteúdo: Na guia de design, defina o estilo do texto. Em seguida, defina o estilo de todos os níveis de título. Estilize a borda também. Duplique o primeiro módulo de texto duas vezes. Altere o conteúdo nos módulos de texto clonados. Remova a borda do último módulo da coluna. Nas configurações de linha, exclua a coluna 3. Duplique a coluna 2. Apague o terceiro módulo de texto na coluna clonada. Atualize o conteúdo em cada novo módulo de texto. Copie o botão “registrar” na seção de cabeçalho e cole-o abaixo do último módulo de texto na coluna 3. Altere o alinhamento do botão para a esquerda. Ajuste um pouco o tamanho do texto. Duplique a 1ª linha na seção de programação. Altere o conteúdo no módulo de texto clonado. Ajuste o conteúdo do módulo de apelo à ação. Altere também a imagem de fundo. Ajuste o conteúdo nos módulos de texto também. A seção final é dedicada ao registro. Adicione uma nova seção e estilize o plano de fundo da seguinte maneira. Você encontrará o gráfico de rodapé na pasta de download acima. Ajuste o espaçamento da seção também. E altere as configurações de visibilidade na guia avançada. Agora adicione uma nova linha com uma coluna. Adicione um divisor invisível para atuar como o link de âncora para a seção. Insira o CSS ID que vincula a todos os botões de “registro”. Adicione uma segunda linha com duas colunas iguais. Ajuste as configurações de dimensionamento da linha. Adicione um módulo de cronômetro de contagem regressiva à primeira coluna. Adicione o conteúdo e a data do evento. A seguir, estilize o plano de fundo. Na guia de design, defina o estilo do texto do título. Defina o estilo do texto dos números também. Além disso, o texto do rótulo. Em seguida, ajuste o tamanho da linha. Adicione um pouco de preenchimento também. Finalmente, estilize a borda. Adicione um novo módulo de formulário de contato à coluna 2. Remova o campo de mensagem. Insira as configurações para cada campo. Na aba de design, em layout, clique em “make fullwidth”. Faça o mesmo para o segundo campo. Volte para as configurações gerais do formulário de contato e adicione algum conteúdo. Em seguida, defina o estilo dos campos da seguinte maneira: Defina também o estilo do texto do título. Ajuste os estilos personalizados dos botões também. Não se esqueça de ajustar o raio da borda. Finalmente, adicione CSS personalizado para preenchimento extra. Foram realizadas! Vamos dar uma olhada no design da página de destino novamente em diferentes tamanhos de tela. Você conseguiu! Qual é a aparência da sua página de destino virtual da conferência? Use este design para seu próprio encontro virtual ou para um cliente de design da web. A navegação é otimizada para conversão com a quantidade certa de informações. Adicionamos divisores de seção de rolagem para um pequeno extra visual também. Deixe-nos saber o que você pensa nos comentários. Você baixou o layout ou seguiu as etapas?
Texto do Título
CSS customizado
Ajustar divisor
Linha
Adicionar nova linha
Estrutura da Coluna
Dimensionamento
Espaçamento
Adicionar Módulo de Pessoa à Coluna 1
Texto
Imagem
Imagem
Texto do Título
Texto de corpo
Texto de Posição
CSS customizado
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Coluna Duplicada 1
Coluna Clone
Ajustar conteúdo para módulos de nova pessoa
Texto
Imagem
4. Criar seção de programação
Adicionar nova seção
Fundo
Visibilidade
Clone Título Linha 2
Linha Duplicada
Ajustar Módulo de Texto
Texto
CSS customizado
Ajustar divisor
Linha
Adicionar nova linha
Estrutura da Coluna
Dimensionamento
Espaçamento
Adicionar Módulo de Texto à Coluna 1
Texto
Texto do Título
Espaçamento
Adicionar apelo à ação à coluna 1
Texto
Fundo
Texto do Título
Texto de corpo
Espaçamento
Fronteira
CSS customizado
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Adicionar Módulo de Texto à Coluna 2
Texto
Texto
Texto do Título
Fronteira
Clonar Módulo de Texto 2 Vezes
Clonar Módulo de Texto
Ajustar Novos Módulos de Texto
Texto
Remover borda do terceiro módulo de texto
Fronteira
Excluir Coluna 3 e Clonar Coluna 2
Clonar colunas
Remover e ajustar módulos de texto
Excluir Módulo de Texto
Ajustar conteúdo
Clonar Módulo de Botão e Colocar Duplicado na Coluna 3
Botão Clone
Módulo de botão de ajuste
Alinhamento
Estilo personalizado do botão
Clone a 1ª linha da seção do cronograma
Clone Row
Ajustar Módulo de Texto na Coluna 1
Texto
Ajustar o módulo de apelo à ação
Texto
Fundo
Ajustar Módulos de Texto
Texto
5. Criar seção de registro
Adicionar nova seção
Fundo
Espaçamento
Visibilidade
Adicionar nova linha
Estrutura da Coluna
Adicionar Módulo Divisor
Visibilidade
ID CSS
Adicionar nova linha
Estrutura da Coluna
Dimensionamento
Adicionar módulo de cronômetro de contagem regressiva à coluna 1
Texto
Fundo
Texto do Título
Texto de Números
Texto da Etiqueta
Dimensionamento
Espaçamento
Fronteira
Adicionar Módulo de Formulário de Contato ao Coluna 2
Elementos
Layout de Campos
Texto
Campos
Texto do Título
Estilos personalizados de botão
Fronteira
CSS customizado
padding-bottom: 30px;
Antevisão
Área de Trabalho
Tábua
Móvel
Isso é um envoltório