3 Effective Web Design Principles for the “Non-Designer”

Welcome to part 2 of our mini series “Effective Divi Web Design Principles” where we’re exploring effective design practices to help empower new web designers and those who identify as someone without an “eye for design.”


In our previous post, we covered preparing your mindset and went over some ways of learning how to develop a better eye for design. In this post, we’re going to focus on some universal principles of good design that you can apply immediately to your web design endeavors in order to become better at the “design” side of web design.

Let’s get right to it!

3 Effective Web Design Principles for the “Non-Designer”

As mentioned in part 1 of this series, there is no right or wrong when it comes to design. What we’ll go over in this post is largely and universally accepted as good design principles within the web design community at large. This is also my personal guideline as a graphic/print designer turned Divi web designer with nearly a decade of experience and more importantly, hundreds of happy and satisfied clients. I employ these principles to every Divi website design I build and while there’s always that one client who wants something atrocious or off the wall, these will serve you well at least 9 out of 10 times 🙂

1) Rule of Thirds

One of the most common practices across web design, graphic design, print design, photography and other creative mediums, is to follow one simple rule – The Rule of Thirds. In short, the Rule of Thirds is all about symmetry and balance. The objective of the rule of thirds is meant to help you achieve more balance and harmony in design. And the best part is – you can apply the Rule of Thirds to graphics, images, entire web page layouts and more!

There are numerous conversations online as to whether the Rule of Thirds is scientific or not, but regardless, popular opinion shows that if an image or design is too similar in both the left half and right half or top and bottom, the audience might find it dull or boring. If anything, the rule of thirds keeps it interesting and can lead to good flow which we’ll cover below.

In our previous post on Design Tips to Optimize Your Divi Web Content, it’s also referenced as a grid system which is a great way to visually think about it. Imagine a grid that looks like this:

With this imaginary grid on your image, graphic or layout, you can easily place content near one or more of the main intersection points.

Keeping objects and focal points at 1 or more of the 4 intersection points will often achieve a much more balanced, symmetrical look as opposed to the second example where the subject is below the intersection point. Take a look at the image below. The first example is NOT following the rule of thirds.

This example IS following the rule of thirds.

While the first example is still a nice image, using the rule of thirds provides an entirely different feel to the image by intersecting the foreground with the bottom intersection points in the rule of thirds. Let’s look at the image with the rule of thirds grid.

Now let’s look at the image without lining up the rule of thirds intersections.

You can see a big difference in regards to how the eye-pleasing designs will often line up with one or more of the intersection points. While the Rule of Thirds is most commonly talked about in photography and videography, it’s equally as important for website design. I’ll show you how I applied the rule of thirds to my personal site. Here’s a snapshot of the initial design “above the fold,” which applies to what the viewer sees before scrolling down.

Now, let’s put the rule of thirds grid over the main section and see how it looks. In this case, I’m going to focus on the content below the primary menu where I implemented the rule of thirds.

In this example, there are 4 main elements that are on or close to the intersection points. In short, I wanted to accent the following:

  1. A brief description of who I am and what this site is all about.
  2. A picture that allows new users to feel more comfortable and trusted by seeing who they’re going to hear from.
  3. A graphic of my latest e-book giving folks a reason to sign up.
  4. Finally, a call-to-action email sign up in the final 2 frames which is where the user’s eye will end.

With the rule of thirds, it’s generally not best practice to have something at every intersection point (particular in photography) but I often follow this layout in my website builds. And on a side note: since we read from left to right, I often have call-to-actions in the middle or right side of the screen since that is where our eye ends. We’ll go into call to actions in more detail in the final post in this series but this is a good example how I implemented the Rule of Thirds into my design.

So if you’re not sure about how to layout a webpage or are struggling with mixing images, text and perhaps a call to action, try following the rule of thirds and let that be your guide.

2) Layout and Flow

