On The Sixth Day Of Divi, We Created The Premade Portfolio Layout Pack

Posted on December 16, 2013 by 65 Comments

On The Sixth Day Of Divi, We Created The Premade Portfolio Layout Pack
Blog / Resources / On The Sixth Day Of Divi, We Created The Premade Portfolio Layout Pack

Hopefully you have had a chance to download our latest theme, Divi. As mentioned in the Theme Launch Post, we will be writing a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!


Six New Premade Layouts For Designers

Yesterday we released a tutorial on how to import and export saved layouts in Divi. On that same note, today, we are releasing a portfolio layout pack that you can easily import into your Divi Theme. This download includes 3 creative homepages and 3 project layouts that you can populate with your own content and images. Below are the six premade portfolio layouts that come in this pack. Click on their demo links to see them in action!

Download The Pack

Creative Agency Homepage

This layout is perfect for displaying your portfolio right on your homepage, while also featuring your clients and their testimonials.


Masonry Images Homepage

This image based homepage is a nice way to display a bunch of images, no matter their aspect ratio.


Creative Agency Landing Page

The Agency landing page is a nice welcome page to display your logo, tagline, and a link to your full portfolio. By turning on the parallax effect and uploading the same background image for the top and bottom sections, you can create the illusion of the white banner floating across a single image as you scroll.


Extended Project 1

By default, Divi formats your project pages for you. However, you can use the Divi builder for project pages as well. This template displays a main image wtih the project description and meta data below. Beyond that are four blurbs, a river of images and a project grid for easy navigation to your other projects.


Extended Project 2

This two column layout is a simple and organized way of placing your project info and images side by side. This template is also capped off with a grid of image for convient access to your other projects.


Extended Project 3

This layout is very similar to the Extended Project page in the Divi Demo. The diversity and length of this layout makes it great for case study pages and extensive branding projects.


How To Use These Templates

As outlined in our post yesterday, custom layouts can be easily imported and exported when using Divi. To import these new custom layouts, simply use the WordPress Importer plugin to import the XML file in the download pack above (you must first unzip the download folder to uncover the XML file inside). Once imported, these beautiful new layouts will appear when you click the “Load Layout” button in the builder! I hope this illustrates the usefulness of premade layouts, as well as the power of Divi’s importing/exporting feature. Enjoy the layouts ๐Ÿ™‚


Want To Build Better WordPress Websites? Start Here! ๐Ÿ‘‡

Take the first step towards a better website.

Get Started
Premade Layouts

Check Out These Related Posts

9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Posted on July 27, 2019 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you donโ€™t have to start from scratch for...

View Full Post
The 11 Best Code Editors Ranked

The 11 Best Code Editors Ranked

Posted on January 3, 2019 in Resources

Whether you’re a new web developer or a veteran code junkie, you need a code editor robust enough to handle everything you can throw at it. In fact, that might just be the most important part of your toolset. Since this is an ongoing search for most everyone the field, we wanted to give lay...

