5 maneiras criativas de usar widgets de acordeão: como incorporar gráficos, imagens e muito mais no Elementor

Os programadores Web utilizam frequentemente "Widget de acordeão" (acordeão) para organizar o conteúdo. O widget de acordeão pode mostrar e ocultar conteúdo numa forma em camadas, uma caixa recolhida, dando assim à página um aspeto mais limpo e melhorando a experiência de interação do utilizador. Um widget de acordeão comelemento aninhado(utilizado como expressão nominal)Acordeão Em vez disso, proporciona ao utilizador uma maior flexibilidade, permitindo que dentro de cada secçãoAgrupamento de outros elementos de design, como imagens, botões, vídeosetc.

5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Passo 1: Adicione o widget de acordeão

  1. Abra o editor do ElementorNo seu WordPress página webtalvezcartãoNo editor de páginas do Elementor, abra o editor de páginas do Elementor.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Adicionar widget de acordeão: emBarra de widgets esquerdaPesquise em "Acordeão"Widget". Uma vez encontrado, arraste-o para a área de design da página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Passo 2: Configurar o item do acordeão

  1. Crie um item de acordeãoPor defeito, o widget de acordeão do Elementor contém 3 itens iniciais. Isto pode ser feito clicando no botão "adenda" para adicionar mais itens, ou clique no botão "X"Elimine os itens não pretendidos.
  2. Edite os títulos e o conteúdo dos itens do acordeãoCada item do acordeão contém "legenda"e"elemento(por exemplo, ID CSS, ícone, etc.)". Se clicar na secção de título de cada item, pode editar o texto, por exemplo, alterar o título para "Apresentação gráfica" ou "Apresentação de vídeo", etc., para que o utilizador possa compreender facilmente o conteúdo de cada item.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Incorporar conteúdo criativo em itens de acordeão

1. incorporar gráficos em itens de acordeão

Os gráficos visualizam os dados e são adequados para serem colocados em itens de acordeão para uma apresentação detalhada.

deslocação::

  1. Clique na área de conteúdo do item do acordeão.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Adicione-lhe um widget "HTML" ou "shortcode".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Cole o código do seu gráfico, por exemplo Gráficos do Google talvez Gráfico.js do código gerado. Ajuste os estilos e tamanhos para garantir que os gráficos se adaptam ao conteúdo do acordeão.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Assim, acabámos de adicionar ícones para a primeira parte.

2. galeria de imagens incorporada no acordeão

As galerias de imagens são particularmente adequadas para apresentações de produtos ou estudos de casos para proporcionar aos utilizadores uma experiência mais visual.

deslocação::

  1. Arraste e largue na área de conteúdo do item do acordeão "Galeria de imagens"Widgets.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Carregue as imagens que pretende apresentar e defina a disposição da galeria (por exemplo, grelha, alinhamento, cascata), pretenda efeito de rotaçãoEntão precisa de utilizar o Widget "Image Carousel" do Elementor.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Redimensione e alinhe as imagens para garantir que a galeria tem um aspeto limpo e organizado quando o acordeão está aberto.

3. incorporar conteúdo de vídeo

Os vídeos incorporados permitem que os utilizadores visualizem a informação de uma forma mais intuitiva e são adequados para demonstrações de produtos e tutoriais.

deslocação::

  1. Na área de conteúdo do item do acordeão, adicione "vídeo"Widgets.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Cole a ligação para o seu vídeo (por exemplo YouTube talvez Vimeo).
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Defina opções de reprodução para vídeos, como reprodução automática ou mudo, e redimensione vídeos com base no estilo da página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

4. adicione botões para orientar os utilizadores

Adicionar botões a um acordeão ajuda a orientar o utilizador para acções subsequentes, tais comoSaltar para a página de pormenor ou formulário.