When it comes to laying out and designing a web page, there again is no right or wrong style. It often depends on the project, your client’s wishes, your design style and often the market you’re targeting. More often than not, in digital or services like web design agencies, fashion and photography more modern and trendy designs with a minimalistic look and feel. With modern design often comes more open space, less text driven content, more imagery and perhaps more scrolling. (Some of my old-fashioned clients just shuddered!)

In more traditional business markets such as manufacturing, law firms, blue collar industries, etc, you’ll likely find websites with more text driven content, less open space and undoubtedly with imagery and design elements that are less…appealing. And for whatever reason, the majority of my clients in these industries are severely opposed to too much scrolling. So knowing how to design a layout with good flow is key! I’ve found often that I have to try and balance MY creative design style with what works within my client’s industry, target demographic and my client’s wants and needs. With all that said, there are some basic layout and flow principles that can be applied no matter who you’re working with or what industry they’re in.

Looking back at the previous post mentioned above, a very important guideline to follow is a z-pattern of design. You’ll find this frequently with many of the new professional Divi layout kits that are provided weekly.

Let’s take a look at what I mean.

In the first example on the left, there’s an image on the left, text on the right with a nice call to action button then your eye reads down and to the left to a another section of text/CTA then with another image on the right and repeat. Vis versa, on the image to right, a reversed pattern is there. Text to image to image to text, etc. Following this z style pattern is a great way to keep readers interested and is a wonderful way to balance text and images together.

This isn’t’ the only option for layout in flow in good page design but it’s good practice being that we take in content from left to right then down. Then left to right then down and so on. So when in doubt, try following the z style pattern as a way to help organize the flow of your page content. And one final note on scrolling – I tend to keep my sites within 3-5 scrolls. More often than not, the more you have to scroll the larger the page will be and the slower it will load. Again, there’s no right or wrong in regard to scrolling but if you haven’t yet worked with clients of a more old fashioned mindset, you’re guaranteed to run into some opposition. I try to reaffirm those clients that scrolling is not to be feared. Social media has trained us to scroll constantly and take in content quickly.

3) Visual Hierarchy

The last main principle I’d like to point out here is visual hierarchy. In short, hierarchy helps the user know what the most important information is and provides them with a very clear direction of where their eye should go in your design. Hierarchy is often referenced with typography (which we’ll get into in our third post) but it can also be very important in the graphic elements, images and the overall design of the site.

I’m not going to intentionally point out sites that I feel lack in the “good design” department but I’m sure you have come across plenty of sites that have a smorgasbord of text and images that are all the same size with no clear call to actions, right? That’s what we want to avoid. Using good hierarchy is the best way to guide your website user in knowing WHAT they should click on or do next.

Here’s an example of a recent design I created with hierarchy in mind:

While the logo and phone number in the top right are clearly big and visible, the largest content and most vibrant color above the fold is the call to action to click the button.

My client specifically wanted people to easily request an inspection right when they got on the site so I used this idea of visual hierarchy to hopefully achieve just that! Another example of how I used hierarchy recently is the design above the fold in this site:

In this case, the client’s main call to actions are to either Shop Online or Contact them directly. The logo, short description and even the phone number are prevalent but the Divi Double Button is the largest element you see initially in hopes to get users to click what they’re looking for if they don’t scroll any further.

So again, while those are just a couple of examples of visual hierarchy, it can be a very powerful method in directing your website users to do what you want them to do or go where you want them to go! As an aside, I highly recommend checking out our previous post on Common Web Design Errors to Avoid.

In Closing

I hope these effective design principles have helped you in your design endeavors whether you’re new to web design or are looking to get better at design! Again, there are many principles we could go over but these are the top 3 that try to implement in all my website designs.

If you have any other design principles you’d like to share, let us know in the comments below!

Tomorrow: 3 Important Areas of Design to Focus on for Every Website Build

Now that we’ve covered preparing our mindset, how to learn to have a better eye for design and have gone over some basic design principles, our final post is going to explore a few of the most important aspects of web design to focus on for every website build. Till then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post 3 Effective Web Design Principles for the “Non-Designer” appeared first on Elegant Themes Blog.

Powered by WPeMatico