View Full Post


  1. Great Layouts, thanks

  2. Thanks!

  3. Hey, thanks. This theme is getting really interesting.

    • The color shift in the full section header of the masonry example (2nd) is css or an option I did not find yet?

      thanks for any hints

      • Probably a background image…

        • Sweet

        • Hi, I am using the masonry libary layout, it’s great !! But is it possible to have the same distance on the four fights of the pictures?

          • left, right, upper , under

  4. More Awesomeness!

  5. Wow, you folks just rock! I was starting to contemplate creating some layouts, and here you are short-cutting the project for me so that I can just load some up, modify to suit my needs, and roll. Really, really nice…thanks!

  6. Pulling out all the stops! This is getting interesting.

  7. So Far, it’s looking like it’ll be a great Christmas.
    Thank you ET.

  8. simplement magique Divi

  9. Very good.. thanks ๐Ÿ˜€

  10. Wow. For years I have used iThemes and Builder. I recently tried Elegant Themes and now with Divi, I will not be renewing my subscriptions with iThemes. Thanks for the great themes, plug-ins and such. I can’t wait to see what’s next!

  11. How about making it fully-quicksand? Not just the filtering, but the actual item, too, or at least an excerpt+featured image. You know, like Flexible?

    I think that feature provides for the best portfolio navigation, with people being able to have a good quick look at the portfolio without loading an entirely new page, and without using lightbox, wich tends to work so, so bad with mobiles.

  12. This is just awesome. I can now see why it was WELL worth the wait for Divi!
    Keep up the amazing work guys/gals ๐Ÿ™‚

  13. This is very very usefull and it makes more and more the DIVI Theme a NR.1 winner ๐Ÿ˜‰
    Thanks for the tips..

    waiting for tomorrow ๐Ÿ˜‰

  14. Our development team is loving Divi! It came at just the right time for us to use on a new site project, so we are exploring all of the great options. The 12 Days of Divi are making it very fun. Thanks for all the quick-start demos!

  15. I’m speechless….just eclat! Thanks for spoiling us Nick

  16. Awesome post yet again!

    Question for you Nick: will the divi builder be touch supported in near future? WordPress 3.8 looks and works (nearly) perfect on my iPad and iPhone. But the new builder dose not work with touch devices :-/

    I look forward to your reply ๐Ÿ™‚

  17. It’s the most wonderful theme of the year! ๐Ÿ™‚

  18. What a perfect way to ‘close’ 2013! Thank you guys! Keep it up.

  19. Having developed websites for years and having used other more top heavy CMSs I have just started getting into WordPress, which has been so-so so far.
    ET have turned the tables and delivered the beautiful and elegant Divi. Keep up the good work and keep on giving us that nice glow!

  20. This looks amazing, and looking forward to a post on this themes Blog capabilities.

  21. Merci beaucoup je prends

  22. I’m having way to much fun now that I can just be creative and not have to code out special items. Thanks for the great modern theme and the playground in it!

  23. I guess Divi is a competitor – and the winner – to Theme Thesis?
    I never got used to the coding on that system.
    With Divi I am quite exited.

  24. I’ve been furiously building a huge new site with Divi since it appeared, the options are endless! I can’t keep up with all these awesome updates, my head’s melting! ๐Ÿ™‚

  25. awesome layout, thanks
    I love elegantthemes

  26. Thank you! Divi~
    I can’t wait to try this

  27. Hi Nick

    Great job!
    Thanks a lot


  28. Thank you, ET! I love this new theme and the premade templates.

    I’ve been able to (finally) get my dream concept out of my head and onto the site because with this theme.

    I’ll be launching soon thanks to Divi!

    Keep up the great work, it is greatly appreciated.
    Patty Rose

  29. Great job Nick, i already download the “premade-portfolio”, by the way the animated counters module is very intersting!

  30. Awesome, again! These layouts help alot to learn how Divi works so great!

  31. Fantastic! Thanks!

  32. Nick,

    (a) Nice job producing these layouts.
    (b) Importing these via XML is also superb.

    The most wanted item is Woocommerce SHOP templates and if these are released before 2013 ends, that will be awesome. What do you think ?

  33. Considering one of the main focus points of Divi is the new page builder and how easy it is to create our own layouts, i don’t quite see the point in these layouts.

    You would have been better off providing alternative layouts for your previous themes that dont support the new page buider and instead providing additional modules and features for Divi.

    Just my two pennys.

  34. I like the portfolio functionality, but was also wondering if there is a way to do a simple image gallery with thumbs that open to larger image in lightbox?

    I looked through the modules and features and don’t see any support for image galleries.

    The Divi theme is amazing. Competes with my favorite much more expensive theme I’ve been licensing for client projects. Bravo!

    • For this you could use the NextGEN gallery plugin.

  35. amzing..this will help how Divi works..thanks for the article and update..!!

  36. Sorry to ask this but, when using the portfolio module, how can i insert images?
    When opening the Portfolio Module Settings, the field for “include categories” is not there.

    Please help as I am stuck with this one. Thank you!

  37. Please disregard my previous comment. Found the solution already. ๐Ÿ˜€

    • I have the same problem. How did you get it to work?

      • If you need any help, please open a ticket in our support forums so that our team can assist you.

  38. What should be the size of the video files for smooth running in the slider background please?

    • It really depends on the size of your slider, which is dictated by the amount of content within your slider. 1920×1080 can be used to cover most bases, if you are looking for a high quality video.

  39. Could you explain what the first sentence means in the following excerpt from your post?

    Extended Project 1

    By default, Divi formats your project pages for you. However, you can use the Divi builder for project pages as well.

  40. I’d love to download this pack of layouts, but i only get an xml file (etsandbox.wordpress.2013-12-14.xml) is it still possible to download? I was able to download other files/packages…


    • You need to import the XML file as outlined above. This will load the layouts and make them available in the builder.

      • Ah, yes I see it now… also makes sense now that I’ve been working with the theme a couple of days.

        Thanks, I really enjoy working with the Divi theme and page builder within it.

  41. I canโ€™t keep up with all these awesome updates, my headโ€™s melting! ๐Ÿ™‚

  42. The XML file doesn’t seem to be importing correctly. The Business Layouts worked just fine, but these keep giving me a “Failed to import: Invalid post type” error on each one. I’ll check the support section and see if anyone else is having trouble.

  43. Thank you for the great downloads for Divi. The theme is truly awesome. I do wish that there was a gallery lightbox option available…do you ever intend to create a gallery function for the theme? Thanks!

  44. Wondering how you were able to use the masonry grid with Divi in your screenshot above?

    +1 for Lightbox option along with Masonry gallery ๐Ÿ™‚

  45. I am sorry but when i download the “pack” in the top and import the “etsandbox.wordpress2…xml file

    Nothing happens?

    Something i need to do?

    • I got it.

      But i have problems with changing the divi logo link… i want it to go to another page i have made… but how do i do that?

  46. I really love Divi. I’m especially excited about the parallax feature. Can you tell me the optimal image size for using this feature as a full screen image? I’d love to know the optimal image sizes for each image feature in your theme. I’m just trying hit or miss now…
    Thank you for your beautiful, beautiful work on Divi!

  47. I canยดt seem to be able to make my portfolio look like this (http://elegantthemes.com/preview/Divi/portfolio/). I canยดt make the pictures appear, just the name of the project!
    Could someone help me solve this?


  48. The Live Demo links no longer work. Are they being redone to use Divi 2?

  49. Hello!

    Love the idea but I tried uploading the zip file with the importer and it gave me an error -sigh!

    Here’s the message: Sorry, there has been an error.
    This does not appear to be a WXR file, missing/invalid WXR version number

    Any advice?

    Thank you!

  50. Each of the ‘Live Layout Demo’ buttons above gives a 404 error.

  51. I’m re-doing my portfolio website and wanted to use the “Project Basic” pages shown as an option in the Divi Theme Preview on the website. When I am editing my website, there is no “Project Basic” option in the page builder/pre-made layouts. My Divi Theme has been updated yesterday. I saw someone wanting to use “Project Basic” had asked this question in the support forums, and the response was to download the new portfolios, which doesn’t really help. Can someone please advise? Thanks!

Get Started With Divi