Bloom est connu pour être notoirement difficile à coiffer. Dans ce tutoriel, je vais vous montrer comment en transformer un Optin de floraison en ligne dans une belle option pour votre site Web. Nous allons passer par la configuration de l’optin et l’ajout d’une belle image d’arrière-plan avec une superposition de dégradé. Centrer la fleur dans un module de code pleine largeur qui fait tout La zone fleurie est transparenteet créez-en un Bouton Soumettre aux coins arrondis.

Nous construirons ensemble les éléments suivants:

Optin de courrier électronique de Nice Bloom

Démo en direct – Avec un avant et un après

Divi et Bloom doivent être installés pour ce tutoriel. Si vous connaissez le CSS, vous pouvez également modifier le style en fonction de vos besoins, mais ce n’est pas obligatoire.

Commençons!

Préparez la floraison

Créer un nouveau en ligne Bloom optin. Aller à floraison et cliquez sur Nouvel optin Bouton et sélectionnez le En ligne optin.

Créer une option de floraison en ligne

Nommez votre choix comme vous le souhaitez et sélectionnez le fournisseur de messagerie de votre choix. Cliquez sur SUIVANT: CONCEVEZ VOTRE OPTIN.

Sélectionnez le premier modèle listé sur le conception Tab et cliquez SUIVANT: PERSONNALISER.

Ensuite, nous allons faire tous les paramètres de conception nécessaires. Il y en a beaucoup. Alors lisez-les attentivement ou portez une attention particulière à l’image ci-dessous.

Au début, nous allons:

  • Met le Titre Optin à n’importe quel titre que vous voulez.
  • Supprimer ça Message d’inscription.

En dessous de Paramètres d’image Nous définirons les options suivantes:

  • ajuster Orientation de l’image à Pas d’image

En dessous de Style Optin Nous définirons les options suivantes:

  • appuie sur le Choisissez la couleur Bouton pour Couleur de l’arrière plan et cliquez sur dégager
  • ajuster Police d’en-tête comment Assiette Josefin
  • ajuster Écriture corporelle comment Ouvrir Sans
  • ajuster Couleur du texte comment Texte clair
  • ajuster Style d’angle comment Coins carrés
  • ajuster Orientation des limites comment Pas de frontière

En dessous de Configurer le formulaire Nous définirons les options suivantes:

  • ajuster Orientation du formulaire comment Formulaire ci-dessous
  • ajuster Champ (s) de nom comment Champ de nom unique
  • ajuster Texte du nom comment Nom de famille
  • ajuster Texte de l’e-mail comment E-mail
  • ajuster Texte du bouton comment S’abonner à!

En dessous de Style de forme Nous allons définir les options suivantes:

  • ajuster Orientation du champ de formulaire comment Champs de formulaire en ligne
  • ajuster Style de coin de champ de formulaire comment Coins carrés
  • ajuster Couleur du texte de la forme comment Texte sombre
  • appuie sur le Choisissez la couleur Bouton pour Forme Couleur de l’arrière plan et cliquez sur dégager
  • appuie sur le Choisissez la couleur Bouton pour Couleur du bouton et cliquez sur dégager
  • ajuster Bouton de couleur du texte comment lumière

Pour compléter les paramètres, nous allons à:

  • Choisissez le premier Style de bord de forme
  • N’incluez aucun Bas de page.
  • Met le Texte du message de réussite à tout ce que vous voulez.

Vous trouverez ci-dessous une image des paramètres que j’ai utilisés lorsque vous préférez copier une image.

Paramètres du formulaire de floraison en ligne

Ne cliquez pas encore sur Enregistrer! Nous avons quelques autres à ajouter CSS personnalisé.

CSS personnalisé

Ensuite, nous allons copier et coller le CSS suivant dans celui-ci CSS personnalisé Boîte.

Ce premier morceau de CSS rend l’optin plus probable maigrir, définit la taille de la police de l’en-tête et vous donne plus de contrôle sur le remplissage de l’optin dans Divi.

/* === Slim Bloom Optin by Divi Cake === */
#dc_optin div.et_bloom_header_outer .et_bloom_form_text {
    padding: 0px!important;
}
#dc_optin div.et_bloom_header_outer .et_bloom_form_header {
    padding: 0px 0px 10px 0px!important;
}
#dc_optin div.et_bloom_header_outer .et_bloom_form_header h2 {
    font-size: 36px!important;
}
#dc_optin .et_bloom_form_content {
    padding: 10px 0px 0px 0px!important;
}

Ce deuxième morceau de CSS fait cela Bouton de soumission et ajoute la couleur d’arrière-plan transparent et le bouton de survol.

