Aggiungere una freccia giù Divi Full Width Slider

Il modulo "Fullwidth Header " di ivi è carino perché puoi aggiungere una "freccia giù", per invogliare gli utenti a fare clic per scorrere automaticamente verso il basso. Tuttavia, il modulo Divi "Fullwidth Slider " non ha questa opzione. Puoi aggiungerlo con un po 'di jQuery e CSS.

Esempio: https://dev.davide.baraldi.name/divi/aggiungere-una-freccia-giu-divi-full-width-slider/

Aggiungi una freccia giù Divi Fullwidth Slider

Aggiungiamo home-slider come ID alle impostazioni Fullwidth Slider intera.

jQuery
Necessario aggiungi questo script all'area "Footer" del plug-in Header Footer https://wordpress.org/plugins/header-footer/
.
Questo è il jQuery che inietta l'HTML necessario nel modulo slider. Inserisce la freccia direttamente dopo il wrapper .et_pb_slides di # home-slider . Puoi cambiare l'ID dell'href in modo che corrisponda al tuo; così come cambiare l'icona di Font Awesome che usa ( Font Awesome Cheatsheet ).

Aggiungere una freccia giù Divi Full Width Slider

<script>
	jQuery ('<div class = "slider-down-arrow"> <a href="#mission"> <i class = "fa fa-angle-double-down"> </i> </a> </ div > '). insertAfter (' #home-slider> .et_pb_slides ');
</script>
Aggiungere una freccia giù Divi Full Width Slider

Necessario attivare questo plugin Font Awesome https://wordpress.org/plugins/font-awesome/

CSS
Aggiungi questo CSS alla tua area CSS personalizzata.

Questo è il CSS che definisce la freccia e la posiziona correttamente all'interno del wrapper .et_pb_slides . Potrebbe essere necessario regolare la dimensione del carattere della freccia e / o regolare il posizionamento in basso, a seconda che i controlli di scorrimento siano attivati ​​(i puntini in basso). Aggiungere una freccia giù Divi Full Width Slider

/* Freccia Giu */
.slider-down-arrow {
	position: absolute;
	z-index: 10;
	bottom: 70px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 32px;
}
/* arrow link */
.slider-down-arrow a {
	line-height: 1em;
	display: inline-block;
	color: white;
	text-shadow: 0 1px 8px rgba(0,0,0,0.5);
	transition: all 0.2s ease;
}
/* animate the arrow link if not hovered,
note: this uses animation via Divi Booster */
.slider-down-arrow a:not(:hover) {
	animation: fullwidth-header-bounce 2.1s ease-out infinite;
}
/* add hover effect on arrow link */
.slider-down-arrow a:hover {
	text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}

@media (min-width: 1200px) {
	/* increase arrow size, and adjust positioning, for larger screens */
	.slider-down-arrow {
		bottom: 90px;
		font-size: 48px;
	}	
}

@media (max-width: 980px) {
	/* hide arrow when stuff stacks */
	.slider-down-arrow {
		display: none;	
	}
}
Share This