{"id":26160,"date":"2021-06-28T17:00:03","date_gmt":"2021-06-28T15:00:03","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26160"},"modified":"2024-02-01T11:13:08","modified_gmt":"2024-02-01T10:13:08","slug":"how-to-highlight-text-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-text-in-wordpress\/","title":{"rendered":"How to Highlight Text in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Your visitors like your website for your content \u2013 the better your content, the greater your visitor satisfaction. If a lot of your content is textual, though, some of your visitors may feel a little put off \u2013 <strong>walls of text are notoriously unattractive<\/strong>. You can resort to adding some images, but that\u2019s just one of the tools in your toolbox.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You could also make your text a little less scary by <strong>highlighting the important bits<\/strong> and drawing your visitors\u2019 attention to a special offer, a discount, a startling datum, or whatever else. Not only that: highlighted text is easier to parse, provided that highlighting is used sparingly and correctly. Highlighting is also used in creating <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-write-scannable-blog-content\/\">scannable content<\/a>. It isn\u2019t very hard to highlight text in your content, and there are several ways to do it, although WordPress highlight text is not a default feature . Here\u2018s what we\u2018ll be showing you:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#highlight-text-with-qi-addons\">How to Highlight Text in WordPress With Qi Addons For Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#highlight-text-in-gutenberg-blocks\">How to Highlight Text in Gutenberg Blocks<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#highlight-text-using-html-tags\">How to Highlight Text Using HTML Tags<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"highlight-text-with-qi-addons\"><\/a>How to Highlight Text in WordPress With Qi Addons For Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]This solution, it should go without saying, is for Elementor users. Elementor is one of the most widely used page builders, and for good reason \u2013 it\u2018s <strong>versatile, fast, intuitive, visual and completely free,<\/strong> at least in its basic version, which is still enough to construct a website from the ground up.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using Elementor as your page editor, you are in luck: <strong>our proprietary plugin<\/strong>, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons For Elementor<\/a>, is <strong>chock-full of useful, flexible widgets<\/strong> which greatly improve Elementor\u2018s default set. Among the 60 advanced elements the plugin has to offer, you will find the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/highlighted-text\/\">highlighted text<\/a> functionality.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All you need to do is install and activate the latest Elementor (the free version will do), and then<strong> install and activate Qi Addons For Elementor<\/strong> as you would any other plugin. Qi Addons For Elementor is completely free.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Like with the other 59 widgets in the pack, you can set up your highlighted text just the way you like it within minutes, as demonstrated in our handy video tutorial:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/oWff7vXBvTo\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if you prefer it, we can take you there step by step.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Adding a section with highlighted text works just the same as adding any other Elementor widget: scroll down or start typing its name to find it and then simply drag it to the desired position from the left-hand side menu.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drag-and-Drop-Highlighted-Text.jpg\" class=\"attachment-full size-full\" alt=\"Drag and Drop Highlighted Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drag-and-Drop-Highlighted-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drag-and-Drop-Highlighted-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drag-and-Drop-Highlighted-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drag-and-Drop-Highlighted-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will find it is set up with a version of Lorem ipsum, with bits of it already highlighted. Also by default, the <strong>General<\/strong> tab should be open. There you will find the <strong>Custom Class<\/strong> field, which we do not need for this demonstration. You will also find the <strong>Text<\/strong> field, in which you need to enter the entire body of text parts of which you wish to highlight, and the <strong>Highlight Text Position<\/strong> controls, which is vital: this is where you select which words will be highlighted.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The formatting for this control is simple. If you want to <strong>highlight a single word<\/strong>, simply put its position number in. If you want a range, put in the <strong>numbers of the words separated by a dash<\/strong>. And if there is more than one place you wish highlighted, <strong>separate all these values with a comma<\/strong>, as in the placeholder example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And, of course, what you see is the default version of the colour settings. Which means we are only scratching the surface.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-General.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-General-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-General-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-General-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To show you what this widget can really do, we have replaced the placeholder text, set the range of the highlighted words as 3-7 and then switched to the <strong>Style<\/strong> tab to customize the appearance.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"587\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-768x465.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you can change the alignment of your entire body of text. We have moved it to the <strong>center<\/strong> setting.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Text Tag<\/strong> control is there if you want to change your text\u2019s status from the default <strong>P<\/strong> (for <em>paragraph<\/em>; the \u201cnormal\u201d text) to a heading, from <em>H1<\/em> to <em>H6<\/em>. We went bold with H1 here. Note that, for reasons of <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/#basic-in-built-accessibility-features\">accessibility<\/a>, this is not a size setting, though <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-change-font-size-in-wordpress\/\">changing font sizes in WordPress<\/a> is no big deal, either. The <strong>Text Color<\/strong> and <strong>Text Typography<\/strong> settings are what you need to look at if you want to change things like font <strong>Family<\/strong>, font <strong>Size<\/strong>, <strong>Weight<\/strong> (thickness or boldness), <strong>Style<\/strong> (italic or oblique) and <strong>Decoration<\/strong> (underline, strikethrough, and similar). You can also change<strong> Line Height<\/strong> and <strong>Letter Spacing<\/strong> in this section. We will leave all controls at their default values for the purposes of this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"584\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-1.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-1-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-1-768x463.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-1-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Further in the lower section of the <strong>Style<\/strong> tab, we get to the highlight styling options. You can use the <strong>Highlight Text Color<\/strong> to change the colour of highlighted text, but we will leave it as is. What we will change is the <strong>Highlight Text Background Color<\/strong> from black to the <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noopener\">hex value<\/a> of #b7d4b5 \u2013 a muted fern green. Note how the colour of the highlighted text had changed to white to make the best possible use of the contrast. You can override this with the <strong>Highlight Text Color<\/strong> control, but we will leave it as is.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-2.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-2-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-2-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-2-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The two final controls are the <strong>Highlight Top Offset<\/strong> and the <strong>Highlight Bottom Offset<\/strong>. These controls govern the position of the highlight bar in relation to the top and bottom of the line. Leaving them blank makes the widget highlight the entire height of the line. For the effect you see below, we have switched the <strong>Highlight Text Color<\/strong> control to #000000 (black), the <strong>Highlight Top Offset<\/strong> to 36 and the <strong>Highlight Bottom Offset<\/strong> to 14.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"488\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-3.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-3-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-3-768x387.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Style-Tab-3-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1148\" height=\"609\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final.jpg 1148w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final-1024x543.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final-970x515.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-Final-620x329.jpg 620w\" sizes=\"auto, (max-width: 1148px) 100vw, 1148px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This, of course, is just one of the infinite possibilities Qi Addons have when it comes to highlighting text. As we have shown, the settings are versatile enough to fit any layout or style.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"highlight-text-in-gutenberg-blocks\"><\/a>How to Highlight Text in Gutenberg Blocks<\/h2>\n<p>[\/vc_column_text][vc_column_text]Elementor not your cup of tea? No worries, you can also use WordPress\u2018s default page editor, Gutenberg, to highlight text in a paragraph block. We will begin with a post and a paragraph block with some placeholder text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Selecting the paragraph block, find the <strong>Color Settings<\/strong> in the right-hand side menu. Under <strong>Background Color<\/strong>, select a colour of your choice from the selection, or enter a <strong>Custom color<\/strong>. We will go with white.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Color-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Color Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Color-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Color-Settings-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Color-Settings-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Color-Settings-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now your entire block has a white background. Gutenberg does not currently allow highlighting specific words, though.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/White-Background.jpg\" class=\"attachment-full size-full\" alt=\"White Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/White-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/White-Background-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/White-Background-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/White-Background-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]What it does allow is changing the colour of specific words. To do that, simply select the words you would like to change the colour of, and then select <strong>Text Color<\/strong> from the paragraph\u2018s drop-down menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"460\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Text-Color-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Text-Color-768x365.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Text-Color-620x294.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then you can choose from the selection you are offered, or choose a <strong>Custom color<\/strong> from the picker. We went with a bright red.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"616\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Color.jpg\" class=\"attachment-full size-full\" alt=\"Custom Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Color-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Color-768x488.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-Color-620x394.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, there is no way to background-highlight individual words in a Gutenberg paragraph block\u2018s settings. Still, you can use paragraph blocks with different colour backgrounds for emphasising your paragraphs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"highlight-text-using-html-tags\"><\/a>How to Highlight Text Using HTML Tags<\/h2>\n<p>[\/vc_column_text][vc_column_text]Finally, there is an easy way to highlight specific words using HTML tags. The tags you need are<em> &lt;mark&gt;<\/em> tags. We will start with a plain old paragraph block. In order to insert a HTML tag, you need to edit the block as HTML. You can also use this method in the <strong>Classic<\/strong> editor, so long as you are editing in the <em>Text<\/em> view.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-as-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Edit as HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-as-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-as-HTML-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-as-HTML-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-as-HTML-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, frame the words you want to highlight with the tags: <em>&lt;mark&gt;<\/em> at the beginning, <em>&lt;\/mark&gt;<\/em> at the end of the string.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Tags.jpg\" class=\"attachment-full size-full\" alt=\"Add Tags\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Tags.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Tags-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Tags-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Tags-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The exact effect of these tags may vary depending on theme and (possibly) other settings, but most times it will look like a yellow highlight.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-HTML-Final.jpg\" class=\"attachment-full size-full\" alt=\"Highlighted Text HTML Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-HTML-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-HTML-Final-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-HTML-Final-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Highlighted-Text-HTML-Final-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, probably the quickest way you can highlight text in WordPress \u2013 though without any styling options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, there are at least three easy ways to bypass the fact that WordPress highlight text feature doesn&#8217;t exist by default. We don\u2018t have to tell you which is the one we prefer \u2013 with Qi Addons for Elementor, you get by far the most options and style settings. You can highlight text even if you don\u2018t want to use Elementor, though, or install any new software whatsoever. The choice of method is ultimately up to you. Note that there are other exciting ways to spice up your text, and they&#8217;re all conducive to better conversions. For example, you can add a stylish and elegant touch and break down your text into easily consumable parts by <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-drop-caps-in-wordpress\/\">adding drop caps<\/a> to your paragraphs. <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-text-marquee-in-wordpress\/\">A text marquee<\/a>, which adds movement to pieces of text, is also great for creating a dynamic, modern vibe. With tools like these, there&#8217;s no reason for your textual content to be bland and static.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Make your posts more easily legible and scannable! Check out our handy tutorial on how to highlight text in WordPress.<\/p>\n","protected":false},"author":16990,"featured_media":26500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,114,4,13],"class_list":["post-26160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26160"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26500"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}