5 elements to add spice to your next website design

by | Nov 1, 2017 | Divi Donuts | 2 comments

Just a few things to add spice to your next website design, 5 to be exact this time. In the name of speed and google results, I have picked 4 of the 5 to help with high speed customizations, no they’re not going to speed you up on their own, but they won’t add drag. Number 5 is a POW factor, that will slow down some results, but definitely gets the point across for a section. nonetheless, in the name of design, these should definitely help.

1. Custom browser scroll bar

It’s easy as pumpkin pie! Get rid of that ugly ol’ huge gray scroll bar that takes up valuable pixels on the right side of your website.  Why not brand it with your own width and color? As you can see on my site it is my own branded “pink donuts” pink, as well as it’s background is my branded “Yankee Navy Blue”.  When it comes to people visiting your site, the entire experience counts, and you are almost guaranteed that people will click on & scroll down with that scroll bar, so now you stop people in their tracks with this one. It instantly caught my eye, and it will yours too. Copy and paste the code below into your “theme options / custom CSS panel” the width is the scrollbar width, the “track” is the color of the background, so change the #202020 to whatever color suits you, and then the “thumb” is the color of the actual scrollbar, so change the #fc4be1 to whatever color is your company branded color.

Here’s the code: (so simple, it’s laughable)

::-webkit-scrollbar {width: 10px;

}

::-webkit-scrollbar-track {background-color: #202020;border-radius: 2px;

}

::-webkit-scrollbar-thumb {background-color: #fc4be1;border-radius: 2px;

}

That’s it for #1.

2. Custom patterned backgrounds using only css ( = fast!)

More and more clients everyday are asking for fast websites, that still look great and effective. As a designer I tend to stuff all kinds of cool looking stuff into a site that pays the price when it comes to a quick pageload time. These css backgrounds can help provide a quick and fast pageload time, while still looking great, and not too 90’s website looking at the same time.

To apply a custom patterned background, just open up the row settings, click on the custom css tab and find the desired column, go to that columns main css box and past in the background code of choice. Next you may want to add a divider module just in case there is nothing in that particular section or row, it will give it some height so the background shows up.

Find these demo backgrounds and more at: http://lea.verou.me/css3patterns/

There is also this cool background pattern generator at: http://www.patternify.com/

Silver Japanese Waves Code

background-color:silver;
background-image:
radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;

Zig Zag Code

background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,linear-gradient(315deg, #ECEDDC 25%, transparent 25%),linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 100px 100px;background-color: #EC173A;

Upholstery Code

background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;

Carbon Code

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

3. Text link hover color / active color change

With Divi, there is a default link color that you can set in the customizer, but what happens when you want to change that standard link to something customized for your page. Well this short and sweet css snippet will make your life easier.  You can drop this in a code module on your page so it will only affect what is on that page only. If you want it to affect the entire site, drop the code in your custom CSS box in the Theme Options. This must be a link to work.

Here’s the code:

<style>
a:link {
color: #fc4be1;
}
a:hover {
color: #CECFC7;
}
a:active {
color: #283845;
</style>

4. Add a drop-cap into your paragraphs, and color it how you like

 

This is a fun one, that allows you to create a drop-cap in your paragraphs, for that old-school newspaper look! Over the years, a wide range of variants have been released in different weights, widths and sizes, as well as matching designs for a range of non-Latin alphabets. Notable features of Helvetica as originally designed include a high x-height, the termination of strokes on horizontal or vertical lines and an unusually tight spacing between letters, which combine to give it a dense, compact appearance.

Here is the code:

.dropcap p:first-child:first-letter { color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; }

You can drop this in your custom CSS box, or drop it in a code module with <style> before / and </style> after, to keep this to just the page you want it on.

Be sure to add “dropcap” to your Advanced CSS tab in the text module you’re using.

5. Add video to your page with COVERR – (desktop only)

With COVERR you get free usage rights, and all you need to do is add the media files to your video tab of the background.

visit COVERR

 

 

So head on out there and add spice to your next website design!

Thank you for stopping by.

For more ways to add more spice to your next website design check out our Divi Donuts Blog

Become a designer ninja.

Tools and Divi layouts that help you become a designer ninja. Be the first to know!

You have Successfully Subscribed!

Pin It on Pinterest