3 Ways to Learn How to Have a Better Eye for Design

Welcome to part 1 of our mini series “Effective Divi Web Design Principles” where we’re exploring effective design practices to help empower new web designers and those who identify as someone without an “eye for design.”


In today’s visual age, design is more important than ever. Good design can make or break your business when it comes to converting potential clients to customers. It can be the difference between making a sale or having a potential customer click off your website looking for a more professional service or product. And while new web designers and developers often claim to have an “eye for design,” there are some basic design principles that everyone can apply to help become better at the “design” part of web design!

Series preface:

  • The strategies, practices and tactics we’ll cover in this series are applicable to web design in general and are not Divi specific but this series will be based around my experience as a Divi Web Designer. Many of references, layouts and starting points mentioned will be involving Divi specifically.
  • This series is largely meant for folks who are either new at web design or are of the developer mindset who feel they don’t have a natural eye for design. But hopefully many of these concepts will serve as inspiration or a refresher to already established designers as well.
  • Great web design principles have been mentioned here on the blog before so we will be linking back to some previous posts and resources throughout the series. This is primarily a guideline to some of the most important principles in good design that I apply as a successful Divi web designer that you can apply as well!
  • Finally, when it comes to good design, there is no right or wrong. In fact, it’s really a matter of balancing popular opinion, your personal creative opinion and the client’s wishes. We’ve all had that client who thought something looked great that we knew looked awful, right? Not everyone will agree to these design basics but it’s safe to say that these principles are universally shared by professional Divi designers and the web design community at large.

Here’s an outline of the mini series as we look ahead:

  • Part 1 – 3 Ways to Learn How to Have a Better Eye for Design
  • Part 2 – 3 Effective Web Design Principles for the Non-Designer
  • Part 3 – 3 Important Areas of Design to Focus on for Every Website Build

Before we dive in, I must say that while I understand some people are more gifted in creativity than others, I strongly contend that YOU CAN learn good basic design principles. You may not become the Michelangelo of Divi, but by golly you can still learn some good design practices to apply to your web design endeavors. I’ll spare the embarrassment of posting some of my first web designs but I’ll just say that my “eye for design” is ever-evolving and is maturing more everyday. By no means did I start out where I am today. And frankly, design is important in more than just web design. It plays a big part in organizing content, writing emails, taking good pictures with your phone and more. So it’s very important to know a few basic principles to apply to other aspects of your life too.

So, if you’ve ever caught yourself saying any of the following;

  • “I just don’t have an eye for design.”
  • “I don’t have a creative bone in my body.”
  • “I can code but I can’t design.”

Then this series is for you! Let’s get into it.

3 Ways to Prepare and Learn How to Have a Better Eye for Design

In the world of web design, people tend to identify with one of two groups:

Web Designer – A web designer, aka (front-end designer) will likely be drawn to the design, colors, layout and aesthetics of web design. They will likely come from a graphic design background or perhaps a more visual medium like photography or other creative arts. If you’re more interested with how things look and feel as opposed to how fast it loads, how clean the code might be or what customizations went into the php and css files, then you’re more than likely in this boat 🙂

Web Developer – A web developer, aka (back-end developer) will likely be more interested in mathematics, numbers and in the web design realm, the code, functionality and backend of websites. Whereas a “designer” might see shapes, colors, look, feel, etc, a more developer minded person might see something similar to the matrix – code, functionality, usability and things that lay beneath the surface of a website.

Both are key to a successful website design and in my opinion, a successful web designer needs to have a healthy mix of knowledge in both worlds. Personally, while I’m now well versed in design and development, I’m still drawn to the design side of things. I need to work ever-harder to consider load times, clean code and functionality instead of a constant focus on design, layout, look and feel. But for those opposite of me, it’s equally as important to focus on eye-pleasing design as opposed to a terrible looking website that loads quickly with clean code.

What we’re really talking about here is a mix of the left and right brain. This is probably no secret to most at this point, but there are numerous studies that the left side of the brain is analytical, mathematical, sequential, logical, etc. The right side of the brain is artistic, creative, insightful, imaginative, etc. This is key to understanding WHY you may be drawn to being a designer or developer.

