10 Awesome Divi Sites That You Would Never Recognize, and What Makes Them Unique

Adding Free SSL Certificate and HTTPS to WordPress with Let’s Encrypt and Certbot
June 6, 2016
Free Divi Blog Extension Gives The Divi Blog Module A Brand New Look
June 6, 2016
Show all

Welcome to Day 6 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


A lot of people think that sites built using a theme framework may as well be cookies baked with the same mold. After all, they’re all made using similar layouts, widgets and buttons, right? Simply change a few images, type in your text and you’re good to go.

While this may be the case for some themes, Divi offers enough flexibility to satisfy even the most nitpicky users in matters of customization. So why not play around and see what you can put together with a little brainstorming?

If you need a little help to get those creative juices flowing, you’re in luck. We’ve scoured the web to find some unique sites built using the Divi theme, and we’ll be going over exactly what makes them so special below.

Our 10 Awesome Divi Sites That You Would Never Recognize

1. Metricool

metricool

Metricool is a metrics service for websites and blogs. They’re set apart from the competition by a concise set of features and a gorgeous (and intuitive) dashboard which helps you keep track of all the basics such as page views, number of visitors, comment activity, and social media interactions. On top of that, they provide users with information as to the best times during which to post new content or interact with their visitors by calculating the peak times of social media usage among their followers.

Their landing page was built using Divi and perfectly exemplifies how to capture tons of information using simple graphics. As you scroll down you get progressively introduced to new elements of their service using screenshots of the dashboard along with informational blurbs.

You might have noticed the website uses white space interspersed with more colorful sections. In colorful websites, this serves to let the viewer’s eyes ‘rest’ (so to speak) through the use of contrast, and has the added benefit of visually separating each section.

Metricool’s landing page is a great example of how to use colors to highlight the contents of a page and to establish a personal style by re-using the same colors sprinkled throughout a design.

2. Webbyra Stockholm & Are

A screenshot from the Webbyra Stockholm & Are website.

When even web development agencies choose your theme to power their business websites, you know you’re doing something right. Webbyra Stockholm & Are are a firm specializing in web development, graphic design and conceptualization, programming tasks, and API integration.

The fist thing you’ll notice as soon as you hit the site is the HTML5 video background which incorporates the header. It achieves an attractive contrast through the use of white and a few shades of red, as well as sporting an expandable navigation bar which opens in a unique fashion.

A screenshot from the Webbyra Stockholm & Are website.

The navigation bar icon uses an animation both for opening and closing, and aside from the menu also shows a compact contact form that is sure to increase conversions.

As for the rest of the website, it’s fairly attractive, but the main page is certainly the main draw. Webbyra Stockholm & Are make good use of contrast throughout each page to make information and calls to action jump out while also providing a good deal of information.

3. Ifinity

A screenshot from the Ifinity website.

Ifinity is a Europe-based company that’s in the business of “adding a digital layer” to urban areas and transforming them into smart-cities. Some examples would be the ability to locate public transport vehicles in real time, virtual maps of official buildings, virtual queuing, and parking space management. The technology you never knew you wanted until the second you find out about it (seriously, virtual queuing? Sign us up!).

Their website isn’t anything quite so sci-fi, though. You can tell right away it’s a corporate website, but this isn’t necessarily a bad thing. The layout, for example, features a classic strong logo and no-nonsense navigation bar, followed by a video introduction to the Ifinity service (you can make out a video subtle animation in the back).

The above is followed by a regular grid with some nice photography linking to the rest of the site. This particular grid looks great thanks to the use of staggered dimensions, making each division easily recognizable and the use of different colors.

All in all, Ifinity shows that Divi can tackle corporate websites with aplomb.

4. Aline Collective

A screenshot from the Aline Collective website.

The Aline Collective is an outfit devoted to branding, photography, website, and print design. One quick look at their website is enough to determine that they’ve got the branding stuff down pat. While their design choices may not appeal to all sensibilities, the site certainly stands out thanks to some unique design choices.

From the header to the bottom, the design on this website is meant to point the eye downwards into the point-by-point breakdown of the services provided by the Aline Collective, which features a unique take on bullet points.

This trend repeats itself all over the website, as well as some strategic use of bold fonts to emphasize certain points (hardly groundbreaking, we know, but their use here is top-notch), and a positive review here and there to nudge potential customers in the right direction.

A screenshot from the Aline Collective website.

Finally, their portfolio page is a sight for sore eyes. Rather than using general branding screenshots for their gallery, they chose to focus on specific aspects of each project, and the remaining images within are all full-width and colorful.

