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

0 Comments

Submit a Comment

What Our Clients Are Saying

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!

North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

Manny, North Burnaby Boxing Club

Dieno Digital Marketing Services
5
2018-04-27T01:06:02+00:00

Manny, North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!
5
4
Dieno Digital Marketing Services
[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-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>