deslocação::

  1. Arraste e largue na área de conteúdo do item do acordeão "botões"Widgets.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Introduza o texto do botão, por exemplo, "Saiba mais"ou"Contacte agora".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Defina o link do botão e personalize a cor e o tamanho do botão nas opções de estilo.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

5. incorporar formulários de contacto para melhorar a interação

A adição de um formulário de contacto ao item do acordeão permite aos utilizadores interagir sem sair da página.

deslocação::

  1. fazer uso de WPForms talvez Formulário de contacto 7 e outros plugins para criar formulários de contacto.
  2. Copie o código curto gerado pelo formulário para a área de transferência.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Na área de conteúdo do item do acordeão, arraste para "código curto" para colar o código curto do formulário. Ajuste o estilo para tornar o formulário coerente com o estilo de design da página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Estilos de acordeão personalizados

Quando tiver terminado de incorporar o conteúdo, pode personalizar ainda mais o estilo do acordeão no Element para o tornar mais compatível com o estilo geral da página.

  1. Expandir definições de estilo: no lado esquerdo do "tipoNo separador ", pode ajustar a cor, o tipo de letra e a cor de fundo do título do acordeão.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Ajustar o ícone do acordeão: em "elemento"Encontre."ícone (informática)", pode personalizar o estilo dos ícones expandidos e recolhidos.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Optimize o espaçamento e a animação: em"Avançado"As definições permitem-lhe ajustar o espaçamento do acordeão, os limites e os efeitos de animação de transição para garantir uma experiência de utilizador suave.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Resumo:

Os widgets de acordeão são uma ferramenta de apresentação de conteúdos comummente utilizada no desenvolvimento Web para tornar a disposição da página mais concisa e melhorar a experiência do utilizador, colapsando e expandindo o conteúdo. Adicionar widgets de acordeão com o Elementor é muito fácil e os programadores podem incorporar gráficos, imagens, vídeos, botões, formulários de contacto e muito mais para tornar cada item do acordeão mais vívido e interativo. Com estilos personalizados, os programadores podem também ajustar o aspeto e as animações do acordeão de acordo com as necessidades da página, criando uma apresentação de conteúdos bonita e funcional.

Os problemas e soluções mais comuns quando utiliza o Accordion Widget (Acordeão) estão listados abaixo:

  1. Os artigos em acordeão não podem ser desdobrados ou arrumados
    • racionalidadeNormalmente causado por conflitos de JavaScript ou outras interferências de plug-ins.
    • curaTente desativar outros plug-ins para confirmar se existe um conflito. Certifique-se de que o Elementor e todos os plug-ins relacionados estão actualizados.
  2. O item do acordeão está em branco
    • racionalidadeA área de conteúdo não foi adicionada corretamente ou ocorreu um erro de carregamento.
    • curaVerifique novamente se o conteúdo de cada item do acordeão foi preenchido e certifique-se de que o conteúdo está formatado corretamente (HTML, códigos curtos, etc.).
  3. Os estilos não têm efeito
    • racionalidadeEstilos personalizados: Os estilos personalizados são substituídos pelos estilos do tema ou de outros plug-ins.
    • curaUtilize CSS personalizadas de maior prioridade nas definições de estilo do Elementor ou verifique o estilo do tema e ajuste-o em conformidade.

Contactar-nos
Não consegue ler o artigo? Contacte-nos para obter uma resposta gratuita! Ajuda gratuita para sítios pessoais e de pequenas empresas!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correio eletrónico: info@361sale.com
Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados
Publicado por photon fluctuations, retweetado com atribuição:https://www.361sale.com/pt/22410

Como (0)
Anterior 1 dias atrás
Seguinte 23 horas atrás

Recomendado

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Contactar-nos

020-2206-9892

QQ咨询:1025174874

Correio eletrónico: info@361sale.com

Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados

客服微信
Se estiver a ter problemas com o seu site WordPress, por favorApresentação de ordens de serviçoA nossa equipa técnica irá fornecer-lhe um serviço de restauro profissional.