{"id":1495,"date":"2021-06-17T12:14:04","date_gmt":"2021-06-17T12:14:04","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1495"},"modified":"2023-02-22T10:12:39","modified_gmt":"2023-02-22T10:12:39","slug":"how-to-use-the-text-editor-widget-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/","title":{"rendered":"How to Use the Text Editor Widget in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1495\" class=\"elementor elementor-1495\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6ea5d563 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6ea5d563\" 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-3dd7050a\" data-id=\"3dd7050a\" 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-4c11139b elementor-widget elementor-widget-video\" data-id=\"4c11139b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=kOen1SyK7Zg&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-1a6d2eee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1a6d2eee\" 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-3be825f8\" data-id=\"3be825f8\" 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-363249b6 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"363249b6\" 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-9091\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9091\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9092\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9092\" 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-9091\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9091\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9091\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we\u2019ll explore the Text Editor widget. This widget allows you to place, edit, and style body text on your website. This tutorial will cover:<\/p><p>\u2714\ufe0e Basic functions of the Text Editor widget<\/p><p>\u2714\ufe0e Working with multiple columns of text<\/p><p>\u2714\ufe0e How to style body text<\/p><p>\u2714\ufe0e Adding and styling a drop cap<\/p><p>\u2714\ufe0e And much more!<\/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-9092\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9092\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9092\" tabindex=\"0\" hidden=\"hidden\"><p><span style=\"font-weight: 400\">Hey there. It\u2019s Aviva from Elementor.\u00a0<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">In this tutorial, we\u2019ll explore the Text Editor widget. The Text Editor widget is used to place, edit, and style body text on websites.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Body text is required on just about every website, and with the right styling, your website text will draw your visitors\u2019 attention, and encourage them to read on, and engage with your site.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">In this video, we\u2019ll show you different examples of how you can showcase text in your website designs.<\/span><\/p><p>\u00a0<\/p><p><span style=\"font-weight: 400\">Let\u2019s get started.<\/span><\/p><p>In our first example, we\u2019ll create a block of text with two columns, for a law firm.<\/p><p>Let\u2019s start by selecting the Text Editor widget, located here in the Basic widgets, and dragging it into place in the Editor.<\/p><p>In the content tab is the standard WordPress editor with its visual&#8230;and text tabs.<\/p><p>\u00a0<\/p><p>By default, a short paragraph of placeholder text already appears here. Update it with your own text, by typing or pasting it in.<\/p><p>Click the Dynamic tags icon to display dynamic content, which refers to select content drawn from the website, such as from a blog post.<\/p><p>Note that you can use dynamic content in any setting that has the dynamic tags icon displayed. For this example, there\u2019s no need for dynamic content, so I\u2019ll use the content I typed in before.<\/p><p>You can make text edits right here, or directly in the Elementor Editor by double-clicking the text.<\/p><p>Select text to apply basic text formatting styles, such as bold and italic styling, list options, and more.<\/p><p>Returning to the text editor, you can click this toggle to expand the toolbar for more formatting options.<\/p><p>Additionally, you can click and drag the corner to expand the text editing area, which is quite helpful for larger text blocks.<\/p><p>Below, you can add a drop cap by toggling it on here. I\u2019ll leave it off for now, and we\u2019ll go over the Drop Cap styling in the next example.<\/p><p>The text editor widget allows us to separate text into columns. I\u2019ll select a two column layout, which works well here&#8230;in our Desktop view.<\/p><p>The presence of the viewport icon indicates that this setting may be adjusted for other devices. In the columns setting, you can change the number of columns displayed on tablet by clicking the tablet icon and adjusting the number of columns. Now click to switch to mobile view, and as you can see, it\u2019s inherited the tablet settings. That\u2019s perfect for this design, so there\u2019s no need to change it.<\/p><p>For more about Responsive editing, check out our full Responsive tutorial, linked in the description below.<\/p><p>Click the Desktop viewport icon, to go back to Desktop view.<\/p><p>Next, you can adjust the columns gap, which is the amount of space between each column, by using the slider or typing the exact value. <br \/>Great, the content is all set. Click the style tab to style the text.<\/p><p>Here, you can adjust the text alignment: by default it\u2019s aligned left. You can change it to center, right, or justified alignment. It looks better already!<\/p><p>Next, we\u2019ll change the text color. Click the color swatch to choose a color. You can use the color picker, or type in a color code. Alternatively, you can select a global color.<\/p><p><br \/>You can customize the typography options, by clicking the pencil icon.<\/p><p>First, choose a font family.<\/p><p>Next, adjust the size. Then, select the weight.<\/p><p><br \/>You can also choose from several different Transform, Style, and Decoration options.<\/p><p><br \/>Next, set the line height, and last but not least, adjust the letter spacing, if desired.<\/p><p>Alternatively, you may use a previously saved global font style.<\/p><p>For more about Global Colors and Fonts, check out our dedicated video, linked in the description.<\/p><p>And that\u2019s it. We now have a two column, styled block of text. Let\u2019s preview. Looks great!<\/p><p>For our next example, on this Personal Chef landing page, we\u2019ll take a closer look at the drop cap option we saw earlier.<\/p><p>Adding a drop cap, can add a stylistic edge to text. And using it together with a different text style, can further enhance your design.<\/p><p>For this example, I\u2019ve already placed the text editor widget and content on the page and styled the text.<\/p><p>Enable the Drop Cap by toggling it on.<\/p><p>In the Style tab, you\u2019ll notice a new option for the Drop Cap styling, which was activated when we enabled the Drop Cap in Content.<\/p><p>Click to Expand it.<\/p><p>Let\u2019s take a look at the View options. <br \/>Change from default to stacked, or framed.<\/p><p>Here, you can change the primary color to better fit the design. You can also change the secondary color, depending on how you choose to showcase the drop cap. I\u2019ll leave it on the default for now.<\/p><p>Next, adjust the size&#8230;the space between the drop cap and the rest of the text&#8230;and border-radius &#8211; for rounded corners, as needed<\/p><p>Below, you can adjust the border width. I\u2019ll leave the default setting for my design. Note that the border width setting is only available in Framed view.<\/p><p>To make sure the letter matches the look and feel of the rest of our text,you can customize the typography manually, or choose a global font.<\/p><p>\u00a0<\/p><p><br \/>Now let\u2019s preview. It looks great!<\/p><p>And there you have it, now you know how to use the Text Editor widget to style text in different ways, and better engage with your visitors.<\/p><p>(So go ahead&#8230;you\u2019ve got this! Apply what you\u2019ve learned here to your website\u2019s text. We can\u2019t wait to see how you use it)<\/p><p>Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don\u2019t forget to hit the notifications bell.<\/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 explore the Text Editor widget. This widget allows you to place, edit, and style body text on your website. This tutorial will cover: \u2714\ufe0e Basic functions of the Text Editor widget \u2714\ufe0e Working with multiple columns of text \u2714\ufe0e How to style body text \u2714\ufe0e Adding and styling [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3373,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1495","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 the Text Editor Widget 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-the-text-editor-widget-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 the Text Editor Widget in Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll explore the Text Editor widget. This widget allows you to place, edit, and style body text on your website. This tutorial will cover: \u2714\ufe0e Basic functions of the Text Editor widget \u2714\ufe0e Working with multiple columns of text \u2714\ufe0e How to style body text \u2714\ufe0e Adding and styling [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:14:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T10:12:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.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=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Text Editor Widget 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-the-text-editor-widget-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Text Editor Widget in Elementor - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll explore the Text Editor widget. This widget allows you to place, edit, and style body text on your website. This tutorial will cover: \u2714\ufe0e Basic functions of the Text Editor widget \u2714\ufe0e Working with multiple columns of text \u2714\ufe0e How to style body text \u2714\ufe0e Adding and styling [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:14:04+00:00","article_modified_time":"2023-02-22T10:12:39+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Text Editor Widget in Elementor","datePublished":"2021-06-17T12:14:04+00:00","dateModified":"2023-02-22T10:12:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/"},"wordCount":1057,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/","name":"How to Use the Text Editor Widget in Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.jpg","datePublished":"2021-06-17T12:14:04+00:00","dateModified":"2023-02-22T10:12:39+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Text-Editor-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-text-editor-widget-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 the Text Editor Widget 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\/1495","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=1495"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1495\/revisions"}],"predecessor-version":[{"id":9596,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1495\/revisions\/9596"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3373"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}