Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Bonjour, dans ce tutoriel, je vais vous apprendre à créer un bouton collant qui nous suit lorsque nous faisons défiler notre site. Nous allons bien sûr faire cela avec et pour Divi.

L’idée d’avoir un bouton solide en bas à droite ou à gauche de notre site Web est de générer un appel à l’action que les visiteurs de notre site Web devraient prendre, par exemple: cela peut être un appel à l’action, pour acheter quelque chose, pour s’abonner à contactez-nous, cela dépend de la stratégie du site.

Pour faire cet exercice, nous avons besoin d’un petit extrait de code CSS que je vous laisse ci-dessous:

.btn-flotante {
	font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #E91E63; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	right: 40px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 99;
}
.btn-flotante:hover {
	background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
} 

Nous avons également besoin du fragment de code HTML du bouton:

<a href="https://ovdivi.com/colocar-un-boton-fijo-o-flotante-en-la-parte-inferior-de-nuestro-sitio-con-divi/#" class="btn-flotante">Llamada a la acción</a>

Dans la vidéo suivante, j’explique en quoi consistent les codes CSS et HTML et quelle partie de votre site Web vous avez créée avec divi. Vous devez l’inclure pour qu’il fonctionne correctement.

Alors n’attendez plus et lisez la vidéo …



Source link

Recent Posts