facebook-pixel

Cool Website Design Features

Below is an image on top of an image to play around with.

Cool Web Design Features 1
Cool Web Design Features 2
TRANSPARENT LETTERING

COUNTDOWN TIMERS!

To the right, you will find examples using an image in the background instead of a color.

Below you will find a solid color background version with supporting text.

Create a Sense of Urgency!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Add some more details here and/or a button!

Create a Sense of Urgency!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Create a Sense of Urgency!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Types of Counters!

Number counters provide a great way to display stats about your company.  Check out some of the different styling options available below. 

%

Your Title Goes Here

%

Your Title Goes Here

Your Title Goes Here

  • Your Title Goes Here 50% 50%
  • Your Title Goes Here 50% 50%
  • Your Title Goes Here 50% 50%
  • Your Title Goes Here 50% 50%

show one with a plus sign too like SchardeinMechanical.com

Contact Form Styling

10 + 13 =

10 + 2 =

Do you do one or both of these?

Do you currently have a website?

(Above)

If you like this section divider, request 2-Tone Wavy Section Divider.

At the top and bottom of some of the sections, you will see variations of the different styles of section dividers that are available for further tweaking and customization.   Background colors will match your branding as well.  Backgrounds can be images or videos without sound.  They can also be screen recordings, have gradients, or a combination of these options in most cases.

Animated Blurbs

Blurbs have become pretty commonplace on modern websites.  A blurb consists of a text element and either an icon or image or both.  There are lots of little cool tweaks that can be made to make these more interesting and encourage people to take action and/or consume the information provided.  Things like colors can be customized to match your colors and we can play around with timing and intensity on the other effects.

Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-bg-color’.

Blurb with Icon

I get slightly larger, my icon spins, and have a new background color on hover.  If you like me, request ‘blurb-change-spin’.

0
Blurb with Icon

I get slightly larger and get a box shadow on hover.  If you like me, request ‘blurb-bigger’.

+
Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-simple-changes’.

"
Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-down’.

6
Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-up’.

Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-underline’.

Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-center-out’.

T
Blurb with Icon

I get slightly larger, change colors, and have a new background color on hover.  If you like me, request ‘blurb-focus’.

(Below)

If you like this section divider, request 2-Tone Jagged Section Divider.

Shake on Hover

The elements below shake on hover.  We have the contact form set to shake up and down, and the button and image set to shake from side to side.

Cool Web Design Features 3

I get bigger!

(Above)

If you like this section divider, request Triangle Section Divider.

 

Enlarge on Hover

The elements below are set to get 1.5x their original size when the cursor hovers above them on the computer screen.  This effect works best when a mouse is used for cursor navigation.  In the examples below, we have a button, an image, and text enlarging on hover.  This also works in reverse and can be set to make the element get whatever percent bigger or smaller desired.

Cool Web Design Features 3

I get bigger!

(Below)

If you like this section divider, request 2-Tone Clouds or Bubbles Section Divider.

Image Effects

Here are a handful of the things that we can do with images.  They each have their own description and note the variations available.  

Cool Web Design Features 5

This image has a left border that is orange and 10 pixels (px) wide and a blue right border that is 20px wide.  The border can go around the entire image and the sides and widths on each border can be customized or uniform.  

This image also has a box shadow is lime green for emphasis.  It is positioned at the top left.  The positioning, blur, and spread can also be adjusted.  Box shadows are typically a shade of grey and much more subtle.  See the  next image. 

Cool Web Design Features 5

This image has a uniform 2px wide purple border and the box shadow used here is much more typical of how box shadows are used to make the images pop off the page a little bit.  

This image also has a 40 degree tilt until hovered over.  We used 40 degrees for emphasis.  A 5 degree tilt can create a nice effect on a gallery page for example where you have a lot of images all together.

Cool Web Design Features 5

This image has a 5px yellow dashed border on the left side.  

It has a 1px blur until hovered over, and then the image comes into focus.

The image also skews on the x and y-axis on hover to give it some movement to create interest. 

On Scroll and Repeating Animations

As you scroll down the page you will see the different options available for animations as the page user scrolls down a web page.  These are set to only occur once, but they can be set to loop infinitely also.  A lot of the variables can be tweaked as well such as the direction of the animation, the intensity, the opacity at the beggining of the animation, and you can also delay the animation start.  These have a 1.5 sec delay so you don’t miss them!  You can refresh the page if you want to see any of these animations happen again.

Cool Web Design Features 3

Fade-In 

(Above and Below)

Any top or bottom divider can match opposite side or be a mirrored imaged.

If you like this section divider, request Parallel Angle Section Divider.

Bounce-In (From center) 

Cool Web Design Features 3
Cool Web Design Features 3

Slide-In (From left)

Zoom-In (Up) 

Cool Web Design Features 3
Cool Web Design Features 3

Flip-In (Center)

Fold-In (Left)

Cool Web Design Features 3

Roll-In (Center)

Sliders!

Sliders are a great way to create some movement on your web pages which always adds a little bit of interest, but more importantly sliders allow you to display a lot of pictures, videos, graphics, text, buttons, calls to action, etc. without forcing the user to scroll to consume your information.  

Show Varitions images

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

vary images/video

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

The image below should be going from top left to center middle lower to top right continuos…

Cool Web Design Features 3

I am text on a hinge!

Scrolling Text

Below is an example of text that scrolls across the screen.

Look at me!  I am scrolling text.  Aren’t I cool?

Want to get some of these cool features on your website?  Contact us

Cool Web Design Features 15
Cool Web Design Features 16
Cool Web Design Features 15
Cool Web Design Features 15
Cool Web Design Features 15

We can reach out to you!

Call us

859-888-0841

Email Us

ryan@
getoptimizednow.com

We can help!

Seriously, if getting more exposure online will benefit your business, we would love to talk to you.  No-obligation, no-pressureIf we both feel like this would be a beneficial relationship, we can move forward.