In case you haven’t heard, we’re getting ready to start off a massive Black Friday and Cyber Monday campaign here at Elegant Themes. But there’s another cool thing happening around this time of year. It’s called Giving Tuesday (this year it falls on November 28) and it’s an effort by the non-profits of the world to remind everyone that while they’ve got their wallets out for personal shopping, they may want to consider donating to those in need too. What a cool idea! And since we’re in the business of empowering our community, we thought it would be a good idea to help those who are using Divi (or Extra) and working for non-profits to make the best Giving Tuesday donation landing page they’re capable of.
Here’s a quick peek at what we’ll be creating today.
End Result Preview
In today’s post we’ll be creating a beautiful Giving Tuesday landing page complete with a visually stunning (and functional, of course) donation form.
Install the GiveWP Plugin & Create a New Form
The donation form we’ll be using in this tutorial is generated by the GiveWP plugin. To install it, navigate in your WordPress Admin to Plugins > Add New. There, use the search feature to find the Give plugin. Click the “Install Now” button and and then activate it.
Next, go to Donations > Add Form. Enter a form title. I chose “Support Your Local Farmers & Sustainable Agriculture”.
Next, you’ll notice the Donation Form Options. Let’s run through them tab by tab.
In the first tab, called Donation Options, configure the following settings in the top section.
Donation option: Multi-level Donation
Donation Display: Buttons
Custom Amount: Enabled
In the Donation Level section, set up the following donation levels: $1, $5, $10, $25, $50, $100. Be sure to set the $5.00 donation level as your new default.
Now move on to the Form Display tab. The only thing you need to do here is change the Display Options setting to Modal.
In the Donation Goal tab, first enable the Donation Goal option. Once you’ve done that, set your goal amount. I’ve set mine to $1,000. I’ve also set the Goal Format to percentage. This will let form viewers know the percentage of our goal that we’ve met, not the actual amount of money we’ve raised. And finally, I’ve changed the progress bar color slightly to match the same green used throughout the rest of my website (#07c907).
Lastly, we need to add some form content. In the Form Content tab, enable Display Content. Then, add some text to the content area.
For the purposes of this tutorial, those are all the Give form settings we need to configure. Click the Publish button and take note of the fact that you’ll need this donation form’s shortcode later.
When setting this form up for real, you will also need to go to Donations > Settings and configure things such as your Payment Gateways, Emails, etc.
Prep Your Image Assets
We’ll also be needing a custom background image for our form section. This is of course optional, it doesn’t affect how the form works. But it looks cool and adds a nice design tie-in to our farmers market example.
To create this image I used Photoshop but you can probably also use a free software called Gimp. It’s an open source tool that has a lot of the same features.
Here’s how to create it.
First, find yourself an image with elements related to your non-profit. Since the example I’m using is for a farmers market, I decided to use vegetables. I searched on a stock image website for “isolated vegetables”. Typically, the term “isolated” on a stock image website refers to items on a white background. This makes them easy to isolate by deleting the background. Which is exactly what I did.
Here is the image I found.
I then opened that image in photoshop.
Because the initial layer is locked by default, duplicate it by right-clicking on it and selecting “Duplicate Layer”. Then, hide the first layer by clicking the eye icon next to it.
Next, use the magic wand tool to select all of the white space around and inside the vegetable elements. Hit the backspace key to delete it.
Next, navigate in your top menu to Image > Canvas Size and resize your canvas to 1920×1080. When you do this, your elements will likely be very big in comparison to your new, smaller, canvas.
On your keyboard hit command+T or go to Edit > Transform > Scale. Resize your isolated elements layer to fit within the new canvas size.
This is as far as we’ll go on this image for now. Simply make sure you’ve saved this new photoshop file. We’ll continue down below once we have our new donation form as a size reference.
When you’re ready, navigate to your Donate page and use the botton at the top of the page to enable the visual builder. I’ll take you section by section down the page, making customizations as we go.
Since we’re getting this page ready for a Giving Tuesday campaign, we should probably make mention of that right at the top. So hover over your hero section and open up the module settings by clicking on the gear icon in the grey module controls.
Then, while still in the Content tab, scroll down and open up the link settings. In the field title Button #1 URL place the text “#donate”. This will function as an anchor link to the form we’ll create below.
Lastly, navigate to the Design tab and open up the SubHead Text settings. Set the Subhead Font Weight to bold.
The first section is now complete. Scroll down to the third section (the one featuring a large quote) and click on the gear icon in the blue section controls. Set the background color to #F6F6F6.
Next, open the module settings for the quote text module. Change the background of that to #F6F6F6 as well.
This section is now complete as well. Move on to the fourth section immediately below it. This is our donation form section.
As this section exists in the layout pack, it’s more of a “pledge” section where people can use the contact form to send you a pledge for how much they intend to give. But we’re going to turn it into an actual donation form where we can accept money directly.
Let’s start with the section settings and work in. First, we need to change the background color. Set it to the same #F6F6F6 as the section above.
Then, in the section Design tab, open up the Spacing options. Add the following custom padding:
Lastly, while still in the section settings, navigate to the Advanced tab and open up the CSS ID & Classes controls. Under CSS ID write the word “donate”.
Save your new settings.
We now need to get rid of our pledge form. It’s made up of two text modules and a contact form module. Go ahead and delete them. In their place, add a text module.
Within the new test module, place the shortcode for the Give donation form we created earlier. Set the background to solid white (#ffffff).
Now, navigate to the Design tab. A little known secret is that elements generated by third party shortcodes can be customized to some extent using the text module’s design settings.
Under the text options, configure the following settings:
Text Text Size: 18px
Text Line Height: 1.8em
Under the Heading text options for H2, configure the following settings:
Heading 2 Text Size: 36px
Heading 2 Line Height: 1.5em
Under the Spacing options, configure the following settings:
Custom Padding: 50xp (for all fields)
Under the Box Shadow options, choose the last option in the top row (on the far right). Then configure this option:
Box Shadow Spread Strength: -2px
Finally, under the Animation options, configure these settings:
Animation Style: Bounce
Animation Direction: Up
Animation Duration: 800ms
Animation Delay: 400ms
Animation Starting Opacity: 100%
When you’ve configured all these design settings, save them. Your donation form should now look like this.
Of course this is a perfectly acceptable form. But in my opinion it’s a little boring. There are two things I’d like to do to spice it up. First, we’re going to match the Donate Now button style to match other Donate buttons throughout the website.
Navigate to your theme options by going to Divi > Divi Library > General Scroll down to the Custom CSS box and paste the follow button styles there:
Then, take a screenshot of your donation page with our new form centered on it. It should look like this.
Open this new screenshot up in Photoshop along with the photoshop file we created earlier.
Use the Rectangle Marquee tool to select your form. Then, go to Select > Inverse to select everything but your form. Delete your new selection. You should now have a canvas that looks like this.
You now have a correctly sized “form mockup” that you can use as a reference for your background image. With both photoshop files open, drag the photoshop layer containing your isolated form into your background image file.
In your layers panel, adjust the opacity of your form layer to 50%. Then, with the form later still selected, click the lock icon and lock it. It should now look like this.
You can now select your vegetables layer in the layers panel. Use the lasso tool to select individual elements and either delete them or re-arrange them until you get a configuration you like. My final configuration looked like this.
Once you have your own final configuration you’ll go to File > Export > Export As and choose PNG to maintain the transparent background.
Now we can add that image to the Donation Form section of our Donation page, back on our Divi website.
Open up the section settings. Under Background leave the color we set earlier alone and choose the image option. Add your new background image here. Then configure the following settings:
Background Image Size: Actual Size
Background Image Position: Center
Save these settings. Your form section should now be complete.
To completely finalize your design (to match our full page preview from the beginning of the post) simply change the background colors of the remaining page sections to match those in the screenshot. You will either use grey (#F6F6F6) or white (#ffffff).
With Divi and a plugin as powerful as Give, we sure that your Giving Tuesday efforts are sure to be a big hit. Thanks for following along. If you’d still like some assistance with anything covered in this tutorial, I’ll be conducting a livestream today at 3pm on our Facebook page and YouTube Channel where I’ll be showing this entire process in a single take. I’ll also be fielding questions as we go along. Hope to see you there!
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 delightfully fresh design for anyone running a Farmers Market (or any non-profit/co-op, really). It consists of eight pages that anyone can use to quickly get up and running with all the essential pages and design elements their website needs, in just a few clicks!
Check Out The Divi Layout Pack for Farmers Markets Below
While there is a lot to like in this layout pack, we want to draw special attention to two pages: the Events page and the Donate page. For any farmers market (or other non-profit) these pages will be essential to the health and ongoing success of the organization. We’ve provided an excellent custom events page and a donation page just waiting for you to add your donation form to. In fact, you’ll want to be sure to tune back in tomorrow and Wednesday for tutorials on how to get the most out of these pages!
Click the links below to see a live demo for each of the layouts included in the pack.
To use the Farmers Market 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.
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!
Once you have downloaded the layout pack, locate the divi-farmers-market-layout-pack.zip file in your downloads folder on your computer. Double click the folder to unzip it and then navigate inside the divi-farmers-market-layout-pack folder. Inside this folder you will find 9 files, eight unique layouts that you can import into your Divi Library (one at a time) and 1 “all” file you can use to import all layouts at once. To do so, navigate in your WordPress Admin to Divi > Divi Library > Import & Export.
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.
No Licensing Restrictions
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.
We hope you enjoy this free Farmers Market layout pack. And to help ensure that you do, we’ll be doing a live stream on our Facebook page and Youtube Channel 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!
Welcome to part 3, the final post in 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.”
Now that we’ve covered preparing and learning how to have a better eye for design and have gone over some effective design principles to have in our toolbox, we’re going to focus on 3 very important areas of design that are key to achieving a well-designed site.
Let’s get right to it!
3 Important Areas of Design to Focus on for Every Website Build
If you’ve kept up with the first two posts in this series, you’ve heard me point out that there’s no right or wrong when it comes to design, but along with the effective design principles we went over, there are a few important, practical areas of design that I focus on to ensure a successful, eye pleasing website build every time. And the best part is, these ideas are transferrable to any type of industry or web design style!
1) Typography and Fonts
Your site can have beautiful imagery, engaging colors and pleasing design elements, but if the type looks off or doesn’t fit the style of the site, it can be a major deterrent. Since we’re not getting into the basics of typography in this series, please refer back to our 50 Typography Terms Every Web Designer Should Know (And Understand) post if you’d like to learn more about the basics. An understanding of kerning, leading, tracking, sans and sans-serif fonts will greatly behove the person looking to get better at type and design.
Let me offer you a few practical typography guidelines I stick to as a successful Divi web designer with clients who differ greatly in design styles and different industries:
Use fonts that pair well with your sites industry/design – In the first post of this series, I recalled an example where I self-admittedly designed a site that had great imagery and colors but the font didn’t match well. In short, it was an industrial manufacturing site and the font I initially used was a more modern, sleek style that indeed didn’t fit the look and brand of the company.
This doesn’t mean that you can’t get creative with fonts or that you have to match the industry status quo, but practically, if you’re working on a professional service site, you’re probably not going to want an over-the-top, artsy font involved. And vise versa, if you’re working on something with a unique, perhaps artsy vibe, maybe Arial or Helvetica isn’t going to match the vibe you’re going for. This brings me to my next point of mixing and matching fonts.
Stick with 2 to 3 fonts – A basic design principle that has stood the test of time for decades is to limit the number of fonts you use. Too many fonts distract the reader, often confuse hierarchy and frankly, end up looking like an old western flyer seeking a reward for an outlaw. I often stick with one font for headers and titles, then typically use an easily readable sans-serif font for all my paragraph text. Sometimes I’ll have a 3rd style font for the main menu but my menu font is often streamlined with my titles.
Have visuals with your text – A decent amount of text in your content is great. In fact, it’s recommended to have at least 300 words per page to help from an SEO perspective. But beware having too much text and not enough visual aids. For books, blogs, articles and other long form content, a lot of text is expected but if you’re designing a nice engaging landing page, too much content will bore the user before they look any further. I often design with the mindset that the front page should be the sales funnel that gets clients through the door THEN they can dive into more pages, blogs and other resources for more detailed information.
The Elegant Themes homepage is currently a perfect example of that.
In this example, we see an engaging title, a paragraph of text with a call to action button and a nice visual graphic that ties in the message which keep the user engaged. This is a great example to follow when organizing a decent amount of text with visuals.
I once had a beautiful front page designed with text and visuals and when I turned it over to my client to make basic edits, they had dumped what looked like a small chapter of a book into the front page which completely ruined the flow of the design I created. So let that be a lesson and know that while content is great, it needs to be placed accordingly!
Similar to typography, I tend to stick with at most 2 to 3 primary colors for my website builds. Unless it’s a company or organization with a plethora of colors in the branding, I find that too many colors (particularly if they don’t match well) can be very distracting and often confusing. Here are some guidelines I stick to when mixing color and images:
Base colors and accent colors – One method I’ve found very successful in recent projects is to take a client’s branding and if they don’t already, pick a nice accent color for call to actions, links, etc. For example, on this site, I took the branding of the logo with the grey and orange and added a subtle, dark teal/blue to help make the orange “pop” as the primary accent color.
Streamline color with images – One way to bring your design and images together in a great way is to match website colors with some of the primary imagery. This example is a bit rare as I was able to match the website colors to my client’s outfit which made for a very nice streamlined feel between the imagery and website color.
I took a nice maroon and orange color from my clients outfit and was able to bring the entire site together in a nice uniformed look. Now you’ll rarely be in a situation where you can brand an entire site off an image, but this same principle can be applied when using background images with call to actions, etc!
Steer clear from colors that are too vibrant – I often see newer designers use super bright greens, pinks, yellows, etc that make one squint and back away from the screen. I won’t point out any bad examples here but I’m sure you’ve seen plenty of sites where the colors made you turn away and never want to look back. There’s certainly nothing wrong with vibrant colors, just make sure they don’t give off that effect. This is where getting constructive criticism and feedback from other designers can pay off.
My recommendation is to use fairly neutral colors for base colors like text, background graphics, etc then use more vibrant colors for call to actions, links and more attention-drawing areas of the page design. If you’re new to design and color is not a comfortable area for you, feel free to refer back to our Color Matching Techniques for WordPress Web Designers which will provide plenty of options on how to better pick colors.
3) Strong Call-To-Actions
Lastly, one very important area of web design is to have strong and clear call to actions (CTA’s). One of the most common problems of bad web design is to have heavy text driven content with no clear call to actions. Content is great but if it’s all information and no conversion, your client will certainly not be satisfied. I recommend making your CTA’s stand out from other elements in your design with an accent color or nice hover effect.
Here’s an example of how I implemented a call to action for a recent client.
In this case, the client’s primary call to action for website users is to sign up for email updates so right off the bat, we have the logo popping out from a darker background image, a little bit of text with an immediate opportunity to sign up before even scrolling down. Ideally, you want to draw your user’s eye to your call to action. That’s where have a vibrant accent color or effect on a site is extremely beneficial.
Here are a few guidelines I stick to when it comes to call to actions:
End your homepage with a strong call to action – More often than not, my homepage designs are almost a recap of the site as a whole. For example, if a site has a structure like this:
I’ll make a call to action for each one of those sections in the homepage then a final, sleek design for the main call to action, which in this case would be to sign up. Here’s a prime example of what I mean:
The front page essentially encapsulates the entire site and is a starting point for users to click off to view galleries, videos and more information. Perhaps that mindset will help you out as in your homepage designs!
Have a call to action in your sidebar – Don’t forget the opportunity for a strong call to action in the sidebar! Especially if you have a site with blog posts or other pages that frequently use a sidebar. This is a great opportunity to put an extra email sign up, donation button or link to another main CTA.
Similar to the site above, one of the main call to actions for my personal site is an email sign up and while that’s front and center on my homepage, I wanted to be sure to also make it very apparent on my blog post and tutorial pages.
Here, I have it at the top right of each post template along with a strong visual above and below the main sign up form. So if you have pages with sidebars, remember that those areas are valuable real estate for strong call to actions! And you want to be sure and make your CTA’s noticeable and preferably at the top of the sidebar which will show up first on mobile below the main content.
Have a call to action after subpage content – Lastly, and perhaps most overlooked, is to remember to have a call to action on your normal pages! I’ve self admittedly overlooked this until recently when it was requested by a client. The example below has a strong call to action at the end of their main services pages.
When a website user views that page, they’ll take in all the information then have a chance to contact my client if interested with a nice, welcoming image to the right and CTA button on the left backed by a vibrant orange which helps that section pop off the page. Yes I know I said in a previous post that I usually put my CTA’s in the middle or right but this layout just seemed to work nicely
Series Wrap Up
Well I hope this series has helped inspire you with some good web design principles and tactics that you can apply to your web design endeavours! Let’s do a quick recap of what we went over in the entire mini series:
Preparing your Mindset
How to Learn Good Design Trends
Get Feedback and Constructive Criticism on Your Work
Follow the Rule of Thirds
Layout and Flow
Typography and Fonts
Imagery and Color
Again, entire academic studies have been dedicated to good design so we’re just scratching the surface here but my hope is that these principles and practices have helped point those of you who are wanting to get better at design in the right direction. If you have any other design principles or methods that have helped you that you would like to share, feel free to let us know in the comments below!
Here’s to all of us becoming better Divi Web Designers every day!
There are all kinds of websites out there running on WordPress. From e-commerce websites to business websites, news websites and more. Although the ones we just mentioned are on the top of people’s minds, WordPress websites go a lot further than that. There are WordPress themes available for basically anything you can imagine. There’s, for instance, a huge amount of educational websites that are made with WordPress out there. Whether we’re talking about universities, colleges or training programs; WordPress has been there and done that.
In this post, we’re going to take a look at 14 different educational websites on the internet that run on WordPress–and do a pretty good job at it as well. The websites might inspire you for the next educational project.
1. Harvard Gazette
The first example is probably very well known; the Harvard Gazette. The Harvard Gazette is an official part of the Harvard website and thus the university itself. The site is in between a news website and educational website but knowing that it originates from Harvard, the university, we’d say it leans a bit closer towards an educational website. They handle all kinds of topics; from campus culture to arts and culture, science and health and more.
Although the main Harvard website doesn’t use WordPress, they did figure that WordPress is a great option if you’re looking to share articles on a weekly if not daily basis. The website itself has a very serious and clean look. It contains the highlighted posts in the first part of the website and they include the ‘latest’ and ‘popular’ categories as well. The website also contains a vertical navigation that stays fixed throughout the whole website.
2. Georgia State University
The next website in our list of educational websites that are powered by WordPress is Georgia State University. One of the things you can notice on this website is the dominating professional blue color they use in their logo. They decided to use that same color often throughout their whole website. The primary menu consists of seven main menu items that represent the core of the university. The style they’ve used throughout all the pages on the website is rather clean and professional–a feeling the university wants to make sure their visitors link the university with.
Their homepage gets to the point by offering their visitors immediately what they’re looking for within the hero section. They also provide their visitors with an interacting factor by including a combination of input fields to find your field of study.
3. College Choice
Up next is College Choice. A website dedicated to helping students make the right choice for their future. They immediately start off with a, what they call, degree finder. This website goes straight to the point and focuses on delivering the needed information to the right people.
They made sure their website doesn’t have a lot of extra factors that might distract their visitors from the message they’re trying to send and the service they’re trying to offer. The website is a great collection of degree programs, rankings and resources that help future students in every step of their way.
4. Bennett College
The fourth example in the list is Bennett College. Bennett College is a college based in Greensboro. Their hero section contains the three elements that define the Bennett college; programs, applications and donations. By placing these in their hero section, they immediately make their visitors aware of how the college functions.
Besides that, the rest of their website is also very elaborated. Five of the six menu items contains other pages that help every visitor find exactly what they’re looking for.
The next website we want to put in the highlight is Skillscrush. Skillcrush offers people job-training programs for all kinds of web-related careers. From freelance WordPress developer to visual designer, web designer and web developer. Their website uses a nice balance of fresh colors, illustrations and real-life pictures.
Skillcrush is the ideal example of what a user-friendly website looks like nowadays. In contrary to university websites, this type of educational website focuses more on the commercial side of their business. They, for instance, offer an e-book to attract customers. Something you wouldn’t often see at websites that are dedicated to universities and colleges.
6. International Gem Society
Moving on, we’re going to take a look at International Gem Society, which is an online education platform that helps people become experts at gems. They have members from continents all over the world (except for Antartica, apparently).
Their website helps every member (or potential member) on their way towards becoming part of a community where people learn from each other. They have the straight-forward website that offers all the information visitors need and they include social proof to convince them in the process as well.
7. Washington State University
When we take a look at the website of the Washington State University, we come back to the same type of website as the first one in this list. Very typical for universities and colleges is to use their logo color throughout the rest of their website to accentuate the content that is being provided. That’s not really a coincidence though. The logo of the university is usually something students and teachers feel proud of. By showcasing the colors of their logo on their website, they reflect a certain feeling of belonging and pride.
The website consists of five pages in the primary menu that contribute to the added value this university brings.
8. NC State University
Another university that earned its spot on the list is the NC State University. This university is located in Raleigh, North Caroline. In overall, their website looks clean and consisting of all the needed information.
You can notice the same color balance in this website as well; the logo color is the most used color on the website and accentuates and defines what the university is about. With its nine additional pages, it offers the students a complete insight on what one can expect from the university on different aspects.
9. Drew University
One of the most out-of-the-box educational websites in this list is definitely the website of Drew University. Rather than following the same structure as the other pages, they decided to create a certain division on their website; a left and right part. The left part remains fixed whereas the right side is scrollable and the content depends on how you navigate on the left side.
Besides the excellent look and feel of their website, they also try to convince their potential students by putting the favorable facts out there.
10. University of British Columbia
Another website that surely differentiates itself from other university websites is the University of British Columbia. Although it also maintains the logo color throughout the whole website, they also make use of fun animations. While scrolling on their homepage, you’ll also notice that they rather share visual content than written content as other university websites rather prefer.
They provide their visitors with two navigations; one focused on what the university offers and one on that puts the focus on the people behind the university and the community feeling.
11. Eastern Institute of Technology
One of the last educational websites in the list is the Eastern Institute of Technology. They started their website off with their strongest assets. They provide their visitors with the needed information and put things such as their international program in the spotlight.
Additionally, the website contains six extra pages that emphasize the message they’re trying to bring on their website right away. With their hero section and catchy headline they immediately show you that the Eastern Institute of Technology is the place to be if you’re looking for experience and support combined.
12. Concordia University
Next, we also have the Concordia University that uses WordPress to share their website with the world. They immediately start their website off with some illustrations, something which is not that common for university websites but it gives a nice look and feel to the complete website.
Also, unlike most of the other university and college websites we saw in this post, their website doesn’t get dominated by the color used in their logo. They rather use it to accentuate certain elements of the website.
Made With Divi
13. Digital Strategy School
Last but not least, we think the Digital Strategy School is worth mentioning. This website was not only made with WordPress but with the Divi theme as well. The Digital Strategy School offers a ton of online courses to its audience and tries to keep up with the community feeling as well.
Their website is the nice kind of simple. The one where you can navigate easily through the different pages and content provided to the visitors.
In this post, we’ve shared some nice looking educational websites that run on WordPress. If you have any questions or suggestions, make sure you leave a comment in the comment section below!
We’re back with another roundup of Divi design site submissions for our second monthly installment of our (now) ongoing Divi Design Showcase series showcasing the design work of our community here on the Elegant Themes blog. This is a look at our favorites for the month of July.
The Best Community Divi Site Submissions for July 2017
There are a lot of interesting design elements in these websites. There’s sure to be some ideas here to spark your imagination. Rather than going through all of the site’s details I’ll highlight the elements that I find the most interesting or unique.
This site was submitted by Shanthony Exum. It uses eye-catching colors with the styles of the global locations they represent. It includes a four step donation process that’s labeled well, easy to follow, uses text and graphics, and has short and simple descriptions. The stand-alone donate button in the header draws attention and includes the same branded colors.
This site was submitted by Carola Speri. It uses a boxed design with an interesting background pattern and soft colors to attract the target audience. It also makes good use of parallax. The visuals for the creativity courses draw me in.
This site was submitted by Ellery Mann. It includes an interesting typing animation as it loads and a full screen menu – both with extra-large fonts that fit the site’s design. The portfolio uses a nice hover effect. Clicking takes you to a multi-column page with artwork and a full-width project slider.
This site was submitted by Sannah Vinding. The site uses a clean and professional look with an industrial design. It focuses on products, making nice use of images and client logos. It even includes an interesting product search in the top bar and includes a contact button and phone number.
This site was submitted by Lycia Diaz. The site includes nice colors and fonts. The information section blends beautifully into a full-screen image. It includes images that overlap sections, nice use of parallax and color overlays, and perfect color-branding and font-pairing.
This site was submitted by Tomas Svitorka. The site includes an elegant full-screen image with CTA (call to action), lots of full-width images with overlays, and sharp 3-column testimonials with multiple layouts. The menu includes an orange line to show which page you’re on and the page names display with two lines of text. The colors and fonts are fantastic.
This site was submitted by Nora Kramer. This one is a great example of how to use color for the financial industry. The layout is clean and to the point. No navigation is needed. It makes great use of parallax with an overlay. The information leads visitors to a single contact form.
This site was submitted by Dean Loh. It makes great use of imagery. I love the yellow and blue color branding with black images of famous (and my favorite) fighters to make the company statements. A clickable cartoon character asks if you have questions remains on screen and becomes the footer itself when you scroll to the bottom. The yellow and blue continue throughout the site.
This site was submitted by Fabian van Bakel. It uses bright colors and an animated logo that changes colors and black and white background elements throughout. Primary colors create the backdrop for the pages. The site makes interesting use of black and white, blocks of color, and large fonts.
This site was submitted by Tara Leaver. The site uses a beautiful background videos to show off the artwork and studio. The fonts match the artistic style of the site perfectly. The light green highlights fit well with the branding. This site makes me want to get out my art supplies and draw and sculpt.
Well that’s all for this roundup of Divi Design Submissions. We have a lot more to look over for future posts. If you’d like your own design considered please feel free to email our editor at nathan at elegant themes dot com. Be sure to make the subject of the email “DIVI SITE SUBMISSION”.
We’d also like to hear from you in the comments! Tell us what you like about these websites and if there is anything they’ve done you want us to teach on the blog.
You need money. Maybe it’s for a non-profit you volunteer with, a new puppy’s adoption fee. Or maybe the most comfortable pair of running shoes you’ve ever tried on. The reason (mostly) doesn’t matter. What matters is that you’ve got a website with a captive audience who loves you. And they want you to get that puppy.
Enter the Paypal donate button, what might just be one of the easiest, low-maintenance solutions for fundraising available to you. And since you built your website with WordPress, implementing the button is pretty straightforward.
The first thing you should do is head over to Paypal’s Fundraising Page and pick which category of donate button would work best for your needs:
Pretty much everything you could need a donate button for should fall into one of those categories. For this tutorial, we’re going to say that you’re fundraising for personal reasons (that wonderful puppy I mentioned earlier). The process is similar for all of the choices.
After Picking Personal
On the next page, scroll down until you see the text “Learn about creating a donation button” and click it.
That will bring up a modal where you’ll click one of these two links. They take you to the same page, so it’s really just a matter of preference.
Creating the Button
When you click the link to create a donate button, it will take you to the page where the magic happens. You should note, however, that Paypal will not prompt you to log in. Repeat: Paypal will not be prompt you to log in. You will be able to toward the end of the process, but don’t stress about it at this point–nothing has gone wrong.
The first thing you’ll do to create the Paypal donate button is actually make it a “donate” button. The default setting is “Shopping Cart,” but if you click the dropdown in the upper left of Step 1, you can change it to “Donations.” Like I said, pretty straightforward, huh?
With that set, you will enter your website or organizational information for the donate button. Since your fictional fundraiser is through your website to adopt an adorable puppy, you’ll fill it out with the name of your website and the optional ID you’ll use to track each donation.
After you put in your info, you get to start customizing your button. For the most part, there’s not a lot you will want to change. It’s all pretty basic stuff such as selecting which country and language the button will use, the size, and whether or not you will display credit card logos. All of these choices are based on how you intend on integrating the button on your site.
You can also use an image hosted on your own website as a button if, let’s say, you have a graphic designer make an awesome animated gif of an adorable puppy for people to click on. Today, however, we do not.
You just have to pick your currency type, whether or not you want to specify a specific donation amount, and which email you want the donations sent to.
This is where you should log in if you have a Paypal account. If not, create one so that you are covered by PayPal’s various protections. (If you choose not to use a Paypal account, just enter your email, and you will still be able to receive donations via Paypal without any of the added security.)
Once you login, you should see this:
Which option you use is up to you, but using the merchant code offers a bit more protection since your email address will not be included in the button code itself. The fewer places spammers and phishers can get your email, the better, right?
You are almost ready to put your Paypal donate button into WordPress!
Optional Steps 2 and 3
If you have a Paypal Business account, you can do quite a bit more in terms of tracking, inventory management, and checkout customization, but since we’re dealing with donations, most of the options aren’t relevant to us.
The Paypal Donate Button Code
On the next page, you’re finally be given the donate button code that will live on your WordPress site, as well as an example of what the button will look like to your users.
Click on Select Code to highlight your code and hit CTRL-C if you’re on Windows, CMD-C on Mac, or right-click the highlighted text and select Copy from the context menu. Pick your poison.
Once you have copied the code, navigate to your WordPress dashboard. This is where things can vary a bit because everyone will want their Paypal donate button in a different spot, but the general idea is the same.
For Divi users, we have a lot of options for you.
Above or Below Posts
To put your Paypal donate button at the beginning or end of your blog posts,, navigate to your Divi Theme Options and head into the Integrations tab.
When you scroll down a bit, you will see text areas labeled “Add code to the top of your posts” and “add code to the bottom of your posts, before the comments.”
What they do is pretty self-explanatory.
Keep in mind that these are entirely unstyled buttons, so if you want to make it do more than just sit there, I would suggest wrapping the code that Paypal provides in something like this:
PAYPAL DONATE BUTTON CODE GOES HERE
With that done, you can use CSS to manipulate and position the button however you want.
Post-by-Post or Page-by-Page
If you don’t want the button appearing before or after each and every post on your site, you can be a lot more selective by using the Divi Code Module. Additionally, you can use the Code module to add your button to Pages, which won’t be affected by the previous method.
Open the “Insert Module” window and select the Code Module to get started.
Like before, just paste the code Paypal generated into the module’s settings. There’s no need to wrap it in a div here, though. You can just use the Main Element section under Custom CSS in the Advanced tab to manipulate how you want the button to appear in the post or page.
In the Sidebar
The most common place for Paypal donate buttons is probably the sidebar. It displays on every page and post you want, but it doesn’t interrupt the flow of your content. Plus, it’s crazy easy to customize! Just head back to your dashboard and click on Appearance > Widgets.
Next, click on the Text widget and add it to your sidebar in whatever position you want it. Keep in mind that WordPress 4.8 changed the Text widget from what it has been for years. We have a rich-text editor now, which we do not want to use.
Make sure that you means we need to click on the “text” tab before pasting your donate button code in here. (There is no need to use the code button, either.)
The text tab works pretty much the same as the old, pre-4.8 text widget did (except for the inclusion of code buttons. Just throw in your HTML and hit save. Voila, you have a money button at the top of your sidebar!
You don’t have to include this widget in only the sidebar. You can follow the same steps to add the button to themes that support header or footer widgets.
You’re Ready to Get that Money!
Now you’re totally ready to add a Paypal donate button to your WordPress site! No matter what theme your site is running or what you’re taking donations for, you’re good to go. (But let’s be honest with each other–it’s still for a puppy, right?).
Article image thumbnail by mohamed1982eg / pixabay.com