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.

See Website

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.

See Website

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.

See Website

4. WPDev.Work

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.

See Website

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.

See Website

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.

See Website

7. VEEZ

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.

See Website

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.

See Website

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.

See Website

10. Contentools

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.

See Website

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.

See Website

12. Colorstone

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.

See Website

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.

See Website

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.

See Website

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.

See Website

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.

See Website

17. interVisionit

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.

See Website

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.

See Website

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.

See Website

20. Yawplife

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.

See Website

21. EventCreative

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.

See Website

22. Hyphen

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.

See Website

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.

See Website

Ending Thoughts

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:

We want to hear from you. Which of these page layouts are your favorites? Let us know in the comments.

The post 23 Divi Websites that Have Unique Page Layouts appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!