It’s difficult to design a layout that’s completely unique from start to finish. Most sites need a good layout with basic information and most use similar elements to display that information. In this article we’ll look at 23 Divi websites that have unique page layouts.
Many of these site will only have one unique feature while others will be completely unique. I’ll show an image of the unique feature and discuss what I liked about it.
The websites are in no particular order. Hang around to the end for a few links.
1. 24 Hour Fitness Sunland
This site uses lots of angled sections with text. Some are multi-colored, some are solid, others are transparent, several use parallax, and at least one is an overlay. Several include blocks of text that angle with the section. They work great as highlights and don’t get in the way of the content.
2. Harmony Pilates
This website has a section with tilted text. I’ve actually wanted to see tilted text for a while. Text doesn’t have to be horizontal. Tilted images and graphics have been used for years but it’s uncommon to see titled text. The tilt alone is enough to make this section stand out.
3. SDG Nederland
This one has lots of blocks within its layout that provide links to goals. The blocks are multi-colored and use both graphics and text. They also include an overlay on hover.
One of the elements that stands out about this site is the alternating sections with overlapping images with vertical text. The text is multi-colored and is placed over the dark background. The images appear and slide into place on scroll.
5. Hailey Sault
Using images as links to pages is fairly common but this website does it in a unique way. The images are place in two columns in full-width, completely removing the space on all sides. The categories are placed within red boxes that stand out. Each of the images use elegant overlays.
6. Powdi Studio
This website introduces each section with an offset title in the background that stands out just enough to see. Text is displayed over the background title to show another title in small text and a tagline in a larger text.
This site has a unique set of links to show the various collections. The links are placed on one side of the screen, leaving the rest of the screen empty. They show an image offset over a small background block and display the year of the collection in large text over one corner of the image. The title is placed to one side under the image. The same design is used as a shop CTA.
8. Simple But Creative
This one has an interesting section with four cards that overlap the previous and next sections. The section itself displays a two-color pattern with circles and an angled line. The cards use shadow effects.
9. Eat Thai Restaurant
This is a one-page design where the majority of the layout is the food menu. It doesn’t need navigation. The logo, contact information, social follow buttons, link to directions, hours of operation, and a link to order online appear in a vertical bar that remains on screen. The bottom of the page includes a map.
This website makes excellent use of a timeline layout. It provides two options at the top of the timeline. Clicking on the option you want displays a layout for that option. A timeline steps you through the process. Both timelines use alternating design and are mirror images of each other.
11. Bookin Agency
This layout focuses on the artists. It displays black-and-white images in a multi-column layout with no space between them. Hashtags are used for their categories. Yellow buttons take you to their detailed information pages.
This site uses lots of large blocks of color for the backgrounds. The first section with color displays three social links in full-width. Following this is a section for each of the band members that use alternating colors in full-width. Their images includes their shadows, so the background looks like it’s part of the image.
13. Free 4 Life
This site uses lots of elegant overlays and gradients within its alternating sections in parallax. The thing that stands out as unique though is this one section with three CTA’s that use the backgrounds from the website in parallax. They’re clean and blend perfectly with the site’s design.
14. Mary and the Dot
There are a lot of things I like about this one. I especially like their use of yellow, red, and overlapping elements. One thing that stands out as unique is the portfolio section. It displays the portfolio in full-width with each item being numbered with large numbers. Hovering brings in a title and link.
15. Viva Design Studio
This one uses some unique graphical elements in the backgrounds. The hero section displays a video that moves from side to side and peeks through the text. Portions of the video are hidden behind a background with an angle that’s carried through the rest of the site. Blocks of color create these angled areas. Most of them have text that are styled to be readable over the various colors. One section has text that’s angled with the colored block.
16. The Floating Shelf Company
The hero section of this online store creates a clean magazine-style design with the product slider and two smaller banners to the right. The banners use hover animation to push the image upward and reveal a sales message, information about the service, and links.
This site uses a boxed design and keeps the logo and menu on screen when you scroll. The top of the scrolling area shows the site fading as you scroll. I particularly like this section that displays an image in parallax with several different section separators.
18. Veggies and Chocolate
This one has a unique way of creating a list of links. It uses a 2/3 1/3 column layout to show an image in the larger side to catch your attention. The other side includes the title and links, which are centered and include an arrow for bullets.
19. Bamboo Beats
This site has several unique elements including a diamond-shaped award that connects several images, an image inset within another image, several offset and overlapping image and text modules, and multiple borders that overlap each other.
This one has a unique blog section that displays the posts within a multi-column layout. Some display as a large block, some are small, and others are wide. Those without images are rest days and they have different colored text than the others.
This one has several interesting elements. One that I found particularly unique was the blog section. It uses large cards that look elegant and include the expected information: image, title, meta, excerpt, and read more button. What stands out though is that you can scroll through them from side to side using a scrollable bar under the blog section.
This one uses lots of interesting angles and patterns of color throughout the site. In some sections the angles give the impression that the site is tilting when it’s not. The slider displays the number and title of each slide and highlights the name of the slide that’s visible.
23. Hocking Consultants
This site includes lots of elegant background gradients. My favorite section shows their process. The section includes styled separations for the top and bottom that includes multiple angles and color that matches the site’s design. Each step of the process has a number within the background with the text over it. I also like the line with an icon. This design is used throughout the site.
That’s our look at 23 Divi websites with unique page layouts and design elements to help inspire you for your next Divi website.
In our world of amazing designers I can be difficult to design something unique. Fortunately there are lots of articles here at the ET blog about layout design with Divi. Here are just a few:
- How to Create an Abstract Gradient Hero Section with Divi (6 Gradient Color Palettes!)
- 4 Layout Design Tips to Optimize Your Divi Web Content
- Design a Striking Divi Product Layout with Image Perspective and Colorful Abstract Waves
- How to Design a Standout Work Experience section for Your Freelancer Site with Divi
- How to Use Text as an Abstract Design Element in Divi
- How to Create Pop Out Sections with Divi’s Boxed Layout
- How to Overlap Modules and Rows to Create Unique Layouts in Divi
- 25 “Hidden” Divi Features to Boost Productivity and Design
- How to Choose the Right UI Design Colors for Your WordPress Site
- 6 Color Matching Techniques for WordPress Web Designers
We want to hear from you. Which of these page layouts are your favorites? Let us know in the comments.