In short,

Developer = Left Brain Thinker
Designer = Right Brain Thinker

An understanding of that leads us to the first main point.

1) Preparing Your Mindset

If you’re more of a creative, you’re more than likely going to have to either work harder at coding and the more logistical side of web design and vise versa, if your tendencies lean toward the left side of the brain, you’re going to have to work a little harder to develop a good eye for design. As mentioned above, I’m more of a right brain thinker and a creative. While I love CSS and can now get dangerous with PHP without sweating too much, I did not start off that way. I had to work very hard at the areas of web design that I was not good at.

But it started with my mindset. I knew what areas I was strong at and which one’s needed work. I want to encourage you on that point again, YOU CAN learn good design principles and YOU CAN develop an eye for design if you’re new or if you’re a developer without a creative bone in your body.

At this point, you’re probably saying “This is all great, but what can I do to prepare my mindset to learn good design techniques?” While we all learn differently, I’ll tell you what has worked for me and what I know has worked for many other Divi designers around the community.

2) How To Learn and Develop an Eye for Good Design

Learn by replicating good website designs – Yep I said it. If you see a good design, try recreating it, copying their colors, typefaces, spacing, layouts, etc. I’m not saying rip a site off in order to sell it as a child theme or as your work but from an educational standpoint, one of the BEST ways to get better at design is to replicate an already beautifully designed site. You’ll be amazed at how much you’ll learn and how empowered you’ll feel by replicating a beautiful design that you can mimic.

For Divi related inspiration, you can find some good examples of designs frequently here on the ET blog via the monthly site showcases like this one, through Divi Theme Examples or by following your favorite Divi designers and seeing what they come up with!

Learn by examining designs everywhere – While printed designs and other advertisements may not be ideal learning for web design trends, you can still pick up valuable design principles. For example, perhaps you see an ad with a strong image with the text designed in a modern, sleek way, you can very well take that same idea and apply it as a strong design on your site! I don’t dread a trip to the mall with my wife and walking into makeup stores now because I use that as “Josh’s trendy design take in time.” Time previously spent staring down at a phone is now often productively spent checking out new design ideas and concepts that I can apply to my web design projects!

Learn by building off of the Divi Library– One of the most magical things about designing a site with Divi is that it comes with a full library of proven, effective layouts and designs that you can build off of. If you’re new to design and Divi or are feeling stuck looking at a blank canvas, you can load one of the premade layouts from the library, change colors, replace images and get a jump start! Watch how reworking an already professional design will begin to train your brain for your next project.

Learn by downloading and building off of a free weekly Divi Layout Pack – If you’re a new Elegant Themes member or are not already aware, there are professionally designed Divi layout packs dropping weekly here on the blog that are FREE for download. Not only are these a great source of learning and inspiration if you’re interested in getting better at design, but like the library items mentioned above, these are great starting points if you’re new to design!

3) Get Feedback and Constructive Criticism on Your Work

Finally, one of the best ways to improve your design chops is to get feedback from others. Often, when you’re embedded in a project, it’s easy to lose your bearings on what looks good and what looks bad. Getting feedback and constructive criticism on your work is key to becoming better at design.

Now I get it, this is easier said than done. And you probably want to avoid getting destroyed or demoralized especially if you’re still learning, but if you’re using Divi, you automatically have access to the most engaged, supportive and helpful community online. There are numerous outlets to connect with Divi nation but my personal preference are Divi Facebook groups. I intentionally created the Divi Web Designers Facebook group with the primary purpose of being able to post work to get professional, helpful criticism and feedback to help us all become better Divi Web Designers. If you have any trusted family, friends or perhaps fellow web design colleagues with a good eye for design I also highly recommend getting their thoughts if you don’t want to get feedback online.

