Como configurar uma seção de heróis
Criação e edição de uma página de capa de site
Como escolher a imagem de fundo correta: dimensões, formato e proporções
Configuração de seu título, subtítulo e outros textos
Como criar uma página de rosto estreita que não ocupe toda a altura da primeira tela
Como aumentar a legibilidade criando um filtro de cores para uma imagem de fundo, preencher uma página de rosto com uma cor sólida e fazer a transição para o próximo bloco
Configuração de um vídeo que será reproduzido em segundo plano ou quando você clicar no botão Play
Como fazer com que uma página de rosto tenha boa aparência em dispositivos móveis
Configuração de um formulário de coleta de dados na página da tela inicial
Adicione cronômetros de contagem regressiva a uma hora e data específicas
Como converter e editar uma página de rosto em Zero Block
A capa é a primeira coisa que as pessoas veem em sua página. Ela apresenta o conteúdo e faz com que as pessoas se interessem por ele ou resume o que torna seu projeto exclusivo. Uma capa geralmente contém uma imagem de fundo: uma foto elegante, um vídeo atraente, uma cor, um gradiente ou uma textura.
Aqui estão algumas dicas que o ajudarão a trabalhar com capas, planos de fundo e vídeos com mais eficiência.
Aqui estão algumas dicas que o ajudarão 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 de sites não têm uma área de visualização fixa. Cada dispositivo tem um tamanho de tela e uma proporção de aspecto diferentes. Além disso, as áreas de visualização variam de navegador para navegador. Por exemplo, os navegadores com uma barra de favoritos fixa oferecem uma área de visualização menor. A imagem da capa é cortada para aparecer sem bordas na tela.
Imagem de fundo
Carregue uma imagem de fundo de capa no painel Conteúdo do bloco→ Imagem de fundo.
Para que a imagem tenha uma ótima aparência, siga estas dicas sobre as melhores configurações para a imagem de fundo.
Melhor tamanho:
Esses são os melhores parâmetros para as imagens carregadas:
Format: JPG
Largura: 1680px
Resolução: 72 dpi
Modelo de cores: RGB
Compressão: 10
Esses são os melhores parâmetros para as imagens carregadas:
Format: JPG
Largura: 1680px
Resolução: 72 dpi
Modelo de cores: RGB
Compressão: 10
Se não estiver satisfeito com a qualidade da imagem, edite-a antecipadamente em um editor gráfico usando o artigo de referência abaixo
Antes de escolher uma imagem, leia nosso artigo "How to Create a Cover For a Website" (Como criar uma capa para um site) em Tilda Education. Ele contém dicas para criar sua própria página de capa e links para sites de fotografia de qualidade.
Formatação de texto
O texto é a parte mais importante de qualquer página de capa, pois é a primeira mensagem que o visitante do site vê. As páginas de capa 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.
Edição de texto ao clicar em um bloco
Edição de texto na seção Content de um bloco
É possível 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 Settings (Configurações) do bloco → Typography (Tipografia).
Formatação de texto usando o painel de controle superior
Alterações de formatação no painel Configurações do bloco
Para criar uma capa legal, consulte 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 Como criar uma proposta de venda exclusiva (USP) para um site para tornar sua página de capa atraente para os visitantes em menos de dez segundos.
Altura da tampa
Uma capa fina tem uma altura de 60% ou 70%, não 100%. Ela tem uma função mais formal, pois a atenção do usuário se volta para as informações que seguem a capa.
Para criar essa capa, acesse o campo "Height" (Altura) nas configurações do bloco. Você pode definir a altura em pixels (por exemplo, 400px) ou em unidades de medida de altura da janela de visualização, porcentagem (1vh é 1% da área visível). Recomendamos definir a altura em vh.
Para criar essa capa, acesse o campo "Height" (Altura) nas configurações do bloco. Você pode definir a altura em pixels (por exemplo, 400px) ou em unidades de medida de altura da janela de visualização, 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
Alteramos o tom da imagem quando queremos tornar o texto da capa facilmente legível. Para fazer isso, abra o painel Settings (Configurações) do bloco de capa e ajuste a cor do filtro. Aqui você pode ver uma imagem de capa à qual foi aplicada uma cor de filtro. Às vezes, é a cor da marca ou a cor primária de um site que é usada para a tonificação.
Alteramos o tom da imagem quando queremos tornar o texto da capa facilmente legível. Para fazer isso, abra o painel Settings (Configurações) do bloco de capa e ajuste a cor do filtro. Aqui você pode ver uma imagem de capa à qual foi aplicada uma cor de filtro. Às vezes, é a cor da marca ou a cor primária de um site que é usada para a tonificação.
Configurações de filtro no painel Content do bloco
Tilda Capa da Central de Ajuda: o filtro gradualmente se transforma em uma cor laranja sólida
Como mesclar a cor com a cor do próximo bloco
Às vezes, a capa deve se mesclar suavemente com o próximo bloco. Para obter esse efeito, a cor do filtro final deve ser definida com 100% de opacidade. A cor do filtro deve ser igual à cor do próximo bloco.
Às vezes, a capa deve se mesclar suavemente com o próximo bloco. Para obter esse efeito, a cor do filtro final deve ser definida com 100% de opacidade. A cor do filtro deve ser igual à cor do próximo bloco.
Fazer a cobertura duas vezes mais alta e aplicar essas duas configurações ao mesmo tempo ajudará você a obter o efeito mostrado abaixo:
Gradiente e preenchimento de cores
Há dois parâmetros de tonalidade 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á à outra sem problemas.
Capa de vídeo
Você pode usar um vídeo em vez de uma imagem. Há duas maneiras de fazer isso.
Como adicionar um vídeo do YouTube
Carregue um vídeo no YouTube ou encontre um já existente. Em seguida, vá para o painel Content (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 exposições 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, o gfycat.com permite tanto a conversão quanto a hospedagem.
Abra o painel Settings (Configurações) do bloco de capa e adicione os links de vídeo aos campos correspondentes.
Abra o painel Settings (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 o seu site, ele verá um vídeo que o navegador dele 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 o seu site, ele verá um vídeo que o navegador dele pode reproduzir. Caso contrário, a capa aparecerá vazia.
Observação importante: Atualmente, não é possível carregar seu arquivo de vídeo em Tilda, mas você pode usar serviços de terceiros que fornecem um link direto para o arquivo de vídeo.
Alguns dos serviços populares de nuvem 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 em seus serviços de hospedagem, como o Selectel e outros.
Alguns dos serviços populares de nuvem 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 em seus serviços de hospedagem, como o Selectel e outros.
Página de rosto para visualização móvel
As telas têm uma grande variedade de proporções e a capa pode aparecer de forma diferente em dispositivos diferentes. Embora as proporções comuns não façam mudanças drásticas na imagem da capa, os dispositivos móveis podem alterá-la de forma irreconhecível. Reserve um tempo para aprender a criar uma capa (ou qualquer outro bloco) compatível com dispositivos móveis 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ê tiver criado uma capa de vídeo com reprodução automática, não se esqueça de adicionar uma imagem no painel Conteúdo do bloco da capa. A imagem será exibida 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ê tiver criado uma capa de vídeo com reprodução automática, não se esqueça de adicionar uma imagem no painel Conteúdo do bloco da capa. A imagem será exibida 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 página de rosto
Você pode encontrar um formulário de entrada de dados nas seguintes páginas de capa: 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 assinatura), CR36 (Capa com uma imagem ou vídeo do YouTube e formulário em duas colunas)
Você pode visualizar a aparência do formulário visitando Block Library → Cover e escolhendo sua opção favorita.
Você pode visualizar a aparência do formulário visitando Block Library → Cover e escolhendo sua opção favorita.
Os formulários nas páginas de rosto desempenham a mesma função e podem ser personalizados da mesma forma que os formulários normais. Para personalizar seu formulário, leia o artigo Como configurar formulários de captura de dados.
Adição de um cronômetro de contagem regressiva
As páginas de capa 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 um evento.
No painel Content (Conteúdo) desses blocos, você pode definir a data, a hora e o fuso horário da hora de início do evento.
No painel Content (Conteúdo) desses blocos, você pode definir a data, a hora e o fuso horário da hora de início do evento.
Se a data estiver definida corretamente, um cronômetro aparecerá na página de rosto.
Conversão de uma página de rosto em Zero Block
Os blocos com capas 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 página de capa personalizada. Isso pode ser feito usando o editor Tilda's Zero Block .
Muitos blocos de capa podem ser convertidos para Zero Block para edição adicional. Para fazer isso, vá para Block Settings (Configurações do bloco), role para baixo e clique no botão "Convert to Zero Block" (Converter para ).
Em seguida, a capa é convertida para Zero Block. O formato será adaptado corretamente. Se você já tiver feito suas alterações, elas não serão salvas, portanto, tenha cuidado ao converter a capa.
Exemplo: Como cortar uma cobertura
Imagem vertical
Imagem quadrada
Imagem horizontal estreita
Imagem horizontal, proporção de aspecto 16:9
