{"id":5729,"date":"2017-10-15T12:35:45","date_gmt":"2017-10-15T12:35:45","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=5729"},"modified":"2017-10-15T12:35:45","modified_gmt":"2017-10-15T12:35:45","slug":"blog-post-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/blog-post-design\/","title":{"rendered":"10+ Ways To Beautify Your Blog Post Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5729\" class=\"elementor elementor-5729\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-uptdppo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"uptdppo\" 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-azejvud\" data-id=\"azejvud\" 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-k5ix8bf elementor-widget elementor-widget-text-editor\" data-id=\"k5ix8bf\" 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>Your blog post design says a lot about your brand, and can have a crucial impact on your readers. In this article, we&#8217;ll give you <a href=\"https:\/\/elementor.com\/blog\/web-design-ideas\/\">inspirational ideas<\/a> to <a href=\"https:\/\/elementor.com\/widgets\/single-post-widgets\/\">improve the look and feel of your WordPress blog posts<\/a>.<\/p>\n<p>As such, incorporating unique and compelling design elements into your blog is a must. However, you may find inspiration hard to come by, and the task may seem overwhelming if you aren&#8217;t a design professional.<\/p>\n<p>Fortunately, high-performing blogs are a great source of inspiration when you&#8217;re looking for design ideas. In addition, you don&#8217;t have to be a design professional to replicate and incorporate these elements into your own blog. Instead, you can use<a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener\">&nbsp;<\/a>Elementor&nbsp;to make your job quick and easy.<\/p>\n<p>In this post, we&#8217;ll highlight 12 top blog designs found on high-performing blogs. Then we\u2019ll show you how to apply each design secret to your blog using our <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/products\/page-builder-plugin\/\"   title=\"Page Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2148\">Page Builder<\/a>. Let&#8217;s get started!<\/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-ym3wv9j elementor-widget elementor-widget-heading\" data-id=\"ym3wv9j\" 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\">\n1.\u00a0InVision\u00a0(Drop Caps)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3290429 elementor-widget elementor-widget-image\" data-id=\"3290429\" 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\/011-r4q72b03ac623t7aqwedgodo3orqf5h37gth8rb83i.png\" title=\"011\" alt=\"011\" 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-o4h71dq elementor-widget elementor-widget-text-editor\" data-id=\"o4h71dq\" 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><a href=\"https:\/\/www.invisionapp.com\/blog\/prototyping-in-sketch\/\" target=\"_blank\" rel=\"noopener\">InVision<\/a>\u00a0is a top collaboration and workflow platform, and as such, they take their blog&#8217;s design very seriously. On the whole, this a very clean blog, with ample use of negative space, tasteful animations (such as the use of a parallax header), and readable, well-set <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5228\">typography<\/a>.<\/p><p>We particularly like the use of drop caps in the introduction of their posts. This is a great way to call attention to the content, and the effect is very easy to replicate using Elementor.<\/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-sq86zsl elementor-widget elementor-widget-heading\" data-id=\"sq86zsl\" 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\">\nHow to Achieve Drop Caps in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61ea322 elementor-widget elementor-widget-image\" data-id=\"61ea322\" 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\/drop-cap-r4q77tc1cdpk5j77ks4nksbxfzm6jacgaqgxi554ci.png\" title=\"drop-cap\" alt=\"drop-cap\" 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-mx56hbb elementor-widget elementor-widget-text-editor\" data-id=\"mx56hbb\" 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>Head to\u00a0Elementor<em>.\u00a0<\/em>From here, add a new section, then \u00a0drag and drop the<a href=\"\/help\/text-editor-widget\/\" target=\"_blank\" rel=\"noopener\">\u00a0<\/a><em><a href=\"\/help\/text-editor-widget\/\" target=\"_blank\" rel=\"noopener\">Text Editor<\/a><\/em>\u00a0widget. Finally, add the text you\u2019d like into the editor and it should appear on the main screen.<\/p><p>To add drop caps, scroll down past the <em>Text Editor<\/em>\u00a0on the left side menu. You\u2019ll see a <em>Drop Cap <\/em>option \u2013 simply turn the feature <em>On<\/em>\u00a0, and you\u2019re all set!<\/p><p>Elementor lets you design and customize the Drop Cap with a wide array of design possibilities:<\/p><p>Choose the view to be either &#8216;stacked&#8217; to &#8216;framed&#8217;<\/p><p>Change the primary and secondary color, Space between drop cap and paragraph, change the size of the frame and its border radius and change the drop cap typography.<\/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-rzy897c elementor-widget elementor-widget-text-editor\" data-id=\"rzy897c\" 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>Follow these steps:<\/strong><\/p><ul><li>Add Text Widget<\/li><li>Switch on Drop Cap<\/li><li>Customize the Drop Cap style<\/li><\/ul>\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-gro437d elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"gro437d\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-72cqrd1 elementor-widget elementor-widget-heading\" data-id=\"72cqrd1\" 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\">2. Lifehacker (Colored Borders)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de01f31 elementor-widget elementor-widget-image\" data-id=\"de01f31\" 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\/16-r4q78pajsqxb49wse5xyxk9ln38nszvbr4nftjtrr2.png\" title=\"16\" alt=\"16\" 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-llercni elementor-widget elementor-widget-text-editor\" data-id=\"llercni\" 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><a href=\"http:\/\/lifehacker.com\/don-t-plant-those-bee-friendly-wildflowers-cheerios-i-1793370883\" target=\"_blank\" rel=\"noopener\">Lifehacker<\/a>\u00a0is a lifestyle and productivity blog with a strong following. Using a simple design incorporating lots of white space with a classic sans-serif\/serif font combination, the blog has a content-focused feel. In short, Lifehacker knows how to keep readers engaged and coming back for more.<\/p><p>One method that Lifehacker uses to break up and offer focus to their content is with the use of colored left borders for certain elements. These provide emphasis, and are great to use for quotes or particularly important aspects of your content.<\/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-3y5jn89 elementor-widget elementor-widget-heading\" data-id=\"3y5jn89\" 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 Add Singular Colored Borders in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e454d0 elementor-widget elementor-widget-image\" data-id=\"9e454d0\" 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\/Screen-Shot-2017-10-15-at-12.51.29-PM-r4q705xbpx8jnsb98z2ys7tve3bmvyz3kvbnw2hhkg.png\" title=\"Focal Point\" alt=\"Focal Point\" 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-70eh9ed elementor-widget elementor-widget-text-editor\" data-id=\"70eh9ed\" 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>Elementor enables you to create this effect using the Blockquote widget. This means you can implement it on your own site within a matter of\u00a0seconds.<\/p><p>From the <em>editor<\/em>, drag-and-drop the <em>Blockquote <\/em>widget. Add the text you\u2019d like to display, and choose the border skin, then customize the border color and width.<\/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-ur144xc elementor-widget elementor-widget-text-editor\" data-id=\"ur144xc\" 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>Follow these steps:<\/strong><\/p><ul><li>Add Blockquote Widget<\/li><li>Paste the content<\/li><li>Choose the border skin<\/li><li>Customize the border style<\/li><\/ul>\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-xyknupx elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"xyknupx\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-ax02ctk elementor-widget elementor-widget-heading\" data-id=\"ax02ctk\" 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\">3. Sumo (Image Shadows)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb216f5 elementor-widget elementor-widget-image\" data-id=\"eb216f5\" 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\/Screen-Shot-2017-10-15-at-11.49.33-AM-r4q6z75ap1wxq7prw21rpylteu31z651436p4tx2h0.png\" title=\"Layout design WordPress\" alt=\"Layout design WordPress\" 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-7wvt9eq elementor-widget elementor-widget-text-editor\" data-id=\"7wvt9eq\" 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>As experts in the email marketing niche,<a href=\"https:\/\/sumo.com\/stories\/conversion-rate-optimization\" target=\"_blank\" rel=\"noopener\">\u00a0<\/a><u><a href=\"https:\/\/sumo.com\/stories\/conversion-rate-optimization\" target=\"_blank\" rel=\"noopener\">Sumo<\/a><\/u>\u00a0is a blog with a strong understanding of content, design, and how to combine the two for best results. Their blog uses quite a narrow margin, with larger than usual text that looks to engage the reader.<\/p><p>Without any stylized depth, the blog could look pretty flat. Image shadows, while they may seem unnecessary, are the answer, and Sumo applies them to all images. This helps to further break up the content, and adds a professional touch to any blog or website.<\/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-04h2332 elementor-widget elementor-widget-heading\" data-id=\"04h2332\" 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 Achieve Image Shadows in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-228238c elementor-widget elementor-widget-image\" data-id=\"228238c\" 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\/Screen-Shot-2017-10-15-at-12.49.36-PM-r4q6zjd75wdnx580wpbx4dit4uetr8hjhro0dfexzi.png\" title=\"The editor &#8211; with Space\" alt=\"The editor - with Space\" 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-3k8re8i elementor-widget elementor-widget-text-editor\" data-id=\"3k8re8i\" 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>To add this element, simply drag and drop the <em>Image <\/em>widget from the <em>Elements <\/em>menu into a new section of your page. Next, select the image you\u2019d like to use, then adjust as you need. In our example, we\u2019ve centered the image and made it full size:<\/p><p>To add the shadow, head to <em>Style <\/em>&gt; <em>Box Shadow<\/em>\u00a0and enable the setting. From here, you can adjust how the shadow appears by changing the various options (such as <em>Color<\/em>\u00a0, <em>Blur<\/em>\u00a0, and <em>Spread<\/em>\u00a0).<\/p><p>While <em>Color<\/em>\u00a0and <em>Blur<\/em>\u00a0are pretty self-explanatory, <em>Spread<\/em>\u00a0is similar to a border, in that the value shows how far the shadow will extend on all sides of the image. Increase the value for an increased reach, or decrease for the opposite effect.<\/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-leuowy8 elementor-widget elementor-widget-text-editor\" data-id=\"leuowy8\" 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>Follow these steps:<\/strong><\/p><ul><li>Add Image widget<\/li><li>Set Box Shadow<\/li><li>Customize the different shadow settings<\/li><\/ul>\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-pcww03m elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"pcww03m\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-t69y5s1 elementor-widget elementor-widget-heading\" data-id=\"t69y5s1\" 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\">4.\u00a0Gawker\u00a0(BlockQuotes)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa84ec0 elementor-widget elementor-widget-image\" data-id=\"fa84ec0\" 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\/12-r4q6zwixtkvofoowrv0p3a79g8lyqzxs7kst3avggm.png\" title=\"12\" alt=\"12\" 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-f69zlho elementor-widget elementor-widget-text-editor\" data-id=\"f69zlho\" 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><a href=\"http:\/\/gawker.com\/how-things-work-1785604699\" target=\"_blank\" rel=\"noopener\">Gawker<\/a>\u00a0was a highly-active media blog network that shut down officially in August of 2016. However, there\u2019s still much we can learn from the website\u2019s design, such as its monochrome <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"   title=\"color scheme\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5618\">color scheme<\/a> (which puts the content front and center), and the way quotes are displayed.<\/p><p>This is a great feature for quote-heavy blogs (such as news and politics blogs), though it can be used on just about any website to add emphasis to particular sections of content.<\/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-o90ojdp elementor-widget elementor-widget-heading\" data-id=\"o90ojdp\" 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 Display Quotes in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b747aa elementor-widget elementor-widget-image\" data-id=\"1b747aa\" 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\/Screen-Shot-2017-10-15-at-1.11.25-PM-r4q73qp7q84tud47d0qurtc0rvox6i6bqkp6mz6jlq.png\" title=\"Proper spacing\" alt=\"Proper spacing\" 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-v0za0qg elementor-widget elementor-widget-text-editor\" data-id=\"v0za0qg\" 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>To achieve this within Elementor \u2013 albeit with a little extra \u2018oomph\u2019 than the original \u2013 first drag and drop a <em>Blockquote <\/em>widget onto your page and add the text as you\u2019d like it to appear. You can adjust the text as you\u2019d like \u2013 including the size, color, and font style.<\/p><p>Here are some of the settings we used to reach this look:<\/p><p>With regards to the Content tab, the Skin we chose is Quotation, alignment is to the center. For the tweet button view is icon and skin is bubble.<\/p><p>With regards to the Style tab, the font is Playfair Display for the quote, and Helvetica for the author. The quotation icon color is #004fce.<\/p><p>For the box, go to the Style tab, under box, choose color #ffedf6, add radios and box padding.\u00a0<\/p><p>Feel free to play with the values until you\u2019ve achieved the look you\u2019re going for.<\/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-iuspmrl elementor-widget elementor-widget-text-editor\" data-id=\"iuspmrl\" 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>Follow these steps:<\/strong><\/p><ul><li>Add the Blockquote widget<\/li><li>Paste the text for the quote and author<\/li><li>Customized box color, padding and radios<\/li><\/ul>\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-hljilg9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"hljilg9\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-eotkj53 elementor-widget elementor-widget-heading\" data-id=\"eotkj53\" 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\">5.\u00a0Huffington Post\u00a0(Start Text)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a0b3b6 elementor-widget elementor-widget-image\" data-id=\"5a0b3b6\" 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\/image1-1-r4q6x14oxsy4ykv3jmbqh0ak3url8ajb5d1eav4qdm.png\" title=\"image1\" alt=\"image1\" 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-q7g8ny8 elementor-widget elementor-widget-text-editor\" data-id=\"q7g8ny8\" 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<a href=\"http:\/\/www.huffingtonpost.com\/entry\/donald-trump-jr-jay-sekulow_us_596b7f54e4b03389bb180a78?i8t&amp;ncid=inblnkushpmg00000009\" target=\"_blank\" rel=\"noopener\">\u00a0<\/a><a href=\"http:\/\/www.huffingtonpost.com\/entry\/donald-trump-jr-jay-sekulow_us_596b7f54e4b03389bb180a78?i8t&amp;ncid=inblnkushpmg00000009\" target=\"_blank\" rel=\"noopener\">Huffington Post<\/a>\u00a0is a popular journalism site and, as such, its design elements are focused largely on delivering top-notch content. Unlike other blogs in this list, the Huffington Post uses a two-column layout, and packs a lot of content into them including ads, trending posts, and more. However, while the site is busy, it\u2019s no less compelling to read.<\/p><p>One aspect that the site\u2019s headlines gave us inspiration for was \u2018start text\u2019 \u2013 essentially a large opening line offering similar benefits to drop caps.<\/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-byq5b0i elementor-widget elementor-widget-heading\" data-id=\"byq5b0i\" 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 Achieve Start Text in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ace4782 elementor-widget elementor-widget-image\" data-id=\"ace4782\" 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\/Screen-Shot-2017-10-15-at-1.38.47-PM-r4q706v5wr9tze9w3hhlcplbzh703o2twzz5dcg26c.png\" title=\"Screen Shot 2017-10-15 at 1.38.47 PM\" alt=\"Screen Shot 2017-10-15 at 1.38.47 PM\" 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-8fku4dn elementor-widget elementor-widget-text-editor\" data-id=\"8fku4dn\" 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>To begin, add a Heading widget below your main heading. Paste the text for the sub-heading, and start designing the typography.<\/p><p>Color is #000 (black), Helvetica font, font weight 300, and under advanced set padding to 0.<\/p><p>That&#8217;s it! Very simple to add, and makes it much easier for your reader to understand what your post is about.<\/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-wbhyhdp elementor-widget elementor-widget-text-editor\" data-id=\"wbhyhdp\" 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>Follow these steps:<\/strong><\/p><ul><li>Drag a heading widget<\/li><li>Paste the text<\/li><li>Set the typography<\/li><\/ul>\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-piqh69j elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"piqh69j\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-ilo2jtb elementor-widget elementor-widget-heading\" data-id=\"ilo2jtb\" 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\">6.\u00a0Backlinko\u00a0(Sub-Headlines)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d336c8 elementor-widget elementor-widget-image\" data-id=\"9d336c8\" 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\/Screen-Shot-2017-10-15-at-1.40.22-PM-r4q781sl1w1520ux7dsap872sgghgka1bwcatmsluk.png\" title=\"Screen Shot 2017-10-15 at 1.40.22 PM\" alt=\"Screen Shot 2017-10-15 at 1.40.22 PM\" 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-3ri96w8 elementor-widget elementor-widget-text-editor\" data-id=\"3ri96w8\" 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><a href=\"http:\/\/backlinko.com\/seo-copywriting\" target=\"_blank\" rel=\"noopener\">Backlinko<\/a>\u00a0is a traffic-building blog with a focus on driving and engaging the traffic you receive to your website. Like the Huffington Post, this two-column blog is busy, but not at the expense of readability. The color scheme is also bright and inviting, which matches the conversational tone of its content.<\/p><p>This brings us to the design element that stood out to us: sub-headings. These are a much darker color than everything else on the blog, and their contrasting nature means they\u2019re engaging and captivating.<\/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-fcjg0f4 elementor-widget elementor-widget-heading\" data-id=\"fcjg0f4\" 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 Display Sub-Headlines in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d965e45 elementor-widget elementor-widget-image\" data-id=\"d965e45\" 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\/Screen-Shot-2017-10-15-at-1.50.28-PM-r4q6zun9fwt3sgrn2u7fyaoc9gv8blqbjbhu4qy6i0.png\" title=\"Screen Shot 2017-10-15 at 1.50.28 PM\" alt=\"Screen Shot 2017-10-15 at 1.50.28 PM\" 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-0d535ai elementor-widget elementor-widget-text-editor\" data-id=\"0d535ai\" 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>Most articles have at least a couple of sub-headings, meaning you are most likely going to use this option a lot. This kind of sub-headline is great for step-by-step tutorial posts, because each step is clearly separated and it makes it easier for the visitor to follow along.<\/p><p>First, drag the Heading widget. Paste the text, center it using the alignment option. Then, go to the style tab, and set the color, font and other typography settings for the text. Now go to the advanced tab, and set the background color to #EC4950. Add top and bottom padding of 50.<\/p><p>I recommend you save this widget as a global widget, so next time you want to use it from the current post or from any other post you will create, it will be available with a simple drag and drop from the global tab in the widgets list panel. This step is relevant for all the blog effects listed in this article, but especially to background sub-headlines, since they are so frequently used.<\/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-mpqq1uc elementor-widget elementor-widget-text-editor\" data-id=\"mpqq1uc\" 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>Follow these steps:<\/strong><\/p><ul><li>Drag a heading widget<\/li><li>Paste the text<\/li><li>Center the text alignment<\/li><li>Set the background color<\/li><li>Optional step: save it as a global widget<\/li><\/ul>\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-krmch6n elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"krmch6n\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-9mvqai3 elementor-widget elementor-widget-heading\" data-id=\"9mvqai3\" 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\">7.\u00a0The Outline (Post Title With Background Image)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5ef85b elementor-widget elementor-widget-image\" data-id=\"f5ef85b\" 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\/outline-1-r4q7286kpu274zbe7d6hr73abj5ms25w72v0sxfe08.png\" title=\"outline\" alt=\"outline\" 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-01k96au elementor-widget elementor-widget-text-editor\" data-id=\"01k96au\" 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><a href=\"https:\/\/theoutline.com\" target=\"_blank\" rel=\"noopener\">The Outline<\/a>\u00a0is a New York based digital media company with a rather unusual yet captivating blog. It features in depth article on a variety of subject, with the main focus on power, culture and the future.<\/p><p>While a catchy headline is an absolute must, sometimes that alone is not enough to hook readers. With a background image included in the post title, you can potentially offer a richer experience to the reader.<\/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-ep9qs87 elementor-widget elementor-widget-heading\" data-id=\"ep9qs87\" 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 Display a Post Title With a Background Image in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ee5a59 elementor-widget elementor-widget-image\" data-id=\"2ee5a59\" 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\/Screen-Shot-2017-10-15-at-2.28.34-PM-r4q76atebzmxg5eef4kak636zn2w4uc0r8mro3dyfc.png\" title=\"Screen Shot 2017-10-15 at 2.28.34 PM\" alt=\"Screen Shot 2017-10-15 at 2.28.34 PM\" 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-kuro9n5 elementor-widget elementor-widget-text-editor\" data-id=\"kuro9n5\" 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>Before we add in the background image, let\u2019s firstly get the <em>Heading <\/em>and <em>Text Editor<\/em>\u00a0widgets situated. Add a new section to the page, then add in three widgets (<em>\u00a0Heading<\/em>\u00a0, <em>Text Editor<\/em>\u00a0, and <em>Text Editor<\/em>\u00a0) stacked on top of each other:<\/p><p>To add a background color, click <em>Edit Section<\/em>\u00a0(as you did for sub-headlines) and <em>Style<\/em>\u00a0. Here, you can edit the layout of the background, including its color, image (which we\u2019ll get to later), border, and more.<\/p><p>You can customize each of these widgets (and the layout) as you\u2019d like. To add a top border, go back to the <em>Layout<\/em>\u00a0settings, then to <em>Style<\/em>\u00a0&gt; <em>Border<\/em>\u00a0and unlink the values. Choose the type of border you would like (<em>\u00a0Solid<\/em>\u00a0, <em>Dotted<\/em>\u00a0, <em>Double<\/em>\u00a0, or <em>Dashed<\/em>\u00a0) and increase the value for <em>TOP<\/em>\u00a0until it\u2019s to your liking. Additionally, you can select the color below the values:<\/p><p>Next up, adding the background image is simple. Head back to <em>Layout <\/em>and go to the <em>Style <\/em>tab. Scroll down to <em>Background Overlay<\/em>\u00a0and select the paintbrush. You can add an image by clicking the plus under <em>Image<\/em>\u00a0, then either insert one your WordPress library, or upload one from your computer.<\/p><p>You now have a number of options, including <em>Position<\/em>\u00a0, <em>Repeat,<\/em>\u00a0<em>Size<\/em>\u00a0, and <em>Opacity<\/em>\u00a0. Play with these options until you\u2019ve achieved the look you\u2019d like.<\/p><p>To get blog details such as the date and author, use the plugin <a href=\"https:\/\/wordpress.org\/plugins\/press-elements\/\" target=\"_blank\" rel=\"noopener\">Press Elements<\/a>\u00a0to draw these attributes into Elementor.<\/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-qdhxn8g elementor-widget elementor-widget-text-editor\" data-id=\"qdhxn8g\" 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>Follow these steps:<\/strong><\/p><ul><li>Set a background image for the section<\/li><li>Add an image overlay<\/li><li>Drag in the title and other elements.<\/li><\/ul>\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-sf7rbzc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"sf7rbzc\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-am4f3l2 elementor-widget elementor-widget-heading\" data-id=\"am4f3l2\" 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\">8.\u00a0Search Engine Land\u00a0(Subscribe Forms)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45b5c14 elementor-widget elementor-widget-image\" data-id=\"45b5c14\" 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\/image11-r4q78q8dzkylfvvf8ocli2128h410oz239axatsc7o.jpg\" title=\"image11\" alt=\"image11\" 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-lfvy57w elementor-widget elementor-widget-text-editor\" data-id=\"lfvy57w\" 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>A leading blog in the Search Engine Optimization (SEO) industry,<a href=\"http:\/\/searchengineland.com\/google-image-search-adds-badges-recipes-videos-products-animated-images-280017\" target=\"_blank\" rel=\"noopener\">\u00a0<\/a><a href=\"http:\/\/searchengineland.com\/google-image-search-adds-badges-recipes-videos-products-animated-images-280017\" target=\"_blank\" rel=\"noopener\">Search Engine Land<\/a>\u00a0has a number of unique design elements incorporated throughout. The two-column layout is arguably the most packed in this entire list, and the design does well to still focus on the content. However, we were drawn to the subscribe form often featured at the top of posts.<\/p><p>To be optimally effective, subscribe forms should be as eye-catching as possible. Fortunately, Elementor enables you to create forms like Search Engine Land\u2019s for your site. Here\u2019s how!<\/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-w2hrvk0 elementor-widget elementor-widget-heading\" data-id=\"w2hrvk0\" 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\">\nHow to Add Subscribe Forms in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04b5a8c elementor-widget elementor-widget-image\" data-id=\"04b5a8c\" 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\/Screen-Shot-2017-10-15-at-2.36.47-PM-r4q6xeaflhg5h4bzes0ifwz0f8yq81zjv6670ql6r6.png\" title=\"Screen Shot 2017-10-15 at 2.36.47 PM\" alt=\"Screen Shot 2017-10-15 at 2.36.47 PM\" 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-bhebq09 elementor-widget elementor-widget-text-editor\" data-id=\"bhebq09\" 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>To start, add two widgets to a new section of your page. The top widget should be <em>Heading<\/em>\u00a0, while the bottom should be <em>Text Editor<\/em>\u00a0. Add your text, and customize each to your own requirements.<\/p><p>Next, the most important element of the subscription form can be added with an upgrade to Elementor Pro: the <em>Form <\/em>widget.<\/p><p>To add this, drag and drop the widget to the section, alter the input fields and button text, then style them as appropriate. In our example, you&#8217;ll also notice there&#8217;s no gap between the two elements (the input box and form button). To achieve this look, simply go to <em>Style <\/em>&gt; <em>Form<\/em>\u00a0&gt; <em>Column Gap <\/em>and set the value to <em>0<\/em>\u00a0.<\/p><p>To add in a background image, go to <em>Edit Section<\/em>\u00a0&gt; <em>Style<\/em>\u00a0&gt; <em>Background<\/em>\u00a0. You can then add the image of your choosing, or even select a background color or gradient.<\/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-r6txa54 elementor-widget elementor-widget-text-editor\" data-id=\"r6txa54\" 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>Follow these steps:<\/strong><\/p><ul><li>Drag 2 heading widgets, along with the form widget<\/li><li>Remove all form fields except the email field.<\/li><li>Set the field and button column width so they appear in one line<\/li><li>Under Style, set the gap to 0<\/li><li>Set the field top and left border radius<\/li><li>Set the button bottom and right border radius<\/li><\/ul>\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-zwncjxx elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"zwncjxx\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-apd0hyx elementor-widget elementor-widget-heading\" data-id=\"apd0hyx\" 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\">9.\u00a0Neil Patel\u00a0(Call To Action - CTA Box)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0656886 elementor-widget elementor-widget-image\" data-id=\"0656886\" 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\/image9-1-r4q74g2uur3kju3c8tps54xgta7tybz2u2balg4xai.png\" title=\"image9\" alt=\"image9\" 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-uwf0qc8 elementor-widget elementor-widget-text-editor\" data-id=\"uwf0qc8\" 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><a href=\"http:\/\/neilpatel.com\/blog\/google-analytics-reports\/\" target=\"_blank\" rel=\"noopener\">Neil Patel<\/a>\u00a0is well-known for his long-form content and pithy copy. However, he\u2019s also uses a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6794\">bold<\/a> yet sparse design for his website, that matches his writing tone.<\/p><p>A Call To Action (CTA) is one of the most important additions to any website, due to their requirement of compelling the user to take action. They&#8217;re also incredibly versatile. Of course, the more eye-catching the design, the better conversions you&#8217;ll see.<\/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-ckmiqna elementor-widget elementor-widget-heading\" data-id=\"ckmiqna\" 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\">\nHow to Create a Call To Action Box in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a14614 elementor-widget elementor-widget-image\" data-id=\"4a14614\" 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\/Screen-Shot-2017-10-15-at-2.46.57-PM-r4q71v0u25k6mfuic7hpsaeu04yhsapnh9q831ywam.png\" title=\"Screen Shot 2017-10-15 at 2.46.57 PM\" alt=\"Screen Shot 2017-10-15 at 2.46.57 PM\" 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-akca93w elementor-widget elementor-widget-text-editor\" data-id=\"akca93w\" 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>Including the layout (which you learned how to style in previous sections), there are a total of five elements within this design. Our example is split into two even sections side by side, and this enables some further customization.<\/p><p>First up is the image to the left. This particular selection blends well into the background and adds a seamless flow to the design. This can be done by using a PNG image, a file type that incorporates transparency into the background.<\/p><p>Next is the right side of the design consisting of the <em>Heading<\/em>\u00a0, <em>Text Editor<\/em>\u00a0, and <em>Button <\/em>widgets. To add these widgets together seamlessly, simply drag and drop each widget \u2013 one by one \u2013 into the section. They will automatically stack to fit inside the section, and this makes it easy to keep the design looking flawless.<\/p><p>The <em>Heading<\/em>\u00a0widget is designed just as the others we\u2019ve featured: This one is set to <em>H2<\/em>\u00a0, aligned to the left, and set to a font weight of 900. Finally, the <em>Button <\/em>widget is simple to setup and customize. As with the other widgets, the button can be customized to align with your blog.<\/p><p>Here, you can edit the text, size, and alignment (within the <em>Content <\/em>tab), customize the shape, background, and text color (within the <em>Style <\/em>tab), and add a border or padding (within the <em>Advanced<\/em>\u00a0tab).<\/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-zhagm4k elementor-widget elementor-widget-text-editor\" data-id=\"zhagm4k\" 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>Follow these steps:<\/strong><\/p><ul><li>Set a two columns section<\/li><li>Add the image to the left column<\/li><li>Add two heading widgets and a button to the right column<\/li><li>Set a gradient background and turn it into the split screen (You&#8217;ll find a video tutorial for this <a href=\"https:\/\/www.youtube.com\/watch?v=4vw5nPj38-8\" target=\"_blank\" rel=\"noopener\">here<\/a>)<\/li><li>Customize the colors, spacing and typography of headings and button<\/li><\/ul>\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-9g99nme elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9g99nme\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-1pejcxs elementor-widget elementor-widget-heading\" data-id=\"1pejcxs\" 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\">10.\u00a0Elementor (Dividers)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d60889 elementor-widget elementor-widget-image\" data-id=\"6d60889\" 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\/Screen-Shot-2017-10-15-at-2.55.50-PM-r4q72b03ac623t7aqwedgodo3orqf5h37gth8rb6vw.png\" title=\"Screen Shot 2017-10-15 at 2.55.50 PM\" alt=\"Screen Shot 2017-10-15 at 2.55.50 PM\" 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-q7hpc01 elementor-widget elementor-widget-text-editor\" data-id=\"q7hpc01\" 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>Here is another example that is taken from our own blog posts. Sometimes, when you create long form content, you need to separate between the different paragraphs. Titles and spacing are a good way to do that, but sometimes they are not enough. By using the Divider widget you can create a subtle separation between paragraphs, making it easier for the readers to understand where one part of the article ends, and another one begins.<\/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-zn5gpxu elementor-widget elementor-widget-heading\" data-id=\"zn5gpxu\" 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 Display Dividers in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5bf12a4 elementor-widget elementor-widget-image\" data-id=\"5bf12a4\" 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\/Screen-Shot-2017-10-15-at-2.58.36-PM-r4q7025yyl3edcgpuxggi8s10ju616k68cppyyn1oi.png\" title=\"Screen Shot 2017-10-15 at 2.58.36 PM\" alt=\"Screen Shot 2017-10-15 at 2.58.36 PM\" 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-xr8agxt elementor-widget elementor-widget-text-editor\" data-id=\"xr8agxt\" 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>To add a divider to your page or post, drag and drop the <em>Divider <\/em>widget into the area of your choosing. The default is a dark, solid line with a 100% width (this means it stretches the length of the content area), and there are four different styles to choose from, including <em>Solid<\/em>\u00a0, <em>Double<\/em>\u00a0, <em>Dotted<\/em>\u00a0, and <em>Dashed<\/em>.<\/p><p>Our example uses a dashed style with a weight of <em>9<\/em>\u00a0. However, you can experiment with the styles, divider color, gap (between dots and dashes), width, and weight.<\/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-51vv12t elementor-widget elementor-widget-text-editor\" data-id=\"51vv12t\" 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>Follow these steps:<\/strong><\/p><ul><li>Drag the Divider widget<\/li><li>Set it to dotted<\/li><\/ul>\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-xe2p3cv elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"xe2p3cv\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-7aebkdr elementor-widget elementor-widget-heading\" data-id=\"7aebkdr\" 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\">11.\u00a0Smart Passive Income\u00a0(Related Posts)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc81a3a elementor-widget elementor-widget-image\" data-id=\"bc81a3a\" 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\/image2-2-r4q71hv3eh263wdmh1sxtdqdoqrcsj9erglfd6ietm.png\" title=\"image2\" alt=\"image2\" 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-ovrzb6q elementor-widget elementor-widget-text-editor\" data-id=\"ovrzb6q\" 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><a href=\"https:\/\/www.smartpassiveincome.com\/podcasts\/starting-a-podcast\/\" target=\"_blank\" rel=\"noopener\">Smart Passive Income<\/a>\u00a0is a wildly successful blog run by entrepreneur Pat Flynn. The website columns are very wide, which serves to spread its busy layout, and also means that design elements such as a Related Posts section have enough room to maneuver.<\/p><p>This is arguably the most complicated design on our list, but even so it should only take you a few minutes to put together using Elementor.<\/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-f55t6an elementor-widget elementor-widget-heading\" data-id=\"f55t6an\" 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 Display Related Posts in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2dc82b6 elementor-widget elementor-widget-image\" data-id=\"2dc82b6\" 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\/Screen-Shot-2017-10-15-at-3.05.01-PM-r4q74rcx4rj0f5myeylaz22zxwo8ip7uvm54cro71g.png\" title=\"Screen Shot 2017-10-15 at 3.05.01 PM\" alt=\"Screen Shot 2017-10-15 at 3.05.01 PM\" 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-lhezwrc elementor-widget elementor-widget-text-editor\" data-id=\"lhezwrc\" 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>Within the <em><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-wordpress-page-builder\/\"   title=\"Page Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6688\">Page Builder<\/a><\/em>\u00a0, add a section and edit the layout. We used a background color and border in our design, but you can mix it up however you&#8217;d like. Next, add two <em>Heading <\/em>widgets, one on top of the other.<\/p><p>The last element to add is the<a href=\"\/help\/posts-widget-pro\/\" target=\"_blank\" rel=\"noopener\">\u00a0<\/a><em><a href=\"\/help\/posts-widget-pro\/\" target=\"_blank\" rel=\"noopener\">Posts<\/a><a href=\"\/help\/posts-widget-pro\/\" target=\"_blank\" rel=\"noopener\">\u00a0widget<\/a><\/em>\u00a0, an Elementor Pro feature with a variety of uses. To incorporate this into the section, add a new area to the section, then drag and drop the <em>Posts <\/em>widget into place. The default setting includes three columns and six posts in total, though you can change both settings to your liking.<\/p><p>In addition, the <em>Posts <\/em>widget will show the title, the publishing date, and excerpt for each post. However, you can easily change how this displays from <em>Content <\/em>&gt; <em>Layout<\/em>\u00a0. For example, the above image only shows the post image and title, and this works great for this specific design element.<\/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-ljsw95m elementor-widget elementor-widget-text-editor\" data-id=\"ljsw95m\" 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>Follow these steps:<\/strong><\/p><ul><li>Drag the Posts widget<\/li><li>Under Query set Order By &gt; Random<\/li><li>Add a heading with &#8216;Read More&#8217; call to action text<\/li><\/ul>\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-1wzca7b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"1wzca7b\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\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-jfocoxc elementor-widget elementor-widget-heading\" data-id=\"jfocoxc\" 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\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-kykptnn elementor-widget elementor-widget-text-editor\" data-id=\"kykptnn\" 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>Content plays a critical role in the success of your blog. However, <em>how <\/em>you display your content can be just as important as what it says. With this in mind, it&#8217;s easy to see why incorporating unique and engaging designs into your blog is essential.<\/p><p>In this post, we&#8217;ve introduced you to 11 design elements featured on high-performing blogs. We\u2019ve also shown you how to implement each design trick into your own blog with the help of\u00a0Elementor\u00a0and its many features \u2013 including 28 (and counting!) widgets and over 100 pre-designed templates.<\/p><p><strong>Do you have any questions about the design process or how the Elementor Page Builder can help? Let us know in the comments section below!<\/strong><\/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>Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog posts prettier.<\/p>\n","protected":false},"author":1392962,"featured_media":6076,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17,32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-5729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>10+ Ways To Beautify Your Blog Post Design<\/title>\n<meta name=\"description\" content=\"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.\" \/>\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\/blog-post-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10+ Ways To Beautify Your Blog Post Design\" \/>\n<meta property=\"og:description\" content=\"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/blog-post-design\/\" \/>\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=\"2017-10-15T12:35:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/09\/10ways3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Wil Brown\" \/>\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=\"Wil Brown\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/\"},\"author\":{\"name\":\"Wil Brown\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#\\\/schema\\\/person\\\/f9c4cda317418b918986086735252a4b\"},\"headline\":\"10+ Ways To Beautify Your Blog Post Design\",\"datePublished\":\"2017-10-15T12:35:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/\"},\"wordCount\":3107,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/10ways3.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/\",\"name\":\"10+ Ways To Beautify Your Blog Post Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/10ways3.png\",\"datePublished\":\"2017-10-15T12:35:45+00:00\",\"description\":\"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/10ways3.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/10ways3.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/blog-post-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inspiration\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/category\\\/inspiration\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10+ Ways To Beautify Your Blog Post Design\"}]},{\"@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\\\/f9c4cda317418b918986086735252a4b\",\"name\":\"Wil Brown\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g\",\"caption\":\"Wil Brown\"},\"description\":\"Wil is a dad, WordPress consultant, and business coach living in Sydney, Australia. When he's not organizing meetups and conferences he enjoys chilies, craft beer, and learning to play the harmonica.\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/wil-brown\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10+ Ways To Beautify Your Blog Post Design","description":"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.","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\/blog-post-design\/","og_locale":"en_US","og_type":"article","og_title":"10+ Ways To Beautify Your Blog Post Design","og_description":"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.","og_url":"https:\/\/elementor.com\/blog\/blog-post-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-10-15T12:35:45+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/09\/10ways3.png","type":"image\/png"}],"author":"Wil Brown","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Wil Brown"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/"},"author":{"name":"Wil Brown","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/f9c4cda317418b918986086735252a4b"},"headline":"10+ Ways To Beautify Your Blog Post Design","datePublished":"2017-10-15T12:35:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/"},"wordCount":3107,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/10ways3.png","keywords":["Build"],"articleSection":["Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/blog-post-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/blog-post-design\/","url":"https:\/\/elementor.com\/blog\/blog-post-design\/","name":"10+ Ways To Beautify Your Blog Post Design","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/10ways3.png","datePublished":"2017-10-15T12:35:45+00:00","description":"Learn how to improve and beautify your blog posts like top brand blogs do. In this post, we cover 10+ ways to make your blog post prettier.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/blog-post-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/10ways3.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/10ways3.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/blog-post-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inspiration","item":"https:\/\/elementor.com\/blog\/category\/inspiration\/"},{"@type":"ListItem","position":3,"name":"10+ Ways To Beautify Your Blog Post Design"}]},{"@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\/f9c4cda317418b918986086735252a4b","name":"Wil Brown","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a41989db8d0c06420b5042c3b3e10ddd496b0a9584897d1042499ebd6e467e6d?s=96&d=mm&r=g","caption":"Wil Brown"},"description":"Wil is a dad, WordPress consultant, and business coach living in Sydney, Australia. When he's not organizing meetups and conferences he enjoys chilies, craft beer, and learning to play the harmonica.","url":"https:\/\/elementor.com\/blog\/author\/wil-brown\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/5729","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\/1392962"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=5729"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/5729\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/6076"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=5729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=5729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=5729"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=5729"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=5729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}