WordPress For Beginners – Astra Header tutorial- Set image backgrounds and gradients using CSS

by | Mar 3, 2020 | 0 comments

WordPress For Beginners – Astra Header tutorial- Set image backgrounds and gradients using CSS

by | Mar 3, 2020 | Wordpress Tutorials for Beginners | 0 comments

WordPress For Beginners Tutorials and information. We source some of the best tutorials online to help you manage your wordpress website.




Learn how to set image backgrounds in the Astra WordPress theme headers or gradients just by using CSS in the customiser area of the Astra theme.

IMPORTANT NOTE:
The tutorial works with free astra and free elementor. Make sure you have Elementor installed on your site. Go to elementor dashboard – settings – check enable SVG uploads – Save.

Now open any elementor page drag in icon widget and upload all your SVG files through that interface. By default WordPress won’t allow SVG uploads so you need to make sure you’re using elementor interface to get SVGs on your WordPress site.

After that you can Use CSS to set svgs as astra header backgrounds.

CSS code as shown in the video:

/*Bg image or gradient*/
.site-header{
/*background:linear-gradient(90deg,red,blue);*/
background:blue url(‘path’) 20% 30% repeat-x ;
}
/*Link Colors*/
.site-header .menu-item a{
color:white;
}
/*Code ends above*/

Mozilla CSS background reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/background

Free Blobmaker app for generating svg blobs:
https://www.blobmaker.app

If you’re new to Elementor, learn the basics here:

Join our Facebook Group: https://www.facebook.com/groups/designschoolwp

Design your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIUWYcJE0r2oFjRxMLxPBLFt

Build your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIXBIpyRqq8nrjb6Z14l-7gs

Customise your website:


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>