Como o Elementor cria um pop-up e o configura

我们在使用Elementor编辑器构建网页的时候,Elementor的弹出窗口这个功能也不错;这个功能可以帮助你吸引用户的注意力,提供重要的信息或优惠活动等。我们看看Elementor如何创建一个弹出窗口并配置弹出窗口

Como o Elementor cria um pop-up e o configura

创建一个弹出窗口

首先,需要创建一个弹出窗口,可以按照下面的步骤设置你的第一个弹出窗口。按照这个指南,使用的是按钮手动触发弹出窗口。

  1. 转到仪表盘> 模板 > 弹出窗口 > 添加新的
  2. 为模板命名并单击“Criar um modelo"
  3. 从库中选择模板或创建你自己的设计
  4. Clique em "posto" e, em seguida, clique em "Guardar e fechar"
  5. 在 Elementor 中打开新页面(CTRL / CMD + E,新页面)
  6. 拖入按钮小部件
  7. 在“布局”下,选择“链接”>“动态”>“操作”>“弹出窗口”
  8. clicar (utilizando um rato ou outro dispositivo apontador)janela pop-up>Abra a janela pop-up> 选择您创建的弹出窗口
  9. 转到实时页面,单击按钮并看到弹出窗口出现

对于单击按钮时出现的这种类型的基本弹出窗口,  不需要条件、 触发器或 高级规则。

这是基本设置。尝试一下以掌握如何使用 Elementor 弹出窗口。

配置弹出窗口

弹出窗口是在特定时刻或特定触发器和条件下弹出并覆盖页面的行动召唤模式窗口。弹出窗口的设计目的是在用户采取行动后集中其注意力。

Primeiro, vá paraModelos > Janela pop-up。控制弹窗的布局、条件、规则和样式,然后设计弹窗内容。tomar nota de:单击面板底部工具栏中的弹出设置齿轮图标可编辑弹出设置。

Como o Elementor cria um pop-up e o configura

Conceber janelas pop-up

preparar

abertura (jargão do xadrez)

  1. amplitude:设置弹出窗口的确切宽度,使用 px 或 vh
  2. Height:使用 px 或 vh 设置弹出窗口的确切高度。使用 100vh 的宽度和高度来创建全屏弹出窗口
  3. nível (de realização, etc.)Selecione a posição horizontal da janela pop-up, à esquerda, ao centro ou à direita
  4. perpendicularSelecione a posição vertical da janela pop-up, de cima, ao centro ou de baixo
  5. Overlay:显示或隐藏背景叠加
  6. botão de fecharEscolha mostrar ou ocultar o botão de fechar
  7. 多少 秒后显示按钮(如果选择显示关闭按钮):选择显示关闭按钮之前等待的秒数
  8. 入口动画:从下拉选项中选择弹出窗口的入口动画,例如淡入淡出和缩放。选择任何动画效果来预览效果。
  9. Animação de saída:从下拉选项中选择弹出窗口的退出动画,例如淡入淡出和缩放。选择任何动画效果来预览效果。
  10. 动画持续时间: define a duração da animação em milissegundos

Definições gerais

  1. legenda:输入弹出窗口的标题。该标题只会显示在后端,不会显示给用户。
  2. situação atual:草稿、待审、私有或已发布

Definições de pré-visualização