I find it very useful to get feedback because it’ll often point out either bad design that is overlooked, areas of improvement or more. For example, an area that I don’t have a great natural gift in and need to work hard at is typography. Not long ago, I worked on a site that I thought looked awesome from head to toe and when getting feedback, was told that the type I used didn’t seem to fit the “feel” of the site. After brushing off some initial designer pride, I realized that they could not have been more right. The type indeed did not correspond with the feel of the site. Since then, I’ve learned to be extra conscious of the typefaces that I choose in an effort to make them match the right look and feel of the site rather than sticking with my “go to’s.”

So if you’re feeling brave enough to get some constructive criticism, you’re welcome to come to do so in our Divi Web Designers Facebook group or any other Online Divi Communities if it adheres to the group’s guidelines. And as a side note, if you’re someone giving the feedback, I want to encourage you to be extra careful with your words and how you give constructive criticism. When giving feedback, remember to try and build up the person up, not tear them down.

In Closing

I hope this introduction to Effective Divi Web Design Principles has you inspired and pumped up for the rest of the series! Again, this first post was more of an introduction and preparation as to what’s ahead but is nonetheless important because before you can get better at design, it starts with your mindset preparation to learn.

Do you have any other thoughts or practices on how to learn better web design techniques? Let us know in the comments below!

Tomorrow: 3 Effective Web Design Principles for the Non-Designer

Now that we’ve covered preparing and learning how to have a better eye for design, it’s time to get into some actionable, practical design principles that’ll help take your design game to the next level! Till then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post 3 Ways to Learn How to Have a Better Eye for Design appeared first on Elegant Themes Blog.

Powered by WPeMatico

Download a Tasty & Free Coffee Shop Layout Pack for Divi

Hey Divi Nation, thanks for joining us for the next installment of our ongoing Divi Design Initiative; where each week we give away a brand new, free Divi Layout Pack (complete with gorgeous high quality images) from our design team to you.

This week Kenny and his team have created a tasty Coffee Shop Layout Pack with eight different pages that provide everything your average coffee shop will need to get up and running in just a few clicks.

There are three mains things about coffee that attract people; the smell, the taste and the way it looks. Since adding a smell or taste to a website is physically impossible, a coffee shop website highly relies on the way it looks. The design team has made use of a great color palette, high-quality images and expert use of Divi’s built-in design options to create a coffee layout pack that’ll leave your visitors speechless and intrigued.

divi layout

Check Out The Divi Layout Pack for Coffee Shops Below

Download For Free Today!

coffee shop

Landing Page Design

coffee shop

View The Live Layout Demo

Home Page Design

coffee shop

View The Live Layout Demo

About Page Design

coffee shop

View The Live Layout Demo

Blog Page Design

coffee shop

View The Live Layout Demo

Contact Page Design

coffee shop

View The Live Layout Demo

Brew Guide Design

coffee shop

View The Live Layout Demo

Shop Page Design

coffee shop

View The Live Layout Demo

Menu Page Design

coffee shop

View The Live Layout Demo

Key Features

This eight-page coffee shop layout pack has everything you could possibly expect from a coffee shop website. Primarily; all of the practical information is continuously present on each layout of the website. There is a footer at the end of each one of the pages that shares the working hours and contact details elegantly and noticeably. On top of that, the visuals that are being provided in the different layouts are absolutely stunning and in line with the quality coffee you want to bring to your visitors.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.

  1. Coffee Shop Landing Page (live demo)
  2. Coffee Shop Homepage(live demo)
  3. Coffee Shop About Page (live demo)
  4. Coffee Shop Menu Page (live demo)
  5. Coffee Shop Brew Guide Page (live demo)
  6. Coffee Shop Shop Page (live demo)
  7. Coffee Shop Blog Page (live demo)
  8. Coffee Shop Contact Page (live demo)

Download The Layout Pack

To use the Coffee Shop Layout Pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How To Import The Divi Layout

