{"id":2263,"date":"2021-06-21T10:02:03","date_gmt":"2021-06-21T10:02:03","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2263"},"modified":"2023-02-22T09:19:23","modified_gmt":"2023-02-22T09:19:23","slug":"how-to-use-inline-positioning-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/","title":{"rendered":"How to Use Inline Positioning in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2263\" class=\"elementor elementor-2263\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13766280 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13766280\" 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-6744454e\" data-id=\"6744454e\" 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-72de72e5 elementor-widget elementor-widget-video\" data-id=\"72de72e5\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=FtHXk2e6OF8&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-6d58ad19 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d58ad19\" 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-2b2bfa4a\" data-id=\"2b2bfa4a\" 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-5a3fcc82 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5a3fcc82\" 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-1511\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1511\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1512\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1512\" 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-1511\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1511\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1511\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we&#8217;ll go over how to use inline positioning in Elementor 2.5.<\/p><p>You&#8217;ll learn:<br \/>\u2714\ufe0e How to align elements side-by-side in the same column<br \/>\u2714\ufe0e Control an element position<br \/>\u2714\ufe0e Use custom width to align your inline elements<\/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-1512\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1512\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1512\" tabindex=\"0\" hidden=\"hidden\"><p>hi Cassie from Elementor here today<br \/>we&#8217;re going to learn about inline<br \/>positioning in Elementor we&#8217;ll learn how<br \/>to align elements side by side in the<br \/>same column control an element position<br \/>and use custom width to align your<br \/>inline elements let&#8217;s dive in here I&#8217;m<br \/>working with a pre-made design but as<br \/>you can see it&#8217;s not entirely finished<br \/>in the first section we have two buttons<br \/>in the same column we want our buttons<br \/>to align side by side let&#8217;s do it click<br \/>the button and under advanced custom<br \/>positioning click the width drop-down<br \/>and choose inline now let&#8217;s do the same<br \/>to the second button cool easy-peasy<br \/>over to the next example we have four<br \/>columns hosting to inline widgets a<br \/>heading widget and a text editor widget<br \/>with vertical align we can control the<br \/>position of our widgets to the center<br \/>start and end end is perfect for this<br \/>design so let&#8217;s right-click and copy<br \/>paste style for the rest of the widgets<br \/>awesome moving on to our next section<br \/>let&#8217;s add our services features here<br \/>just below the text so drag in an image<br \/>box widget and let&#8217;s change our image<br \/>remove the title and paste in some text<br \/>in the style tab change the image width<br \/>to 40% under content align to the left<br \/>in advanced custom positioning change<br \/>the width to custom and set it to 30% of<br \/>the column width now right click and<br \/>duplicate twice and change our images<br \/>and text<br \/>you<br \/>our design is all set let&#8217;s check it out<br \/>looks phenomenal inline positioning<br \/>saves you loads of time and simplifies<br \/>your workflow don&#8217;t forget subscribe to<br \/>our YouTube channel for more fun videos<br \/>and tutorials catch you later<\/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 tutorial, we\u2019ll go over how to use inline positioning in Elementor 2.5. You\u2019ll learn: \u2714\ufe0e How to align elements side-by-side in the same column \u2714\ufe0e Control an element position \u2714\ufe0e Use custom width to align your inline elements Transcript hi Cassie from Elementor here today we\u2019re going to learn about [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4008,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2263","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>How to Use Inline Positioning in Elementor - 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\/how-to-use-inline-positioning-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Inline Positioning in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll go over how to use inline positioning in Elementor 2.5. You\u2019ll learn: \u2714\ufe0e How to align elements side-by-side in the same column \u2714\ufe0e Control an element position \u2714\ufe0e Use custom width to align your inline elements Transcript hi Cassie from Elementor here today we\u2019re going to learn about [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T10:02:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:19:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.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<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Inline Positioning in Elementor - 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\/how-to-use-inline-positioning-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Inline Positioning in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll go over how to use inline positioning in Elementor 2.5. You\u2019ll learn: \u2714\ufe0e How to align elements side-by-side in the same column \u2714\ufe0e Control an element position \u2714\ufe0e Use custom width to align your inline elements Transcript hi Cassie from Elementor here today we\u2019re going to learn about [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-21T10:02:03+00:00","article_modified_time":"2023-02-22T09:19:23+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Inline Positioning in Elementor","datePublished":"2021-06-21T10:02:03+00:00","dateModified":"2023-02-22T09:19:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/"},"wordCount":357,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/","name":"How to Use Inline Positioning in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.jpg","datePublished":"2021-06-21T10:02:03+00:00","dateModified":"2023-02-22T09:19:23+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Inline-Positioning.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-inline-positioning-in-elementor\/#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":"How to Use Inline Positioning in Elementor"}]},{"@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\/2263","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=2263"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2263\/revisions"}],"predecessor-version":[{"id":9495,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2263\/revisions\/9495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4008"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}