{"id":2650,"date":"2025-12-11T05:41:31","date_gmt":"2025-12-11T05:41:31","guid":{"rendered":"https:\/\/tocwp.com\/docs\/?post_type=ht_kb&#038;p=2650"},"modified":"2025-12-11T05:41:32","modified_gmt":"2025-12-11T05:41:32","slug":"how-to-create-a-two-three-responsive-columns-in-easy-table-of-contents","status":"publish","type":"ht_kb","link":"https:\/\/tocwp.com\/docs\/knowledge-base\/how-to-create-a-two-three-responsive-columns-in-easy-table-of-contents\/","title":{"rendered":"How To Create a Two\/Three Responsive Columns in Easy Table of Contents"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Creating responsive two-column or three-column layouts combined with a clean, easy-to-navigate Table of Contents (TOC) is one of the most effective ways to improve user experience on any webpage. These features help structure information beautifully, making long content easier to digest and more engaging.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM.png\" alt=\"\" class=\"wp-image-2651\" style=\"object-fit:cover;width:773px;height:300px\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-300x300.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-150x150.png 150w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-768x768.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-50x50.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-60x60.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/ChatGPT-Image-Dec-11-2025-10_49_13-AM-100x100.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A responsive column layout ensures your content looks professional on all devices , whether mobile, tablet, or desktop. Meanwhile, an intuitive TOC allows readers to jump directly to the sections they care about, improving navigation and increasing the overall readability of your page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Together, these elements create a smooth, organized, and modern layout that enhances SEO, boosts time-on-page, and helps users quickly find the information they need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This document explains how to create <strong>responsive two-column and three-column layouts<\/strong> along with an <strong>easy, clickable Table of Contents (TOC)<\/strong>. It works for websites, blogs, or documentation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-x-large-font-size wp-block-paragraph\"><strong>STEPS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Add plugin and search for Easy Table Of Content plugin and add from there Or simply download the zip file from here <a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\">https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/<\/a> and download the zip file.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install the plugin on your WordPress Account.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"84\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-1024x84.png\" alt=\"\" class=\"wp-image-2626\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-1024x84.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-300x25.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-768x63.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-50x4.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-1536x126.png 1536w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-60x5.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2-100x8.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/11\/toc2.png 1707w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Settings<\/strong> and click on <strong>Appearance<\/strong>. There, you will find the <strong>TOC Columns<\/strong> option.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select it and choose how many columns you want to display in your <strong>Easy Table Of Contents<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-1024x409.png\" alt=\"\" class=\"wp-image-2652\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-1024x409.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-300x120.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-768x307.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-50x20.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-1536x614.png 1536w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-60x24.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop-100x40.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the columns and save the changes. <\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>OUTPUT<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>2 Columns<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"263\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-1024x263.png\" alt=\"\" class=\"wp-image-2653\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-1024x263.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-300x77.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-768x197.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-50x13.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-60x15.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1-100x26.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop1.png 1373w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>4 Columns<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"234\" src=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-1024x234.png\" alt=\"\" class=\"wp-image-2654\" srcset=\"https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-1024x234.png 1024w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-300x69.png 300w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-768x176.png 768w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-50x11.png 50w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-60x14.png 60w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2-100x23.png 100w, https:\/\/tocwp.com\/docs\/wp-content\/uploads\/2025\/12\/pop2.png 1517w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Best use cases for two or multiple columns in Easy Table of Contents<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Long articles or guides<\/strong> \u2013 Columns make the content easy to read, and the Easy Table Of Content helps users jump to any section quickly.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product features or comparisons<\/strong> \u2013 Two or three columns show features side by side.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>How-to tutorials<\/strong> \u2013 Columns separate steps, notes, and images for better clarity.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blogs with many sections<\/strong> \u2013 A Table Of Content improves navigation and keeps readers engaged.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Support or help pages<\/strong> \u2013 Users can easily find the exact solution they need using the Table Of Content.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Service or portfolio pages<\/strong> \u2013 Columns help show different services or items neatly.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Educational content<\/strong> \u2013 Easy navigation for lessons, topics, or chapters.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Landing or marketing pages<\/strong> \u2013 Columns highlight benefits, features, and key points clearly.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s it for this tutorial. If you need further help, please fill out the form below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating responsive two-column or three-column layouts combined with a clean, easy-to-navigate Table of Contents (TOC) is one of the most effective ways to improve user experience on any webpage. These features help structure information beautifully, making long content easier to digest and more engaging. A responsive column layout ensures your&#8230;<\/p>\n","protected":false},"author":2,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[],"class_list":["post-2650","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/comments?post=2650"}],"version-history":[{"count":1,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2650\/revisions"}],"predecessor-version":[{"id":2655,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/2650\/revisions\/2655"}],"wp:attachment":[{"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/media?parent=2650"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=2650"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/tocwp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=2650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}