Como configurar uma seção de heróis
Criando e editando uma página de capa do site
Como escolher a imagem de fundo certa: dimensões, formato e proporções
Configurando seu título, subtítulo e outro texto
Como fazer uma capa estreita que não ocupe toda a altura da primeira tela
Como aumentar a legibilidade criando um filtro de cores para uma imagem de plano de fundo, preencher uma capa com uma cor sólida e fazer a transição para o próximo bloco
Configurando um vídeo que será reproduzido em segundo plano ou quando você clicar no botão Reproduzir
Como fazer uma capa parecer boa em dispositivos móveis
Configurando um formulário de coleta de dados na página da tela inicial
Adicionar cronômetros de contagem regressiva a uma hora e data específicas
Como converter e editar uma folha de rosto no Zero Block
A capa é a primeira coisa que as pessoas veem na sua página. Ele introduz o conteúdo e solicita que eles o façam ou resume o que torna seu projeto único. Uma capa geralmente contém uma imagem de fundo: uma foto elegante, vídeo atraente, cor, gradiente ou textura.
Aqui estão algumas dicas que ajudarão você a trabalhar com capas, planos de fundo e vídeos com mais eficiência.
Aqui estão algumas dicas que ajudarão você a trabalhar com capas, planos de fundo e vídeos com mais eficiência.
Área visível
Ao contrário das páginas de revistas, as páginas do site não têm uma área visível fixa. Cada dispositivo tem um tamanho de tela e proporção diferentes. Além disso, as áreas visíveis variam de navegador para navegador. Por exemplo, navegadores com uma barra de favoritos fixa fornecem uma área visível menor. A imagem da capa é cortada para aparecer sem borda na tela.
Imagem de fundo
Carregue uma imagem de fundo de capa no painel Conteúdo do bloco→ Imagem de fundo.
Para deixar a imagem ótima, siga estas dicas sobre as melhores configurações para a imagem de fundo.
Melhor tamanho:
Estes são os melhores parâmetros para imagens carregadas:
Formato: JPG
Largura: 1680px
Resolução: 72 dpi
Modelo de cor: RGB
Compressão: 10
Estes são os melhores parâmetros para imagens carregadas:
Formato: JPG
Largura: 1680px
Resolução: 72 dpi
Modelo de cor: RGB
Compressão: 10
Se você não estiver satisfeito com a qualidade da imagem, edite-a com antecedência em um editor gráfico usando o artigo de referência abaixo
Antes de escolher uma imagem, leia nosso artigo "Como criar uma capa para um site" sobre Tilda educação. Ele contém dicas para criar sua própria página de rosto e links para sites de fotografia de qualidade.
Formatação de texto
O texto é a parte mais importante de qualquer página de rosto, pois é a primeira mensagem que um visitante do site vê. As páginas de rosto apresentam um título, subtítulo, descrição e nota superior para transmitir a mensagem e destacar o que é importante.
Você pode preencher as capas com texto de duas maneiras: usando o painel Conteúdo do bloco ou clicando no texto durante a edição da página.
Você pode preencher as capas com texto de duas maneiras: usando o painel Conteúdo do bloco ou clicando no texto durante a edição da página.
Editando o texto ao clicar em um bloco
Editando texto na seção Conteúdo de um bloco
Você pode formatar o texto usando o painel de controle na parte superior ou alterando o tamanho, a cor ou outros parâmetros do texto no painel Configurações do bloco → Tipografia.
Formatando texto usando o painel de controle superior
Alterações de formatação no painel Configurações do bloco
Para criar uma capa bacana, confira o artigo Como Criar uma Capa para um Site com exemplos práticos de combinações de texto e imagem de fundo e o guia Criando uma Proposta de Venda Única (USP) para um Site para tornar sua capa atraente para os visitantes em menos de dez segundos.
Altura da Cobertura
Uma cobertura fina tem uma altura de 60% ou 70%, não 100%. Ele serve uma função mais formal à medida que a atenção do usuário se desloca para as informações que seguem a capa.
Para criar essa capa, vá para o campo " Altura" nas configurações do bloco. Você pode definir a altura em pixels (por exemplo, 400px) ou unidades de medida de altura do visor, porcentagem (1vh é 1% da área visível). Recomendamos definir a altura em vh.
Para criar essa capa, vá para o campo " Altura" nas configurações do bloco. Você pode definir a altura em pixels (por exemplo, 400px) ou unidades de medida de altura do visor, porcentagem (1vh é 1% da área visível). Recomendamos definir a altura em vh.
Cor da capa: configurações de filtro
Como alterar o tom da imagem de fundo
Mudamos o tom da imagem quando queremos tornar o texto da capa facilmente legível. Para fazer isso, abra o painel Configurações do bloco de cobertura e ajuste a cor do filtro. Aqui você pode ver uma imagem de capa à qual uma cor de filtro foi aplicada. Às vezes, é a cor da marca ou a cor primária de um site que é usada para tonificação.
Mudamos o tom da imagem quando queremos tornar o texto da capa facilmente legível. Para fazer isso, abra o painel Configurações do bloco de cobertura e ajuste a cor do filtro. Aqui você pode ver uma imagem de capa à qual uma cor de filtro foi aplicada. Às vezes, é a cor da marca ou a cor primária de um site que é usada para tonificação.
Configurações de filtro no painel Conteúdo do bloco
Tilda tampa da Central de Ajuda: o filtro gradualmente se transforma em cor laranja sólida
Como mesclar a cor na cor do próximo bloco
Às vezes, a tampa deve se misturar suavemente no próximo bloco. Para obter esse efeito, a cor do filtro final deve ser definida em 100% de opacidade. A cor do filtro deve ser a mesma que a cor do próximo bloco.
Às vezes, a tampa deve se misturar suavemente no próximo bloco. Para obter esse efeito, a cor do filtro final deve ser definida em 100% de opacidade. A cor do filtro deve ser a mesma que a cor do próximo bloco.
Fazer a cobertura duas vezes mais alta ao aplicar essas duas configurações ao mesmo tempo ajudará você a obter o efeito mostrado abaixo:
Gradiente e Preenchimento de Cor
Há dois parâmetros de tonificação nas configurações do bloco: opacidade e cor. Defina a opacidade como 100% e selecione uma cor — essa será a cor da capa.
Se você selecionar cores diferentes, uma se misturará suavemente com a outra.
Capa de Vídeo
Você pode usar um vídeo em vez de uma imagem. Existem duas maneiras de fazer isso.
Como adicionar um vídeo do YouTube
Envie um vídeo para o YouTube ou encontre um existente lá. Em seguida, vá para o painel Conteúdo do bloco de capa e cole o link do vídeo no campo apropriado. Dessa forma, você pode criar uma capa de vídeo.
Nossa empresa
Especialistas na arte
A Art Basel organiza mostras de arte moderna e contemporânea de alta qualidade e é realizada anualmente em Basel, Miami Beach e Hong Kong
Como adicionar vídeos WebM e MPEG-4
Você pode usar conversores on-line para criar vídeos WebM e MPEG-4 e hospedá-los em seu servidor ou no site do serviço de conversão. Por exemplo, gfycat.com permite tanto a conversão quanto a hospedagem.
Abra o painel Configurações do bloco de capa e adicione os links de vídeo aos campos correspondentes.
Abra o painel Configurações do bloco de capa e adicione os links de vídeo aos campos correspondentes.
Por que usar os dois formatos?
Os navegadores usam formatos diferentes, portanto, não há um formato unificado. Quando um usuário acessa seu site, ele verá um vídeo que seu navegador pode reproduzir. Caso contrário, a capa aparecerá vazia.
Os navegadores usam formatos diferentes, portanto, não há um formato unificado. Quando um usuário acessa seu site, ele verá um vídeo que seu navegador pode reproduzir. Caso contrário, a capa aparecerá vazia.
Ponto importante: Atualmente, não é possível carregar seu arquivo de vídeo para o Tilda, mas você pode usar serviços de terceiros que fornecem um link direto para o arquivo de vídeo.
Alguns dos serviços de nuvem populares também fornecem um link direto para um arquivo. Por exemplo, para obter um link direto para um arquivo de vídeo no Dropbox, você precisa substituir o link dropbox.com por dl.dropboxusercontent.com. Você também pode carregar o arquivo para seus serviços de hospedagem, como Selectel e outros.
Alguns dos serviços de nuvem populares também fornecem um link direto para um arquivo. Por exemplo, para obter um link direto para um arquivo de vídeo no Dropbox, você precisa substituir o link dropbox.com por dl.dropboxusercontent.com. Você também pode carregar o arquivo para seus serviços de hospedagem, como Selectel e outros.
Página de capa para visualização móvel
As telas têm uma ampla gama de proporções e a capa pode aparecer de forma diferente em diferentes dispositivos. Embora as proporções comuns não façam mudanças drásticas na imagem da capa, os dispositivos móveis podem alterá-la irreconhecível. Reserve um tempo para aprender como criar uma capa compatível com dispositivos móveis (ou qualquer outro bloco) usando este guia abrangente.
Por que os vídeos de capa não são reproduzidos em dispositivos móveis
Devido às peculiaridades do sistema operacional móvel, as capas de vídeo não serão reproduzidas em dispositivos móveis. O sistema operacional móvel desativa a reprodução automática. Se você fez uma capa de vídeo de reprodução automática, não se esqueça de adicionar uma imagem no painel Conteúdo do bloco de capa. A imagem aparecerá quando o vídeo não puder ser reproduzido, ou seja, quando os visitantes acessarem seu site a partir de smartphones ou tablets.
Devido às peculiaridades do sistema operacional móvel, as capas de vídeo não serão reproduzidas em dispositivos móveis. O sistema operacional móvel desativa a reprodução automática. Se você fez uma capa de vídeo de reprodução automática, não se esqueça de adicionar uma imagem no painel Conteúdo do bloco de capa. A imagem aparecerá quando o vídeo não puder ser reproduzido, ou seja, quando os visitantes acessarem seu site a partir de smartphones ou tablets.
Formulário em uma folha de rosto
Você pode encontrar um formulário de entrada de dados nas seguintes capas: CR26 (Capa com um campo de entrada), CR26AN (Capa com várias entradas), CR32 (Capa com um formulário alinhado à direita), CR34 (Capa com uma contagem regressiva e formulário de inscrição ), CR36 (Capa com imagem ou vídeo do YouTube e formulário em duas colunas)
Você pode visualizar a aparência do formulário visitando a Biblioteca de Blocos → Capa e escolhendo sua opção favorita.
Você pode visualizar a aparência do formulário visitando a Biblioteca de Blocos → Capa e escolhendo sua opção favorita.
Os formulários nas folhas de rosto desempenham a mesma função e podem ser personalizados da mesma forma que os formulários regulares. Para personalizar seu formulário, leia o artigo Como configurar formulários de captura de dados.
Adicionando um cronômetro de contagem regressiva
As capas dos blocos CR34 e CR35 apresentam um cronômetro de contagem regressiva até um momento específico no futuro. Esse recurso é especialmente útil se você estiver criando uma página para uma promoção ou evento.
No painel Conteúdo desses blocos, você pode definir a data, hora e fuso horário do horário de início do evento.
No painel Conteúdo desses blocos, você pode definir a data, hora e fuso horário do horário de início do evento.
Se a data estiver definida corretamente, um cronômetro aparecerá na capa.
Convertendo uma folha de rosto em Zero Block
Blocos com tampas são exemplos experimentados e testados de bom design que se adaptam automaticamente a todos os dispositivos. Mas às vezes você precisa adicionar um elemento ou criar uma folha de rosto personalizada. Isso pode ser feito usando o editor de Zero Block do Tilda.
Muitos blocos de capa podem ser convertidos em Zero Block para edição adicional. Para fazer isso, vá para as configurações de bloqueio, role para baixo e clique no botão "Converter para Zero Block".
Em seguida, a capa é convertida em Zero Block. O formato será adaptado corretamente. Se você já fez suas alterações, elas não serão salvas, portanto, tenha cuidado ao converter a capa.
Exemplo: Como recortar uma capa
Imagem vertical
Imagem quadrada
Imagem horizontal estreita
Imagem horizontal, proporção de 16:9
