{"id":3114,"date":"2021-06-23T09:20:38","date_gmt":"2021-06-23T09:20:38","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3114"},"modified":"2023-02-21T10:40:14","modified_gmt":"2023-02-21T10:40:14","slug":"add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/","title":{"rendered":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3114\" class=\"elementor elementor-3114\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-383d6f00 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"383d6f00\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b092760\" data-id=\"6b092760\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2bc05a00 elementor-widget elementor-widget-video\" data-id=\"2bc05a00\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=PKIdWmNvQdQ&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1179b5d5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1179b5d5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4d29616a\" data-id=\"4d29616a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ca7ad1b elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"6ca7ad1b\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1821\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1821\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1822\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1822\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1821\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1821\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1821\" tabindex=\"0\" hidden=\"false\"><p>In this video I will show you how to create Box Shadow effects to widgets, sections and columns, by using the Elementor page builder for WordPress. That&#8217;s right &#8211; beautiful drop shadows with absolutely no coding or CSS.<\/p><p>To learn more about using Elementor&#8217;s many widgets and features, subscribe to this channel or visit<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1822\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1822\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1822\" tabindex=\"0\" hidden=\"hidden\"><p>hi everyone this is Noah from alimentar<br \/>today I&#8217;m going to show you an amazing<br \/>new feature the Box shadow with which<br \/>you can add a unique touch to your<br \/>website to begin we&#8217;re going to click on<br \/>the Edit with Ella matter button on this<br \/>page we show how to add a box shadow to<br \/>a section a column and a widget let&#8217;s<br \/>begin with this section to find the box<br \/>shadow we just click on the section on<br \/>the style tab border and here you can<br \/>see the Box shadow here you click yes<br \/>and now you can see in front of you all<br \/>the Box shadow options here we have<br \/>color<br \/>let&#8217;s pick black with an opacity of<br \/>course blur is in order to soften the<br \/>edges of the box shadow spread is in<br \/>order to increase the size of the box<br \/>shadow horizontal is in order to set<br \/>horizontally the Box shadow and vertical<br \/>is to set vertically the Box shadow<br \/>edges now please note that the Box<br \/>shadow is displayed only on the bottom<br \/>border because it&#8217;s set as full width<br \/>now let&#8217;s move on to the columns let&#8217;s<br \/>click on a column style tab and under<br \/>background and border you could see box<br \/>shadow click yes and now once again we<br \/>have the same box shadow options for<br \/>this column let&#8217;s pick a gray with an<br \/>opacity and for the blur we&#8217;re going to<br \/>set it at just about 30 with the spread<br \/>of 0 horizontally and vertically we&#8217;re<br \/>going to leave at 0 as well so that it&#8217;s<br \/>right at the center of the column now<br \/>we&#8217;re going to move on to another set of<br \/>columns<br \/>now these columns are just an example of<br \/>the incredibly creative things you can<br \/>do with the Box shadow and for the color<br \/>I&#8217;m going to insert that same color and<br \/>of course give it an opacity all right<br \/>and now for the blur I&#8217;m going to set it<br \/>as zero so there won&#8217;t be any soft edges<br \/>in this box shadow for the spread I&#8217;m<br \/>going to set it as 50 now as you can see<br \/>the box shadows edges have increased<br \/>their size to 50 for the horizontal<br \/>option I&#8217;m going to set it as minus 250<br \/>please note that if you want to position<br \/>it outside the scale you can just type<br \/>in the number now we&#8217;re going to move on<br \/>to the other column in the Box shadow<br \/>color we&#8217;re going to choose in all of<br \/>the green for the blur of course we&#8217;re<br \/>going to set it as 0 just like the other<br \/>column spread we&#8217;re going to set it as<br \/>to set it as an opposite of the other<br \/>column let&#8217;s set it at 240 and vertical<br \/>let&#8217;s give it a minus 8 now I&#8217;ll just<br \/>put this on preview mode so you could<br \/>see what an incredibly creative touch<br \/>it&#8217;s given to the page now we&#8217;ve gone<br \/>over the columns and it&#8217;s time to move<br \/>on to the widgets here you can see a<br \/>video widget inside this section let&#8217;s<br \/>click on the widget itself and here<br \/>please note that the Box shadow is<br \/>placed in a different area<br \/>in the sections and columns it&#8217;s placed<br \/>in the Advanced tab it&#8217;s placed here<br \/>under the Advanced Options because the<br \/>box-shadow<br \/>isn&#8217;t always set on the element itself<br \/>but on the whole widget for example for<br \/>this title<br \/>the box-shadow will be set for wherever<br \/>the blue line is displayed on the border<br \/>of the widget and not on the title<br \/>itself let&#8217;s go back to the video widget<br \/>now for the color let&#8217;s go with black<br \/>the blur we&#8217;re going to set as 50 and<br \/>the spread horizontal and vertical we&#8217;re<br \/>going to keep a zero<br \/>as you can see on the page that gave the<br \/>video widget and amazing effects I hope<br \/>you enjoyed this video for more videos<br \/>and tutorials subscribe our youtube<br \/>channel or visit Doc&#8217;s<br \/>alimentar com<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this video I will show you how to create Box Shadow effects to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful drop shadows with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3965,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this video I will show you how to create Box Shadow effects to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful drop shadows with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T09:20:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:40:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder - Academy","og_description":"Overview Transcript Overview In this video I will show you how to create Box Shadow effects to widgets, sections and columns, by using the Elementor page builder for WordPress. That\u2019s right \u2013 beautiful drop shadows with absolutely no coding or CSS. To learn more about using Elementor\u2019s many widgets and features, subscribe to this channel [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/","og_site_name":"Academy","article_published_time":"2021-06-23T09:20:38+00:00","article_modified_time":"2023-02-21T10:40:14+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder","datePublished":"2021-06-23T09:20:38+00:00","dateModified":"2023-02-21T10:40:14+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/"},"wordCount":775,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/","url":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/","name":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg","datePublished":"2021-06-23T09:20:38+00:00","dateModified":"2023-02-21T10:40:14+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Drop-Shadow-Effects.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/add-drop-shadow-effects-to-your-wordpress-website-using-elementor-page-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Add Drop Shadow Effects to Your WordPress Website Using Elementor Page Builder"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3114"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3114\/revisions"}],"predecessor-version":[{"id":9376,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3114\/revisions\/9376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3965"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}