O Elementor é um poderoso construtor de páginas para WordPress que lhe permite criar sítios Web apelativos sem quaisquer conhecimentos de programação. Um dos elementos mais úteis do Elementor é a lista de ícones. Esta funcionalidade permite-lhe apresentar informações de uma forma visualmente apelativa, quer se trate de listas de tarefas, ligações para redes sociais ou outros conteúdos. Neste guia, mostrar-lhe-ei passo a passo como criar e personalizar uma lista de ícones apelativa.
Principais conclusões
- Com a lista de ícones, pode adicionar facilmente elementos visuais.
- Cada entrada pode ser personalizada com texto, ícones e hiperligações.
- O estilo e a disposição da lista podem ser personalizados de forma flexível.
Instruções passo a passo
Passo 1: Abrir o Elementor e adicionar uma lista de ícones
Em primeiro lugar, abra o editor Elementor no sítio Web em que está a trabalhar. Procure a opção "Lista de ícones" na área de widgets do Elementor. Arraste este widget para a secção desejada da sua página.
Passo 2: Personalizar os elementos da lista de ícones
Assim que o widget for colocado, verá alguns itens da lista por defeito. Pode alterar o número de ícones e de linhas de texto utilizando as opções correspondentes no menu do lado esquerdo. Clique em "Item de lista 1" para editar o texto. Aqui pode introduzir "YouTube", por exemplo.
Passo 3: Selecionar ícones
Para selecionar um ícone adequado para cada item da lista, clique na área dos ícones. Abre-se uma janela na qual pode escolher a partir de uma extensa biblioteca. Procure por "YouTube" e adicione o ícone pretendido.
Passo 4: Adicionar hiperligações
Também pode atribuir um link a cada item da lista. Para o fazer, clique no campo "Link" ao lado do texto e insira o URL correspondente, por exemplo, o link para o seu canal YouTube.
Passo 5: Personalizar o esquema
Pode agora configurar as opções de apresentação. Escolha entre "Em linha" ou "Largura total". Decida como quer visualizar a sua lista de ícones para combinar com o estilo geral do seu sítio Web.
Passo 6: Personalizar o estilo
Aceda ao separador Estilo para alterar o aspeto da sua lista de ícones. Aqui pode definir o espaçamento entre as linhas individuais, ajustar o alinhamento e ativar quaisquer separadores. Por exemplo, escolha uma linha tracejada como separador para um aspeto elegante.
Passo 7: Ajustar as cores
Pode alterar as cores dos seus ícones e texto. Por exemplo, escolha uma cor verde quando passa o rato sobre o elemento. Isto cria um efeito de sombra interativo que os seus visitantes irão notar.
Passo 8: Definir o tamanho dos tipos de letra e a tipografia
Para garantir que o tamanho da letra corresponde visualmente aos ícones, ajuste o tamanho do texto no separador "Texto". Por exemplo, defina o tamanho para 25 e escolha uma cor de letra correspondente para obter um efeito visual harmonioso.
Passo 9: Pré-visualizar e guardar
Quando estiver satisfeito com a sua lista de ícones, clique em "Guardar" para aplicar as alterações. Observe a pré-visualização para ver o aspeto da lista no frontend.
Passo 10: Testar a funcionalidade
Teste as ligações na sua página publicada para se certificar de que tudo funciona como pretendido. Verifique também se os efeitos de foco são apresentados corretamente para garantir a interatividade.
Resumo
Neste guia, você aprendeu como criar uma lista de ícones atraente e funcional com o Elementor para WordPress passo a passo. Só precisa de fazer alguns ajustes simples para adaptar a lista ao seu estilo e otimizar a experiência do utilizador.
Perguntas mais frequentes
Como é que adiciono um novo item à lista de ícones?Pode simplesmente clicar no ícone "+" no widget da lista de ícones para adicionar um novo item.
Posso alterar os ícones depois de os ter adicionado?Sim, pode personalizar qualquer ícone em qualquer altura, clicando no item da lista correspondente.
Como posso alterar as cores dos ícones? Pode alterar as cores dos ícones e do texto na secção de estilo do editor Elementor.
Posso adicionar links para redes sociais?Sim, pode adicionar um link a cada item da lista, ideal para redes sociais.
Existe uma função de pré-visualização no Elementor?Sim, pode ver uma pré-visualização das suas alterações antes de as guardar.