Subscribe To Our Youtube Channel
Once you have downloaded the layout pack, locate the divi-coffee-shop-layout-pack.zip file in your downloads folder on your computer. Double click the folder to unzip it and then navigate inside the divi-coffee-shop-layout-pack folder. Inside this folder you will find 8 files, each of which is a unique layout that you can import into your Divi Library. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export. You can select the individual layout you desire or choose the All Layouts file to important everything at once.

  • Coffee-shop_All.json
  • Coffee-shop_About.json
  • Coffee-shop_Blog.json
  • Coffee-shop_Contact.json
  • Coffee-shop_Menu.json
  • Coffee-shop_Landing.json
  • Coffee-shop_Shop.json
  • Coffee-shop_Home.json
  • Coffee-shop_Brew-Guide.json

To load one of these layouts onto your page, activate the Divi Builder and then look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup and then navigate to the Add From Library tab. Here you can choose any of the eight layouts we’ve included in this pack to add to your page.

coffee shop

No Licensing Restrictions

coffee shop

The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

But Wait…There’s More!

We hope you enjoy this coffee shop layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through what it might be like to actually use this layout for your own website instead of simply importing it and loading it up. We’ll talk header and footer design, customizer settings, converting certain sections to global, and more.
See you there!

The post Download a Tasty & Free Coffee Shop Layout Pack for Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

Download a Stylish Fashion Layout Pack for Divi

Hey Divi Nation, thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you.

This week our design team breaks into the world of fashion with a fashion layout pack designed to be as flexible as it is stylish. With the eight different page layouts included in the pack, the website is going to look great right out of the box. And, the site isn’t limited to the fashion niche. With a few customizations, you can build many different kinds of websites including blogs, small business sites, and even e-commerce sites.

divi layout

Check Out The Divi Layout Pack
for Fashion Sites Below

Download For Free Today!

divi-fashion-layout-pack-grid

Landing Page Design

fashion-landing

View The Live Layout Demo

Home Page Design

fashion-home

View The Live Layout Demo

About Page Design

fashion-about

View The Live Layout Demo

Blog Page Design

fashion-blog

View The Live Layout Demo

Contact Page Design

fashion-contact

View The Live Layout Demo

Gallery Page Design

fashion-gallery

View The Live Layout Demo

Shop Page Design

fashion-shop

View The Live Layout Demo

Designer Page Design

fashion-designer

View The Live Layout Demo

Key Features

One of my favorite things about this layout is it’s flexibility. Changing the color scheme of the site would be really easy since all of the content areas have a white background. This makes it all the more flexible for your branding needs. I can see this being used by bloggers, small businesses, photographers, you name it.

But what really shines is how well it is built for e-commerce. The featured sections on the landing page organized and spaced nicely to showcase items on sale, by category, and popularity. The shop module is used throughout to display products in a way that matches the feel of the design. And I love the customizable promotional banners advertising “20% off” and “Buy 1 Get 1 Free”. The fact that they aren’t images and can be edited is a really helpful addition for an e-commerce site.

Keep in Mind

The shop page and product displays throughout the site require Woocommerce to be installed with products added. Also, be careful to keep all of your product images the same dimensions when adding new products so that they all have the same height on the page. It helps that all of the images for your products are the same size so they line up nicely.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.

  1. Fashion Landing Page (live demo)
  2. Fashion Home Page(live demo)
  3. Fashion About Page (live demo)
  4. Fashion Designer Page (live demo)
  5. Fashion Gallery Page (live demo)
  6. Fashion Shop Page (live demo)
  7. Fashion Blog Page (live demo)
  8. Fashion Contact Page (live demo)

Download The Layout Pack

To use the Fashion Layout Pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How To Import The Divi Layout

Subscribe To Our Youtube Channel

Once you have downloaded the layout pack, locate the divi-fashion-layout-pack.zip file in your downloads folder on your computer. Double click the folder to unzip it and then navigate inside the divi-fashion-layout-pack folder. Inside this folder you will find 8 files, each of which is a unique layout that you can import into your Divi Library. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export. You can select the individual layout you desire or choose the All Layouts file to important everything at once.

  • Fashion_All.json
  • Fashion_About.json
  • Fashion_Blog.json
  • Fashion_Contact.json
  • Fashion_Gallery.json
  • Fashion_Landing.json
  • Fashion_Shop.json
  • Fashion_Home.json
  • Fashion_Designer.json

