{"id":951,"date":"2024-12-08T16:04:07","date_gmt":"2024-12-08T08:04:07","guid":{"rendered":"https:\/\/www.englishqu.com\/zone\/?p=951"},"modified":"2024-12-08T16:04:09","modified_gmt":"2024-12-08T08:04:09","slug":"how-to-add-a-box-shadow-to-the-header-in-astra-theme-free","status":"publish","type":"post","link":"https:\/\/www.englishqu.com\/zone\/how-to-add-a-box-shadow-to-the-header-in-astra-theme-free\/","title":{"rendered":"How to Add a Box Shadow to the Header in Astra Theme Free"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Adding a box shadow to the header in the Astra Theme Free can elevate the design of your website, giving it a modern, professional look.<\/strong> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While the Astra Pro version has more advanced design customization options, including built-in styling for shadows, the free version allows you to achieve this effect with a little custom CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we&#8217;ll walk you through how to easily add a box shadow to the header of your <strong><a href=\"https:\/\/wpastra.com\/pricing\/\" rel=\"nofollow noopener\" target=\"_blank\">Astra theme<\/a><\/strong> without upgrading to the Pro version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Add Box Shadow to the Header?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A box shadow gives your website a subtle depth and makes the header stand out from the rest of the page content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It can help you to improve visual hierarchy, guiding visitors\u2019 eyes to the header. Your header will look more interactive and modern and it adds a sense of depth and separation from the content below it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Read: <a href=\"https:\/\/www.englishqu.com\/zone\/how-to-create-sticky-header-for-astra-free\/\">How to Create Sticky Header for Astra Theme Free<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By adding depth to your design, you create a more dynamic and engaging experience for users, looked more polished and modern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add a Box Shadow to the Header in Astra Theme Free<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re using the Astra Theme Free and want to add a box shadow to your header, follow these steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Access the Customizer in Dashboard<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In your WordPress Dashboard<\/li>\n\n\n\n<li>Go to <strong>Appearance > Customize<\/strong><\/li>\n\n\n\n<li>Inside the WordPress Customizer, go to <strong>Additional CSS.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Add Custom CSS Code for Box Shadow<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Additional CSS section, add the following CSS code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Add a box shadow to Astra theme header *\/ \n.main-header-bar {\n\tbox-shadow: 0 10px 20px -15px rgba(0,0,0,.15);\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">From the code above, you can adjust the vertical offset or blur radius to better suit your site&#8217;s design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Publish<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can check the live changes after adding the code. If there are no changes, review the code to ensure there are no errors. Then, click Publish to apply the changes<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ready to give it a try?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a box shadow to the header in the Astra Theme (Free) is an easy and effective way to improve the design of your website. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By following a few simple steps and customizing the shadow effect, you can give your website a professional and polished appearance that enhances user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a box shadow to the header in the Astra Theme Free can elevate the&#8230;<\/p>\n","protected":false},"author":1,"featured_media":953,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[12],"newstopic":[],"class_list":["post-951","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-astra-theme"],"_links":{"self":[{"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/posts\/951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/comments?post=951"}],"version-history":[{"count":2,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/posts\/951\/revisions"}],"predecessor-version":[{"id":954,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/posts\/951\/revisions\/954"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/media\/953"}],"wp:attachment":[{"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/media?parent=951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/categories?post=951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/tags?post=951"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/www.englishqu.com\/zone\/wp-json\/wp\/v2\/newstopic?post=951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}