/* === Rounded Bloom Submit Button by Divi Cake === */
#dc_optin .et_bloom_form_content button.et_bloom_submit_subscription {
    border-radius: 50px!important;
    -moz-border-radius: 50px!important;
    -webkit-border-radius: 50px!important;
    background: rgba(255, 178, 0, 0.8)!important;
}
#dc_optin .et_bloom_form_content button.et_bloom_submit_subscription:hover {
    background: rgba(255, 178, 0, 1)!important;
}

Ce troisième morceau de CSS fait tout La zone fleurie est transparenteet vous permet de définir un fond d’écran et un dégradé personnalisés dans Divi.

/* === Transparent Bloom Optin by Divi Cake === */
#dc_optin .et_bloom_form_container {
    background: none !important;
}
#dc_optin .et_bloom_form_header {
    background: none!important;
}
#dc_optin .et_bloom_bottom_inline {
    background: none !important;
}

Ce dernier morceau de CSS rend les zones de texte légèrement transparentes pour donner à l’optin un peu plus de style.

/* === Transparent Text Fields by Divi Cake === */
.et_bloom .et_bloom_form_container .et_bloom_form_content input {
    background: rgba(255, 255, 255, 0.9)!important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content input:focus {
    background: rgba(255, 255, 255, 1)!important;
}

appuie sur le Sortie sûre Bouton.

À ce stade, nous n’avons qu’une dernière chose à faire dans Bloom. Nous devons générer un shortcode et le copier.

Dès que vous cliquez Sortie sûre, vous serez ramené au Optins actifs Page en fleur. Nous cliquons Générer un shortcode Icône et copiez le shortcode dans la fenêtre contextuelle.

Générer un shortcode Bloom

Garde ça Petit code pratiquement! Nous en aurons besoin très bientôt.

Ajout de l’optin à votre page

Voici la partie qui en vaut la peine. Nous pouvons enfin tout résumer dans Divi.

Commencez par créer une nouvelle page ou en éditant une existante. Chaque fois que vous créez une nouvelle page, vous devez utiliser le Divi Builder.

Ajouter un nouveau Section pleine largeur et insérez un Largeur hors tout code Module.

Section pleine largeur et code de module pleine largeur

Entrer le Code pleine largeur lunparamètres dule Copiez et collez le shortcode Bloom copié précédemment.

Collez le shortcode Bloom

Ensuite, nous entrons dans le Avancée Tab dans le Paramètres du module de code pour toute la largeur pour arrêter ça ID CSS à dc_optin. Cela permet à tous les CSS précédemment saisis d’être appliqués à ce module de code.

Définissez l'ID CSS sur dc_optin

Alors que nous sommes encore dans le Onglet AvancéNous allons ajouter deux simples lignes de CSS à cela Élément principal Section. Un pour définir une largeur maximale et un pour centrer le module de code dans l’en-tête pleine largeur.

Définir la largeur et le centre maximum

Cliquez sur Sortie sûre. Nous avons tous fini avec le module de code.

Maintenant nous entrons Section des paramètres du module et définissez le dégradé.

Nous utiliserons #eead92 comme notre première couleur et # 6018dc comme notre deuxième couleur. Nous arrêterons ça aussi Direction du gradient à 165 degrés.

Pendant que nous sommes toujours là-dessus contenu Dans l’onglet, nous allons ajouter notre image de fond. L’image d’arrière-plan que j’ai utilisée peut être téléchargé ici.

Effectuez les étapes suivantes dans le Contexte Section:

  • Téléchargez votre propre photo ou utilisez celle que j’ai fournie.
  • ajuster Utilisez l’effet de parallaxe à NON
  • ajuster Taille de l’image d’arrière-plan à Page d’accueil
  • ajuster Position de l’image d’arrière-plan à centre
  • ajuster Répéter l’image d’arrière-plan à Pas de répétition
  • ajuster Mélange d’images d’arrière-plan à Feu de peinture

Ajouter une image d'arrière-plan et définir les paramètres

Ensuite, nous entrons dans le conception Tab dans le Section des paramètres du module ajoutez un peu de rembourrage.

Met le Rembourrage personnalisé à 50px.

Définir le rembourrage pour la section pleine largeur

Cliquez sur Sortie sûre.

Voilà! Tu devrais en avoir un maintenant Optin d’e-mail à fleurs minces magnifiquement stylisées ça ressemble à ça:

Optin de courrier électronique de Nice Bloom

revoir

Nous avons réussi à transformer une option de floraison peu attrayante en une belle option que vous pouvez utiliser sur n’importe quel site Web. Nous espérons que vous avez apprécié ce tutoriel.

Nous aimerions recevoir de vos nouvelles. Comment avez-vous utilisé cette option sur votre site Web? L’avez-vous trouvé utile? Faites le nous savoir dans les commentaires.





Source link

Recent Posts