To load one of these layouts onto your page, activate the Divi Builder and then look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup and then navigate to the Add From Library tab. Here you can choose any of the eight layouts we’ve included in this pack to add to your page.

load from library

No Licensing Restrictions

fashion-collage

The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

But Wait…There’s More!

We hope you enjoy this fashion layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through how to turn this layout pack into a fully functional e-commerce fashion blog. This walk through will show you how to use elements of the different layouts to design a custom post layout for your blog, how to add a shop (with Woocommerce) to sell fashion products online, and more.

See you there!

The post Download a Stylish Fashion Layout Pack for Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

Download a Free & Impressive Design Agency Layout Pack for Divi

Hey Divi Nation, thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you.

The free layout pack that we’ll be sharing with you today is one that many of you have been waiting for. We’re giving you a taste of what your next great design agency website could look like by providing you with a layout pack that has nine unique pages and several high-quality images along with some of Divi’s finest design combinations.

This layout pack’s main goal is to provide your visitors with attractive content, clear calls to action and a pleasant stay on the website. The best part? You’ll get all of that and more by downloading the layout pack for free and uploading it to your website in just a few clicks.

divi layout

Check Out The Divi Layout Pack for Design Agencies Below

Download for free today!

design agency

Landing Page Design

design agency

View The Live Layout Demo

Home Page Design

design agency

View The Live Layout Demo

About Page Design

design agency

View The Live Layout Demo

Blog Page Design

design agency

View The Live Layout Demo

Contact Page Design

design agency

View The Live Layout Demo

Portfolio Page Design

design agency

View The Live Layout Demo

Case Study Page Design

design agency

View The Live Layout Demo

First Project Page Design

design agency

View The Live Layout Demo

Second Project Page Design

design agency

View The Live Layout Demo

Key Features

This design agency layout pack will provide your visitors will all the information they need. It’ll also give you the possibility to showcase the most valuable things about your design agency in style. With elegant and informative pages such as the case study page, and with two differently designed project pages, you’ll be able to showcase your previous work in an impressive and tasteful way.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.

  1. Design Agency Landing Page (live demo)
  2. Design Agency Homepage (live demo)
  3. Design Agency About Page (live demo)
  4. Design Agency Blog Page (live demo)
  5. Design Agency Contact Page (live demo)
  6. Design Agency Portfolio Page (live demo)
  7. Design Agency Project 1 Page (live demo)
  8. Design Agency Project 2 (live demo)
  9. Design Agency Case Study (live demo)

Download The Layout Pack

To use the Design Agency Layout Pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How To Import The Divi Layout

Subscribe To Our Youtube Channel

Once you have downloaded the layout pack, locate the divi-design-agency-layout-pack.zip file in your downloads folder on your computer. Double-click the folder to unzip it and then navigate inside the divi-design-agency-layout-pack folder. Inside this folder you will find 9 files, each of which is a unique layout that you can import into your Divi Library. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export. You can select the individual layout you desire or choose the All Layouts file to important everything at once.

  • Design-Agency_All.json
  • Design-Agency_About.json
  • Design-Agency_Blog.json
  • Design-Agency_Contact.json
  • Design-Agency_Portfolio.json
  • Design-Agency_Case-Study.json
  • Design-Agency_Landing.json
  • Design-Agency_Home.json
  • Design-Agency_Project1.json
  • Design-Agency_Project2.json

To load one of these layouts onto your page, activate the Divi Builder and then look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup and then navigate to the Add From Library tab. Here you can choose any of the nine layouts we’ve included in this pack to add to your page.

design agency

No Licensing Restrictions

design agency

The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

But Wait…There’s More!

We hope you enjoy this design agency layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through what it might be like to actually use this layout for your own website instead of simply importing it and loading it up. We’ll talk header and footer design, customizer settings, converting certain sections to global, and more.
See you there!

The post Download a Free & Impressive Design Agency Layout Pack for Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico

