Produit phare de Divi : DiviCity

DiviCity est une mise en page Divi d'une page disponible sur Divi Marketplace. Il a une conception polyvalente qui peut être utilisée pour de nombreux types de sites Web différents et est entièrement réactif et personnalisable. Dans ce produit phare, nous examinerons la disposition de DiviCity et vous aiderons à décider si c'est la bonne disposition pour vous.

Commençons!

Installer DiviCity

DiviCity se présente sous la forme d'un fichier ZIP contenant des fichiers Divi Visual Builder .json. Pour installer la mise en page, commencez par décompresser le fichier. Ensuite, ouvrez votre page dans le Divi Builder.

Cliquez sur l'option de portabilité en bas de la page et sélectionnez l'onglet d'importation. Sélectionnez ensuite le fichier .json pour la mise en page DiviCity et commencez à importer la mise en page. Une fois la mise en page importée, il ne vous reste plus qu'à remplacer le contenu par le vôtre, et votre site web est terminé !

DiviCité

DiviCity se compose d'une mise en page Divi Builder d'une page. Il est livré sans aucune des images de démonstration, j'ai donc ajouté la mienne aux fins de cet article. Jetons un coup d'œil aux sections qui accompagnent cette mise en page !

Section d'en-tête DiviCity

L'en-tête consiste en une grande image avec un séparateur incliné en bas. L'en-tête comporte un sous-en-tête et un texte d'en-tête, ainsi qu'un bouton. Le texte comporte un effet d'animation de chargement. Deux cases recouvrent le bas de la section d'en-tête. Chaque zone contient du texte d'en-tête, une ligne de séparation, un corps de texte et un bouton. Ces boîtes ont également une animation de chargement et se développent au survol. Enfin, il y a quatre modules de présentation ci-dessous avec une icône, un titre et un corps de texte. Les modules de présentation s'affichent un par un au fur et à mesure que la page se charge. Cette disposition d'en-tête peut être facilement personnalisée avec vos propres photos et contenu pour créer une section d'en-tête attrayante et attrayante qui donne à vos visiteurs des informations clés sur votre entreprise en un coup d'œil.

Section À propos de DiviCity

La section À propos contient un texte d'introduction, un en-tête à gauche et une image à droite. Ces deux éléments ont une animation en fondu et se déplacent vers le centre. Ci-dessous se trouvent trois sections pleine chasse qui comportent une image et un bloc de texte avec un titre et un corps de texte. Chacune de ces sections a également un effet d'animation de chargement.

Section Blog de DiviCity

Par défaut, la section blog comporte un simple module de publications récentes répertoriant trois publications récentes avec l'image en vedette et les informations sur la publication. Il y a aussi du texte de titre et du corps de texte dans cette section. Cette section présente une animation en fondu.

Alternativement, vous pouvez réaliser la conception présentée dans la démo de mise en page en installant le plug-in gratuit Divi Article Cards. Une fois le plugin installé et activé sur votre site, ouvrez les paramètres Divi 100 depuis le menu du tableau de bord WordPress. Activez la fiche de l'article, puis cliquez sur enregistrer.

Maintenant, les modules de blog sur la page DiviCity devraient ressembler à la mise en page ci-dessus.

Section Numéros DiviCity

La section des nombres comporte quatre compteurs de barres sur un arrière-plan d'image - les compteurs de nombres se chargent au fur et à mesure que la page se charge.

Section Quoi faire de DiviCity

Cette section comporte un titre et un corps de texte. Il y a deux sous-sections en dessous, chacune avec une image, un titre et un corps de texte. Cette section est une mise en page très polyvalente qui peut être utilisée pour présenter des fonctionnalités, des services ou d'autres aspects de votre entreprise.

Section DiviCity où le faire

Cette section est également polyvalente et comporte un titre, un corps de texte et trois présentations avec une image, du texte, un court texte de description et une bordure qui apparaît au survol. L'image effectue également un zoom avant au survol. Vous pouvez utiliser ces présentations pour créer un lien vers une autre page ou section de votre site Web, ou simplement pour afficher certaines fonctionnalités ou informations.

DiviCity Visitez-nous Section

Ensuite, la section Visitez-nous comprend six modules de présentation, chacun avec une icône, un texte d'en-tête et un corps de texte. Vous pouvez personnaliser cette section pour mettre en évidence davantage de fonctionnalités ou d'aspects de vos services ou pour décomposer le texte dense avec des en-têtes et des icônes distincts. Les modules de présentation comportent tous une animation de zoom avant.

Section de contact de DiviCity

Enfin, la section de contact commence par une bande orange comportant trois icônes de médias sociaux. Ci-dessous se trouve la section du formulaire de contact avec un grand titre à gauche et le formulaire à droite. La section de contact a un grand arrière-plan d'image avec une superposition sombre. Cette section comporte également un effet d'animation à chargement par retournement et les icônes des médias sociaux s'estompent.

Disposition mobile DiviCity

DiviCity est entièrement compatible avec les tablettes et les mobiles. Jetons un coup d'œil à la version mobile de quelques sections.

La première est la section d'en-tête, avec une grande image d'arrière-plan, un texte d'en-tête et un bouton. La première zone de texte recouvre l'en-tête et le reste du contenu de la section d'en-tête suit ci-dessous.

Cela fait partie de la section à propos du mobile avec des images séparées par des sections avec du texte.

Il s'agit de la version mobile de la section "Où le faire". Il a une grande image en haut, un titre, un corps de texte, puis trois images avec une étiquette sur chacune.

Et enfin, voici le pied de page mobile. Comme la version de bureau, il comporte une barre orange avec des icônes de médias sociaux, suivie d'une section de pied de page avec un arrière-plan d'image, du texte et le formulaire de contact.

Acheter DiviCity

DiviCity est disponible sur Divi Marketplace. Il en coûte 19 $ pour une utilisation illimitée du site Web et des mises à jour à vie. Le prix comprend également une garantie de remboursement de 30 jours.

Dernières pensées

DiviCity est une mise en page de site Web simple et attrayante qui est incroyablement polyvalente. Parce qu'il est construit avec Divi, la mise en page est facile et intuitive à personnaliser pour votre propre usage. Les animations de chargement et les effets de survol tout au long de la mise en page sont agréables et cohérents et ne gênent pas trop le contenu ou la convivialité de la page. J'aime aussi l'utilisation de grandes images dans la conception ainsi que la typographie utilisée dans la mise en page. Si vous recherchez une mise en page de site Web simple d'une page pour votre prochain projet Divi, cela pourrait être le bon produit pour vous.

Nous aimerions avoir de vos nouvelles! Avez-vous essayé DiviCity ? Faites-nous savoir ce que vous en pensez dans les commentaires !