{"id":169,"date":"2026-10-19T08:01:50","date_gmt":"2026-10-19T08:01:50","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=169"},"modified":"2026-10-19T08:01:54","modified_gmt":"2026-10-19T08:01:54","slug":"free-social-media-post-templates-in-html-design-animate-and-export-posts-for-instagram-linkedin-x-and-pinterest","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/free-social-media-post-templates-in-html-design-animate-and-export-posts-for-instagram-linkedin-x-and-pinterest\/","title":{"rendered":"Free Social Media Post Templates in HTML: Design, Animate and Export Posts for Instagram, LinkedIn, X and Pinterest"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  Free Social Media Post Templates in HTML: Design, Animate and Export Posts for Instagram, LinkedIn, X and Pinterest\n\n  SEO TITLE (55 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  Free Social Media Post Templates: Edit, Animate, Export\n\n  SEO DESCRIPTION (156 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  24 free social media post templates for Instagram, LinkedIn, X and Pinterest. Edit in your browser, add your brand, then export PNG, MP4 video, PDF or HTML.\n\n  HOW TO PASTE: click the first line after this comment, press Ctrl+Shift+End, Ctrl+C.\n  In WordPress click \"Type \/ to choose a block\", then Ctrl+V.\n  Fallback: \u22ee menu \u2192 Code editor \u2192 paste.\n\n  MEDIA: screenshots, category strips, 4-second video exports and their posters are\n  hotlinked from https:\/\/webdevpuneet.com\/demos\/a1\/41\/ (uploaded 2026-10-19).\n  Suggested featured image:\n  https:\/\/webdevpuneet.com\/demos\/a1\/41\/social-post-templates-editor-big-quote.webp\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">Posting on social media every week means making a lot of images: a quote on Monday, a product launch on Wednesday, a webinar reminder on Friday, and a Story for each one. Design apps make this easy but lock your work inside their editor, add watermarks to free plans, or ask you to sign up before you can download anything. Hand-coding each post in HTML and CSS gives you full control but takes far too long.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The free <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/\">Social Post Templates<\/a> tool on webdevpuneet.com sits in between. You get <strong>24 ready-made templates in 8 categories<\/strong> that you edit by clicking on them. Every design is real HTML and CSS, so one template works in <strong>six post sizes<\/strong> for Instagram, Facebook, X, LinkedIn and Pinterest. When you&#8217;re done you can download a PNG or JPEG, a ZIP of every size, a PDF carousel for LinkedIn, a <strong>short animated MP4 for Reels and Stories<\/strong>, or the HTML itself. There&#8217;s no account and no watermark, and your photos never leave your browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide walks through every feature with screenshots and real exports: the categories, sizes, fonts, brand kit, saving and backups, video, carousels, bulk creation from a spreadsheet, and forking a design into your own code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/social-post-templates-editor-big-quote.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/social-post-templates-editor-big-quote.webp?w=1080&#038;ssl=1\" alt=\"Social Post Templates editor with the Big Quote template open: editing panel on the left, the 1080 by 1350 post preview in the middle and Save, Fork and Export buttons in the toolbar\"\/><\/a><figcaption class=\"wp-element-caption\">The editor: controls on the left, a live preview you can click to edit, and Save, Fork and Export in the toolbar.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The short version<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it is:<\/strong> a free, browser-based editor for social media post templates built in HTML and CSS.<\/li>\n\n\n\n<li><strong>Templates:<\/strong> 24 designs in 8 categories (Quotes &amp; Tips, Announcements, Promo &amp; Sales, Events, Social Proof, Carousel Slides, Stories, and Holidays &amp; Seasonal), with more on the way.<\/li>\n\n\n\n<li><strong>Sizes:<\/strong> Instagram portrait 1080\u00d71350, square 1080\u00d71080, Story\/Reel 1080\u00d71920, landscape 1600\u00d7900, LinkedIn 1200\u00d7627 and Pinterest pin 1000\u00d71500.<\/li>\n\n\n\n<li><strong>Exports:<\/strong> PNG, JPEG, every size as a ZIP, PDF (including multi-page LinkedIn carousels), animated MP4 video (WebM in browsers that can&#8217;t record MP4), and self-contained HTML.<\/li>\n\n\n\n<li><strong>Branding:<\/strong> 1,949 Google Fonts, your own uploaded font files, 12 palettes plus exact colours, and a reusable brand kit.<\/li>\n\n\n\n<li><strong>Your work:<\/strong> autosave, named designs with Save and Save as, search, and a backup file you can import on any computer.<\/li>\n\n\n\n<li><strong>Privacy:<\/strong> everything runs in your browser. Photos, text and designs are never uploaded.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Quick start: your first post in two minutes<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/\">Social Post Templates gallery<\/a> and pick a design, or filter by category first.<\/li>\n\n\n\n<li>Choose a post size under <strong>Size<\/strong>. Portrait 4:5 is the default because it takes up the most room in the Instagram feed.<\/li>\n\n\n\n<li>Click any text in the preview and type over it. Click a photo area to upload your own image.<\/li>\n\n\n\n<li>Pick a palette or set exact colours, and choose your heading and body fonts.<\/li>\n\n\n\n<li>Open <strong>Export<\/strong> in the toolbar and download a PNG, or choose <strong>Animated video<\/strong> for a Reel. Press <strong>Ctrl+S<\/strong> to keep the design in My designs.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Why HTML templates instead of image templates?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most template sites hand you a picture inside their editor. These templates are web pages: each one is a small block of HTML with CSS that uses relative units and CSS variables for colours and fonts. That one decision explains most of what the tool can do.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>One design, every size.<\/strong> The layout is measured relative to the post, so switching from a square to a Story re-flows the design instead of stretching or cropping it.<\/li>\n\n\n\n<li><strong>Text always fits.<\/strong> Long headlines shrink step by step until they fit their box, so nothing overflows when you paste in your own copy.<\/li>\n\n\n\n<li><strong>You own the code.<\/strong> Copy the HTML, download it as a file, or fork it into an editor and reuse the design on a website, in a CMS or in your own image pipeline.<\/li>\n\n\n\n<li><strong>It&#8217;s private.<\/strong> The preview and the export are both drawn in your browser, so there&#8217;s nothing to upload and no account to create.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/social-post-templates-gallery.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/social-post-templates-gallery.webp?w=1080&#038;ssl=1\" alt=\"Social Post Templates gallery page with category filter chips, a search box and a grid of template cards\"\/><\/a><figcaption class=\"wp-element-caption\">The gallery: filter by category, search, and open any template.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">All 8 template categories<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each category has its own page with every template in it. Click a template name to open it straight in the editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Quotes &amp; Tips<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Posts people save and share: quote cards, daily tips and fact posts. Includes <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/big-quote\/\">Big Quote<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/tip-of-the-day\/\">Tip of the Day<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/did-you-know\/\">Did You Know?<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/code-tip\/\">Code Tip<\/a>, which shows a code snippet in an editor window, ideal for developer accounts. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/quotes\/\">See all Quotes &amp; Tips templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/quotes\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-quotes.webp?w=1080&#038;ssl=1\" alt=\"Quotes and Tips templates: Big Quote, Tip of the Day, Did You Know and Code Tip\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Announcements<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For news worth celebrating: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/product-launch\/\">Product Launch<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/milestone\/\">Milestone<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/hiring\/\">We&#8217;re Hiring<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/we-are-live\/\">We&#8217;re Live<\/a>. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/announcements\/\">See all Announcement templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/announcements\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-announcements.webp?w=1080&#038;ssl=1\" alt=\"Announcement templates: Product Launch, Milestone, We're Hiring and We're Live\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Promo &amp; Sales<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Discounts and products, front and centre: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/discount-badge\/\">Discount Badge<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/holiday-sale\/\">Black Friday Sale<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/product-spotlight\/\">Product Spotlight<\/a> with a photo of your product. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/promo\/\">See all Promo &amp; Sales templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/promo\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-promo.webp?w=1080&#038;ssl=1\" alt=\"Promo and Sales templates: Discount Badge, Black Friday Sale and Product Spotlight\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Events<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Posts with a clear date and a reason to sign up: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/webinar-event\/\">Webinar Event<\/a> with a speaker photo, and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/countdown\/\">Countdown<\/a> for &#8220;3 days left&#8221; reminders. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/events\/\">See all Event templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/events\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-events.webp?w=1080&#038;ssl=1\" alt=\"Event templates: Webinar Event and Countdown\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Social Proof<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let customers do the selling: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/testimonial\/\">Customer Testimonial<\/a> with a star rating and photo, and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/before-after\/\">Before &amp; After<\/a> for results. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/social-proof\/\">See all Social Proof templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/social-proof\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-social-proof.webp?w=1080&#038;ssl=1\" alt=\"Social Proof templates: Customer Testimonial and Before and After\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">6. Carousel Slides<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A cover, numbered step slides and a final &#8220;save this&#8221; slide that open together in the <strong>Carousel Builder<\/strong> (more on that below): <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/carousel-cover\/\">Carousel Cover Slide<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/carousel-step\/\">Carousel Step Slide<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/carousel-save\/\">Carousel Final Slide<\/a>. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/carousel\/\">See all Carousel templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/carousel\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-carousel.webp?w=1080&#038;ssl=1\" alt=\"Carousel slide templates: cover slide, step slide and final slide\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. Stories<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Designed Story-first, with room left for Instagram&#8217;s buttons: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/story-poll\/\">This or That Poll<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/story-link\/\">New Post Link in Bio<\/a>. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/stories\/\">See all Story templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/stories\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-stories.webp?w=1080&#038;ssl=1\" alt=\"Story templates: This or That Poll and New Post Link in Bio\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">8. Holidays &amp; Seasonal<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ready for the end of the year: <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/halloween-sale\/\">Halloween Sale<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/thanksgiving\/\">Thanksgiving Thank You<\/a>, <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/christmas-greeting\/\">Christmas Greeting<\/a> and <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/new-year\/\">Happy New Year<\/a>. <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/holidays\/\">See all Holiday templates<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/category\/holidays\/\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/category-holidays.webp?w=1080&#038;ssl=1\" alt=\"Holiday templates: Halloween Sale, Thanksgiving Thank You, Christmas Greeting and Happy New Year\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>More are in the making.<\/strong> New templates and categories are added regularly. Upcoming ideas include more seasonal posts, event recaps, FAQ and myth-busting cards, pricing and comparison posts, and more carousel layouts. The gallery always shows the current set, so bookmark it and check back.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Six post sizes from one design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pick a size in the <strong>Size<\/strong> section and the layout adapts. Each size is exported at its full pixel size, not scaled up from the preview.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Size<\/th><th>Pixels<\/th><th>Ratio<\/th><th>Best for<\/th><\/tr><\/thead><tbody><tr><td><strong>Portrait post<\/strong><\/td><td>1080\u00d71350<\/td><td>4:5<\/td><td>Instagram feed (recommended), Facebook and LinkedIn feeds, X portrait<\/td><\/tr><tr><td><strong>Square post<\/strong><\/td><td>1080\u00d71080<\/td><td>1:1<\/td><td>Instagram, Facebook, LinkedIn and X feeds<\/td><\/tr><tr><td><strong>Story \/ Reel<\/strong><\/td><td>1080\u00d71920<\/td><td>9:16<\/td><td>Instagram and Facebook Stories, Reel covers<\/td><\/tr><tr><td><strong>Landscape post<\/strong><\/td><td>1600\u00d7900<\/td><td>16:9<\/td><td>X feed images, Facebook landscape<\/td><\/tr><tr><td><strong>LinkedIn image<\/strong><\/td><td>1200\u00d7627<\/td><td>1.91:1<\/td><td>LinkedIn shared images and link posts, Facebook link images<\/td><\/tr><tr><td><strong>Pinterest pin<\/strong><\/td><td>1000\u00d71500<\/td><td>2:3<\/td><td>Standard Pinterest pins<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/size-picker-six-post-sizes.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/size-picker-six-post-sizes.webp?w=1080&#038;ssl=1\" alt=\"Size picker with Portrait post, Square post, Story or Reel, Landscape post, LinkedIn image and Pinterest pin\"\/><\/a><figcaption class=\"wp-element-caption\">The size picker. The hint underneath tells you where each size works best.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Two guides help with Instagram&#8217;s cropping. For Stories, <strong>Story safe zones<\/strong> shades the top and bottom areas covered by the profile bar and the reply field, and the templates already keep text out of them. For portrait posts, <strong>Grid crop guides<\/strong> show how your post is cropped on your profile grid, at 3:4 and 1:1.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/story-size-safe-zones.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/story-size-safe-zones.webp?w=1080&#038;ssl=1\" alt=\"Product Launch template switched to the 1080 by 1920 Story size with Story safe zones turned on\"\/><\/a><figcaption class=\"wp-element-caption\">The same Product Launch design re-flowed for a 1080\u00d71920 Story.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Editing text, photos and layout<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Click to edit, right in the preview<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click any text in the post and type. Every text element also has a field in the <strong>Text<\/strong> section on the left, and clicking text in the preview scrolls to its field. To colour a word with the accent colour, wrap it in asterisks: <code>*efficiency*<\/code>. Select text in a field and a small toolbar appears with <strong>bold<\/strong>, <em>italic<\/em>, underline and <strong>highlight<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/format-toolbar-bold-italic-underline-highlight.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/format-toolbar-bold-italic-underline-highlight.webp?w=1080&#038;ssl=1\" alt=\"Formatting toolbar with bold, italic, underline and highlight buttons above a selected word in the Quote field\"\/><\/a><figcaption class=\"wp-element-caption\">Select text to get bold, italic, underline and highlight.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Photos with drag-to-crop<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click a photo area in the preview, or <strong>Upload<\/strong> in the Images section, to add your own picture or logo. Photos are resized in your browser and never uploaded. Drag a photo in the preview to reposition it, scroll over it to zoom, or use the zoom slider (100% to 400%). <strong>Reset<\/strong> centres it again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layout options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Layout<\/strong> section moves the text without touching photos or frames. Align text left, centre or right, and move it to the top, middle or bottom. <strong>Auto<\/strong> keeps the template&#8217;s own design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/layout-align-left-bottom.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/layout-align-left-bottom.webp?w=1080&#038;ssl=1\" alt=\"Did You Know template with text aligned left and moved to the bottom using the Layout options\"\/><\/a><figcaption class=\"wp-element-caption\">Did You Know? with the text aligned left and moved to the bottom.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Colours and palettes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each template lists its colours (background, text, accent, plus extras like a frame or decorations) with a colour picker and a hex field. Twelve one-click palettes restyle the whole post at once, and you can fine-tune from there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fonts: every Google Font, plus your own<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The heading and body font pickers search the full <strong>Google Fonts library of 1,949 families<\/strong> by name, and you can filter by category: Sans, Serif, Display, Handwriting or Mono. A font only loads when you pick it, so the editor stays fast.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/font-picker-google-fonts-search.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/font-picker-google-fonts-search.webp?w=1080&#038;ssl=1\" alt=\"Font picker searching Google Fonts for Bricolage, with matching font families listed\"\/><\/a><figcaption class=\"wp-element-caption\">Search the Google Fonts library from the font picker.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Need a brand font that isn&#8217;t on Google Fonts? Click <strong>Upload a font<\/strong> at the bottom of the picker and add a <strong>WOFF2, WOFF, TTF or OTF<\/strong> file. Uploaded fonts are stored in your browser, appear under &#8220;Your uploaded fonts&#8221; in every template, and are embedded in your PNG, JPEG, PDF and video exports, so the result looks right everywhere.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/font-picker-all-google-fonts-upload.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/font-picker-all-google-fonts-upload.webp?w=1080&#038;ssl=1\" alt=\"Font picker showing popular picks, category filters and the Upload a font button\"\/><\/a><figcaption class=\"wp-element-caption\">Popular picks, category filters and the Upload a font button.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A note on licences: Google Fonts are free for commercial use. For fonts you upload, check that your licence allows embedding them in images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Brand kit: set it once, apply it anywhere<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Brand kit<\/strong> at the top of the Edit tab stores your brand in one place:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Brand name, social handle and website<\/li>\n\n\n\n<li>Your logo (uploaded) and an optional hosted logo URL for emails<\/li>\n\n\n\n<li>Brand, background and text colours<\/li>\n\n\n\n<li>Heading and body fonts<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Set up brand kit<\/strong> to fill it in, or <strong>Use this design<\/strong> to copy the colours and fonts from the post you&#8217;re editing. The kit is <strong>never applied automatically<\/strong>: when you want it, click <strong>Apply to this design<\/strong>, and Undo takes it back. Tick &#8220;Also apply background and text colours&#8221; if you want more than the accent colour changed. Your brand name and handle also appear in the platform mock-ups, and the same kit is available in the <a href=\"https:\/\/webdevpuneet.com\/email-templates\/\">Email Templates<\/a> editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/brand-kit-setup.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/brand-kit-setup.webp?w=1080&#038;ssl=1\" alt=\"Brand kit form with brand name, handle, website, logo upload, hosted logo URL, brand colours and heading and body fonts\"\/><\/a><figcaption class=\"wp-element-caption\">Setting up the brand kit.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Preview it where it will be posted<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Preview as<\/strong> bar above the post switches between the plain design and realistic mock-ups of an <strong>Instagram<\/strong> feed post, an Instagram <strong>Story<\/strong>, an <strong>X<\/strong> post and a <strong>LinkedIn<\/strong> post. Seeing the post at real size, next to the like buttons and your caption, is the quickest way to tell whether a headline is big enough. If the mock-up usually shows a different size, a hint offers to switch to it.<\/p>\n\n\n\n<div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 1.5em\">\r\n<a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-instagram.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-instagram.webp?w=1080&#038;ssl=1\" alt=\"Testimonial post shown in an Instagram feed mock-up\" style=\"width:100%;height:auto;border-radius:8px;display:block\" loading=\"lazy\"><\/a>\r\n<a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-story.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-story.webp?w=1080&#038;ssl=1\" alt=\"Testimonial post shown in an Instagram Story mock-up\" style=\"width:100%;height:auto;border-radius:8px;display:block\" loading=\"lazy\"><\/a>\r\n<a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-x.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-x.webp?w=1080&#038;ssl=1\" alt=\"Testimonial post shown in an X (Twitter) post mock-up\" style=\"width:100%;height:auto;border-radius:8px;display:block\" loading=\"lazy\"><\/a>\r\n<a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-linkedin.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mockup-linkedin.webp?w=1080&#038;ssl=1\" alt=\"Testimonial post shown in a LinkedIn feed mock-up\" style=\"width:100%;height:auto;border-radius:8px;display:block\" loading=\"lazy\"><\/a>\r\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Write your caption in the <strong>Post caption<\/strong> box and it appears in the mock-ups. Live counters show the length against each platform&#8217;s limit (Instagram 2,200 characters, X 280, LinkedIn 3,000, Facebook 63,206), and <strong>Copy<\/strong> puts it on your clipboard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quality checks before you post<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A chip above the preview runs automatic checks as you edit and shows either &#8220;Quality checks passed&#8221; or how many issues to review. Click it to see the list, and click an issue to jump to the field that causes it. The checks catch:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Low contrast:<\/strong> text below 4.5:1 against its background (3:1 for large text), measured on the actual colours behind it.<\/li>\n\n\n\n<li><strong>Tiny text:<\/strong> anything that would be under about 7.5 px tall on a phone screen.<\/li>\n\n\n\n<li><strong>Overflow:<\/strong> text that runs off the edge or doesn&#8217;t fit its box.<\/li>\n\n\n\n<li><strong>Story safe zones:<\/strong> text under Instagram&#8217;s Story header or reply bar.<\/li>\n\n\n\n<li><strong>Blurry photos:<\/strong> images shown more than 1.6\u00d7 larger than their real resolution.<\/li>\n\n\n\n<li><strong>Leftovers:<\/strong> the placeholder &#8220;@yourbrand&#8221; handle and empty headlines.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/quality-checks-contrast-warning.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/quality-checks-contrast-warning.webp?w=1080&#038;ssl=1\" alt=\"Quality checks listing low contrast warnings after the text colour of the We're Hiring template was set too light\"\/><\/a><figcaption class=\"wp-element-caption\">Setting the text colour too light on We&#8217;re Hiring triggers contrast warnings.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Saving your work: autosave and My designs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two layers of saving, and both live in your browser&#8217;s <strong>IndexedDB<\/strong> storage, so photos and uploaded fonts are kept too.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Autosave:<\/strong> every template remembers your latest edits. Close the tab, come back next week, and the template opens where you left it.<\/li>\n\n\n\n<li><strong>My designs:<\/strong> named copies you keep on purpose. Click <strong>Save<\/strong> in the toolbar (or press <strong>Ctrl+S<\/strong>) and the design is stored under a name, which then becomes the title in the toolbar. A dot shows when you have unsaved changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The arrow next to Save opens <strong>Save as new design<\/strong>, which keeps the current version under a new name. Use it for variations, such as a light and a dark version of the same post. When a saved design is open, the same menu offers <strong>Detach<\/strong>: keep editing without changing the saved copy.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/save-as-new-design-name.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/save-as-new-design-name.webp?w=1080&#038;ssl=1\" alt=\"Save as new design form in the toolbar with the name Tip of the day dark version\"\/><\/a><figcaption class=\"wp-element-caption\">Save as new design keeps a variation under its own name.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>My designs<\/strong> tab lists everything you&#8217;ve saved, with a thumbnail, the template name and the date. Search by name, switch between <strong>All<\/strong> designs and <strong>This template<\/strong>, and use <strong>Open<\/strong>, <strong>Duplicate<\/strong>, <strong>Rename<\/strong> or <strong>Delete<\/strong> on each one. Opening a design from another template takes you straight to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/my-designs-tab-search.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/my-designs-tab-search.webp?w=1080&#038;ssl=1\" alt=\"My designs tab listing five saved designs with thumbnails, a search box and All or This template filters\"\/><\/a><figcaption class=\"wp-element-caption\">The My designs tab, with search and Open, Duplicate, Rename and Delete.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Your saved designs also appear at the top of the <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/\">gallery page<\/a>, rendered live from their HTML rather than as stale screenshots, and the gallery search filters them too.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/gallery-saved-designs-strip.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/gallery-saved-designs-strip.webp?w=1080&#038;ssl=1\" alt=\"Gallery page with a My designs row of saved designs above All Templates\"\/><\/a><figcaption class=\"wp-element-caption\">Saved designs in the gallery, above all templates.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Import and export: back up and move your designs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Because everything is stored in one browser, clearing site data or switching computers would lose your work. The <strong>Import \/ Export<\/strong> tab fixes that with a single backup file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Export designs<\/strong> downloads one <code>.json<\/code> file containing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>every design in My designs, with its photos and crop settings<\/li>\n\n\n\n<li>the uploaded fonts your designs use, so they look right anywhere<\/li>\n\n\n\n<li>your brand kit, if you&#8217;ve set one<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choose a backup file<\/strong> imports it in any browser, on any computer. Importing never changes what you already have: designs you already have are skipped, and a different design that happens to share an ID comes in as a copy. It&#8217;s also a simple way to share a set of designs with a teammate. Try it with this <a href=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/sample-social-post-designs-backup.json\">sample backup file<\/a> of five designs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/import-export-backup.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/import-export-backup.webp?w=1080&#038;ssl=1\" alt=\"Import and Export tab with an Export designs button and a Choose a backup file button\"\/><\/a><figcaption class=\"wp-element-caption\">The Import \/ Export tab.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Every export option<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">All downloads live in the <strong>Export<\/strong> menu in the toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Option<\/th><th>What you get<\/th><th>Use it for<\/th><\/tr><\/thead><tbody><tr><td><strong>Download PNG<\/strong><\/td><td>Full-size image, sharpest text<\/td><td>Most posts, especially text-heavy ones<\/td><\/tr><tr><td><strong>Download JPG<\/strong><\/td><td>Full-size image, smaller file<\/td><td>Photo-heavy posts<\/td><\/tr><tr><td><strong>All sizes (PNG or JPG ZIP)<\/strong><\/td><td>The post in all six sizes in one ZIP<\/td><td>Posting the same message on every platform<\/td><\/tr><tr><td><strong>Download PDF<\/strong><\/td><td>One page at the post&#8217;s size, or one page per slide for carousels<\/td><td>LinkedIn document posts, print, sharing<\/td><\/tr><tr><td><strong>Animated video<\/strong><\/td><td>MP4 (or WebM) of the post animating in<\/td><td>Reels, Stories and video-first feeds<\/td><\/tr><tr><td><strong>Bulk create from CSV<\/strong><\/td><td>A ZIP with one post per spreadsheet row<\/td><td>Series of quotes, tips or products<\/td><\/tr><tr><td><strong>Copy HTML \/ Download .html<\/strong><\/td><td>One self-contained HTML file with inline CSS<\/td><td>Websites, CMSs, emails, your own render pipeline<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/export-menu-png-jpg-zip-pdf-video-html.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/export-menu-png-jpg-zip-pdf-video-html.webp?w=1080&#038;ssl=1\" alt=\"Export menu open on the Black Friday Sale template listing PNG, JPG, all sizes ZIP, PDF, bulk create, animated video, Copy HTML and Download .html\"\/><\/a><figcaption class=\"wp-element-caption\">The Export menu on the Black Friday Sale template.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Animated video for Reels and Stories<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Short videos often reach more people than still images on Instagram and LinkedIn. <strong>Animated video<\/strong> turns any single-post template into a short clip: the text and photos animate in one after another, then the finished design holds on screen. In the Export section of the panel, choose:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Animation:<\/strong> <em>Rise<\/em> (slides up into place), <em>Fade<\/em> (fades in) or <em>Pop<\/em> (scales up slightly).<\/li>\n\n\n\n<li><strong>Length:<\/strong> 4, 6 or 8 seconds.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The video is recorded in your browser at 30 frames per second and the post&#8217;s full size. Chrome and Edge save an <strong>MP4<\/strong>, which every platform accepts. Browsers that can&#8217;t record MP4 save a WebM instead. For Reels and Stories, switch to the Story \/ Reel size first.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/video-export-animation-length.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/video-export-animation-length.webp?w=1080&#038;ssl=1\" alt=\"Export section with Animation set to Rise, Fade or Pop and Length set to 4, 6 or 8 seconds\"\/><\/a><figcaption class=\"wp-element-caption\">Animation style and length, in the Export section of the panel.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These are real exports from the tool at the shortest length, 4 seconds, with no editing afterwards:<\/p>\n\n\n\n<div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 1.5em\">\r\n<figure style=\"margin:0\"><video controls loop muted playsinline preload=\"metadata\" poster=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/big-quote-rise-4s-poster.webp\" src=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/big-quote-rise-4s.mp4\" style=\"width:100%;height:auto;border-radius:8px;display:block;background:#0f172a\"><\/video><figcaption style=\"font-size:14px;margin-top:6px\">Big Quote \u00b7 Rise \u00b7 4 s \u00b7 1080&times;1350<\/figcaption><\/figure>\r\n<figure style=\"margin:0\"><video controls loop muted playsinline preload=\"metadata\" poster=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/halloween-sale-pop-4s-poster.webp\" src=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/halloween-sale-pop-4s.mp4\" style=\"width:100%;height:auto;border-radius:8px;display:block;background:#1e1033\"><\/video><figcaption style=\"font-size:14px;margin-top:6px\">Halloween Sale \u00b7 Pop \u00b7 4 s \u00b7 1080&times;1350<\/figcaption><\/figure>\r\n<figure style=\"margin:0\"><video controls loop muted playsinline preload=\"metadata\" poster=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/countdown-fade-4s-poster.webp\" src=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/countdown-fade-4s.mp4\" style=\"width:100%;height:auto;border-radius:8px;display:block;background:#1e1b4b\"><\/video><figcaption style=\"font-size:14px;margin-top:6px\">Countdown \u00b7 Fade \u00b7 4 s \u00b7 1080&times;1350<\/figcaption><\/figure>\r\n<figure style=\"margin:0\"><video controls loop muted playsinline preload=\"metadata\" poster=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/christmas-greeting-fade-4s-poster.webp\" src=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/christmas-greeting-fade-4s.mp4\" style=\"width:100%;height:auto;border-radius:8px;display:block;background:#14532d\"><\/video><figcaption style=\"font-size:14px;margin-top:6px\">Christmas Greeting \u00b7 Fade \u00b7 4 s \u00b7 1080&times;1350<\/figcaption><\/figure>\r\n<figure style=\"margin:0\"><video controls loop muted playsinline preload=\"metadata\" poster=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/product-launch-rise-4s-story-poster.webp\" src=\"https:\/\/webdevpuneet.com\/demos\/a1\/41\/product-launch-rise-4s-story.mp4\" style=\"width:100%;height:auto;border-radius:8px;display:block;background:#1e1033\"><\/video><figcaption style=\"font-size:14px;margin-top:6px\">Product Launch \u00b7 Rise \u00b7 4 s \u00b7 Story 1080&times;1920<\/figcaption><\/figure>\r\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Carousel Builder and LinkedIn PDF carousels<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open any Carousel Slides template and the editor becomes the <strong>Carousel Builder<\/strong>. Add slides with <strong>+ Cover<\/strong>, <strong>+ Step<\/strong> and <strong>+ Final<\/strong>, duplicate a slide, reorder slides with the arrows, and step through them in the toolbar. Slide numbers fill themselves in: <code>{n}<\/code> is the slide number, <code>{nn}<\/code> the two-digit number and <code>{total}<\/code> the slide count, so &#8220;Step {nn}&#8221; stays right when you reorder. Colours, fonts and the post size apply to all slides, because Instagram needs one size per carousel. Instagram allows up to 20 slides in one carousel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/carousel-builder-slides.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/carousel-builder-slides.webp?w=1080&#038;ssl=1\" alt=\"Carousel Builder with a list of cover, step and final slides and a 3 CSS tricks I wish I knew sooner cover slide\"\/><\/a><figcaption class=\"wp-element-caption\">The Carousel Builder with its slide list.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Export every slide as a numbered ZIP for Instagram, or choose <strong>Carousel as PDF<\/strong>. LinkedIn shows an uploaded PDF as a swipeable document post, a format that invites people to stop and swipe.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/carousel-export-pdf-linkedin.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/carousel-export-pdf-linkedin.webp?w=1080&#038;ssl=1\" alt=\"Carousel export menu with all slides as PNG or JPG ZIP, this slide in all sizes and Carousel as PDF for LinkedIn\"\/><\/a><figcaption class=\"wp-element-caption\">Carousel exports: numbered ZIPs and a multi-page PDF for LinkedIn.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Bulk create from a spreadsheet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Got 30 quotes for the month, or a product list? <strong>Bulk create from CSV<\/strong> makes one post per row. Paste CSV text (straight from Google Sheets or Excel) or upload a <code>.csv<\/code> file. The first row holds column names that match the template&#8217;s field labels, such as <code>Quote,Author<\/code>, and the tool shows which columns matched. Each row starts from your current design, so colours, fonts, photos and any column you leave out stay the same. Files in the ZIP are numbered in row order and named from your data. Choose PNG or JPG and download up to 300 posts as one ZIP. <strong>Download sample CSV<\/strong> gives you a ready-made file with the right headers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/bulk-create-from-csv.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/bulk-create-from-csv.webp?w=1080&#038;ssl=1\" alt=\"Bulk create from CSV dialog with three quotes pasted as CSV, matched columns and a Create 3 posts ZIP button\"\/><\/a><figcaption class=\"wp-element-caption\">Three quotes pasted as CSV become three Big Quote posts.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML export and Fork to My Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Copy HTML<\/strong> and <strong>Download .html<\/strong> give you one self-contained file: the markup, all the CSS inline, and links to the Google Fonts it uses. Your uploaded photos are embedded in the file; untick &#8220;Include uploaded photos&#8221; in the panel to leave them out and keep the file small. Open it in a browser, paste it into a CMS, or render it with your own screenshot tool.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fork<\/strong> in the toolbar goes a step further. It saves the design as an editable snippet in <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>, the free in-browser HTML, CSS and JavaScript editor on webdevpuneet.com, and opens it in a new tab. The HTML and CSS sit in separate panels with a live preview, so you can change anything the template&#8217;s fields don&#8217;t expose, keep versions, or sync them to a GitHub Gist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/fork-to-my-code-editor.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/fork-to-my-code-editor.webp?w=1080&#038;ssl=1\" alt=\"The Code Tip template forked into the My Code editor with HTML and CSS panels and a live preview\"\/><\/a><figcaption class=\"wp-element-caption\">The Code Tip template forked into My Code.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Works on your phone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On a phone the preview fills the screen and the controls open as a <strong>bottom sheet<\/strong>. Tap text in the preview to edit it in place, tap <strong>Edit design<\/strong> to slide the panel up, and download the finished post to your phone, ready to share from the same device.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mobile-editor-bottom-sheet.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/webdevpuneet.com\/demos\/a1\/41\/mobile-editor-bottom-sheet.webp?w=1080&#038;ssl=1\" alt=\"The editor on a phone: on the left the Countdown post with the panel collapsed, on the right the bottom sheet open with brand kit, sizes and layout\"\/><\/a><figcaption class=\"wp-element-caption\">On a phone: the panel closed (left) and open as a bottom sheet (right).<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Privacy: nothing leaves your browser<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s no upload step anywhere in the tool. Photos are resized locally, designs and fonts are stored in IndexedDB on your device, and images, PDFs and videos are drawn on an HTML canvas in your browser. The only outside requests are for the Google Fonts you pick. That makes it safe for unreleased product shots and client work, and it&#8217;s why there&#8217;s no sign-up: there&#8217;s no server-side account to create.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">For developers: how it works under the hood<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each template is a function that returns HTML plus a CSS string. In the editor, the template is mounted inside a <strong>Shadow DOM<\/strong> so its styles can&#8217;t leak into the page, and sized with a CSS unit derived from the post&#8217;s shorter side, which is how one layout fits six sizes. Colours and fonts are CSS custom properties, so a palette or brand kit swap is just a new set of variables.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To export, the tool clones the rendered post, embeds the fonts it uses as data URLs, wraps everything in an SVG <code>&lt;foreignObject&gt;<\/code> and draws that onto a canvas at full resolution. PNG and JPEG come straight from the canvas. The PDF writer packs JPEG pages into a PDF without any library. Video renders each animation frame the same way, then plays the frames into a <code>MediaRecorder<\/code> at a fixed frame rate. Because the source is plain HTML, you can also render the downloaded file yourself with Puppeteer or Playwright, from a CMS, a spreadsheet or a CI job.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for better-performing posts<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use portrait 4:5 on Instagram.<\/strong> It takes up the most screen space in the feed. Turn on Grid crop guides to keep important content inside the profile-grid crop.<\/li>\n\n\n\n<li><strong>Keep headlines short.<\/strong> If the auto-fit shrinks your headline a lot, cut words rather than accepting small text, and let the tiny-text check guide you.<\/li>\n\n\n\n<li><strong>Repurpose with All sizes.<\/strong> One ZIP covers the Instagram feed, Stories, X, LinkedIn and Pinterest.<\/li>\n\n\n\n<li><strong>Turn your best still into a Reel.<\/strong> A 4-second Rise animation at Story size adds motion to a post that already works, with no video editing.<\/li>\n\n\n\n<li><strong>Post carousels as PDFs on LinkedIn.<\/strong> Document posts invite swiping, which keeps people on your post longer.<\/li>\n\n\n\n<li><strong>Back up monthly.<\/strong> Export your designs from the Import \/ Export tab so a browser clean-up never costs you a month of work.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Are these social media templates really free?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. All 24 templates and every feature, including video, PDF, bulk creation and HTML export, are free for personal and commercial use, with no sign-up and no watermark.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is this a good free Canva alternative?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For quick, branded social posts, yes. You don&#8217;t get Canva&#8217;s drag-anything canvas or stock library, but you do get designs that re-flow to six sizes, text that always fits, real HTML you can reuse, animated video, bulk creation from CSV, and complete privacy without an account.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make an Instagram Reel from a template?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open a template, switch the size to Story \/ Reel (1080\u00d71920), pick an animation and a length of 4, 6 or 8 seconds in the panel&#8217;s Export section, then choose Animated video in the Export menu. Upload the MP4 as a Reel and add music in Instagram.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I create a LinkedIn carousel (PDF document post)?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open a Carousel Slides template, add and edit your slides in the Carousel Builder, then choose Carousel as PDF in the Export menu. In LinkedIn, start a post, choose &#8220;Add a document&#8221; and upload the PDF.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I use my own fonts?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Pick any of the 1,949 Google Fonts, or upload a WOFF2, WOFF, TTF or OTF file from the font picker. Uploaded fonts are embedded in your image, PDF and video exports and included in your backup file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where are my designs saved?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In your browser&#8217;s IndexedDB storage on the device you used. They aren&#8217;t uploaded anywhere. To move them or keep a copy, use Export designs in the Import \/ Export tab and import the file elsewhere.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Will my brand kit change my designs automatically?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. The brand kit only applies when you click &#8220;Apply to this design&#8221;, and Undo reverts it. Your name and handle are shown in the platform mock-ups.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I generate posts automatically from data?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Without code, use Bulk create from CSV for up to 300 posts at a time. With code, download the template&#8217;s HTML and render it with Puppeteer or Playwright, replacing the text from your CMS, spreadsheet or API.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Which browsers are supported?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Any modern browser can edit and export images, PDFs and HTML. Video recording works in Chrome, Edge and other Chromium browsers (MP4), and in browsers that record WebM.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Start designing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <a href=\"https:\/\/webdevpuneet.com\/social-post-templates\/\">Social Post Templates gallery<\/a>, pick a design and make your first post in a couple of minutes. Need emails that match? The <a href=\"https:\/\/webdevpuneet.com\/email-templates\/\">free HTML email templates<\/a> use the same brand kit, saving and backup features, and <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/\">UI Snippets<\/a> has more than 2,000 free HTML and CSS components for your website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Posting on social media every week means making a lot of images: a quote on Monday, a product launch on Wednesday, a webinar reminder on Friday, and a Story for each one. Design apps make this easy but lock your work inside their editor, add watermarks to free plans, or ask you to sign up [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"24 free social media post templates for Instagram, LinkedIn, X and Pinterest. Edit in your browser, add your brand, then export PNG, MP4 video, PDF or HTML.","jetpack_seo_html_title":"Free Social Media Post Templates: Edit, Animate, Export\n","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Create stunning social media posts without expensive design tools.\n\nExplore 24 free HTML social media post templates for Instagram, LinkedIn, X and Pinterest.\n\nCustomize colors, text, layouts and branding directly in your browser. Add animations and export your designs as PNG images, MP4 videos, PDFs or HTML.\n\nPerfect for developers, creators, freelancers and marketers who want more control over their social media designs.\n\nNo complicated software. Just edit, customize and export.\n\nExplore the free templates: \n\n#WebDevelopment #SocialMedia #HTML #CSS #FreeTools\n","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[11],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-2J","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/10\/social-post-templates.png?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":171,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions\/171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/170"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}