Download a Free Breathtaking Learning Management (LMS) Layout Pack for Divi

Hey Divi Nation, thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you.

I must admit, like a lot of you, I look forward to this post every week. The design team just keeps on surprising us with georgeous layouts. And this layout pack is no exception. Today, I’m excited to share with you a learning management system (LMS) layout pack perfect for any e-course website.

Thinking about teaching a course online? Need an upgrade for your current e-course site? This 9 page layout will give you the headstart you need in just a few minutes. And don’t forget, this offer includes all those beautiful graphics, icons, and images as a free download as well!

divi layout

Check Out The Divi Layout Pack
for Learning Management (LMS) Below

Download For Free Today!

Landing Page Design

e-course landing layout

View The Live Layout Demo

Home Page Design

e-course home layout

View The Live Layout Demo

About Page Design

e-course about layout

View The Live Layout Demo

Blog Page Design

e-course blog layout

View The Live Layout Demo

Contact Page Design

e-course contact layout

View The Live Layout Demo

Marketing Page Design

e-course marketing layout

View The Live Layout Demo

Courses Page Design

e-course courses layout

View The Live Layout Demo

Course Page Design

e-course course layout

View The Live Layout Demo

Pricing Page Design

e-course pricing layout

View The Live Layout Demo

Key Features

This layout pack provides you will all of the necessary page layouts for any e-course website. It includes an excellent marketing page to promote your course(s). The courses page displays each course along with its brief discription in well designed grid layout, perfect for listing any amount of courses. The CTA at the bottom of each page is also a really smart addition.

The blog page uses the blog module to display your posts in a nicely centered fullwidth layout. Make sure you have quality featured images for your posts to accommodate for the fullwidth layout. Also, make sure to go into the blog module on the blog layout and select the categories you want displayed so that your posts will show up.

Live Demos

Click the links below to see a live demo for each of the layouts included in the pack.

  1. Learning Management Landing Page (live demo)
  2. Learning Management Home Page(live demo)
  3. Learning Management About Page (live demo)
  4. Learning Management Courses Page (live demo)
  5. Learning Management Course Page (live demo)
  6. Learning Management Marketing Page (live demo)
  7. Learning Management Pricing Page (live demo)
  8. Learning Management Blog Page (live demo)
  9. Learning Management Contact Page (live demo)

Download The Layout Pack

To use the Code School Layout Pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How To Import The Divi Layout

Subscribe To Our Youtube Channel

Once you have downloaded the layout pack, locate the divi-code-school-layout-pack.zip file in your downloads folder on your computer. Double click the folder to unzip it and then navigate inside the divi-code-school-layout-pack folder. Inside this folder you will find 8 files, each of which is a unique layout that you can import into your Divi Library. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export. You can select the individual layout you desire or choose the All Layouts file to important everything at once.

  • Coding-School_All.json
  • Coding-School_About.json
  • Coding-School_Blog.json
  • Coding-School_Contact.json
  • Coding-School_Marketing.json
  • Coding-School_Landing.json
  • Coding-School_Pricing.json
  • Coding-School_Home.json
  • Coding-School_Courses.json
  • Coding-School_Course.json

To load one of these layouts onto your page, activate the Divi Builder and then look for the “Load From Library” icon in the page settings bar (it looks like a plus symbol). Click this icon to launch the Load From Library popup and then navigate to the Add From Library tab. Here you can choose any of the eight layouts we’ve included in this pack to add to your page.

e-course layout add to library

No Licensing Restrictions

coding school image collage

The photos included with these layouts have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.

Download the Full Res Image Assets

But Wait…There’s More!

We hope you enjoy this E-Course Coding School layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page this Tuesday at 3pm EST to walk through what it might be like to actually use this layout for your own e-course website. We will be covering design changes, membership setup, integrating WooCommerce, email optins, and more.

See you there!

The post Download a Free Breathtaking Learning Management (LMS) Layout Pack for Divi appeared first on Elegant Themes Blog.

Powered by WPeMatico