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