If you'd like to add your own styling to the page you can easily do this by using our awesome Additional CSS.

All you need to do is to edit the existing CSS classes by adding your own code. Here is a list of Widget classes:

1. Section
ddr-page-section

2. Spacer
ddr-widget__spacer

3. Headline
ddr-widget__headline

4. Rich text
ddr-widget__rich-text

5. HTML
ddr-widget__html

6. Video
ddr-widget__video

7. Image
ddr-widget__image

8. Slideshow
ddr-widget__slideshow

9. Countdown
ddr-page-widget__countdown-widget

10. Button
ddr-widget__button

11. Icon
ddr-widget__icon

12. FORM
- Text
ddr-page-widget__form-text
- Textarea
ddr-page-widget__form-textarea
- Single choice
ddr-page-widget__form-single-choice
- Select
ddr-page-widget__form-select
- Multiple choice
ddr-page-widget__form-multiple-choice
- Email
ddr-page-widget__form-email
- Phone
ddr-page-widget__form-phone-number
- Country
ddr-page-widget__form-country
- Post/Zip code
ddr-page-widget__form-postcode
- Terms
ddr-page-widget__form-terms
- Submit
ddr-page-widget__form-submit

13. Like
ddr-page-widget__facebook-like

14. Comment
ddr-page-widget__facebook-comment

________________________________________________________________

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.ddr-widget__headline:hover {
	  -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

You may find more awesome animations following the link below:

https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

If you'd like to add your own styling to the page you can easily do this by using our awesome Additional CSS.

e.g. if you want to get a shake effect on Headline widget add this code snippet to Additional css: