Téléchargez votre mise en page d'accueil gratuite pour les universités et les collèges
Publié: 2017-05-08Aujourd'hui, nous offrons à notre communauté Divi une autre mise en page gratuite. Cette mise en page aidera les personnes qui souhaitent créer un site Web Divi pour une université ou un collège. L'utilisation de cette mise en page comme page d'accueil est le moyen idéal pour montrer aux étudiants actuels et futurs en quoi consiste l'université ou le collège. Et bien sûr, cela leur montre également que l'université ou le collège qu'ils explorent a un grand sens du style et une présence numérique.
La disposition de l'université et du collège
Lors de la conception d'un site Web pour les universités et les collèges, vous devez vous rappeler une chose ; gardez-le visuel. Les universités et les collèges ne comptent pas seulement sur la qualité de leur système d'éducation pour attirer de nouveaux étudiants, ils essaient également de déclencher des émotions. Un moyen facile de déclencher cette implication émotionnelle est l'un des plus grands besoins des étudiants ; contact social.
Pour montrer l'engagement que vous avez dans votre collège ou votre université et pour déclencher cette implication émotionnelle, nous vous recommandons d'utiliser des images réelles. Choisissez des photos de haute qualité des professeurs et étudiants de votre université ou de votre collège. Nous avons fait la même chose pour la mise en page gratuite que nous allons partager avec vous dans cet article.
La mise en page gratuite de la page d'accueil que vous pouvez télécharger ressemble immédiatement à ceci :
Abonnez-vous à notre chaîne Youtube
Téléchargez la mise en page de l'université et du collège
Si vous aimez la mise en page et que vous souhaitez la télécharger gratuitement, n'hésitez pas et entrez votre email dans le formulaire ci-dessous. Continuez en cliquant sur le bouton de téléchargement et vous obtiendrez immédiatement les fichiers nécessaires.
En renseignant votre adresse e-mail, vous vous inscrivez à notre newsletter. Vous serez informé des nouveaux articles intéressants et liés à Divi sur notre site Web et vous serez l'un des premiers à recevoir des cadeaux. Si vous êtes déjà abonné, sachez que la saisie de votre adresse e-mail ne vous obligera pas à vous « réabonner » ou à recevoir des e-mails supplémentaires. Cela rendra simplement le téléchargement disponible pour vous.
Télécharger le pack de mise en page
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Qu'y a-t-il dans le ZIP ?
Vous obtiendrez les fichiers suivants lors du téléchargement de la mise en page gratuite :
- university-college-master-layout.json – l'importation de ce fichier ajoutera la mise en page complète et toutes les sections individuelles à votre bibliothèque Divi.
- university-college-full-layout.json - il ne s'agit que de la disposition complète de l'université et du collège.
- dossier sections - ce dossier contient tous les fichiers JSON pour les sept sections individuelles de la mise en page de l'université et du collège.
Votre billet de faveur pour l'université et le collège apparaîtra dans votre dossier de téléchargements sous forme de dossier zippé. Nous vous donnerons un guide rapide sur la façon de télécharger la mise en page dans la prochaine partie de cet article.
Configuration de l'agencement de l'université et du collège
Lorsque vous avez localisé le dossier compressé téléchargé, vous pouvez continuer et le décompresser. Vous trouverez les fichiers mentionnés ci-dessus et en fonction des sections que vous souhaitez utiliser. Vous pouvez les télécharger dans votre bibliothèque Divi.
Allez dans Divi > Divi Library > Import & Export > Import > Sélectionnez le fichier maître University & College
Continuez en ajoutant une nouvelle page à votre site Web. Activez le Divi Builder et accédez à la Divi Library sur votre page en allant sur :
Bibliothèque Divi (le symbole « + » sur le frontend) > Ajouter à partir de la bibliothèque > Université et collège
Après avoir sélectionné la mise en page Université & Collège pour votre page, vous verrez que la mise en page apparaîtra sur la page dans le Divi Builder.
Le but de la mise en page est d'être utilisé comme page d'accueil. Si vous voulez que les gens atterrissent sur cette page lorsqu'ils visitent directement votre site Web, n'oubliez pas de la définir comme page d'accueil dans vos paramètres WordPress.
Allez dans Paramètres > Lecture > Première page > Sélectionnez la page que vous avez récemment créée
Utilisation de la mise en page
La mise en page comporte 7 sections principales qui fournissent au visiteur différentes informations. Nous nous sommes principalement concentrés sur une couleur bleue car elle est souvent liée au professionnalisme dans l'esprit des gens. En plus de cela, nous avons décidé d'utiliser la famille de polices 'Montserrat' sur toute la page. Dans la partie suivante de cet article, nous vous guiderons à travers les différentes sections.
La section des héros
La section Hero de cette mise en page est assez propre, comme vous pouvez le voir. Nous avons utilisé un module de texte et un module de bouton pour rester simple. Nous avons également ajouté un style de séparation à l'image qui est utilisée comme arrière-plan dans la section. Pour consulter le code ; allez dans l'onglet CSS personnalisé de votre section et faites défiler jusqu'à l'élément principal. Nous avons créé un chemin de détourage qui fait ressembler le style de séparation à une courbe.
La section Compteur de nombres
Initialement, il semble que cette deuxième section fasse partie de la section des héros. Cet effet a été principalement créé avec le module d'appel à l'action interférant qui est utilisé dans la deuxième colonne de la ligne. Le module semble flotter au-dessus de la section des héros et attire l'attention sur ce qui y est écrit. Si vous souhaitez que le module d'appel à l'action soit séparé de la section précédente, accédez à l'onglet Paramètres de conception avancés et supprimez la marge supérieure.
Si vous souhaitez que le module d'appel à l'action soit séparé de la section précédente, accédez à l'onglet Paramètres de conception avancés et supprimez la marge supérieure.
Section d'introduction
Pour cette section, nous voulions maintenir la courbe, nous en avons donc également créé une en haut de cette section. En faisant cela, nous créons une connexion entre les différentes sections et cela a aussi l'air sympa.
Section des domaines d'étude
Dans la section des champs d'étude, nous avons décidé d'utiliser le même effet flottant que nous l'avons fait dans la section du compteur de nombres. Cela donne aux visiteurs l'idée que l'un des domaines d'études mentionnés est spécial. Vous pouvez modifier ce domaine d'étude à tout moment, en fonction du public que vous ciblez à ce moment-là.
Si vous menez actuellement toutes sortes d'activités de marketing pour attirer des étudiants dans le domaine des études médicales, choisissez de mettre en évidence ce domaine d'études au cours de la même période. Nous avons également ajouté une flèche d'accentuation supplémentaire, qui est masquée sur les téléphones et les tablettes.
Nous n'avons pas utilisé de modules Blurb pour cette section car nous voulions avoir des images qui se concentrent spécifiquement sur le domaine d'étude. Pour les icônes de cette mise en page, nous avons utilisé le nouvel outil AutoDraw et en avons fait des images PNG transparentes dans Photoshop avec l'outil baguette magique. Utiliser AutoDraw est la solution de facilité si vous ne voulez pas perdre trop de temps à chercher des icônes à télécharger, mais sachez que les dessins qu'ils fournissent sont limités.
Utiliser AutoDraw est la solution de facilité si vous ne voulez pas perdre trop de temps à chercher des icônes à télécharger, mais sachez que les dessins qu'ils fournissent sont limités.
Section des étudiants
Il y avait deux manières de présenter leurs histoires aux élèves ; en utilisant le module Témoignage ou le module Personne. Dans ce cas, nous avons choisi le module personne pour nous assurer que l'accent principal est mis sur l'image. Comme je l'ai déjà dit; les gens ne choisissent pas seulement une certaine université ou un certain collège pour leur domaine d'études, mais aussi pour le contact social et les expériences des autres. Nous sommes des créatures visuelles, nous aimons donc associer des témoignages, des déclarations et des mots à un visage. Il est plus facile de faire confiance et de croire en la qualité d'une université ou d'un collège.
Section Formulaire de contact
Nous avons utilisé suffisamment de photos sur tout le site, c'est pourquoi nous avons décidé de garder le formulaire de contact propre et simple.
Bas de page
Le pied de page est également très propre. Nous avons utilisé une couleur de fond plus foncée pour cette section afin de souligner le sérieux qu'une université ou un collège devrait exprimer. Nous avons mis toutes les informations pratiques dont un visiteur de site Web pourrait avoir besoin, telles que des boutons vers les canaux de médias sociaux, l'adresse, le numéro de téléphone et l'adresse e-mail.
Emballer
Nous espérons que tous les membres de notre communauté pourront facilement commencer à créer des sites Web pour les universités et les collèges avec cette mise en page, que ce soit pour eux-mêmes ou leurs clients. Nous vous recommandons d'utiliser le même style, la même famille de polices et les mêmes couleurs sur les autres pages du site Web.
Toutes les remarques ou questions sont les bienvenues dans la section commentaires ci-dessous. Je serai en attente et j'essaierai de répondre à toutes vos questions aussi utilement que possible. En plus de ça, si vous avez des suggestions de tutos que vous aimeriez voir pour Divi, tirez !
Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.