CSS Animated Background (Elementor Tutorial)

by | Oct 7, 2021 | 0 comments

CSS Animated Background (Elementor Tutorial)

by | Oct 7, 2021 | CSS Tips and Tricks | 0 comments



In this video I will show you how to add CSS animated backgrounds to your Elementor widgets.

Elementor Pro isn’t required to follow this tutorial but it’s recommended.

CSS Code:
https://wickydesign.com/css-animated-background-elementor-tutorial/

Red Stapler:
https://redstapler.co/css-3d-card-design-rgb-effect-tutorial/

CSS Gradient:
https://cssgradient.io/

Timestamps:
0:00 Introduction
1:39 Elementor Backend Setup
3:03 Example 1 – Column Background
12:33 Example 2 – Hover Column Background
15:01 Example 3 – Button Widget Background
17:48 Bonus – Change Text Color On Hover

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WORDPRESS PLUGINS:
✔️ Elementor: https://elementor.com/?ref=4776
✔️ Crocoblock: https://crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: https://ultimateelementor.com/pricing/?campaign=UE&bsf=8362
✔️ Elementor Custom Skin: https://gumroad.com/a/545789043
✔️ All In One SEO: https://www.shareasale.com/r.cfm?b=1491200&u=2081667&m=94778

BUSINESS TOOLS:
✔️ Dubsado: https://www.dubsado.com/?c=wickydesign
✔️ MailerLite: https://www.mailerlite.com/a/jrdqblbizo
✔️ Wave: https://waveapps.com/

GRAPHICS:
✔️ Adobe: http://clkuk.tradedoubler.com/click?p=264355&a=3228525

WEBSITE HOSTING:
✔️ KnownHost: https://www.knownhost.com/?aid=71319c26

——
For more information regarding our web design and branding services, please visit https://wickydesign.com

#elementor #CSSanimation #ElementorTutorial

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>