5. M for Montreal

A screenshot from the M for Montreal website.

M for Montreal is both an annual event and a full-time independent organization dedicated to showcasing emerging musicians and help them expand their careers outside the icy borders of Canada.

Their website doesn’t attempt to reinvent the wheel, but it boasts a unique personality thanks to a few simply stylistic choices. For example, their use of black and blue establishes a personal style, which is seen repeated throughout the site. The left sidebar is highlighted blue when being hovered over, as is the top navigation bar although using a different style.

Also worth noting is the use of black boxes, which follows the design of their logo. Each of these design choices is not necessarily worth noting in isolation, but they come together to form a unique style on top of the Divi framework.

6. Oxette

oxette

Oxette is an online jewelry and accessory shop for women looking for high-end products. It’s also the only e-commerce store featured on our list, a spot earned thanks to its elegant yet simple layout and design choices.

The black and red colors are a good choice for the brand, and when combined with high-definition photography and parallax scrolling, make for a nice effect (aided by their striking models, of course). The fact that each product has the same sort of white-background photography also serves to give the page a clean look (although having to click twice to reach the product details page is a big no-no when it comes to usability).

7. Engage Live Photography

Engage-Live-Photography-Training

Engage Live Photography is a service meant to help photographers hone their craft through workshops, training courses, mentoring opportunities and even online lessons.

Although their site may not look like anything special, there’s one design choice which earned them a spot on our list. Their main page features a vertical calendar which displays all the upcoming classes, with a subtle hover animation for each, and the ability to expand each section and add your preferred class to your cart (as well as see additional information) without having to leave the main page.

The only clunky part of this feature is the inclusion of the expanded thumbnail images when each option is selected. A more elegant-looking solution would be to simply display the option to add the lesson to your cart and the additional information.

Still, this option is much easier to navigate than the usual clunky calendars when trying to schedule a class and could be easily adapted to other kinds of services.

8. Creative Technologies by Jamdonut

A screenshot from the Creative Technologies website.

Creative Technologies is a one-in-all outfit which can handle anything from video, animation, software development, to electronics and campaign optimization.

Although their website might look sparse in comparison with other corporate offerings, it’s also as creative as their name would imply.

What makes the site work are the simple animations sprinkled throughout the service and showcase sections, even if the blog and contact links lead to nowhere as of right now. While an unfinished website is never an optimal state of affairs, this is a good example of how you can set up a one-page website for a business that doesn’t scream ‘corporate’.

9. Opoveiro

A screenshot from the Opoveiro website.

Opoveiro is an informational website built around the cultural identity of Povoa de Varzim, a Portuguese city.

This may be the site on our list whose lineage can be most easily traced back to its Divi roots, but it still remains a worthy example of how a unique visual identity can serve to separate a site from others built using the same theme.

Here the uniqueness comes in the form of a few simple additions. A styled navigation bar and social media sharing bar on the left side (most websites simply throw this on as an afterthought), plus, the same design style across all images featured on the site (although many of them could stand to be resized).

10. Pixel & Oak

pixel-and-oak-1

Pixel & Oak is a small design studio geared towards creatives who need websites to showcase their work and keep them focused on what they do best–their craft.

Based out of the mountains of Tennessee web designer Molly Prior works with small businesses all over the world. For her own site she’s created a tasteful example of what Divi can do for designers, web studios, and design/advertising agencies.

pixel-and-oak-2

We particularly enjoy the stylings she’s done with Divi’s blog module. From the colors and hover effects to the post layouts and content itself her blog exudes sophistication. A great example of the editorial prowess possible with Divi’s blog.

Pixel-Oak-3

Conclusion

While it’s true that a lot of themes tend to give birth to similar sites, in a lot of cases this can be chalked up to a simple lack of imagination during the development process. There’s no reason why your Divi site shouldn’t look and feel every bit as professional as a custom made one if you’re willing to think a little outside the box.

If you’re in need of inspiration, look back to some of the unique stylistic choices showcased through the article, such as animations, good use of contrasting colors, bold sidebars, etc. Every aspect of your website can be rendered unique if you apply a small dose of creativity.

If you have a site you would like featured in a future showcase of Divi designs, you can submit it to our editor at Nathan at ElegantThemes.com with the subject line DIVI SITE SUBMISSION.

divi-2-6-logo

Divi 100 Day 6

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 10 Awesome Divi Sites That You Would Never Recognize, and What Makes Them Unique appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar