{"id":12629,"date":"2026-02-21T08:51:00","date_gmt":"2026-02-21T08:51:00","guid":{"rendered":"https:\/\/www.mailcraft.eu\/preheader-maila-jak-wykorzystac-linie-po-temacie\/"},"modified":"2026-09-25T08:09:04","modified_gmt":"2026-09-25T08:09:04","slug":"preheader-maila-jak-wykorzystac-linie-po-temacie","status":"publish","type":"post","link":"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/","title":{"rendered":"Preheader maila: jak wykorzysta\u0107 lini\u0119 po temacie"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Email preheader text<\/strong> is the short line inbox apps show right after the subject line. Skip it, and the email client just grabs the first text it finds in your message. That&#8217;s why so many previews say &#8222;View this email in your browser&#8221; or show the first menu link instead of an actual summary. Below: what the preheader is, how clients pick it, how to write one and how to hide it in your HTML.<\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-6abd76700195c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #102830;color:#102830\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #102830;color:#102830\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6abd76700195c\"  \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#What_Is_Email_Preheader_Text\" >What Is Email Preheader Text?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#Why_Does_My_Preview_Show_%E2%80%9EView_This_Email_in_Your_Browser%E2%80%9D\" >Why Does My Preview Show &#8222;View This Email in Your Browser&#8221;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#How_Long_Should_a_Preheader_Be\" >How Long Should a Preheader Be?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#Writing_the_Subject_Line_and_Preheader_Together\" >Writing the Subject Line and Preheader Together<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#How_to_Add_Hidden_Preheader_HTML_to_Your_Template\" >How to Add Hidden Preheader HTML to Your Template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#Testing_Preview_Text_Before_You_Send\" >Testing Preview Text Before You Send<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#Is_preheader_text_the_same_as_preview_text\" >Is preheader text the same as preview text?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#What_happens_if_I_leave_the_preheader_empty\" >What happens if I leave the preheader empty?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.mailcraft.eu\/pl\/preheader-maila-jak-wykorzystac-linie-po-temacie\/#Should_the_preheader_be_visible_inside_the_email\" >Should the preheader be visible inside the email?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Email_Preheader_Text\"><\/span>What Is Email Preheader Text?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">A preheader is the bit of preview text that inbox lists show next to or under the subject line. One thing, two names. <em>Preheader<\/em> usually means the line in your code, and <em>preview text<\/em> means what the subscriber actually sees. Either way, people read it before they open anything (along with your sender name and subject), so it plays a part in whether the email gets opened at all. Its job is to back up the subject line. Not replace it.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Does_My_Preview_Show_%E2%80%9EView_This_Email_in_Your_Browser%E2%80%9D\"><\/span>Why Does My Preview Show &#8222;View This Email in Your Browser&#8221;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">With no preheader set, email clients take the first readable text in the HTML. In most templates that&#8217;s the browser link, a logo&#8217;s alt text or the navigation. The usual suspects:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>the &#8222;view online&#8221; or &#8222;view in browser&#8221; link at the top of the template<\/li>\n<li>alt text on a header image or logo<\/li>\n<li>menu items such as &#8222;Shop&#8221;, &#8222;Blog&#8221; or &#8222;Contact&#8221;<\/li>\n<li>lines like &#8222;Having trouble reading this email?&#8221;<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Want to check your own? Send a test to your inbox, open it on desktop and on your phone, and read the preview line. The fix is simple. Put a real summary at the very top of the code, so it&#8217;s the first thing the client finds.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Long_Should_a_Preheader_Be\"><\/span>How Long Should a Preheader Be?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">There&#8217;s no one correct preheader length, because the visible preview shifts with the email client, the device and the screen width. A full sentence on a wide desktop monitor can get chopped after a few words on a phone. Solid <a href=\"https:\/\/www.mailcraft.eu\/simple-steps-to-design-mobile-responsive-emails\/\">mobile-responsive email layouts<\/a> keep the rest of the message readable on a small screen as well. And the subject eats into it too - a long subject leaves less room for whatever comes after. So the practical rule: put the main message in the first few words, where it survives the cut. Then check how it actually renders in the clients your list uses.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Writing_the_Subject_Line_and_Preheader_Together\"><\/span>Writing the Subject Line and Preheader Together<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">Think of the subject line and preheader as one message, with the preheader filling in what the subject leaves out. A few pairings that work:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Topic and detail:<\/strong> the subject names the topic, and the preheader gives the specific point.<\/li>\n<li><strong>Question and hint:<\/strong> the subject asks a question, and the preheader hints at the answer.<\/li>\n<li><strong>Offer and condition:<\/strong> the subject names the offer, and the preheader adds the deadline or the terms.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Don&#8217;t just repeat the subject word for word. And drop generic filler like &#8222;Our latest newsletter&#8221; (it tells the reader exactly nothing). Keep it honest, too. If the preview promises something the email doesn&#8217;t deliver, you burn trust faster than you pick up opens. For the other half of the pair, here are some tips on <a href=\"https:\/\/www.mailcraft.eu\/email-subject-line-mastery-boost-your-open-rates\/\">writing better subject lines<\/a> that pair well with a strong preview.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Hidden_Preheader_HTML_to_Your_Template\"><\/span>How to Add Hidden Preheader HTML to Your Template<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">Drop a short block of text right after the opening body tag and hide it with inline CSS. The inbox preview still picks it up, but nobody sees it once the email is open. Here&#8217;s the setup:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Add a <code>div<\/code> as the first element inside <code>&lt;body&gt;<\/code>.<\/li>\n<li>Write your preview text inside it.<\/li>\n<li>Apply the hiding styles: display none, zero font size and line height, zero max height, zero opacity and hidden overflow.<\/li>\n<li>Optionally, add invisible spacer characters after the text so the client doesn&#8217;t drag body copy into the preview.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">A bare-bones version of hidden preheader HTML:<\/p>\n\n<pre><code>&lt;body&gt;\n  &lt;div style=\"display:none; font-size:0; line-height:0; max-height:0; opacity:0; overflow:hidden;\"&gt;\n    Your summary goes here, key point first.\n    &amp;zwnj;&amp;nbsp;&amp;zwnj;&amp;nbsp;&amp;zwnj;&amp;nbsp;\n  &lt;\/div&gt;\n  ...\n&lt;\/body&gt;<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Clients don&#8217;t all treat hidden elements the same way, so test before every big send. Building the email in a <a href=\"https:\/\/www.mailcraft.eu\/features\/\">builder with live preview<\/a> lets you spot layout problems while you&#8217;re still editing, not after the campaign&#8217;s already out the door.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testing_Preview_Text_Before_You_Send\"><\/span>Testing Preview Text Before You Send<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p class=\"wp-block-paragraph\">Send tests to real inboxes on the main clients and devices your subscribers actually use. Then read the sender name, subject and preview line together, the way a subscriber would. Mobile deserves extra attention. Narrow screens cut the preview the most. Make sure the view-in-browser link and the menu aren&#8217;t leaking into the preview anymore. Once the block works, save it in your base template, so every campaign starts with it. Our <a href=\"https:\/\/www.mailcraft.eu\/category\/email-templates-design\/\">email templates and design articles<\/a> go into how to structure that template.<\/p>\n\n<p class=\"wp-block-paragraph\">Email preheader text is one small line you control completely. Honestly, few parts of an email give you this much visibility for this little effort. So set it on purpose in every send, instead of letting the client pick it for you.<\/p>\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1790304558847-0\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Is_preheader_text_the_same_as_preview_text\"><\/span>Is preheader text the same as preview text?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>In practice, yes. &#8222;Preheader&#8221; is the element in your email code, and &#8222;preview text&#8221; is what the inbox shows from it. Marketers and tools use the two terms interchangeably.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790304558847-1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_happens_if_I_leave_the_preheader_empty\"><\/span>What happens if I leave the preheader empty?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The email client fills the preview with the first text it finds in your HTML. Often that&#8217;s the browser link, image alt text or a navigation menu. It looks sloppy, and it wastes space that could have talked someone into opening the email.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1790304558847-2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Should_the_preheader_be_visible_inside_the_email\"><\/span>Should the preheader be visible inside the email?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Either works. A hidden preheader keeps the design clean. A visible one doubles as the email&#8217;s opening line. Pick one, use it consistently in your template, and test how it looks both in the inbox and in the opened message.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Email preheader text is the short line inbox apps show right after the subject line. Skip it, and the email client just grabs the first text it finds in your message. That&#8217;s why so many previews say &#8222;View this email&#8230;<\/p>\n","protected":false},"author":1,"featured_media":12603,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[235,505],"tags":[],"class_list":["post-12629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii","category-szablony-i-projektowanie-e-maili"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779.jpg",1200,799,false],"thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-150x150.jpg",150,150,true],"medium":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-768x511.jpg",768,511,true],"large":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-1024x682.jpg",1024,682,true],"1536x1536":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779.jpg",1200,799,false],"2048x2048":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779.jpg",1200,799,false],"blog-featured":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-1200x534.jpg",1200,534,true],"woocommerce_thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-600x400.jpg",600,400,true],"woocommerce_gallery_thumbnail":["https:\/\/www.mailcraft.eu\/wp-content\/uploads\/2026\/09\/email-preheader-text-779-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"Krzysztof Balicki","author_link":"https:\/\/www.mailcraft.eu\/pl\/author\/websystems\/"},"uagb_comment_info":0,"uagb_excerpt":"Email preheader text is the short line inbox apps show right after the subject line. Skip it, and the email client just grabs the first text it finds in your message. That&#8217;s why so many previews say &#8222;View this email...","_links":{"self":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/comments?post=12629"}],"version-history":[{"count":3,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12629\/revisions"}],"predecessor-version":[{"id":12663,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/posts\/12629\/revisions\/12663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/media\/12603"}],"wp:attachment":[{"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/media?parent=12629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/categories?post=12629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mailcraft.eu\/pl\/wp-json\/wp\/v2\/tags?post=12629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}