Queres crear e mostrar unha emerxente por etiqueta de publicación en WordPress? Así que segue lendo este artigo.
Estamos seguros de que xa estás familiarizado coa pequena ventá que aparece ao navegar por un sitio web. Ben, chámase emerxente. As ventás emerxentes poden aparecer en diferentes tamaños e posicións na pantalla dun sitio web.
En WordPress, hai moitos complementos para crear ventás emerxentes, como Elementor Pro, JetPopup, Brizy Pro e outros.
L’élément important à retenir est que les fenêtres contextuelles ne doivent pas être ennuyeuses pour les visiteurs de votre site web. Par conséquent, créez un popup aussi simple et attrayante que possible.
Índice
Algúns complementos de WordPress para crear ventás emerxentes
Element Pro
Elementor Pro est une extension d’Elementor avec des centaines de fonctionnalités premium. Il vous offre de puissants outils professionnels qui accélèrent votre flux de travail et votre conception. Elementor Pro ofrécelle control total sobre o deseño e o deseño do teu sitio web. Neste caso, pode personalizar libremente o deseño da ventá emerxente.
uso Element Pro crear emerxentes por etiqueta de publicación é moi sinxelo e fácil de usar. Podes definir facilmente as condicións de visualización da túa ventá emerxente con moita precisión.
JetPopup
JetPopup de Crocoblock é unha extensión para Elementor. Podes mercalo como complemento autónomo ou compralo nun paquete con outros complementos de Crocoblock. O gran de usar JetPopup para crear unha ventá emerxente é que ten moitas funcións fantásticas.
- Podes xogar cos disparadores emerxentes.
- Podes crear animacións para a ventá emerxente.
- Hai un gran número de modelos emerxentes dispoñibles.
Ler tamén: 22 Mellores complementos Premium para Elementor
Brizy Pro
O creador de ventás emerxentes Brizy Pro ofrécelle dúas opcións. O primeiro é a ventá emerxente activada por clic, e o segundo son os disparadores automáticos e as condicións.
- Abrir ao facer clic: a túa ventá emerxente pódese activar simplemente facendo clic nos elementos da túa páxina.
- Activadores e condicións automáticos: pode configurar accións dos visitantes que determinarán cando se mostran as ventás emerxentes.
Como crear e mostrar unha emerxente por etiqueta de publicación en WordPress con Elementor
Como se mencionou anteriormente, tes varias opcións para crear unha ventá emerxente en WordPress. Neste tutorial, mostrarémosche como crear e mostrar unha ventá emerxente por etiqueta de publicación usando a versión Element Pro, assurez-vous donc d’en avoir déjà une.
Paso 1: crea o modelo emerxente
O primeiro que hai que facer é crear un novo modelo emerxente. Para crear un novo modelo de ventá emerxente, vai a Modelos > ventás emerxentes no teu panel de WordPress e fai clic no botón Engadir novo.
A continuación, engade o nome da túa ventá emerxente e fai clic no botón CREAR UNHA MODELO.
Dirixirase á biblioteca de modelos, pode escoller un modelo na xanela da biblioteca ou deseñar o seu propio modelo emerxente. Para usar un modelo da biblioteca, só tes que facer clic no botón Inserir.
Pero neste tutorial, crearemos o modelo Popup desde cero. Fai clic na icona X para pechar a biblioteca de modelos.
Paso 2: axusta a configuración emerxente
Necesitamos facer algúns axustes na configuración de Popup antes de comezar a crear un modelo de Popup. Podes atopar a mellor configuración para o teu sitio. Neste tutorial, mostrarémosche a configuración emerxente que elixas.
Fai clic na icona da engrenaxe na esquina inferior esquerda. Na configuración da ventá emerxente, cambie Ancho nun 90 % da anchura da vista (VW) Et o posición en Centro inferior.
Paso 3: Deseña a ventá emerxente
A continuación, deseña o teu modelo emerxente. Engade unha nova sección e selecciona a estrutura de 5 columnas. Na sección de configuración, configure o Ancho uns 950. Podes xogar coa túa configuración.
Por exemplo, pode ir á pestana estilo para definir o fondo, vai á pestana avanzado para personalizar a marxe, e moitos máis.
Agora volve ás túas columnas. Na columna da esquerda, establece o ancho no 33 % e, para os outros catro, no 16 %.
Na columna da esquerda engadiremos un widget Título con algo de texto. Podes engadir texto invitando aos visitantes do teu sitio web a ver outro contido relevante para o contido actual ou calquera outro texto que elixas.
Á dereita engadiremos un widget de imaxe. Podes engadir imaxes das miniaturas das publicacións/imaxes destacadas ou cargalas manualmente.
Agora a estrutura está lista. Volver a Configuración emerxentes para personalizar as animacións de entrada, saída e marxe. Neste tutorial, configuramos a entrada en Fade Down e a saída Fade Up. A continuación, vai á pestana avanzado e establece a marxe en 30 (valor común para as ligazóns).
Paso 4: publicar a ventá emerxente
Agora que o deseño está listo, fai clic no botón PUBLICAR para establecer condicións de visualización e activadores. Para configurar a condición de visualización, faga clic no botón ENGADIR UNHA CONDICIÓN e seleccione a súa opción na lista despregable.
Como queres mostrar a etiqueta emerxente por publicación, podes establecer as seguintes condicións de visualización (ver animación).
Fai clic en Seguinte. Na pestana Disparadores, pon o gatillo en En desprazamento premendo o interruptor para si. Define o Liderado sur bas e Ancho máis do 95%. Porque queremos que apareza a ventá emerxente cando os visitantes cheguen ao final do noso artigo.
Neste tutorial, non imos definir Regras Avanzadas. Entón fai clic en GARDAR E PECHAR. Ben, agora rematamos.
A ver como se ve.
Aí estás, acabas de rematar o teu emerxente. Consulte tamén os nosos artigos relacionados:
- 6 útiles fragmentos CSS para o widget de publicacións de Elementor
- Como crear unha páxina de listado con Elementor Loop Builder
- Como engadir horas de traballo no teu sitio web de Elementor
- Como engadir un salto de liña no texto do botón Elementor
- Como crear e editar un pé de páxina en Elementor
- Como engadir máscara de imaxe en Elementor
- Elementor ou Brizy: cal é o mellor creador de páxinas de WordPress?
Artigos conexos
- 22 Mellores complementos Premium para Elementor
- Elementor vs Beaver Builder: comparación detallada dos creadores de páxinas
- Elementor Review 2024: experiencia con Elementor (pros, contras, funcións e máis)
- Como crear un círculo interactivo en Elementor
- Como facer un sitio web de Elementor super rápido: Tutorial completo
- Como migrar un sitio a Elementor Cloud
- 5 Mellores complementos de feed de Instagram para Elementor [As nosas mellores opcións]
- Como usar o acordeón avanzado en Elementor