Comment créer un effet flip box pour un bouton (CTA)

Pourquoi personnaliser votre site web ?

Vous vous demandez pourquoi personnaliser votre site web est si important ? Et bien, laissez-moi vous le dire : C’est un peu comme avoir une tenue vestimentaire unique et personnalisée. Si votre site n’est pas personnalisé, il risque de ressembler à une tenue générique, sans originalité et sans style. Et qui voudrait porter une tenue comme ça ?

Mais si votre site est personnalisé, c’est tout le contraire ! Vous serez comme une tenue unique, qui reflète votre personnalité et votre identité. Vous serez remarqué par tous pour votre créativité et votre originalité, et vous serez fière de votre site, qui vous ressemble.

Mais pourquoi est-ce si important de personnaliser votre site web ?

Tout simplement parce que cela vous permet de vous démarquer de la concurrence et de montrer votre personnalité. Vos visiteurs apprécieront de découvrir un site qui reflète votre entreprise et qui sort de l’ordinaire. Et vous pourrez mieux vous connecter avec eux, en leur offrant une expérience unique et personnalisée.

En résumé, personnaliser votre site web est essentiel pour vous démarquer de la concurrence et offrir une expérience utilisateur unique et personnalisée à vos visiteurs. Alors, n’attendez plus et laissez votre créativité s’exprimer ! Vous serez la personne la plus stylée de la soirée, je vous le garantis.

Tutoriel écrit

Ouvrir un module texte, aller sur le deuxième onglet « texte » et copier le code HTML

Code HTML

<a href=« https://monsite.com/ » class= »btn2″>

<span class= »text »>Text</span>

<span class= »flip-front »>Recto</span>

<span class= »flip-back »>Verso</span>

</a>

Remplacer https://monsite.com par l’URL de redirection souhaité.

Remplacer Recto par le mot de votre choix

Remplacer Verso par un autre mot de votre choix

Sur votre Dashboard, cliquer sur « Divi », puis « Option de thème »

Copier le code CSS dans « personnaliser CSS » en bas de page

Code CSS

.btn2 a {

  text-decoration: none;

  display: inline-block;

}

.btn2 {

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}

.text {

  padding: 0 50px;

  visibility: hidden;

}

.flip-front, 

.flip-back {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform-style: flat;

    transform-style: flat;

    -webkit-transition: -webkit-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    transition: transform .3s ease-out;

}

.flip-front {

    color: #000;

    border: 2px solid #000;

    background-color: transparent;

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

.flip-back {

  color: #FFF;

  background-color: #000;

  border: 2px solid #000;

  -webkit-transform: rotateX(90deg) translateZ(25px);

  -ms-transform: rotateX(90deg) translateZ(25px);

  -o-transform: rotateX(90deg) translateZ(25px);

  transform: rotateX(90deg) translateZ(25px);

}

.btn2:hover .flip-front {

    -webkit-transform: rotateX(-90deg) translateZ(25px);

    -ms-transform: rotateX(-90deg) translateZ(25px);

    -o-transform: rotateX(-90deg) translateZ(25px);

    transform: rotateX(-90deg) translateZ(25px);

}

.btn2:hover .flip-back {

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

Vous pouvez changer toutes les couleurs : texte, bordure et fond. Il suffit d’aller dans le code CSS et remplacer les code hexadécimal par les vôtres.

Ci-dessous l’effet que vous aurez en suivant ce tuto.

Comment créer une page 404 personnalisée sur Divi ?

Pourquoi avez-vous besoin d’une page 404 personnalisée ?

Vous savez ce qui est encore pire qu’une page 404? Une page 404 banale et non personnalisée. C’est pourquoi il est important d’avoir une page 404 personnalisée sur votre site web.

Tout d’abord, une page 404 personnalisée peut aider à maintenir l’identité de votre marque. Si les visiteurs tombent sur une page 404 banale, ils pourraient avoir l’impression que votre site n’est pas professionnel ou que vous ne prenez pas la peine de personnaliser certaines parties de votre site.

En revanche, une page 404 personnalisée montre que vous avez pris le temps de réfléchir à cette page et que vous voulez que les visiteurs aient une expérience cohérente sur votre site, même s’ils tombent sur une page d’erreur.

De plus, une page 404 personnalisée peut être utile pour aider les utilisateurs à naviguer sur votre site.

Si vous avez une page 404 personnalisée qui inclut des liens vers d’autres pages de votre site ou vers votre page d’accueil, cela peut aider les utilisateurs à trouver ce qu’ils cherchent même s’ils tombent sur une page d’erreur. Cela peut également être utile pour vous, car cela peut aider à réduire le taux de rebond de votre site.

Enfin, une page 404 personnalisée peut être un moyen amusant de montrer votre personnalité et de montrer à vos visiteurs que vous êtes humain. Vous pouvez inclure un message d’excuses pour l’erreur et une touche d’humour pour détendre l’atmosphère. Cela peut aider à rendre votre site plus accueillant et à fidéliser les utilisateurs.

En résumé, avoir une page 404 personnalisée est important pour maintenir l’identité de votre marque, aider les utilisateurs à naviguer sur votre site et montrer votre personnalité.

Alors, la prochaine fois que vous créerez un site, n’oubliez pas de prendre le temps de créer une page 404 personnalisée pour votre site!