将动态内容预览为:从任意档案、页面、帖子、媒体或 404 页面中进行选择。

    注意:要查看选择的内容,必须在选择动态内容后重新加载页面。

    penteado

    Como o Elementor cria um pop-up e o configura
    1. Tipo de fundoSelecione a cor de fundo, a imagem ou o gradiente
    2. Tipo de fronteira:选择边框类型,可以选择无、实线、双线、点线、虚线或凹槽
    3. Raio da fronteiraRaio do limite: defina o raio do limite para controlar o arredondamento dos cantos de cada lado da janela pop-up
    4. sombra da molduraOpções de sombreamento da caixa de ajuste

    sobrescrever

    Tipo de fundoSelecione a cor de fundo, a imagem ou o gradiente

      botão de fechar

      1. colocação:选择在弹出窗口的内部或外部显示关闭按钮
      2. posição vertical:使用滑块选择关闭按钮的垂直位置
      3. posição horizontal:使用滑块选择关闭按钮的水平位置

      正常 |悬停

      1. cor:选择“正常”和“悬停”状态下“关闭”按钮的颜色
      2. cor de fundoEscolha a cor de fundo do botão Fechar nos estados Normal e Hover.
      3. Tamanho : 设置关闭按钮的大小

      elevado

      Como o Elementor cria um pop-up e o configura

      elevado

      1. 显示关闭按钮的时间间隔(秒):输入秒数。关闭按钮仅在该时间过后才会出现。
      2. Tempo de desativação automática (ms):输入自动关闭弹出窗口之前要等待的毫秒数。留空以禁用自动关闭。
      3. 防止关闭叠加层:选择“是”可防止用户通过单击叠加层来关闭弹出窗口。
      4. 阻止按 ESC 键关闭:选择“是”可阻止用户通过按 ESC 键关闭弹出窗口。
      5. Desativar a deslocação da página:选择“是”以防止用户滚动弹出窗口后面显示的页面
      6. 避免多个弹出窗口:如果用户在他访问的页面上看到另一个弹出窗口,请选择“是”隐藏此弹出窗口
      7. 通过选择器打开Introduza a lista de selectores (IDs CSS, classes ou elementos de dados) que activarão manualmente o popup.
      8. margemAjustamento das margens
      9. PaddingAjuste o preenchimento da janela pop-up
      10. Classe CSS: adicione classes personalizadas sem pontos (por exemplo, my-class)

      CSS personalizado

      CSS personalizado:输入你自己的 CSS

      Controlar pop-ups através das definições de publicação

      Definição das condições

      pré-requisito允许你设置弹出窗口将显示在网站的哪些页面上。

      Como o Elementor cria um pop-up e o configura

      设置确定弹出窗口使用位置的条件(不包括手动触发)。例如,添加“包含”条件并选择“Singular”>“首页”以仅在站点主页上显示弹出窗口。

      Definir accionadores

      flip-flop (eletrónica)是导致你的广告活动弹出的用户操作。对于将导致出现弹出窗口的每个选项,选择“是”或“否”。

      Como o Elementor cria um pop-up e o configura
      1. Quando a página carrega:如果设置为“是”,则设置页面加载时触发弹出窗口之前等待的秒数。
      2. rolante:如果设置为“是”,请在触发弹出窗口之前选择方向(向上或向下)和滚动量。向下滚动是根据页面向下滚动的por cento;向上滚动基于向上滚动的像素数.
      3. On Scroll To Element:如果设置为 Yes,请输入选择器名称 (CSS ID),当用户滚动到它时将触发弹出窗口。还必须将 CSS ID 添加到元素的“高级”选项卡中。
      4. 单击时:如果设置为“是”,请输入将触发弹出窗口的单击次数
      5. pós-inatividade:如果设置为“是”,请输入将触发弹出窗口的用户不活动秒数。
      6. On Page Exit Intent:设置为“是”,以在用户的​​鼠标活动指示退出页面的意图时触发弹出窗口

      Regras avançadas

      Regras avançadasEspecifica os requisitos adicionais que devem ser cumpridos para gerar o popup.

      Como o Elementor cria um pop-up e o configura
      1. 在多少次页面浏览后显示:如果设置为是,则设置触发弹出窗口之前的页面浏览数。
      2. 在多少个会话后显示:如果设置为“是”,则设置触发弹出窗口之前的用户会话数(会话在用户访问网站时开始,在用户关闭浏览器时结束)。
      3. 显示最多多少次:弹出窗口显示的最大次数。如果“计数”设置为“打开时”,则仅允许弹出窗口打开所设置的次数。如果将“计数”设置为“关闭时”,则弹出窗口只会打开,直到用户第 X 次关闭它,之后将不会再次打开。此设置在本地存储中设置,并将保留在那里直至删除。
      4. 从特定 URL 到达时:如果设置为“是”,则在用户从特定 URL 到达时显示或隐藏弹出窗口(输入特定 URL)。 Regex 是高级用户设置匹配 URL 模式的高级规则的选项。
      5. Apresentação à chegada:如果设置为是,则显示用户是否从搜索引擎、外部链接(输入特定链接的 URL)和/或内部链接(输入特定链接的 URL)到达。
      6. 对登录用户隐藏:设置为“是”可为所有登录用户或选定的自定义角色隐藏弹出窗口。对于有缓存的网站,此功能可能无法正常工作
      7. Apresentado no dispositivo:设置为“是”以选择在台式机、平板电脑和/或移动设备上显示

      Atenção:如果页面未重新加载或重新进入,则弹出窗口无法显示多次。

      Como o Elementor cria um pop-up e o configura

      Controle os pop-ups através de acionamento manual

      可以手动触发弹出窗口。动态链接可以使用 Popup Action 来打开或关闭 Popup。表单可以使用“提交后操作”选项来打开或关闭弹出窗口。任何元素都可以使用唯一的选择器(类、ID 或数据元素)在单击该元素时手动触发弹出窗口。

      • A partir de qualquer elemento ligado, selecioneDynamic > Actions > PopupClicar no Clique no botão“弹出窗口”escolha por“打开弹出窗口”talvez“关闭弹出窗口”。如果选择关闭弹出窗口,“já não é apresentado" ficará disponível.
      • No formulário do Elementor, selecione提交后操作 > 添加操作 > 打开弹出窗口或关闭弹出窗口
      • 从自定义选择器:任何元素都可以有一个选择器集,可用作手动弹出触发器。编辑元素并转到高级 > CSS 类(ouID CSS),然后为元素指定类名称(不带前面的点)或 ID 名称(不带前面的 #)。在弹出窗口的Condições中,使用唯一选择器选择包含该元素的页面(例如Conditions > Include > Singular > Pages > Your Page Title)。当用户访问该页面并单击该元素时,将触发弹出窗口。这对于从主题的导航菜单项、文本编辑器小部件中的内容、从非 Elementor 元素或脚本等打开弹出窗口非常有用。

      从自定义选择器触发弹出窗口时,请注意元素不一定是 “链接”。通常不可点击的元素(如纯文本)也可以通过点击来生成弹出窗口。还请注意,使用此选项时,触发器和高级规则将被忽略。


      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/9695/

      Como (0)
      Anterior Quarta-feira, 13 de maio de 2024 às 10:45.
      Seguinte 2024年 5月 13日 pm2:42

      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

      Serviço ao cliente WeChat
      Para facilitar o registo e o início de sessão de utilizadores globais, cancelámos a função de início de sessão por telefone. Se tiver problemas de início de sessão, contacte o serviço de apoio ao cliente para obter assistência na ligação do seu endereço de correio eletrónico.