Na conceção de sítios Web.Animação de textoPode levar a uma experiência de website mais envolvente e interactiva para os utilizadores. Neste artigo, explicarei como implementar texto no Elementor.Efeito de animação fade-in linha a linha.

Porquê utilizar a animação fade-in?

A animação fade-in não só torna o conteúdo da página maisvivamentee também dirige a atenção do utilizador para o conteúdo principal. Ao apresentar o texto linha a linha, pode evitar a sobrelotação de informação e melhorar a experiência do utilizador.

Passos para implementar uma animação fade-in linha a linha

1. instalar e ativar o Elementor

Antes de utilizar qualquer funcionalidade do Elementor, certifique-se de que o plugin Elementor está instalado e ativado. Pode ser instalado seguindo os passos abaixo:

1. Inicie sessão no backend do WordPress.
2. Navegar para "Plug-ins > Instalar novo plug-in".
3. Pesquisar "Elementor" e, em seguida, clique em "Agora a instalar".

4. Quando a instalação estiver concluída, clique em "ativar".

Se tiver instalado o Elementor ProA animação também está disponível com funcionalidades de animação mais avançadas.

2. adicionar widgets de texto

1. Abrir ou criar um novoPáginas/ArtigosEm seguida, utilize o Elementor para o editar.
2. No painel de widgets à esquerda, arraste o ícone "editor de texto" em qualquer local da página.

3) Utilizar as funcionalidades de animação próprias do Elementor

1. Selecione a caixa de texto adicionada e, em seguida, no painel de edição à esquerda, clique em "nível elevado".

2. Desloque-se para baixo para "efeito de movimento", clique para expandir.

3. Em "Ir para a animação"No menu pendente, selecione "desvanecer-se"(Fade In).

4. efeito Fade-in

Para apresentar o texto linha a linha, o conteúdo do texto pode ser processado por segmentação:

1. texto longodividido em várias linhascada linha pode ser colocada individualmente noEm diferentes widgets de texto.
2. Defina a animação de entrada separadamente para cada widget de texto, certificando-se de que cada caixa de texto está definida para "desvanecer-se".
3. Ao definir oTempo de atraso para cada caixa de textopara obter o efeito de visualização linha a linha. Selecione sucessivamente os widgets de texto no menu "efeito de movimento", definir oatraso da animação(por exemplo. 0,2 segundos(matemática) género0,4 segundosetc.), para que o texto seja apresentado sequencialmente, linha a linha.

5. efeito de esbatimento avançado (obrigatório) Elementor Pro)

Se tiver o Elementor Pro, também pode configurar efeitos de animação mais detalhados para cada parágrafo de texto. Exemplo:

1. Abre".efeito de movimento"Parte.
2. Ativar"efeito de deslocação", seleção de transparência "desvanecer-se".

3. Ajuste a velocidade, a direção e o ponto de ativação da animação para que o texto desapareça linha a linha à medida que o utilizador percorre o parágrafo.

6) Pré-visualização e libertação

Depois de concluir todas as definições de animação, clique no canto inferior esquerdo da página "antevisões" para verificar se o efeito é o esperado. Se estiver tudo bem, clique no botão "posto" para ativar uma página com uma animação de texto de esbatimento linha a linha.

resumos

Com o Elementor, é fácil implementar animações de fade-in de texto linha a linha visualmente apelativas que melhoram a experiência do utilizador. Este efeito é particularmente adequado para páginas que necessitam de apresentar conteúdos importantes, tais como descrições de serviços, páginas de marketing e páginas de destino. A utilização correta da animação pode tornar o seu sítio Web mais dinâmico e aumentar a atenção do utilizador para o conteúdo da página.