Today, we’re providing our Divi community with yet another free layout. This layout will help people who want to set up a Divi website for a university or college. Using this layout as your homepage is the perfect way to show current students and future students what the university or college is about. And of course, it also shows them that the university or college they’re exploring has a great sense of style and digital presence.
The University & College Layout
When designing a website for universities and colleges, there’s one thing you have to remember; keep it visual. Universities and colleges do not only rely on the quality of their education system to attract new students, they also try to trigger emotions. An easy way to trigger this emotional involvement is through one of the biggest needs of students; social contact.
To show the engagement you have in your college or university–and to trigger that emotional involvement–we recommend you use real life pictures. Pick high-quality pictures of your university’s or college’s professors and students. We did the same thing for the freebie layout that we’re going to share with you in this post.
The free homepage layout that you can download immediately looks like this:
Download the University & College Layout
If you like the layout and you want to download it for free, go ahead and enter your email in the form down bellow. Continue by clicking on the download button and you’ll get the needed files right away.
By entering your email address, you will subscribe to our newsletter. You’ll get informed about new interesting and Divi-related posts on our website and you’ll be one of the first to get freebies. If you’re already subscribed, know that entering your email address will not cause you to “resubscribe” or get extra emails. It will just make the download available to you.
Download The Layout Pack
What’s in the ZIP?
You’ll get the following files when downloading the free layout:
- university-college-master-layout.json – importing this file will add the full layout and all of the individual sections to your Divi Library.
- university-college-full-layout.json – this is just the full university & college layout.
- sections folder – this folder contains all of the JSON files for the seven individual sections of the university & college layout.
Your University & College freebie will show up in your downloads folder as a zipped folder. We’ll give you a quick guide on how to upload the layout in the next part of this post.
Setting up the University & College Layout
When you have located the downloaded zipped folder, you can go ahead and unzip it. You’ll find the files mentioned above and depending on which sections you want to use. You can upload them into your Divi library.
Go to Divi > Divi Library > Import & Export > Import > Select the University & College master file
Continue by adding a new page to your website. Activate the Divi Builder and access the Divi Library on your page by going to:
Divi Library (the “+” symbol on the frontend) > Add From Library > University & College
After having selected the University & College layout for your page, you’ll see that the layout will pop up on the page in the Divi Builder.
The layout’s purpose is to be used as a homepage. If you want people to land on this page when they visit your website directly, don’t forget to set it as your front page in your WordPress settings.
Go to Settings > Reading > Front page > Select the page you recently created
Using the Layout
The layout has 7 main sections that provide the visitor with different information. We mainly focused on a blue color because it is often linked to professionalism in people’s mind. On top of that, we decided to go with the ‘Montserrat’ font family throughout the whole page. In the following part of this post, we’ll walk you through the different sections.
The Hero Section
The Hero Section of this layout is quite clean, as you can see. We’ve used one Text Module and a Button Module to keep it simple. We’ve also added a divider style to the image that’s being used as a background in the section. To have a look at the code; go to the Custom CSS tab of your section and scroll down to the main element. We created a clip-path that makes the divider style look like a curve.
The Number Counter Section
Initially, it looks like this second section is a part of the hero section. That effect mainly got created with the interfering Call To Action Module that’s being used in the second column of the row. The module looks like it’s floating over the hero section and draws the attention to what’s written there. If you want the Call To Action Module to be separate from the previous section, go to the Advanced Design Settings tab and remove the top margin.
If you want the Call To Action Module to be separate from the previous section, go to the Advanced Design Settings tab and remove the top margin.
For this section, we wanted to keep the curve going so we made one on the top of this section as well. By doing this, we create a connection between the different sections and it also just looks nice.
Study Fields Section
In the study fields section, we decided to use the same floating effect as we did in the number counter section. This gives visitors the idea that one of the mentioned study fields is a special one. You can change that study field at any time–depending on what audience you’re targeting at that moment.
If you’re currently doing all kinds of marketing activities to attract students for the medical study field, choose to highlight that study field during that same period. We also added an extra emphasizing arrow, which is hidden on phones and tablets.
We didn’t use Blurb Modules for this section because we wanted to have images that focus specifically on the study field. For the icons within this layout, we’ve used the new AutoDraw tool and made them transparent PNG images in Photoshop with the magic wand tool. Using AutoDraw is the easy way out if you don’t want to waste too much time looking for icons to download but know that the drawings they provide are limited.
Using AutoDraw is the easy way out if you don’t want to waste too much time looking for icons to download but know that the drawings they provide are limited.
There were two ways to put students their stories out there; by using the Testimonial Module or the Person Module. In this case, we chose the person module to make sure the main focus is on the image. Like I’ve said before; people don’t only choose a certain university or college for their study field, but also for the social contact and experiences of others. We’re visual creatures, so we like to associate testimonials, statements and words with a face. It makes it easier to trust and believe the quality of a university or college.
Contact Form Section
We used enough pictures throughout the website, that’s why we decided to keep the contact form clean and simple.
The footer is also very clean. We’ve used a darker background color for this section to emphasize the seriousness a university or college should express. We’ve put all the practical information a website visitor might need such as buttons to the social media channels, the address, phone number and email address.
We hope that all members of our community can easily start building websites for universities and colleges with this layout–whether it is for themselves or their clients. We recommend using the same style, font family and colors throughout the other pages of the website.
Any remarks or questions are welcome in the comment section below. I’ll be standby and I’ll try to answer all of your questions as helpfully as I can. On top of that, if you have any suggestion on tutorials you’d like to see for Divi, shoot!
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.