{"id":67261,"date":"2021-05-26T13:00:05","date_gmt":"2021-05-26T13:00:05","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=67261"},"modified":"2021-05-26T13:00:05","modified_gmt":"2021-05-26T13:00:05","slug":"osm-and-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/osm-and-elementor\/","title":{"rendered":"How a Leading Design Agency Revamped Their Website With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"67261\" class=\"elementor elementor-67261\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6ae3ca9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6ae3ca9\" data-element_type=\"section\">\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-973f30a\" data-id=\"973f30a\" 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-6149493 elementor-widget elementor-widget-text-editor\" data-id=\"6149493\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We at <a href=\"https:\/\/weareosm.com\/\">OSM<\/a> are a team of creative, analytical individuals who accomplish awesome things together. Our <em>pack<\/em> consists of over 50 employees who love to brainstorm, work, and drink coffee together (we are proud of our vintage espresso machine!).\u00a0<\/p><p>We\u2019ve been around for over 12 years now, and despite the fact that our team is based in Belgrade, we welcome clients from all over the world. Most of our clients are startups and small businesses, but we have some well-established enterprises in our portfolio, as well.\u00a0<\/p><p>As a design and development agency, we consider it important to keep up with the <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">latest trends<\/a> and provide our clients with the best possible solutions. Our website has always been our business card: a place where we can show our creativity and provide visitors with an OSM experience.\u00a0<\/p><p>Our new site was launched one year ago, and now it is time for a revamp.<\/p><p>The timing of the <a href=\"https:\/\/elementor.com\/blog\/introducing-pro-3-2\/\" target=\"_blank\" rel=\"noopener\">Elementor 3.2<\/a> release was just right! <a href=\"https:\/\/generalcondition.com\/\">Jovan Laki\u0107<\/a>, our main website designer, used <a href=\"https:\/\/elementor.com\/widgets\/text-path-widget\/\" target=\"_blank\" rel=\"noopener\">Text Path Widget<\/a><strong>, <\/strong>Mask Option, <a href=\"https:\/\/elementor.com\/help\/button-widget\/\" target=\"_blank\" rel=\"noopener\">gradient buttons<\/a>, and sticky columns to freshen up our main site\u2019s pages.<\/p><p>Take a look at what has he done so far:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4907993 elementor-widget elementor-widget-video\" data-id=\"4907993\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/OSM-site-revamp-video.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d0880c elementor-widget elementor-widget-text-editor\" data-id=\"9d0880c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you are seeking inspiration and guidance on how to make the most out of new Elementor features \u2014 you\u2019re in the right place. My aim for this post is to show how to get these stunning effects without writing a single line of code. But let&#8217;s be honest \u2014 that&#8217;s why you started reading it in the first place, right? \ud83d\ude42<\/p><p>Let&#8217;s dive right in.<\/p>\t\t\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-7cbf95d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7cbf95d9\" data-element_type=\"section\">\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-25a7d601\" data-id=\"25a7d601\" 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-32ccb170 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"32ccb170\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/reasons-to-redesign-website\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">How To Know if It's Time to Redesign Your Website<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\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-6b7b6ac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b7b6ac\" data-element_type=\"section\">\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-fd1ee4c\" data-id=\"fd1ee4c\" 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-4315d9a blog-toc elementor-widget elementor-widget-heading\" data-id=\"4315d9a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc9468e blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"bc9468e\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#wavy-subheadings\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Wavy Subheadings, Thanks to the Text Path Widget<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-turn-patterns-into-shapes\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Turn Patterns Into Shapes With a Gradient Feel<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#the-sticky-column\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Don\u2019t Let Your Visitors Get Lost \u2014 The Sticky Column Can Come in Handy!<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#utilize-new-features\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Utilize New Features To Show Creativity!<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\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-94e7ae3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"94e7ae3\" data-element_type=\"section\">\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-c12c386\" data-id=\"c12c386\" 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-90de554 elementor-widget elementor-widget-menu-anchor\" data-id=\"90de554\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"wavy-subheading\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e14ca70 elementor-widget elementor-widget-heading\" data-id=\"e14ca70\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Wavy Subheadings, Thanks to the Text Path Widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e68919 elementor-widget elementor-widget-text-editor\" data-id=\"9e68919\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Website Development Service page is one of the most visited pages on our site, so we wanted it to be more engaging. With the Text Path Widget, we managed to get these stunning, wavy subheadings. Take a look.<\/p><p><strong>Before:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44e80a2 elementor-widget elementor-widget-image\" data-id=\"44e80a2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/text-path-before-r4q778nl60x92418xj6v1xjsdig3ty2cvw48y1zr6y.png\" title=\"text-path-before\" alt=\"text-path-before\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d37fae8 elementor-widget elementor-widget-text-editor\" data-id=\"d37fae8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>After:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eae094f elementor-widget elementor-widget-image\" data-id=\"eae094f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"224\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/Gradient-CTA.gif\" class=\"attachment-full size-full wp-image-67274\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9063c8 elementor-widget elementor-widget-heading\" data-id=\"e9063c8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How Can You Create a Wavy Text Like This One\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c185a9c elementor-widget elementor-widget-text-editor\" data-id=\"c185a9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. In the Elementor editor \u2014 search for the <strong>Text Path<\/strong> widget and drag it in:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af328b7 elementor-widget elementor-widget-image\" data-id=\"af328b7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"219\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=219\/blog\/wp-content\/uploads\/2021\/05\/text-path-widget-300x219.png\" class=\"attachment-medium size-medium wp-image-67281\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/text-path-widget-300x219.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2021\/05\/text-path-widget.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0e61bd elementor-widget elementor-widget-text-editor\" data-id=\"d0e61bd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2. Replace the placeholder text with your own.\u00a0<\/p><p>3. In the <strong>Style<\/strong>\u00a0tab, adjust the Font Family, Size, and Color.<\/p><p>4. Click the <strong>Show Path<\/strong> toggle, so you can better visualize your text path. You can switch it off later if necessary.<\/p><p>5. Choose an option in the <strong>Path Type<\/strong>. We\u2019ve opted for \u201cWave<em>\u201d. <\/em>If you want an even more curvy look, you can always choose the Custom option. Simply by clicking on the <strong><em>+<\/em><\/strong> button, upload a curve that you\u2019ve previously drawn or downloaded:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-664dd9d elementor-widget elementor-widget-image\" data-id=\"664dd9d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"251\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=251,h=300\/blog\/wp-content\/uploads\/2021\/05\/upload-SVG-251x300.png\" class=\"attachment-medium size-medium wp-image-67291\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=251\/blog\/wp-content\/uploads\/2021\/05\/upload-SVG-251x300.png 251w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582\/blog\/wp-content\/uploads\/2021\/05\/upload-SVG.png 582w\" sizes=\"(max-width: 251px) 100vw, 251px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f09b76 elementor-widget elementor-widget-text-editor\" data-id=\"8f09b76\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>6. Align the positioning of the Text Path widget \u2014 we\u2019ve chosen to align it to Center. The default widget size of 500 pixels takes up the whole column \u2014 so you might not be able to see the alignment change before you change the size.<\/p><p>7. Choose a <strong>Text Direction<\/strong>. We\u2019ve mixed things up a bit so that the first line of text is LTR (left-to-right), and the second one is RTL (right-to-left):<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc71a8f elementor-widget elementor-widget-image\" data-id=\"fc71a8f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"194\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=194,h=300\/blog\/wp-content\/uploads\/2021\/05\/edit-text-path-widget-194x300.png\" class=\"attachment-medium size-medium wp-image-67298\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=194\/blog\/wp-content\/uploads\/2021\/05\/edit-text-path-widget-194x300.png 194w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2021\/05\/edit-text-path-widget.png 600w\" sizes=\"(max-width: 194px) 100vw, 194px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de5cf3f elementor-widget elementor-widget-text-editor\" data-id=\"de5cf3f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Simple as that!<\/p><p>Here are more examples of how we used this neat feature.<\/p><p><b>Before:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe9cddf elementor-widget elementor-widget-image\" data-id=\"fe9cddf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Before-1-r4q752mzerygah6kl3gtsz8j2j4n32gmx5yy437ges.png\" title=\"Before-1\" alt=\"Before-1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e46797f elementor-widget elementor-widget-image\" data-id=\"e46797f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Before-2-r4q7025yyl3edcgpuxggi8s10ju616k68cppyyn1l6.png\" title=\"Before-2\" alt=\"Before-2\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14a1031 elementor-widget elementor-widget-text-editor\" data-id=\"14a1031\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>After:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc5bff2 elementor-widget elementor-widget-video\" data-id=\"cc5bff2\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/After-wavy-subheadings.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-880ca5f elementor-widget elementor-widget-menu-anchor\" data-id=\"880ca5f\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-turn-patterns-into-shapes\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b75b654 elementor-widget elementor-widget-heading\" data-id=\"b75b654\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Turn Patterns Into Shapes With a Gradient Feel\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15e3d1d elementor-widget elementor-widget-text-editor\" data-id=\"15e3d1d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating patterns with shapes is a clich\u00e9. Let\u2019s go the other way around.<\/p><p>We must brag a bit, and say that everyone was wowed by the patterns on our Homepage.<\/p><p><strong>Before:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4155af8 elementor-widget elementor-widget-video\" data-id=\"4155af8\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/osm-patterns.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d52e2a elementor-widget elementor-widget-text-editor\" data-id=\"4d52e2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>However, we did a bit of a pattern makeover after playing with the <strong>Mask<\/strong>\u00a0feature. How do you\u00a0like our patterns\u2019 new look?<\/p><p><strong>After:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2cec98 elementor-widget elementor-widget-image\" data-id=\"a2cec98\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"448\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=448\/blog\/wp-content\/uploads\/2021\/05\/screenshot-3.png\" class=\"attachment-full size-full wp-image-67326\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/05\/screenshot-3.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/screenshot-3-300x187.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f0fcc8 elementor-widget elementor-widget-image\" data-id=\"9f0fcc8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"474\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=474\/blog\/wp-content\/uploads\/2021\/05\/screenshot-4.png\" class=\"attachment-full size-full wp-image-67327\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/05\/screenshot-4.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/screenshot-4-300x198.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9976d9f elementor-widget elementor-widget-image\" data-id=\"9976d9f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"459\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=459\/blog\/wp-content\/uploads\/2021\/05\/screenshot-5.png\" class=\"attachment-full size-full wp-image-67328\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/05\/screenshot-5.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/screenshot-5-300x191.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca574bd elementor-widget elementor-widget-heading\" data-id=\"ca574bd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How To Use the Mask Option To Create Shapes Like These\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4234650 elementor-widget elementor-widget-text-editor\" data-id=\"4234650\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. Drag the <a href=\"https:\/\/elementor.com\/help\/image-widget\/\" target=\"_blank\" rel=\"noopener\">Image Widget<\/a> from the Editor and upload your image of choice (or a pattern, like in our case).<\/p><p>2. Find the <strong>Mask<\/strong> option in the <strong>Advanced<\/strong> tab and click to toggle it on:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5c4a18 elementor-widget elementor-widget-image\" data-id=\"e5c4a18\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"146\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=146,h=300\/blog\/wp-content\/uploads\/2021\/05\/Mask-widget-146x300.png\" class=\"attachment-medium size-medium wp-image-67338\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=146\/blog\/wp-content\/uploads\/2021\/05\/Mask-widget-146x300.png 146w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=499\/blog\/wp-content\/uploads\/2021\/05\/Mask-widget-499x1024.png 499w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=598\/blog\/wp-content\/uploads\/2021\/05\/Mask-widget.png 598w\" sizes=\"(max-width: 146px) 100vw, 146px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a334280 elementor-widget elementor-widget-text-editor\" data-id=\"a334280\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. Choose a Shape from the list (we used &#8220;Blob&#8221;), or upload your own SVG or PNG format:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ba6eb2 elementor-widget elementor-widget-image\" data-id=\"0ba6eb2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"267\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=267\/blog\/wp-content\/uploads\/2021\/05\/Blob-shape-300x267.png\" class=\"attachment-medium size-medium wp-image-67339\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/Blob-shape-300x267.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=582\/blog\/wp-content\/uploads\/2021\/05\/Blob-shape.png 582w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-974225e elementor-widget elementor-widget-text-editor\" data-id=\"974225e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>4. Set the size of the Mask to specify how it should fit its container. Go for either the &#8220;Fit&#8221; or &#8220;Fill&#8221; option, or play with the mask size in the <strong>Custom Size<\/strong> section:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-679e09c elementor-widget elementor-widget-image\" data-id=\"679e09c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"266\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=266\/blog\/wp-content\/uploads\/2021\/05\/Mask-size-300x266.png\" class=\"attachment-medium size-medium wp-image-67346\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/Mask-size-300x266.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=574\/blog\/wp-content\/uploads\/2021\/05\/Mask-size.png 574w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-540bf11 elementor-widget elementor-widget-text-editor\" data-id=\"540bf11\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>5. Tweak the mask for different screens (tablet, mobile) by clicking on the device icons:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23f5fc0 elementor-widget elementor-widget-image\" data-id=\"23f5fc0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"270\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=270\/blog\/wp-content\/uploads\/2021\/05\/different-device-mask-300x270.png\" class=\"attachment-medium size-medium wp-image-67350\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/different-device-mask-300x270.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=586\/blog\/wp-content\/uploads\/2021\/05\/different-device-mask.png 586w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6bb603 elementor-widget elementor-widget-text-editor\" data-id=\"f6bb603\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>6. Add some <a href=\"https:\/\/elementor.com\/help\/motion-effects\/\" target=\"_blank\" rel=\"noopener\">Motion Effects<\/a> to make your design even more fun! Select the Scrolling Effects or Mouse Effects toggles to turn the animation on and pick the effect that you like:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f61a747 elementor-widget elementor-widget-image\" data-id=\"f61a747\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"157\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=157,h=300\/blog\/wp-content\/uploads\/2021\/05\/Mask-animation-157x300.png\" class=\"attachment-medium size-medium wp-image-67351\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=157\/blog\/wp-content\/uploads\/2021\/05\/Mask-animation-157x300.png 157w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=537\/blog\/wp-content\/uploads\/2021\/05\/Mask-animation-537x1024.png 537w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=594\/blog\/wp-content\/uploads\/2021\/05\/Mask-animation.png 594w\" sizes=\"(max-width: 157px) 100vw, 157px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9fa82a3 elementor-widget elementor-widget-text-editor\" data-id=\"9fa82a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That\u2019s it!<\/p><p>Ah, one more thing \u2014 have you noticed our revamped CTA buttons? We\u2019ve added the gradient button effect to make them more engaging. After all, 2021 design trends are very much about gradients.<\/p><p>The buttons on our current website just have a frame with a solid color <a href=\"https:\/\/elementor.com\/help\/hover-effects\/\" target=\"_blank\" rel=\"noopener\">hover state<\/a>.<\/p><p><strong>Before:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-543e6ba elementor-widget elementor-widget-image\" data-id=\"543e6ba\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"188\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/05\/Old-CTAs.gif\" class=\"attachment-large size-large wp-image-67365\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af68be5 elementor-widget elementor-widget-text-editor\" data-id=\"af68be5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>After:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41d10c1 elementor-widget elementor-widget-video\" data-id=\"41d10c1\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/Gradient-CTA-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a5ac21 elementor-widget elementor-widget-heading\" data-id=\"0a5ac21\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How To Add the Gradient Button Effect to Your Button\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d80769 elementor-widget elementor-widget-text-editor\" data-id=\"0d80769\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. Go to the <strong>Style<\/strong>\u00a0tab and click the Gradient icon in the <strong>Background Type<\/strong> option to turn the solid color background into a gradient background:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7afacdd elementor-widget elementor-widget-image\" data-id=\"7afacdd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=240,h=300\/blog\/wp-content\/uploads\/2021\/05\/Gradient-icon-240x300.png\" class=\"attachment-medium size-medium wp-image-67380\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=240\/blog\/wp-content\/uploads\/2021\/05\/Gradient-icon-240x300.png 240w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=600\/blog\/wp-content\/uploads\/2021\/05\/Gradient-icon.png 600w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1227e1a elementor-widget elementor-widget-text-editor\" data-id=\"1227e1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2. Pick two colors and adjust the location of each one. That way, you can control the transition between the gradient, and how sharp or subtle it\u2019ll be.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dacf540 elementor-widget elementor-widget-image\" data-id=\"dacf540\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=298,h=300\/blog\/wp-content\/uploads\/2021\/05\/Gradient-location-298x300.png\" class=\"attachment-medium size-medium wp-image-67381\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=298\/blog\/wp-content\/uploads\/2021\/05\/Gradient-location-298x300.png 298w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150\/blog\/wp-content\/uploads\/2021\/05\/Gradient-location-150x150.png 150w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=592\/blog\/wp-content\/uploads\/2021\/05\/Gradient-location.png 592w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07c6ec3 elementor-widget elementor-widget-text-editor\" data-id=\"07c6ec3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. Choose the Gradient Type: &#8220;Linear&#8221; or &#8220;Radiant&#8221;. We implemented the linear one, but you should test and decide on the best fit for your website design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbed966 elementor-widget elementor-widget-image\" data-id=\"dbed966\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"94\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=94\/blog\/wp-content\/uploads\/2021\/05\/Linear-gradient-300x94.png\" class=\"attachment-medium size-medium wp-image-67382\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/05\/Linear-gradient-300x94.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=558\/blog\/wp-content\/uploads\/2021\/05\/Linear-gradient.png 558w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f344518 elementor-widget elementor-widget-text-editor\" data-id=\"f344518\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>4. Use the slider or type in an exact value to adjust the gradient \u201cAngle\u201d.<\/p><p>5. Add a hover effect to make the button more interactive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f529b07 elementor-widget elementor-widget-menu-anchor\" data-id=\"f529b07\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"the-sticky-column\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-605f004 elementor-widget elementor-widget-heading\" data-id=\"605f004\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Don\u2019t Let Your Visitors Get Lost \u2014 The Sticky Column Can Come in Handy!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b84f291 elementor-widget elementor-widget-text-editor\" data-id=\"b84f291\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It\u2019s often the case that when visitors scroll down a page, they simply forget why they were on the page in the first place. Even if this isn\u2019t the case, imagine how useful it would be to have sticky sub-headings or important info. This is something we\u2019ve tested on our Brand Development page. Check it out.<\/p><p><strong> Before:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfa8f38 elementor-widget elementor-widget-video\" data-id=\"dfa8f38\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/Sticky-effect-before.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94bbe60 elementor-widget elementor-widget-text-editor\" data-id=\"94bbe60\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>After:<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-962ba60 elementor-widget elementor-widget-video\" data-id=\"962ba60\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/Sticky-colums-after.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e979ac5 elementor-widget elementor-widget-heading\" data-id=\"e979ac5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How To Implement the Sticky Column\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4680a99 elementor-widget elementor-widget-text-editor\" data-id=\"4680a99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. Select the <strong>Inner Section<\/strong>\u00a0widget (within the main one) and go to the <strong>Advanced<\/strong> tab.<\/p><p>2. In the <strong>Motion Effects<\/strong>\u00a0section, choose the Sticky effect -&gt; Top.<\/p><p>3. In the <strong>Offset,<\/strong>\u00a0add the value 100 (0 is the default).<\/p><p>4. Select &#8220;Stay in Column&#8221;<em>. <\/em>This means that the inner column remains within the main section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b3a2f4 elementor-widget elementor-widget-video\" data-id=\"1b3a2f4\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/05\/sticky.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea4b3ec elementor-widget elementor-widget-text-editor\" data-id=\"ea4b3ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Not that hard, right?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5fba76 elementor-widget elementor-widget-menu-anchor\" data-id=\"f5fba76\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"utilize-new-features\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87827da elementor-widget elementor-widget-heading\" data-id=\"87827da\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Utilize New Features To Show Creativity!\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eed60c9 elementor-widget elementor-widget-text-editor\" data-id=\"eed60c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Hope that we\u2019ve encouraged you to explore Elementor 3.2., and to play with these cool features we\u2019ve described. We are still in the process of updating our website and can&#8217;t wait to see what you\u2019ve come up with for yours \u2014 maybe we can get even more ideas! Let us know in the comments down below.<\/p>\t\t\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>For the large Belgrade-based agency OSM, the timing of the Elementor 3.2 release couldn&#8217;t be better \u2014 it was time for a makeover. Learn how their designer used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.<\/p>\n","protected":false},"author":2024182,"featured_media":83258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,17,32],"tags":[80],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-67261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stories","category-inspiration","category-design","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How a Leading Design Agency Revamped Their Website With Elementor<\/title>\n<meta name=\"description\" content=\"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.\" \/>\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\/blog\/osm-and-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How a Leading Design Agency Revamped Their Website With Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-26T13:00:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ana Kari\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ana Kari\u0107\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\"},\"author\":{\"name\":\"Ana Kari\u0107\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda\"},\"headline\":\"How a Leading Design Agency Revamped Their Website With Elementor\",\"datePublished\":\"2021-05-26T13:00:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\"},\"wordCount\":1204,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg\",\"keywords\":[\"Pro\"],\"articleSection\":[\"Case Studies\",\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\",\"url\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\",\"name\":\"How a Leading Design Agency Revamped Their Website With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg\",\"datePublished\":\"2021-05-26T13:00:05+00:00\",\"description\":\"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/osm-and-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/osm-and-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Studies\",\"item\":\"https:\/\/elementor.com\/blog\/category\/stories\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How a Leading Design Agency Revamped Their Website With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda\",\"name\":\"Ana Kari\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g\",\"caption\":\"Ana Kari\u0107\"},\"description\":\"Ana Kari\u0107 is part of the OSM team, where she works as Head of Marketing. Her aim is to use proven Growth Marketing frameworks and strategies to help businesses scale. She tends to keep a holistic approach to her work, so exploring website crafting with Elementor was the logical step to take...and she is loving it!\",\"url\":\"https:\/\/elementor.com\/blog\/author\/anakaric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How a Leading Design Agency Revamped Their Website With Elementor","description":"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.","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\/blog\/osm-and-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How a Leading Design Agency Revamped Their Website With Elementor","og_description":"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.","og_url":"https:\/\/elementor.com\/blog\/osm-and-elementor\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-05-26T13:00:05+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg","type":"image\/jpeg"}],"author":"Ana Kari\u0107","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ana Kari\u0107"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/"},"author":{"name":"Ana Kari\u0107","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda"},"headline":"How a Leading Design Agency Revamped Their Website With Elementor","datePublished":"2021-05-26T13:00:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/"},"wordCount":1204,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg","keywords":["Pro"],"articleSection":["Case Studies","Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/osm-and-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/","url":"https:\/\/elementor.com\/blog\/osm-and-elementor\/","name":"How a Leading Design Agency Revamped Their Website With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg","datePublished":"2021-05-26T13:00:05+00:00","description":"Learn how OSM design agency used the new Text Path, Mask, Sticky Column, and Gradient Buttons to give their website a fresh and stylish look.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/osm-and-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/10\/2022_3_blog_How-a-Leading-Design-Agency-Revamped-Their-Website-With-Elementor.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/osm-and-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Studies","item":"https:\/\/elementor.com\/blog\/category\/stories\/"},{"@type":"ListItem","position":3,"name":"How a Leading Design Agency Revamped Their Website With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda","name":"Ana Kari\u0107","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g","caption":"Ana Kari\u0107"},"description":"Ana Kari\u0107 is part of the OSM team, where she works as Head of Marketing. Her aim is to use proven Growth Marketing frameworks and strategies to help businesses scale. She tends to keep a holistic approach to her work, so exploring website crafting with Elementor was the logical step to take...and she is loving it!","url":"https:\/\/elementor.com\/blog\/author\/anakaric\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/67261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024182"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=67261"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/67261\/revisions"}],"predecessor-version":[{"id":92314,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/67261\/revisions\/92314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/83258"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=67261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=67261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=67261"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=67261"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=67261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}