CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-placeholder-focus="false"><head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="HandheldFriendly" content="True"> <link rel="alternate" type="application/rss+xml" title="WordPress.com Blog" href="https://wordpress.com/blog/feed/" /> <meta name="msapplication-TileImage" content="/wp-content/themes/h4/tabs/images/wpcom-logo-144.png"/> <meta name="msapplication-TileColor" content="#0074a2"/> <meta name="application-name" content="WordPress.com"/> <meta name="msApplication-PackageFamilyName" content="AutomatticInc.WordPress.com_9ejavqh8rasr8"/> <meta name="msApplication-ID" content="App"/> <meta name=“google-site-verification” content=“Q9OTgmFGvbuu-bnRYsyoA-MXgythlBvu6gZJry9XxMA” /> <meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" /> <link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com" /> <title>11 Website Layout Examples for Every Type of Page</title> <meta name='robots' content='max-image-preview:large' /> <meta name="google-site-verification" content="Q9OTgmFGvbuu-bnRYsyoA-MXgythlBvu6gZJry9XxMA" /> <link rel='dns-prefetch' href='//s2.wp.com' /> <link rel='dns-prefetch' href='//s0.wp.com' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//s1.wp.com' /> <link rel='dns-prefetch' href='//platform.twitter.com' /> <link rel='dns-prefetch' href='//widgets.wp.com' /> <link rel="alternate" type="application/rss+xml" title="WordPress.com News » 11 Website Layout Examples for Every Type of Page Comments Feed" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } } /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/s2.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1719498190i&ver=6.8-alpha-59438"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <link crossorigin='anonymous' rel='stylesheet' id='all-css-0-1' href='https://s1.wp.com/wp-content/mu-plugins/likes/jetpack-likes.css?m=1717404074i&cssminify=yes' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-1' href='https://s1.wp.com/_static/??-eJylzFsKgCAQQNENpYOUSR/RWtIGs0YLH4W7L9pCn5cLB+6TmSNkDBlOKtaFBLa8qTHa90SESwy85x3o4mgBTYfZGTkd51gh5UrITUoN/IPyiv6DJj8K1YpBdkrI7QEqmThp&cssminify=yes' type='text/css' media='all' /> <style id='wp-block-library-inline-css'> .has-text-align-justify { text-align:justify; } .has-text-align-justify{text-align:justify;} </style> <style id='wp-parsely-recommendations-style-inline-css'> .parsely-recommendations-list-title{font-size:1.2em}.parsely-recommendations-list{list-style:none;padding:unset}.parsely-recommendations-cardbody{overflow:hidden;padding:.8em;text-overflow:ellipsis;white-space:nowrap}.parsely-recommendations-cardmedia{padding:.8em .8em 0} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-4-1' href='https://s1.wp.com/_static/??-eJyVzDEOgCAMQNELiQU1Jg7Gs2AlDYpAaInx9ro5O/7hfbiywhTFRYEcKvnIQPXN1RVSa0h4MOxOssVDBXunKoqK34DlDq5F5gb+LIoVH4k/vpyzGYe+03oyw/4AcmU1KQ==&cssminify=yes' type='text/css' media='all' /> <link crossorigin='anonymous' rel='stylesheet' id='all-css-6-1' href='https://s2.wp.com/_static/??-eJzTLy/QzcxLzilNSS3WzyrWz01NyUxMzUnNTc0rQeEU5CRWphbp5qSmJyZX6uVm5uklFxfr6OPTDpRD5sM02efaGpoZmFkYGRuZGmQBAHPvL0Y=&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-8-1' href='https://s2.wp.com/_static/??-eJx9jEEOAiEQBD/kQECjeDC+ZWEnijIwYWA3/l72op689KFTVXplCCU3zE1z6reYRYfiUwlP0VYZpwxIJE4IFRd10HOU9iFA2iuhCiI7/ROiDt9WxfETT20jCOc4YUIa2D9t5eGA91xRBMZS7ATtPkTZvCtdzNEZt7f2fHq8Afl7R7w=&cssminify=yes' type='text/css' media='all' /> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #FFFFFF;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--primary-light: #CDE4F2;--wp--preset--color--primary: #3858E9;--wp--preset--color--primary-dark: #0675C4;--wp--preset--color--midnight-blue: #001623;--wp--preset--color--light-gray: #F2F2F2;--wp--preset--color--lighter-gray: #F6F7F7;--wp--preset--color--dark-gray: #2C3338;--wp--preset--color--darker-gray: #101517;--wp--preset--color--light-gray-muted: #8C8F94;--wp--preset--color--gray: #646970;--wp--preset--color--dark-gray-muted: #1E1E1E;--wp--preset--color--dark-gray-deep: #2D3133;--wp--preset--color--base: #FFFFFF;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.664), 20px);--wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.544), 36px);--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 1.879), 42px);--wp--preset--font-size--emphasize: clamp(16.834px, 1.052rem + ((1vw - 3.2px) * 1.014), 26px);--wp--preset--font-size--quote-large: clamp(1.185rem, 1.185rem + ((1vw - 0.2rem) * 1.221), 1.875rem);--wp--preset--font-size--xx-large: clamp(1.802rem, 1.802rem + ((1vw - 0.2rem) * 2.342), 3.125rem);--wp--preset--font-size--xxx-large: clamp(2.364rem, 2.364rem + ((1vw - 0.2rem) * 3.559), 4.375rem);--wp--preset--font-size--heading-1: clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 2.94), 60px);--wp--preset--font-family--albert-sans: 'Albert Sans', sans-serif;--wp--preset--font-family--alegreya: Alegreya, serif;--wp--preset--font-family--arvo: Arvo, serif;--wp--preset--font-family--bodoni-moda: 'Bodoni Moda', serif;--wp--preset--font-family--bricolage-grotesque: 'Bricolage Grotesque', sans-serif;--wp--preset--font-family--cabin: Cabin, sans-serif;--wp--preset--font-family--chivo: Chivo, sans-serif;--wp--preset--font-family--commissioner: Commissioner, sans-serif;--wp--preset--font-family--cormorant: Cormorant, serif;--wp--preset--font-family--courier-prime: 'Courier Prime', monospace;--wp--preset--font-family--crimson-pro: 'Crimson Pro', serif;--wp--preset--font-family--dm-mono: 'DM Mono', monospace;--wp--preset--font-family--dm-sans: 'DM Sans', sans-serif;--wp--preset--font-family--dm-serif-display: 'DM Serif Display', serif;--wp--preset--font-family--domine: Domine, serif;--wp--preset--font-family--eb-garamond: 'EB Garamond', serif;--wp--preset--font-family--epilogue: Epilogue, sans-serif;--wp--preset--font-family--fahkwang: Fahkwang, sans-serif;--wp--preset--font-family--figtree: Figtree, sans-serif;--wp--preset--font-family--fira-sans: 'Fira Sans', sans-serif;--wp--preset--font-family--fjalla-one: 'Fjalla One', sans-serif;--wp--preset--font-family--fraunces: Fraunces, serif;--wp--preset--font-family--gabarito: Gabarito, system-ui;--wp--preset--font-family--ibm-plex-mono: 'IBM Plex Mono', monospace;--wp--preset--font-family--ibm-plex-sans: 'IBM Plex Sans', sans-serif;--wp--preset--font-family--ibarra-real-nova: 'Ibarra Real Nova', serif;--wp--preset--font-family--instrument-serif: 'Instrument Serif', serif;--wp--preset--font-family--inter: Inter, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;--wp--preset--font-family--josefin-sans: 'Josefin Sans', sans-serif;--wp--preset--font-family--jost: Jost, sans-serif;--wp--preset--font-family--libre-baskerville: 'Libre Baskerville', serif;--wp--preset--font-family--libre-franklin: 'Libre Franklin', sans-serif;--wp--preset--font-family--literata: Literata, serif;--wp--preset--font-family--lora: Lora, serif;--wp--preset--font-family--merriweather: Merriweather, serif;--wp--preset--font-family--montserrat: Montserrat, sans-serif;--wp--preset--font-family--newsreader: Newsreader, serif;--wp--preset--font-family--noto-sans-mono: 'Noto Sans Mono', sans-serif;--wp--preset--font-family--nunito: Nunito, sans-serif;--wp--preset--font-family--open-sans: 'Open Sans', sans-serif;--wp--preset--font-family--overpass: Overpass, sans-serif;--wp--preset--font-family--pt-serif: 'PT Serif', serif;--wp--preset--font-family--petrona: Petrona, serif;--wp--preset--font-family--piazzolla: Piazzolla, serif;--wp--preset--font-family--playfair-display: 'Playfair Display', serif;--wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;--wp--preset--font-family--poppins: Poppins, sans-serif;--wp--preset--font-family--raleway: Raleway, sans-serif;--wp--preset--font-family--roboto: Roboto, sans-serif;--wp--preset--font-family--roboto-slab: 'Roboto Slab', serif;--wp--preset--font-family--rubik: Rubik, sans-serif;--wp--preset--font-family--rufina: Rufina, serif;--wp--preset--font-family--sora: Sora, sans-serif;--wp--preset--font-family--source-sans-3: 'Source Sans 3', sans-serif;--wp--preset--font-family--source-serif-4: 'Source Serif 4', serif;--wp--preset--font-family--space-mono: 'Space Mono', monospace;--wp--preset--font-family--syne: Syne, sans-serif;--wp--preset--font-family--texturina: Texturina, serif;--wp--preset--font-family--urbanist: Urbanist, sans-serif;--wp--preset--font-family--work-sans: 'Work Sans', sans-serif;--wp--preset--font-family--recoleta: Recoleta, Georgia, serif;--wp--preset--font-family--sf-pro-display: SF Pro Display, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:root { --wp--style--global--content-size: 808px;--wp--style--global--wide-size: 1224px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--midnight-blue);font-family: var(--wp--preset--font-family--inter);font-size: var(--wp--preset--font-size--medium);font-style: normal;font-weight: 400;line-height: 1.55;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 0px;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 0px;}a:where(:not(.wp-element-button)){color: var(--wp--preset--color--contrast);text-decoration: underline;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{font-family: var(--wp--preset--font-family--inter);font-weight: 400;line-height: 1.2;}h1{font-family: var(--wp--preset--font-family--recoleta);font-size: var(--wp--preset--font-size--heading-1);font-weight: var(--wp--preset--font-weight--regular);letter-spacing: var(--wp--preset--letter-spacing--heading-1);line-height: 64px;}h2{font-family: var(--wp--preset--font-family--inter);font-size: var(--wp--preset--font-size--xx-large);line-height: var(--wp--preset--line-height--heading-lg);}h3{font-family: var(--wp--preset--font-family--inter);font-size: var(--wp--preset--font-size--x-large);line-height: var(--wp--preset--line-height--heading-lg);}h4{font-family: var(--wp--preset--font-family--inter);font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem);}h5{font-family: var(--wp--preset--font-family--inter);font-size: var(--wp--preset--font-size--medium);}h6{font-family: var(--wp--preset--font-family--inter);font-size: var(--wp--preset--font-size--small);}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-radius: .33rem;border-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: inherit;font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.221), 1rem);font-style: normal;font-weight: 500;line-height: 1.5rem;padding-top: 0.8rem;padding-right: 2.2rem;padding-bottom: 0.8rem;padding-left: 2.2rem;text-decoration: none;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: var(--wp--preset--color--contrast-2);border-color: var(--wp--preset--color--contrast-2);color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){background-color: var(--wp--preset--color--contrast-2);border-color: var(--wp--preset--color--contrast-2);color: var(--wp--preset--color--base);outline-color: var(--wp--preset--color--contrast);outline-offset: 2px;outline-style: dotted;outline-width: 1px;}:root :where(.wp-element-button:active, .wp-block-button__link:active){background-color: var(--wp--preset--color--contrast);color: var(--wp--preset--color--base);}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-light-color{color: var(--wp--preset--color--primary-light) !important;}.has-primary-color{color: var(--wp--preset--color--primary) !important;}.has-primary-dark-color{color: var(--wp--preset--color--primary-dark) !important;}.has-midnight-blue-color{color: var(--wp--preset--color--midnight-blue) !important;}.has-light-gray-color{color: var(--wp--preset--color--light-gray) !important;}.has-lighter-gray-color{color: var(--wp--preset--color--lighter-gray) !important;}.has-dark-gray-color{color: var(--wp--preset--color--dark-gray) !important;}.has-darker-gray-color{color: var(--wp--preset--color--darker-gray) !important;}.has-light-gray-muted-color{color: var(--wp--preset--color--light-gray-muted) !important;}.has-gray-color{color: var(--wp--preset--color--gray) !important;}.has-dark-gray-muted-color{color: var(--wp--preset--color--dark-gray-muted) !important;}.has-dark-gray-deep-color{color: var(--wp--preset--color--dark-gray-deep) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-light-background-color{background-color: var(--wp--preset--color--primary-light) !important;}.has-primary-background-color{background-color: var(--wp--preset--color--primary) !important;}.has-primary-dark-background-color{background-color: var(--wp--preset--color--primary-dark) !important;}.has-midnight-blue-background-color{background-color: var(--wp--preset--color--midnight-blue) !important;}.has-light-gray-background-color{background-color: var(--wp--preset--color--light-gray) !important;}.has-lighter-gray-background-color{background-color: var(--wp--preset--color--lighter-gray) !important;}.has-dark-gray-background-color{background-color: var(--wp--preset--color--dark-gray) !important;}.has-darker-gray-background-color{background-color: var(--wp--preset--color--darker-gray) !important;}.has-light-gray-muted-background-color{background-color: var(--wp--preset--color--light-gray-muted) !important;}.has-gray-background-color{background-color: var(--wp--preset--color--gray) !important;}.has-dark-gray-muted-background-color{background-color: var(--wp--preset--color--dark-gray-muted) !important;}.has-dark-gray-deep-background-color{background-color: var(--wp--preset--color--dark-gray-deep) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-light-border-color{border-color: var(--wp--preset--color--primary-light) !important;}.has-primary-border-color{border-color: var(--wp--preset--color--primary) !important;}.has-primary-dark-border-color{border-color: var(--wp--preset--color--primary-dark) !important;}.has-midnight-blue-border-color{border-color: var(--wp--preset--color--midnight-blue) !important;}.has-light-gray-border-color{border-color: var(--wp--preset--color--light-gray) !important;}.has-lighter-gray-border-color{border-color: var(--wp--preset--color--lighter-gray) !important;}.has-dark-gray-border-color{border-color: var(--wp--preset--color--dark-gray) !important;}.has-darker-gray-border-color{border-color: var(--wp--preset--color--darker-gray) !important;}.has-light-gray-muted-border-color{border-color: var(--wp--preset--color--light-gray-muted) !important;}.has-gray-border-color{border-color: var(--wp--preset--color--gray) !important;}.has-dark-gray-muted-border-color{border-color: var(--wp--preset--color--dark-gray-muted) !important;}.has-dark-gray-deep-border-color{border-color: var(--wp--preset--color--dark-gray-deep) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-emphasize-font-size{font-size: var(--wp--preset--font-size--emphasize) !important;}.has-quote-large-font-size{font-size: var(--wp--preset--font-size--quote-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-xxx-large-font-size{font-size: var(--wp--preset--font-size--xxx-large) !important;}.has-heading-1-font-size{font-size: var(--wp--preset--font-size--heading-1) !important;}.has-albert-sans-font-family{font-family: var(--wp--preset--font-family--albert-sans) !important;}.has-alegreya-font-family{font-family: var(--wp--preset--font-family--alegreya) !important;}.has-arvo-font-family{font-family: var(--wp--preset--font-family--arvo) !important;}.has-bodoni-moda-font-family{font-family: var(--wp--preset--font-family--bodoni-moda) !important;}.has-bricolage-grotesque-font-family{font-family: var(--wp--preset--font-family--bricolage-grotesque) !important;}.has-cabin-font-family{font-family: var(--wp--preset--font-family--cabin) !important;}.has-chivo-font-family{font-family: var(--wp--preset--font-family--chivo) !important;}.has-commissioner-font-family{font-family: var(--wp--preset--font-family--commissioner) !important;}.has-cormorant-font-family{font-family: var(--wp--preset--font-family--cormorant) !important;}.has-courier-prime-font-family{font-family: var(--wp--preset--font-family--courier-prime) !important;}.has-crimson-pro-font-family{font-family: var(--wp--preset--font-family--crimson-pro) !important;}.has-dm-mono-font-family{font-family: var(--wp--preset--font-family--dm-mono) !important;}.has-dm-sans-font-family{font-family: var(--wp--preset--font-family--dm-sans) !important;}.has-dm-serif-display-font-family{font-family: var(--wp--preset--font-family--dm-serif-display) !important;}.has-domine-font-family{font-family: var(--wp--preset--font-family--domine) !important;}.has-eb-garamond-font-family{font-family: var(--wp--preset--font-family--eb-garamond) !important;}.has-epilogue-font-family{font-family: var(--wp--preset--font-family--epilogue) !important;}.has-fahkwang-font-family{font-family: var(--wp--preset--font-family--fahkwang) !important;}.has-figtree-font-family{font-family: var(--wp--preset--font-family--figtree) !important;}.has-fira-sans-font-family{font-family: var(--wp--preset--font-family--fira-sans) !important;}.has-fjalla-one-font-family{font-family: var(--wp--preset--font-family--fjalla-one) !important;}.has-fraunces-font-family{font-family: var(--wp--preset--font-family--fraunces) !important;}.has-gabarito-font-family{font-family: var(--wp--preset--font-family--gabarito) !important;}.has-ibm-plex-mono-font-family{font-family: var(--wp--preset--font-family--ibm-plex-mono) !important;}.has-ibm-plex-sans-font-family{font-family: var(--wp--preset--font-family--ibm-plex-sans) !important;}.has-ibarra-real-nova-font-family{font-family: var(--wp--preset--font-family--ibarra-real-nova) !important;}.has-instrument-serif-font-family{font-family: var(--wp--preset--font-family--instrument-serif) !important;}.has-inter-font-family{font-family: var(--wp--preset--font-family--inter) !important;}.has-josefin-sans-font-family{font-family: var(--wp--preset--font-family--josefin-sans) !important;}.has-jost-font-family{font-family: var(--wp--preset--font-family--jost) !important;}.has-libre-baskerville-font-family{font-family: var(--wp--preset--font-family--libre-baskerville) !important;}.has-libre-franklin-font-family{font-family: var(--wp--preset--font-family--libre-franklin) !important;}.has-literata-font-family{font-family: var(--wp--preset--font-family--literata) !important;}.has-lora-font-family{font-family: var(--wp--preset--font-family--lora) !important;}.has-merriweather-font-family{font-family: var(--wp--preset--font-family--merriweather) !important;}.has-montserrat-font-family{font-family: var(--wp--preset--font-family--montserrat) !important;}.has-newsreader-font-family{font-family: var(--wp--preset--font-family--newsreader) !important;}.has-noto-sans-mono-font-family{font-family: var(--wp--preset--font-family--noto-sans-mono) !important;}.has-nunito-font-family{font-family: var(--wp--preset--font-family--nunito) !important;}.has-open-sans-font-family{font-family: var(--wp--preset--font-family--open-sans) !important;}.has-overpass-font-family{font-family: var(--wp--preset--font-family--overpass) !important;}.has-pt-serif-font-family{font-family: var(--wp--preset--font-family--pt-serif) !important;}.has-petrona-font-family{font-family: var(--wp--preset--font-family--petrona) !important;}.has-piazzolla-font-family{font-family: var(--wp--preset--font-family--piazzolla) !important;}.has-playfair-display-font-family{font-family: var(--wp--preset--font-family--playfair-display) !important;}.has-plus-jakarta-sans-font-family{font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;}.has-poppins-font-family{font-family: var(--wp--preset--font-family--poppins) !important;}.has-raleway-font-family{font-family: var(--wp--preset--font-family--raleway) !important;}.has-roboto-font-family{font-family: var(--wp--preset--font-family--roboto) !important;}.has-roboto-slab-font-family{font-family: var(--wp--preset--font-family--roboto-slab) !important;}.has-rubik-font-family{font-family: var(--wp--preset--font-family--rubik) !important;}.has-rufina-font-family{font-family: var(--wp--preset--font-family--rufina) !important;}.has-sora-font-family{font-family: var(--wp--preset--font-family--sora) !important;}.has-source-sans-3-font-family{font-family: var(--wp--preset--font-family--source-sans-3) !important;}.has-source-serif-4-font-family{font-family: var(--wp--preset--font-family--source-serif-4) !important;}.has-space-mono-font-family{font-family: var(--wp--preset--font-family--space-mono) !important;}.has-syne-font-family{font-family: var(--wp--preset--font-family--syne) !important;}.has-texturina-font-family{font-family: var(--wp--preset--font-family--texturina) !important;}.has-urbanist-font-family{font-family: var(--wp--preset--font-family--urbanist) !important;}.has-work-sans-font-family{font-family: var(--wp--preset--font-family--work-sans) !important;}.has-recoleta-font-family{font-family: var(--wp--preset--font-family--recoleta) !important;}.has-sf-pro-display-font-family{font-family: var(--wp--preset--font-family--sf-pro-display) !important;} :root :where(.wp-block-pullquote){font-size: clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.913), 1.5em);line-height: 1.6;} :root :where(p){font-family: var(--wp--preset--font-family--inter);font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.664), 20px);font-weight: 400;line-height: 30px;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-10-1' href='https://s0.wp.com/wp-content/mu-plugins/jetpack-mu-wpcom-plugin/sun/vendor/automattic/jetpack-mu-wpcom/src/build/verbum-comments/verbum-comments.css?m=1729061509i&cssminify=yes' type='text/css' media='all' /> <link rel='stylesheet' id='verbum-gutenberg-css-css' href='https://widgets.wp.com/verbum-block-editor/block-editor.css?ver=1721244820' media='all' /> <link crossorigin='anonymous' rel='stylesheet' id='all-css-12-1' href='https://s1.wp.com/_static/??-eJyVkN0OwiAMhV9IZOLMvDE+C2MMcYWS0c349rL5N11m4k3Tc9rvpMAvgSn0pD1x17EAnbE+coXOJYuBbXRS8ctZJ2fFLfdINtHx1dwHk0w6aZcS5F4ltwQ0TGQi52VnoRpzI11Bs7HO4Oc1IH0VpGoemJf9f0CNSLpdYBYuDBhptjv5oVYPu6k14zPe8hdkNDJAJcmi/xCsBmnbAT26w6bYCpHtiiw/3wDVB5ko&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-global-styles-frontend-style-inline-css'> :root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-14-1' href='https://s0.wp.com/_static/??-eJyNjcsKQjEMBX/ImlsQry7ET5GahrbXNCmmRfx7H7gRN+7OwGEGbs2hSifpUIdrPFIRg4V6C3j5MNgQqBoHk4HlcKUYYry/Z5G0RrMV/C06FUEwxRLYsSa1L/iR9Uz1mc0bSKznwK/DsR787Kd5P/ntbnkAuNBIYA==&cssminify=yes' type='text/css' media='all' /> <script type="text/javascript" id="jetpack-mu-wpcom-settings-js-before"> /* <![CDATA[ */ var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/s1.wp.com\/wp-content\/mu-plugins\/jetpack-mu-wpcom-plugin\/sun\/vendor\/automattic\/jetpack-mu-wpcom\/src\/build\/"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/_static/??/wp-content/js/rlt-proxy.js,/wp-includes/js/dist/vendor/wp-polyfill.min.js?m=1727178113j'></script> <script type="text/javascript" id="rlt-proxy-js-after"> /* <![CDATA[ */ rltInitialize( {"token":null,"iframeOrigins":["https:\/\/widgets.wp.com"]} ); /* ]]> */ </script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/hooks/index.min.js?m=1731954715i&ver=84e753e2b66eb7028d38" id="wp-hooks-js"></script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/i18n/index.min.js?m=1731954715i&ver=bd5a2533e717a1043151" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??-eJyFykEKgCAQQNELZUNCSYvoLKYiYzpZOkW3r0X74MPfPLiyMBtVRxVyZI9UIGqyWZsVFsZogfTZhtLAK5FMZOsKhLed3XF/axPSLxIJ/aGr+/Ccpk7JcVCd7GV4AOJxMeg='></script> <script type="text/javascript" src="https://platform.twitter.com/widgets.js" id="twitter-widgets-js"></script> <script type="text/javascript" id="wpcom-actionbar-placeholder-js-extra"> /* <![CDATA[ */ var actionbardata = {"siteID":"3584907","postID":"71849","siteURL":"https:\/\/wordpress.com\/blog","xhrURL":"https:\/\/wordpress.com\/wp-admin\/admin-ajax.php","nonce":"08eaa18b4b","isLoggedIn":"","statusMessage":"","subsEmailDefault":"instantly","proxyScriptUrl":"https:\/\/s0.wp.com\/wp-content\/js\/wpcom-proxy-request.js?ver=20211021","shortlink":"https:\/\/wp.me\/pf2B5-iGR","i18n":{"followedText":"New posts from this site will now appear in your <a href=\"https:\/\/wordpress.com\/read\">Reader<\/a>","foldBar":"Collapse this bar","unfoldBar":"Expand this bar"}}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??/wp-content/plugins/landpack/build/nav.js,/wp-content/plugins/landpack/build/block-client-script-footer-section.js?m=1729671252j'></script> <script type="text/javascript" id="landpack-nav-script-js-after"> /* <![CDATA[ */ document.addEventListener("DOMContentLoaded", () => { const API_GEO_ENDPOINT = 'https://public-api.wordpress.com/geo/'; const FCCA_LINK_SELECTOR = '.lp-footer-stack [data-is-fcca]'; function fetchGeoData() { return fetch( API_GEO_ENDPOINT ).then( res => res.json() ); } function removeLink( selector, condition ) { document.querySelectorAll( selector ).forEach( element => { const parent = element.parentNode; const parentTagName = parent.tagName.toLowerCase(); if ( condition ) { (parentTagName === 'li' ? parent : element).remove(); } }); } /** * Checks if the given data pertains to the specified region or country * @param {string} key - The key to check in the data * @param {string} name - The region or country name to check for * @param {object} data - The geolocation data * @returns {boolean} - True if the data pertains to the specified region or country */ function pertainsTo( key, name, data ) { if ( data && data[ key ] && name ) { return data[ key ].toLowerCase() === name.toLowerCase(); } return false; } fetchGeoData().then(data => { const isFCCA = pertainsTo( 'country_long', 'germany', data ); removeLink( FCCA_LINK_SELECTOR, ! isFCCA ); }); }); /* ]]> */ </script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://en.blog.wordpress.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress.com" /> <link rel='shortlink' href='https://wp.me/pf2B5-iGR' /> <style> @font-face { font-family: Recoleta; font-display: swap; src: url('https://s1.wp.com/i/fonts/recoleta/400.woff2') } </style> <link rel="alternate" type="application/json+oembed" href="https://public-api.wordpress.com/oembed/?format=json&url=https%3A%2F%2Fen.blog.wordpress.com%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F&for=wpcom-auto-discovery" /><link rel="alternate" type="application/xml+oembed" href="https://public-api.wordpress.com/oembed/?format=xml&url=https%3A%2F%2Fen.blog.wordpress.com%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F&for=wpcom-auto-discovery" />  <meta property="og:type" content="article" /> <meta property="og:title" content="11 Website Layout Examples for Every Type of Page" /> <meta property="og:url" content="https://wordpress.com/blog/2024/11/14/website-layout-examples/" /> <meta property="og:description" content="See 11 real-world examples of different types of website layouts that you can use to inspire your own page designs. Then, learn how to implement them." /> <meta property="article:published_time" content="2024-11-14T15:00:00+00:00" /> <meta property="article:modified_time" content="2024-11-14T11:51:54+00:00" /> <meta property="og:site_name" content="WordPress.com News" /> <meta property="og:image" content="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=1200" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="420" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta property="article:publisher" content="https://www.facebook.com/WordPresscom" /> <meta name="twitter:site" content="@wordpressdotcom" /> <meta name="twitter:text:title" content="11 Website Layout Examples for Every Type of Page" /> <meta name="twitter:image" content="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=640" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:app:name:iphone" content="Jetpack" /> <meta name="twitter:app:id:iphone" content="1565481562" /> <meta name="twitter:app:name:ipad" content="Jetpack" /> <meta name="twitter:app:id:ipad" content="1565481562" /> <meta name="twitter:app:name:googleplay" content="Jetpack" /> <meta name="twitter:app:id:googleplay" content="com.jetpack.android" /> <meta name="twitter:app:url:iphone" content="wordpress://viewpost?blogId=3584907&postId=71849" /> <meta name="twitter:app:url:ipad" content="wordpress://viewpost?blogId=3584907&postId=71849" /> <meta name="twitter:app:url:googleplay" content="wordpress://viewpost?blogId=3584907&postId=71849" />  <link rel='openid.server' href='https://wordpress.com/blog/?openidserver=1' /> <link rel='openid.delegate' href='https://wordpress.com/blog/' /> <link rel="search" type="application/opensearchdescription+xml" href="https://wordpress.com/blog/osd.xml" title="WordPress.com News" /> <link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com" /> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"NewsArticle","mainEntityOfPage":{"@type":"WebPage","@id":"http:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/"},"headline":"11 Website Layout Examples for Every Type of Page","url":"http:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/","thumbnailUrl":"https:\/\/en-blog.files.wordpress.com\/2024\/11\/website-layout-blog-header.jpg?w=150","image":{"@type":"ImageObject","url":"https:\/\/en-blog.files.wordpress.com\/2024\/11\/website-layout-blog-header.jpg"},"dateCreated":"2024-11-14T15:00:00Z","datePublished":"2024-11-14T15:00:00Z","dateModified":"2024-11-14T15:00:00Z","articleSection":"Tips and Tutorials","author":[{"@type":"Person","name":"Nick Sch\u00e4ferhoff"}],"creator":["Nick Sch\u00e4ferhoff"],"publisher":{"@type":"Organization","name":"WordPress.com News","logo":""},"keywords":[]}</script> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"> <link rel="shortcut icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"> <link rel="icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32"> <link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-64x64.png" sizes="64x64"> <link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="apple-touch-icon" sizes="57x57" href="//s1.wp.com/i/favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="//s1.wp.com/i/favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="//s1.wp.com/i/favicons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="//s1.wp.com/i/favicons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="//s1.wp.com/i/favicons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="//s1.wp.com/i/favicons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="//s1.wp.com/i/favicons/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="//s1.wp.com/i/favicons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="//s1.wp.com/i/favicons/apple-touch-icon-180x180.png"> <link rel="preload" href="https://s1.wp.com/i/fonts/recoleta/400.woff2" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="canonical" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/" /> <script type="application/ld+json"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"Corporation","@id":"https:\/\/automattic.com\/#organization","url":"https:\/\/automattic.com\/","name":"Automattic","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"We don\u2019t make software for free, we make it for freedom.","description":"We are the people behind <a href=\"https:\/\/wordpress.com\/\">WordPress.com<\/a>, <a href=\"https:\/\/woocommerce.com\/\">WooCommerce<\/a>, <a href=\"https:\/\/jetpack.com\/\">Jetpack<\/a>, <a href=\"https:\/\/simplenote.com\/\">Simplenote<\/a>, <a href=\"https:\/\/longreads.com\/\">Longreads<\/a>, <a href=\"https:\/\/vaultpress.com\/\">VaultPress<\/a>, <a href=\"https:\/\/akismet.com\/\">Akismet<\/a>, <a href=\"https:\/\/gravatar.com\/\">Gravatar<\/a>, <a href=\"\">Crowdsignal<\/a>, <a href=\"https:\/\/cloudup.com\/\">Cloudup<\/a>, and more. We believe in making the web a better place, and <a href=\"https:\/\/github.com\/Automattic\">we believe in Open Source<\/a>. The vast majority of our work is available under the GPL.","logo":{"@type":"ImageObject","@id":"https:\/\/automattic.com\/#logo","url":"https:\/\/automattic.com\/wp-content\/themes\/a8c\/automattic-2011\/images\/automattic-logo-2x.png","width":552,"height":60,"caption":"Automattic"},"image":{"@id":"https:\/\/automattic.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=retro","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1727,"sameAs":["https:\/\/twitter.com\/automattic","https:\/\/www.facebook.com\/AutomatticInc","https:\/\/www.linkedin.com\/company\/automattic\/","https:\/\/en.wikipedia.org\/wiki\/Automattic","https:\/\/www.youtube.com\/c\/automattic"],"subOrganization":{"@id":"https:\/\/wordpress.com\/#organization"}},{"@type":"Organization","@id":"https:\/\/wordpress.com\/#organization","url":"https:\/\/wordpress.com\/","name":"WordPress.com","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"Build a website, build a movement.","description":"Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes. Free hosting and support.","logo":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/#logo","url":"https:\/\/s1.wp.com\/home.logged-out\/images\/wpcom-a-website-that-can.jpg","width":1024,"height":512,"caption":"WordPress.com"},"image":{"@id":"https:\/\/wordpress.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=retro","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1727,"sameAs":["https:\/\/twitter.com\/wordpressdotcom","https:\/\/www.facebook.com\/WordPresscom","https:\/\/www.instagram.com\/wordpressdotcom\/","https:\/\/www.linkedin.com\/company\/wordpress","https:\/\/www.youtube.com\/WordPressdotcom","https:\/\/www.pinterest.com\/wordpressdotcom\/","https:\/\/en.wikipedia.org\/wiki\/WordPress.com"],"parentOrganization":{"@id":"https:\/\/automattic.com\/#organization"}},{"@type":"WebSite","@id":"https:\/\/wordpress.com\/blog\/#website","url":"https:\/\/wordpress.com\/blog\/","name":"WordPress.com News","description":"The latest news on WordPress.com and the WordPress community.","potentialAction":{"@type":"SearchAction","target":"https:\/\/wordpress.com\/blog\/search\/{search_term_string}\/","query-input":"required name=search_term_string"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"}},{"@type":"BreadcrumbList","@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"item":{"@type":"WebSite","@id":"https:\/\/wordpress.com\/blog\/#website-breadcrumb","url":"https:\/\/wordpress.com\/blog\/","name":"Home"}},{"@type":"ListItem","position":1,"item":{"@type":"CollectionPage","@id":"https:\/\/wordpress.com\/blog\/category\/tips-and-tutorials\/#term-breadcrumb","url":"https:\/\/wordpress.com\/blog\/category\/tips-and-tutorials\/","name":"Tips and Tutorials"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#webpage-breadcrumb","url":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/","name":"11 Website Layout Examples for Every Type of Page"}}]},{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#primaryimage","url":"https:\/\/en-blog.files.wordpress.com\/2023\/05\/image-7.png?w=1200","width":1200,"height":467,"caption":"11 Website Layout Examples for Every Type of Page"},{"@type":"WebPage","@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#webpage","url":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/","name":"11 Website Layout Examples for Every Type of Page","description":"The latest news on WordPress.com and the WordPress community.","inLanguage":"en","isPartOf":{"@id":"https:\/\/wordpress.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#primaryimage"},"breadcrumb":{"@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#breadcrumbs"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"},"datePublished":"2024-11-14T15:00:00+0000","dateModified":"2024-11-14T11:51:54+0000"},{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#person","name":"Nick Sch\u00e4ferhoff","description":"Nick Sch\u00e4ferhoff is writer, entrepreneur, and online marketer. He has been building websites and writing about digital marketing for more than a decade. Outside of work, you can most often find him at the gym, the dojo, or traveling with his wife. Get in touch with him via nickschaeferhoff.com.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/5f069a6cacb95c3811aa06a1884d3a5d?s=96&d=retro","width":96,"height":96,"caption":"Nick Sch\u00e4ferhoff"}},{"@type":"Article","@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#article","headline":"11 Website Layout Examples for Every Type of Page","commentCount":2,"keywords":"tips and tutorials","datePublished":"2024-11-14T15:00:00+0000","dateModified":"2024-11-14T11:51:54+0000","mainEntityOfPage":{"@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#webpage"},"isPartOf":{"@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#webpage"},"image":{"@id":"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/#primaryimage"},"publisher":{"@id":"https:\/\/wordpress.com\/#organization"},"author":{"@id":"https:\/\/wordpress.com\/schema.org\/author\/54604352#person"}}]} </script> <meta name="application-name" content="WordPress.com News" /><meta name="msapplication-window" content="width=device-width;height=device-height" /><meta name="msapplication-tooltip" content="The latest news on WordPress.com and the WordPress community." /><meta name="description" content="See 11 real-world examples of different types of website layouts that you can use to inspire your own page designs. Then, learn how to implement them." /> <style class='wp-fonts-local' type='text/css'> @font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyfMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:fallback;src:url('https://fonts.wp.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYMZ1rib2Bg-4.woff2') format('woff2');} @font-face{font-family:Recoleta;font-style:medium;font-weight:400;font-display:fallback;src:url('https://s0.wp.com/i/fonts/recoleta/400.woff2') format('woff2');} </style> </head> <body class="post-template-default single single-post postid-71849 single-format-standard wp-embed-responsive jps-theme-a8c/wpblog-2024 customizer-styles-applied wpcomblog admin-bar-hidden jetpack-reblog-enabled"> <div class="wpblog__main-container"> <div id="wpblog-category-menu-overlay" style="display: none"></div>  <header class="header"> <nav class="x-wpcom-global-nav x-nav" aria-label="WordPress.com"> <ul class="x-nav-list"> <li class="x-nav-item lpc x-nav--logo"> <a role="menuitem" class="x-nav-link x-nav-link--logo x-link" href="https://wordpress.com/"> <svg class="x-icon x-icon--logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 36" role="presentation" aria-label="WordPress.com logo"><path d="M52.84 12.9c1.08 0 2 .24 2.8.71.78.47 1.4 1.14 1.82 1.99.44.85.65 1.84.65 2.97 0 1.13-.21 2.12-.65 2.97a4.78 4.78 0 0 1-1.83 1.97 5.3 5.3 0 0 1-2.79.7c-1.07 0-2-.23-2.79-.7a4.77 4.77 0 0 1-1.83-1.97 6.44 6.44 0 0 1-.64-2.97c0-1.13.21-2.13.64-2.97a4.77 4.77 0 0 1 1.83-1.99c.79-.47 1.72-.7 2.8-.7ZM31.37 9.4l2.65 10.73h.13L36.97 9.4h2.6l2.83 10.74h.13L45.17 9.4h2.85L43.9 24h-2.62l-2.94-10.25h-.11L35.28 24h-2.62L28.52 9.4h2.85Zm21.49 5.55c-.6 0-1.1.16-1.49.49a2.9 2.9 0 0 0-.88 1.3 5.4 5.4 0 0 0-.29 1.82c0 .67.1 1.27.3 1.81.18.54.48.97.87 1.3.4.32.9.48 1.49.48.58 0 1.07-.16 1.46-.48.39-.33.68-.76.88-1.3a5.4 5.4 0 0 0 .29-1.8c0-.68-.1-1.29-.3-1.83a2.88 2.88 0 0 0-.87-1.3c-.4-.33-.87-.49-1.46-.49ZM64.7 12.9a2.75 2.75 0 0 0-2.7 1.98h-.12v-1.83h-2.5v10.96h2.58v-6.44a2.27 2.27 0 0 1 1.2-2.07c.39-.2.81-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm8.95 1.96h-.1a4.93 4.93 0 0 0-.57-.85c-.24-.3-.57-.56-.99-.78a3.44 3.44 0 0 0-1.59-.32 4.24 4.24 0 0 0-3.93 2.55 7.1 7.1 0 0 0-.6 3.08c0 1.22.2 2.22.59 3.06a4.16 4.16 0 0 0 3.94 2.59 3.16 3.16 0 0 0 2.57-1.07c.25-.3.44-.58.58-.84h.15V24h2.55V9.4h-2.6v5.46Zm-.25 5.53c-.2.53-.5.95-.88 1.24-.38.3-.85.45-1.4.45-.55 0-1.04-.15-1.43-.46-.4-.3-.69-.73-.88-1.26-.2-.54-.3-1.15-.3-1.83 0-.69.1-1.28.3-1.81.19-.53.48-.94.87-1.24.38-.3.87-.45 1.44-.45.58 0 1.03.15 1.42.43.38.3.67.7.87 1.22.2.53.3 1.14.3 1.85 0 .7-.1 1.33-.3 1.86Zm13.24-10.36a5.87 5.87 0 0 0-2.84-.63h-5.5V24h2.66v-4.93h2.8c1.13 0 2.08-.2 2.86-.63a4.23 4.23 0 0 0 1.75-1.71c.4-.73.6-1.56.6-2.5s-.2-1.75-.6-2.48a4.22 4.22 0 0 0-1.73-1.72Zm-.68 5.58c-.2.4-.52.71-.93.94-.43.23-.96.34-1.62.34h-2.45v-5.28h2.43c.67 0 1.21.11 1.63.33.42.22.74.53.94.92.2.4.3.85.3 1.37 0 .53-.1.98-.3 1.38Zm9.39-2.71a2.75 2.75 0 0 0-2.71 1.98h-.12v-1.83h-2.51v10.96h2.59v-6.44a2.27 2.27 0 0 1 1.2-2.07c.38-.2.8-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm9.81 1.33c-.47-.45-1-.78-1.6-1a5.68 5.68 0 0 0-4.66.4 4.87 4.87 0 0 0-1.82 2 6.49 6.49 0 0 0-.65 2.96c0 1.13.22 2.14.65 2.99a4.62 4.62 0 0 0 1.84 1.95c.8.46 1.75.69 2.85.69.85 0 1.61-.13 2.28-.39a4.2 4.2 0 0 0 1.63-1.1c.43-.47.72-1.02.87-1.66l-2.42-.27a2 2 0 0 1-.5.78 2.56 2.56 0 0 1-1.82.63 2.9 2.9 0 0 1-1.48-.36 2.46 2.46 0 0 1-.98-1.04 3.5 3.5 0 0 1-.35-1.57h7.66v-.8c0-.96-.13-1.78-.4-2.48a4.71 4.71 0 0 0-1.1-1.72Zm-6.15 3.26c.03-.43.13-.83.33-1.2a2.57 2.57 0 0 1 2.34-1.37 2.34 2.34 0 0 1 2.18 1.25c.2.38.31.82.32 1.32h-5.17Zm14.65.27-1.87-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.36-.77c0-.37.18-.67.54-.9.37-.24.82-.36 1.36-.36.4 0 .74.07 1.02.2.27.13.5.3.66.5.16.21.28.44.35.67l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.05-.82 6.2 6.2 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.55 1.76c0 .8.25 1.46.75 1.98s1.29.89 2.34 1.1l1.88.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.19.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84.91 0 1.72-.15 2.43-.44.7-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.26-1.42-.77-1.9a4.76 4.76 0 0 0-2.32-1.07Zm10.13 0-1.88-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.35-.77c0-.37.17-.67.54-.9a2.4 2.4 0 0 1 1.36-.36c.4 0 .73.07 1.01.2a1.8 1.8 0 0 1 1.01 1.17l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.04-.82 6.1 6.1 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.56 1.76c0 .8.25 1.46.76 1.98.5.52 1.28.89 2.34 1.1l1.87.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.18.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84a6.3 6.3 0 0 0 2.43-.44c.71-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.25-1.42-.76-1.9a4.76 4.76 0 0 0-2.32-1.07Zm5.85 3.28a1.55 1.55 0 0 0-1.58 1.55c0 .44.15.8.46 1.11.3.3.68.46 1.12.46.28 0 .54-.07.77-.21.24-.14.43-.33.58-.57a1.5 1.5 0 0 0-.25-1.89c-.32-.3-.68-.45-1.1-.45ZM136 15.4c.4-.28.87-.42 1.4-.42.62 0 1.12.18 1.5.53.37.35.61.8.71 1.32h2.48a4.07 4.07 0 0 0-.7-2.07 4.07 4.07 0 0 0-1.65-1.37 5.52 5.52 0 0 0-2.38-.5 4.83 4.83 0 0 0-4.61 2.71 6.47 6.47 0 0 0-.64 2.96c0 1.11.2 2.08.63 2.93a4.77 4.77 0 0 0 1.81 2 5.3 5.3 0 0 0 2.83.72 5.4 5.4 0 0 0 2.4-.5 4.04 4.04 0 0 0 2.3-3.46h-2.47c-.08.4-.22.73-.42 1-.2.28-.46.5-.76.64s-.65.21-1.03.21c-.54 0-1-.14-1.4-.43-.4-.28-.71-.7-.94-1.23a5.03 5.03 0 0 1-.32-1.92c0-.75.1-1.37.33-1.9.22-.53.53-.93.93-1.22Zm14.8-1.8a5.34 5.34 0 0 0-2.79-.7c-1.07 0-2 .23-2.8.7a4.77 4.77 0 0 0-1.82 1.99 6.49 6.49 0 0 0-.65 2.97c0 1.13.22 2.12.65 2.97.43.84 1.04 1.5 1.83 1.97s1.72.7 2.79.7 2-.23 2.8-.7a4.78 4.78 0 0 0 1.82-1.97 6.5 6.5 0 0 0 .65-2.97 6.5 6.5 0 0 0-.65-2.97 4.77 4.77 0 0 0-1.83-1.99Zm-.44 6.76c-.19.54-.48.97-.88 1.3-.39.32-.87.48-1.46.48a2.3 2.3 0 0 1-1.48-.48c-.4-.33-.69-.76-.88-1.3-.2-.54-.3-1.14-.3-1.8 0-.68.1-1.29.3-1.83.2-.54.49-.98.88-1.3.4-.33.89-.49 1.48-.49.6 0 1.07.16 1.46.49.4.32.69.76.88 1.3.2.54.3 1.15.3 1.82 0 .67-.1 1.27-.3 1.81Zm18.68-6.5a3.36 3.36 0 0 0-2.47-.96c-.8 0-1.49.18-2.07.54-.58.37-1 .85-1.23 1.46h-.12a2.85 2.85 0 0 0-1.08-1.47 3.2 3.2 0 0 0-1.89-.54 3.3 3.3 0 0 0-1.9.54c-.53.35-.9.84-1.14 1.47h-.12v-1.87h-2.48V24h2.6v-6.66c0-.46.08-.85.26-1.2.18-.33.43-.6.73-.78.31-.2.65-.28 1.02-.28.55 0 1 .17 1.34.5.34.34.5.8.5 1.36V24h2.55v-6.83c0-.62.17-1.12.52-1.51.35-.39.84-.58 1.47-.58a2 2 0 0 1 1.33.47c.36.32.54.82.54 1.5V24h2.6v-7.35c0-1.23-.32-2.16-.96-2.8v.01ZM11.47 5.33c6.32 0 11.46 5.12 11.46 11.42a11.46 11.46 0 0 1-22.93 0c0-6.3 5.14-11.42 11.47-11.42Zm.18 12.32-3.1 8.95a10.38 10.38 0 0 0 6.34-.16.9.9 0 0 1-.07-.15l-3.17-8.64Zm-9.6-5.08A10.26 10.26 0 0 0 6.97 26Zm18.46-.75c.05.33.07.68.07 1.06 0 1.04-.2 2.21-.78 3.68l-3.15 9.06a10.26 10.26 0 0 0 3.86-13.8ZM11.47 6.5c-3.6 0-6.77 1.84-8.62 4.63A23.92 23.92 0 0 0 6.26 11c.56-.03.62.78.07.85 0 0-.56.06-1.18.1L8.9 23.06l2.26-6.74-1.6-4.39c-.56-.03-1.09-.1-1.09-.1-.55-.03-.49-.87.07-.84 0 0 1.7.13 2.71.13C12.33 11.13 14 11 14 11c.55-.03.62.78.07.85 0 0-.56.06-1.18.1l3.72 11.04 1.03-3.43a9.5 9.5 0 0 0 .79-3.32 5.4 5.4 0 0 0-.85-2.83c-.53-.85-1.02-1.56-1.02-2.4 0-.95.72-1.83 1.74-1.83h.13a10.28 10.28 0 0 0-6.96-2.69Z" /></svg> </a> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="products" aria-haspopup="true" aria-expanded="false"> Products <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="features" aria-haspopup="true" aria-expanded="false"> Features <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide"> <button role="menuitem" class="x-nav-link x-link" data-dropdown-trigger="resources" aria-haspopup="true" aria-expanded="false"> Resources <span class="x-nav-link-chevron" aria-hidden="true"></span> </button> </li> <li class="x-nav-item x-nav-item--wide lpc x-nav--pricing"> <a role="menuitem" class="x-nav-link x-link" href="https://wordpress.com/pricing/"> Plans & Pricing </a> </li> </ul> <ul class="x-nav-list"> <li class="x-nav-item x-nav-item--wide lpc x-nav--log-in"> <a role="menuitem" class="x-nav-link x-link" href="https://wordpress.com/log-in/"> Log in </a> </li> <li class="x-nav-item x-nav-item--wide lpc x-nav--sign-up"> <a role="menuitem" class="x-nav-link x-nav-link--primary x-link" href="https://wordpress.com/start/"> Get started </a> </li> <li class="x-nav-item x-nav-item--narrow"> <button role="menuitem" class="x-nav-link x-nav-link--menu x-link" aria-haspopup="true" aria-expanded="false"> <span class="x-hidden">Menu</span> <span class="x-icon x-icon--menu"> <span></span> <span></span> <span></span> </span> </button> </li> </ul> </nav> <div class="x-dropdown"> <div class="x-dropdown-top"> <div class="x-dropdown-top-fill"></div> </div> <div class="x-dropdown-middle"></div> <div class="x-dropdown-bottom"> <div class="x-dropdown-bottom-fill"></div> </div> <div class="x-dropdown-content" data-dropdown-name="products" role="menu" aria-label="Products" aria-hidden="true"> <ul> <li class="lpc x-nav--hosting"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/hosting/" tabindex="-1"> WordPress Hosting </a> </li> <li class="lpc x-nav--agencies"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/for-agencies/" tabindex="-1"> WordPress for Agencies </a> </li> <li class="lpc x-nav--domains"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/domains/" tabindex="-1"> Domain Names </a> </li> <li class="lpc x-nav--website-builder"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/website-builder/" tabindex="-1"> Website Builder </a> </li> <li class="lpc x-nav--create-blog"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/create-blog/" tabindex="-1"> Create a Blog </a> </li> <li class="lpc x-nav--newsletter"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/newsletter/" tabindex="-1"> Newsletter </a> </li> <li class="lpc x-nav--email"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/professional-email/" tabindex="-1"> Professional Email </a> </li> <li class="lpc x-nav--website-design-service"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/website-design-service/" tabindex="-1"> Website Design Services </a> </li> <li class="lpc x-nav--ecommerce"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/ecommerce/" tabindex="-1"> Commerce </a> </li> <li class="lpc x-nav--vip x-nav-show_separator_above"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=top_nav" tabindex="-1"> Enterprise WordPress<span class="x-nav__external-link-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="x-icon x-icon--external" role="presentation" aria-hidden="true"> <path d="M5.5 0v1h1.795L2.38 5.915l.705.705L8 1.705V3.5h1V0H5.5zM8 8H1V1h3V0H1a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1V5H8v3z" /> </svg></span> </a> </li> </ul> </div> <div class="x-dropdown-content" data-dropdown-name="features" role="menu" aria-label="Features" aria-hidden="true"> <ul> <li class="lpc x-nav--features"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/features/" tabindex="-1"> Overview </a> </li> <li class="lpc x-nav--themes x-nav-show_separator_above"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/themes" tabindex="-1"> WordPress Themes </a> </li> <li class="lpc x-nav--plugins"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/plugins" tabindex="-1"> WordPress Plugins </a> </li> <li class="lpc x-nav--patterns"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/patterns" tabindex="-1"> WordPress Patterns </a> </li> <li class="lpc x-nav--google"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/google/" tabindex="-1"> Google Apps </a> </li> </ul> </div> <div class="x-dropdown-content" data-dropdown-name="resources" role="menu" aria-label="Resources" aria-hidden="true"> <ul> <li class="lpc x-nav--support"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/support/" tabindex="-1"> WordPress.com Support </a> </li> <li class="lpc x-nav--blog"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/blog/" tabindex="-1"> WordPress News </a> </li> <li class="lpc x-nav--experts"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/go/" tabindex="-1"> Website Building Tips </a> </li> <li class="lpc x-nav--business-name-generator"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/business-name-generator/" tabindex="-1"> Business Name Generator </a> </li> <li class="lpc x-nav--logo-maker"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/logo-maker/" tabindex="-1"> Logo Maker </a> </li> <li class="lpc x-nav--discover"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/discover" tabindex="-1"> Discover New Posts </a> </li> <li class="lpc x-nav--tags"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/tags" tabindex="-1"> Popular Tags </a> </li> <li class="lpc x-nav--search"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/read/search" tabindex="-1"> Blog Search </a> </li> <li class="lpc x-nav--webinars"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/webinars/" tabindex="-1"> Daily Webinars </a> </li> <li class="lpc x-nav--learn"> <a role="menuitem" class="x-dropdown-link x-link" href="https://wordpress.com/learn/" tabindex="-1"> Learn WordPress </a> </li> </ul> </div> </div> <div class="x-menu" role="menu" aria-label="WordPress.com Navigation Menu" aria-hidden="true"> <div class="x-menu-overlay"></div> <div class="x-menu-content"> <button class="x-menu-button x-link" tabindex="-1"> <span class="x-hidden">Close the navigation menu</span> <span class="x-icon x-icon--close"> <span></span> <span></span> </span> </button> <div class="x-menu-list"> <div class="x-menu-list-title"> Get started </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--sign-up"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/start/" tabindex="-1"> Sign up <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> <li class="x-menu-grid-item lpc x-nav--log-in"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/log-in/" tabindex="-1"> Log in <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-hidden"> About </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--pricing"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/pricing/" tabindex="-1"> Plans & Pricing </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Products </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--hosting"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/hosting/" tabindex="-1"> WordPress Hosting </a> </li> <li class="x-menu-grid-item lpc x-nav--agencies"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/for-agencies/" tabindex="-1"> WordPress for Agencies </a> </li> <li class="x-menu-grid-item lpc x-nav--domains"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/domains/" tabindex="-1"> Domain Names </a> </li> <li class="x-menu-grid-item lpc x-nav--website-builder"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/website-builder/" tabindex="-1"> Website Builder </a> </li> <li class="x-menu-grid-item lpc x-nav--create-blog"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/create-blog/" tabindex="-1"> Create a Blog </a> </li> <li class="x-menu-grid-item lpc x-nav--newsletter"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/newsletter/" tabindex="-1"> Newsletter </a> </li> <li class="x-menu-grid-item lpc x-nav--email"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/professional-email/" tabindex="-1"> Professional Email </a> </li> <li class="x-menu-grid-item lpc x-nav--website-design-service"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/website-design-service/" tabindex="-1"> Website Design Services </a> </li> <li class="x-menu-grid-item lpc x-nav--ecommerce"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/ecommerce/" tabindex="-1"> Commerce </a> </li> <li class="x-menu-grid-item lpc x-nav--vip"> <a role="menuitem" class="x-menu-link x-link" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=top_nav" tabindex="-1"> Enterprise WordPress <span class="x-nav__external-link-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="x-icon x-icon--external" role="presentation" aria-hidden="true"> <path d="M5.5 0v1h1.795L2.38 5.915l.705.705L8 1.705V3.5h1V0H5.5zM8 8H1V1h3V0H1a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1V5H8v3z" /> </svg></span> </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Features </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--features"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/features/" tabindex="-1"> Overview </a> </li> <li class="x-menu-grid-item lpc x-nav--themes"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/themes" tabindex="-1"> WordPress Themes </a> </li> <li class="x-menu-grid-item lpc x-nav--plugins"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/plugins" tabindex="-1"> WordPress Plugins </a> </li> <li class="x-menu-grid-item lpc x-nav--patterns"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/patterns" tabindex="-1"> WordPress Patterns </a> </li> <li class="x-menu-grid-item lpc x-nav--google"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/google/" tabindex="-1"> Google Apps </a> </li> </ul> </div> <div class="x-menu-list"> <div class="x-menu-list-title"> Resources </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--support"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/support/" tabindex="-1"> WordPress.com Support </a> </li> <li class="x-menu-grid-item lpc x-nav--blog"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/blog/" tabindex="-1"> WordPress News </a> </li> <li class="x-menu-grid-item lpc x-nav--experts"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/go/" tabindex="-1"> Website Building Tips </a> </li> <li class="x-menu-grid-item lpc x-nav--business-name-generator"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/business-name-generator/" tabindex="-1"> Business Name Generator </a> </li> <li class="x-menu-grid-item lpc x-nav--logo-maker"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/logo-maker/" tabindex="-1"> Logo Maker </a> </li> <li class="x-menu-grid-item lpc x-nav--discover"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/discover" tabindex="-1"> Discover New Posts </a> </li> <li class="x-menu-grid-item lpc x-nav--tags"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/tags" tabindex="-1"> Popular Tags </a> </li> <li class="x-menu-grid-item lpc x-nav--search"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/read/search" tabindex="-1"> Blog Search </a> </li> <li class="x-menu-grid-item lpc x-nav--webinars"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/webinars/" tabindex="-1"> Daily Webinars </a> </li> <li class="x-menu-grid-item lpc x-nav--learn"> <a role="menuitem" class="x-menu-link x-link" href="https://wordpress.com/learn/" tabindex="-1"> Learn WordPress </a> </li> </ul> </div> <div class="x-menu-list is-mobile-app-supported"> <div class="x-menu-list-title"> Jetpack App </div> <ul class="x-menu-grid"> <li class="x-menu-grid-item lpc x-nav--mobile-badge x-nav--apple-app-store is-ios"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/get/?campaign=wpcom-log-out-home-global-nav" tabindex="-1"> <img src="https://wpcom.files.wordpress.com/2023/06/group-1000004724.png" loading="lazy" alt="" role="presentation" width="120" height="34"> </a> </li> <li class="x-menu-grid-item lpc x-nav--mobile-badge x-nav--google-play is-android"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/get/?campaign=wpcom-log-out-home-global-nav" tabindex="-1"> <img src="https://wpcom.files.wordpress.com/2023/06/play-store-logo.png" loading="lazy" alt="" role="presentation" width="120" height="34"> </a> </li> <li class="x-menu-grid-item lpc x-nav--learn-more"> <a role="menuitem" class="x-menu-link x-link" href="https://apps.wordpress.com/mobile" tabindex="-1"> Learn more <span class="x-menu-link-chevron" aria-hidden="true"></span> </a> </li> </ul> </div> </div> </div> </header> <div id="content" class="wpblog__main-body wpblog__main-body--single">  <nav class="wpblog-page-cat-nav"> <div class="wpblog__container"> <div class="wpblog-categories-search-row"> <div class="wpblog-categories-search-row__title wpblog__blog-title"> <div class="wpblog__blog-title--small"><a href="https://wordpress.com/blog/">Blog</a></div> </div> <div class="wpblog-categories-search-row__categories"> <div class="wpblog-category-menu"> <div class="wpblog-slider">  <div id="wpblog-slider" class="scrollbar-hide"> <a href="https://wordpress.com/blog/category/news/" class="wpblog-category-tab ">News</a> <a href="https://wordpress.com/blog/category/development/" class="wpblog-category-tab ">Development</a> <a href="https://wordpress.com/blog/category/product-features/" class="wpblog-category-tab ">Product Features</a> <a href="https://wordpress.com/blog/category/tips-and-tutorials/" class="wpblog-category-tab ">Tips and Tutorials</a> <a href="https://wordpress.com/blog/category/resources/" class="wpblog-category-tab ">Resources</a> <a href="https://wordpress.com/blog/category/customer-stories/" class="wpblog-category-tab ">Customer Stories</a> </div> </div> <div class="wpblog-category-select" id="wpblog-category-select-wrapper"> <div class="wpblog-select"> <div class="wpblog-select__trigger"> <span class="wpblog-select__trigger-text">Categories</span> <div class="wpblog-select__arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M6.62598 12.4L11.8977 8L17.1694 12.4L16.3068 13.6L11.8977 10L7.58447 13.6L6.62598 12.4Z" fill="#101517"/> </svg> </div>  </div> <div class="wpblog-select__options"> <a href="https://wordpress.com/blog/category/news/" class="wpblog-select__option ">News</a> <a href="https://wordpress.com/blog/category/development/" class="wpblog-select__option ">Development</a> <a href="https://wordpress.com/blog/category/product-features/" class="wpblog-select__option ">Product Features</a> <a href="https://wordpress.com/blog/category/tips-and-tutorials/" class="wpblog-select__option ">Tips and Tutorials</a> <a href="https://wordpress.com/blog/category/resources/" class="wpblog-select__option ">Resources</a> <a href="https://wordpress.com/blog/category/customer-stories/" class="wpblog-select__option ">Customer Stories</a> </div> </div> </div>  <form id="searchform" name="searchform" method="get" action="https://wordpress.com/blog" class="wpblog-cat-nav-search-box wpblog-cat-nav-search-box--mini"> <input type="text" id="s" name="s" placeholder="Search" /> <div class="wpblog-search-button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="search-icon" aria-hidden="true" focusable="false"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z" fill="#1E1E1E"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="cross-icon" aria-hidden="true" focusable="false"> <rect x="19.0532" y="3.5332" width="2.3" height="22.9305" rx="1.15" transform="rotate(45 19.0532 3.5332)" fill="#8C8F94"/> <rect x="20.4673" y="19.7476" width="2.3" height="22.9305" rx="1.15" transform="rotate(135 20.4673 19.7476)" fill="#8C8F94"/> </svg> </div> </form> </div> </div> </div> </div> </nav> <article id="post-71849" class="post post-71849 type-post status-publish format-standard has-post-thumbnail hentry category-tips-and-tutorials"> <header class="wpblog-page-title-header"> <div class="wpblog__container">  <div class="wpblog-title__row"> <h1 class="wpblog-title__heading wpblog-title__post-title">11 Website Layout Examples for Every Type of Page</h1> </div> <div class="wpblog-post-info">  <div class="wpblog-post-info__date-time"> <span> Nov 14, 2024  ·  16 mins read</span> </div> <div> </div> </div> </div> </header>  <section class="wpblog__section wpblog__section--edge-to-edge wpblog__section--bottom-spaced"> <div class="wpblog__container"> <article class="wpblog-post-hero">  <figure class="wpblog-post-hero__image"> <img width="1600" height="1000" src="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=1600&h=1000&crop=1" class="w-full h-auto object-cover wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=1600&h=1000&crop=1 1600w, https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=150&h=94&crop=1 150w, https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=300&h=188&crop=1 300w, https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=768&h=480&crop=1 768w, https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=1024&h=640&crop=1 1024w" sizes="(max-width: 1600px) 100vw, 1600px" data-attachment-id="71851" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/website-layout-blog-header/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg" data-orig-size="2860,1000" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="website-layout-blog-header" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/website-layout-blog-header.jpg?w=1024" /> </figure>  <div class="wpblog-post-hero__meta-data wpblog--bg-gray">  <div> <p class="wpblog-post-hero__subtitle">POSTED BY</p> </div>  <div class="wpblog-post-hero__author-info-row">  <div class="wpblog-post-hero__author-image"> <img src="https://secure.gravatar.com/avatar/5f069a6cacb95c3811aa06a1884d3a5d?s=80&d=retro" alt="Author Image" /> </div>  <div class="wpblog-post-hero__author-details"> <a href="https://wordpress.com/blog/author/nschaeferhoff/"> <p class="post-author-name">Nick Schäferhoff</p> <p class="post-author-title">Dotcom Marketing, Content</p> </a> </div> </div>  <div class="wpblog-post-hero__related-reading"> <p class="wpblog-post-hero__subtitle">RELATED READING</p>  <div class="wpblog-post-hero__related-article"> <h3 class="wpblog-post-hero__related-title"> <a href="https://wordpress.com/blog/2024/11/21/holiday-color-palettes/"> Seasonal Color Palettes and Style Tips to Refresh Your Website for the Holidays</a> </h3> <p class="wpblog-post-hero__related-author"> Katie Koteen </p> </div>  <div class="wpblog-post-hero__related-article"> <h3 class="wpblog-post-hero__related-title"> <a href="https://wordpress.com/blog/2024/11/06/recipe-plugins/"> Why a Recipe Plugin is the Secret Ingredient for Your Food Blog’s Success</a> </h3> <p class="wpblog-post-hero__related-author"> Katie Koteen </p> </div> </div> </div> </article> </div> </section> <div class="post-content entrytext"> <div class="wpblog__container"> <div id="wpblog-post-body"> <p>Everyone who uses the Internet looks at website layout examples every day. Yet, unless you are a designer or in the process of building your own site, few of us ever stop to think about what actually makes a good web-page structure.</p> <p>You may instinctively feel it when you encounter one that is less than satisfactory. But do you know how to design a website layout that both pleases your visitors and allows you to achieve what you want with your site?</p> <p>If the answer to that question is no, don’t fret. We’ll show you examples of different types of website layouts you can choose from and help you understand which are most appropriate in different situations. Then, we’ll explain how to choose a layout for your own website, as well as share some tips and tools you can use to create layout mockups.</p> <hr class="wp-block-separator has-alpha-channel-opacity" /> <p><strong>Table of Contents</strong></p> <ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#11-common-types-of-website-layouts">11 Common Types of Website Layouts</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#1-z-pattern">1. Z-pattern</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#2-f-pattern">2. F-pattern</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#3-magazine">3. Magazine</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#4-grid">4. Grid</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#5-modular">5. Modular</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#6-single-column">6. Single-Column</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#7-content-focused">7. Content-Focused</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#8-full-screen">8. Full-Screen</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#9-hero">9. Hero</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#10-split-screen">10. Split-Screen</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#11-asymmetrical">11. Asymmetrical</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#how-to-choose-a-website-layout">How to Choose a Website Layout</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#understanding-website-layout-vs-website-structure">Understanding website layout vs. website structure</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#what-is-the-goal-of-your-website-layout">What Is the Goal of Your Website Layout?</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#consider-the-type-of-website-you-are-building">Consider the Type of Website You Are Building</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#do-your-research">Do Your Research</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#consider-what-you-like">Consider What You Like</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#base-your-design-on-common-layouts">Base Your Design on Common Layouts</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#creating-a-website-layout-mockup">Creating a website layout mockup</a><ol><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#wireframing-your-layout">Wireframing your layout</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#additional-tips">Additional Tips</a></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#tools-for-wireframing">Tools for Wireframing</a></li></ol></li><li><a class="wp-block-table-of-contents__entry" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#find-the-right-website-layout-for-your-wordpress-site">Find the Right Website Layout for Your WordPress Site</a></li></ol> <hr class="wp-block-separator has-alpha-channel-opacity" /> <h2 class="wp-block-heading" id="11-common-types-of-website-layouts">11 Common Types of Website Layouts</h2> <p>In order to give you ideas about what a website layout can look like, let’s go over some common types, the kinds of websites they are most suitable for, and examples. Be aware that for some of these, the distinction is a bit fluid. You can often apply more than one layout principle to a single site.</p> <h3 class="wp-block-heading" id="1-z-pattern">1. Z-pattern</h3> <p>This Z-pattern layout is based on the way many people naturally look at website content. They start at the top left, scan to the top right, then go down to the left and to the right again.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image.jpeg"><img data-attachment-id="71853" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-112/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image.jpeg" data-orig-size="1024,545" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=1024" width="1024" height="545" src="https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=1024" alt="" class="wp-image-71853" srcset="https://en-blog.files.wordpress.com/2024/11/image.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>You can take advantage of that, for example, by placing the logo in the upper left corner and the navigation menu across from it. Your most important information, such as your heading and visuals, appears diagonally down left from that, while the <a href="https://wordpress.com/go/web-design/cta-design-copy-messaging/" target="_blank" rel="noreferrer noopener">call to action</a> is to the right of it again.</p> <p>This website layout is very skim friendly and most appropriate for sites that have relatively little content that you want to give much attention to, like CTAs, forms, and buttons.</p> <p>You can also line up several Z-patterns with alternating elements to lead visitors down in zigzag form and keep them engaged.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg"><img data-attachment-id="71854" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-113/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg" data-orig-size="445,1022" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg?w=131" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg?w=445" width="445" height="1022" src="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg?w=445" alt="" class="wp-image-71854" srcset="https://en-blog.files.wordpress.com/2024/11/image-1.jpeg 445w, https://en-blog.files.wordpress.com/2024/11/image-1.jpeg?w=65 65w, https://en-blog.files.wordpress.com/2024/11/image-1.jpeg?w=131 131w" sizes="(max-width: 445px) 100vw, 445px" /></a></figure> <h3 class="wp-block-heading" id="2-f-pattern">2. F-pattern</h3> <p>This layout is also based on common page-scanning behavior, first <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/" target="_blank" rel="noreferrer noopener">discovered and defined by the Nielsen Norman Group</a>.</p> <figure class="wp-block-image"><img data-attachment-id="71876" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg" data-orig-size="785,392" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="AD_4nXdWpRYDXwu0XsbDF_I8SR_1YaDvlECZhpyrtRrZ0sZ1udmAmU91EZNgafGk–tfLATUepnGJOsiHd_BahFa3thdGY0ODSyU3qWReelKPLMowmFyK1S4imEVtCBjmVQKSnvyvuXS-VRv2EjvLxBavVYmS5M" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg?w=785" loading="lazy" width="785" height="392" src="https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg" alt="" class="wp-image-71876" srcset="https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg 785w, https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg?w=150&h=75 150w, https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg?w=300&h=150 300w, https://en-blog.files.wordpress.com/2024/11/ad_4nxdwprydxwu0xsbdf_i8sr_1yadvleczhpyrtrrz0sz1udmamu91ezngafgk-tflatuepngjosihd_bahfa3thdgy0odsyu3qwreelkplmowmfyk1s4imevtcbjmvqksnvyvuxs-vrv2ejvlxbavvyms5m.jpg?w=768&h=384 768w" sizes="(max-width: 785px) 100vw, 785px" /></figure> <p>It is observable on both desktop and mobile and especially for more text-heavy sites. That makes it well suited for websites with lots of options or written content that needs to be scanned quickly, e.g. news sites or search result pages. You can take advantage of it by using the left side as an anchor.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg"><img data-attachment-id="71855" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-114/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg" data-orig-size="1024,542" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=1024" loading="lazy" width="1024" height="542" src="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=1024" alt="" class="wp-image-71855" srcset="https://en-blog.files.wordpress.com/2024/11/image-2.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-2.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>However, it is important to note that <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/" target="_blank" rel="noreferrer noopener">NNG has come out in recent years</a> saying that, while the F-pattern is a natural reading sequence, it is not good for users and websites. They state you should encourage readers to consume the rest of your content through text formatting like bullet points or visuals like icons and images.</p> <h3 class="wp-block-heading" id="3-magazine">3. Magazine</h3> <p>Magazine layouts are inspired by printed newspapers and magazines and there are many examples of this kind of website out there. They usually consist of multiple columns made up of individual containers that create a complex visual hierarchy.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg"><img data-attachment-id="71856" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-115/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg" data-orig-size="800,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=234" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=800" loading="lazy" width="800" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=800" alt="" class="wp-image-71856" srcset="https://en-blog.files.wordpress.com/2024/11/image-3.jpeg 800w, https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=117 117w, https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=234 234w, https://en-blog.files.wordpress.com/2024/11/image-3.jpeg?w=768 768w" sizes="(max-width: 800px) 100vw, 800px" /></a></figure> <p>In this website layout, different elements often have different weights assigned to them to show their relative importance. You can do this, for example, with bigger headlines or the <a href="https://wordpress.com/go/tutorials/image-seo-12-tips-to-optimize-images-and-drive-search-traffic/" target="_blank" rel="noreferrer noopener">use of images</a>. This creates a multi-level hierarchy.</p> <p>The goal is to allow visitors to scan a great amount of information quickly. As a consequence, it’s a great choice for content-heavy websites, especially those covering a multitude of topics. Dashboards, such as for web applications, are also good candidates. The <a href="https://wordpress.com/theme/gazette" target="_blank" rel="noreferrer noopener">Gazette theme</a> is another great example for how to use a magazine layout.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg"><img data-attachment-id="71857" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-116/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg" data-orig-size="820,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=240" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=820" loading="lazy" width="820" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=820" alt="" class="wp-image-71857" srcset="https://en-blog.files.wordpress.com/2024/11/image-4.jpeg 820w, https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=120 120w, https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=240 240w, https://en-blog.files.wordpress.com/2024/11/image-4.jpeg?w=768 768w" sizes="(max-width: 820px) 100vw, 820px" /></a></figure> <h3 class="wp-block-heading" id="4-grid">4. Grid</h3> <p>Also called box-based website layouts, grid layouts distribute elements across the page according to a clear underlying order.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg"><img data-attachment-id="71858" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-117/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg" data-orig-size="671,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg?w=197" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg?w=671" loading="lazy" width="671" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg?w=671" alt="" class="wp-image-71858" srcset="https://en-blog.files.wordpress.com/2024/11/image-5.jpeg 671w, https://en-blog.files.wordpress.com/2024/11/image-5.jpeg?w=98 98w, https://en-blog.files.wordpress.com/2024/11/image-5.jpeg?w=197 197w" sizes="(max-width: 671px) 100vw, 671px" /></a></figure> <p>The result is a well-structured and geometrically-arranged design. It’s ideal for sites that have a lot of content of equal importance, e.g. portfolios. Linked pages often appear in the form of an image plus title and a short abstract.</p> <p>If your content does not all have the same priority, there are lots of options to determine relative importance of different elements as well.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg"><img data-attachment-id="71859" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-118/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg" data-orig-size="571,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg?w=167" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg?w=571" loading="lazy" width="571" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg?w=571" alt="" class="wp-image-71859" srcset="https://en-blog.files.wordpress.com/2024/11/image-6.jpeg 571w, https://en-blog.files.wordpress.com/2024/11/image-6.jpeg?w=84 84w, https://en-blog.files.wordpress.com/2024/11/image-6.jpeg?w=167 167w" sizes="(max-width: 571px) 100vw, 571px" /></a></figure> <h3 class="wp-block-heading" id="5-modular">5. Modular</h3> <p>Next in our list of website layout examples, we have a special kind of grid structure, which is also known as block layout. In it, each unit of content has their own space, is evenly spaced, and thus easy to locate. You might be very familiar with it from Pinterest and other sites that use a card layout.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg"><img data-attachment-id="71860" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-119/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg" data-orig-size="794,1023" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=233" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=794" loading="lazy" width="794" height="1023" src="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=794" alt="" class="wp-image-71860" srcset="https://en-blog.files.wordpress.com/2024/11/image-7.jpeg 794w, https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=116 116w, https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=233 233w, https://en-blog.files.wordpress.com/2024/11/image-7.jpeg?w=768 768w" sizes="(max-width: 794px) 100vw, 794px" /></a></figure> <p>This website layout is also great for mobile design, as it rearranges well for smaller screens. If you want to use it, it is most suitable for business websites, content collections like product pages, or the display of <a href="https://wordpress.com/go/tutorials/wordpress-custom-post-types/" target="_blank" rel="noreferrer noopener">custom post types</a>.</p> <h3 class="wp-block-heading" id="6-single-column">6. Single-Column</h3> <p>Our next website layout example arranges all content in one vertical column and orders it sequentially.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg"><img data-attachment-id="71861" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-120/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg" data-orig-size="987,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=289" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=987" loading="lazy" width="987" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=987" alt="" class="wp-image-71861" srcset="https://en-blog.files.wordpress.com/2024/11/image-8.jpeg 987w, https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=145 145w, https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=289 289w, https://en-blog.files.wordpress.com/2024/11/image-8.jpeg?w=768 768w" sizes="(max-width: 987px) 100vw, 987px" /></a></figure> <p>Single-column layouts are popular and easy to use, especially on mobile, where users prefer to scroll over clicking from page to page. To that end, it benefits from a back-to-top button and sticky menu.</p> <p>If your content is very text-heavy, remember to break it up with images to ensure readability. As you can imagine, this website layout is frequently used for blogs and anything that has a feed-like content pipeline. Landing pages are also a good candidate.</p> <h3 class="wp-block-heading" id="7-content-focused">7. Content-Focused</h3> <p>As the name already suggests, this layout is most appropriate for websites whose primary appeal is (written) content. It’s similar to the single-column variety, often with one main column and one or more side columns for additional information.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg"><img data-attachment-id="71862" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-121/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg" data-orig-size="871,1023" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=255" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=871" loading="lazy" width="871" height="1023" src="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=871" alt="" class="wp-image-71862" srcset="https://en-blog.files.wordpress.com/2024/11/image-9.jpeg 871w, https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=128 128w, https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=255 255w, https://en-blog.files.wordpress.com/2024/11/image-9.jpeg?w=768 768w" sizes="(max-width: 871px) 100vw, 871px" /></a></figure> <p>While the focus is on the primary content, you can surround it by other elements that you want visitors to notice after landing on the page for the main attraction. This could be a newsletter signup form in the sidebar, advertisement for your product or service, or a sales banner.</p> <p>Naturally, this page structure lends itself best to blogs or other websites that mainly deal in writing. At the same time, singular pages on websites with a different layout can also benefit from a content-focused approach.</p> <h3 class="wp-block-heading" id="8-full-screen">8. Full-Screen</h3> <p>This is a website layout that covers the entire page. There are no sidebars, the screen comes across as a singular unit.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg"><img data-attachment-id="71863" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-122/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg" data-orig-size="383,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg?w=112" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg?w=383" loading="lazy" width="383" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg?w=383" alt="" class="wp-image-71863" srcset="https://en-blog.files.wordpress.com/2024/11/image-10.jpeg 383w, https://en-blog.files.wordpress.com/2024/11/image-10.jpeg?w=56 56w, https://en-blog.files.wordpress.com/2024/11/image-10.jpeg?w=112 112w" sizes="(max-width: 383px) 100vw, 383px" /></a></figure> <p>Sometimes this design is coupled with a modular build that scrolls screen by screen, so that each section is like a separate page. It often has an image or even video in the background.</p> <p>Full-screen layouts are best suited for one-page designs, storytelling, and product pages. They work best if you couple them with captivating colors and/or visuals. If you like this look, the <a href="https://wordpress.com/theme/afterlight" target="_blank" rel="noreferrer noopener">Afterlight theme</a> might be a good option for you.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg"><img data-attachment-id="71864" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-123/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg" data-orig-size="1024,807" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=1024" loading="lazy" width="1024" height="807" src="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=1024" alt="" class="wp-image-71864" srcset="https://en-blog.files.wordpress.com/2024/11/image-11.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-11.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <h3 class="wp-block-heading" id="9-hero">9. Hero</h3> <p>A special type of full-screen website layout with a large image at the top (also called “hero image”) that contains the main elements like your site title, CTA, etc.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg"><img data-attachment-id="71865" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-124/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg" data-orig-size="1024,548" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=1024" loading="lazy" width="1024" height="548" src="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=1024" alt="" class="wp-image-71865" srcset="https://en-blog.files.wordpress.com/2024/11/image-12.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-12.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>Hero layouts are a good way to quickly capture attention and clarify the topic of the page, especially for products. It’s a big, bold visual statement with additional information in the form of text elements.</p> <p>The layout works best for product pages and ecommerce websites in general. However, some blogs also use it.</p> <h3 class="wp-block-heading" id="10-split-screen">10. Split-Screen</h3> <p>In this website layout, the screen is divided in the middle.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg"><img data-attachment-id="71866" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-125/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg" data-orig-size="1024,556" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=1024" loading="lazy" width="1024" height="556" src="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=1024" alt="" class="wp-image-71866" srcset="https://en-blog.files.wordpress.com/2024/11/image-13.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-13.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>Split-screen layouts provide a balanced symmetry allowing you to represent two different ideas and give them the same consideration. Alternatively, you can also show off the same idea from different angles or use it to divide ecommerce customers at the start of their journey.</p> <p>Split screen is a great option for websites that use two different types of content (e.g. images and text) or provide two distinct customer journeys. It’s also suitable simply for websites that want a modern look. However, it’s not so great for text-heavy designs because it doesn’t scale well, especially on mobile.</p> <h3 class="wp-block-heading" id="11-asymmetrical">11. Asymmetrical</h3> <p>A design similar to split screen or grid but with uneven distribution, offering an added dynamic.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg"><img data-attachment-id="71867" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-126/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg" data-orig-size="433,1023" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg?w=127" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg?w=433" loading="lazy" width="433" height="1023" src="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg?w=433" alt="" class="wp-image-71867" srcset="https://en-blog.files.wordpress.com/2024/11/image-14.jpeg 433w, https://en-blog.files.wordpress.com/2024/11/image-14.jpeg?w=63 63w, https://en-blog.files.wordpress.com/2024/11/image-14.jpeg?w=127 127w" sizes="(max-width: 433px) 100vw, 433px" /></a></figure> <p>You can use scale, color, width, and more to provide different focal points and highlights on the page. However, asymmetry does not mean chaos. There’s an underlying order that provides elegance and congruity.</p> <p>What are good candidates for asymmetrical website layouts?</p> <p>Websites that want to go for something modern, innovative and guide the user’s attention in dynamic ways. Business websites, online portfolios, or landing pages are prime beneficiaries.</p> <h2 class="wp-block-heading" id="how-to-choose-a-website-layout">How to Choose a Website Layout</h2> <p>With a better idea about what types of website layouts exist, how do you pick the right one for your website? Here are a few practical tips to do so.</p> <h3 class="wp-block-heading" id="understanding-website-layout-vs-website-structure">Understanding website layout vs. website structure</h3> <p>First, make sure that a website layout is what you’re looking to implement. In a sentence, this means the way that the <a href="https://wordpress.com/go/web-design/20-basic-website-design-elements-and-why-they-matter/" target="_blank" rel="noreferrer noopener">elements on your web pages</a> (content, <a href="https://wordpress.com/support/menus/create-a-menu/" target="_blank" rel="noreferrer noopener">navigation</a>, header, footer, and everything else visible) are arranged to present the information included within them.</p> <p>In contrast to <a href="https://wordpress.com/go/website-building/website-structure-optimized-for-ux-seo/" target="_blank" rel="noreferrer noopener">website structure</a>, layout focuses on the individual page experience and how users consume the content on your pages. It is less concerned about leading them around your site as a whole (though, of course, that’s part of it as well).</p> <p>While different web pages on your site can (and should) have different layouts, the basic structure usually stays the same. For example, the information needed on a shop page is very different from that of a product page or something like an <a href="https://wordpress.com/go/website-building/about-us-and-about-me-page-examples/" target="_blank" rel="noreferrer noopener"><em>About</em> section</a>. At the same time, the basic layout elements, especially <a href="https://wordpress.com/go/web-design/tips-for-designing-an-effective-wordpress-website-header/" target="_blank" rel="noreferrer noopener">header</a> and footer, usually stay constant across most pages.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg"><img data-attachment-id="71869" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-128/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg" data-orig-size="1024,474" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=1024" loading="lazy" width="1024" height="474" src="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=1024" alt="" class="wp-image-71869" srcset="https://en-blog.files.wordpress.com/2024/11/image-16.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-16.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>This makes for a consistent user experience, while allowing for flexibility to deliver different types of content to users.</p> <h3 class="wp-block-heading" id="what-is-the-goal-of-your-website-layout">What Is the Goal of Your Website Layout?</h3> <p>Good layout has the power to keep users on your page longer and engage them. Bad layout can do the opposite. In times where most visitors leave your site <a href="https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/" target="_blank" rel="noreferrer noopener">within ten seconds</a>, you need all the edge you can get. Here are some things that good website layout accomplishes:</p> <ul class="wp-block-list"> <li><strong>Makes a good first impression</strong> – Users <a href="https://www.tandfonline.com/doi/abs/10.1080/01449290500330448" target="_blank" rel="noreferrer noopener">decide within less than half a second</a> whether they like your site or not, so you better make sure your layout is on point.</li> <li><strong>Naturally leads the eye to important content</strong> – The focus of every website is content, whether that is products or information. Your page structure can either direct users towards it or away from it.</li> <li><strong>Provides strong user experience (UX)</strong> – A good layout helps visitors find what they are looking for, both on page as well as sitewide. It also sets elements in relation to each other, determines their sequence, and gives weight to the right elements.</li> <li><strong>Gives guidance</strong> – Layout provides guide rails for your users. It places the most important content at the top and leads them down the page toward your goal. </li> </ul> <p>The best website layout is one that you barely notice because you can easily find every element you are looking for. It is also one aimed at your <a href="https://wordpress.com/go/digital-marketing/how-to-use-personas-in-digital-marketing/" target="_blank" rel="noreferrer noopener">target group</a>, their preferences, behaviors, and needs.</p> <h3 class="wp-block-heading" id="consider-the-type-of-website-you-are-building">Consider the Type of Website You Are Building</h3> <p>As you have seen above, different website layouts are more or less suitable for different types of websites. Therefore, in order to choose the right one for you, you first need to be crystal clear about what kind of site you are building.</p> <p>Business sites, shops, blogs – they all have very different focal points and demand different layouts. Clarity in this area is the first step towards making the right choice.</p> <h3 class="wp-block-heading" id="do-your-research">Do Your Research</h3> <p>Your website does not exist in a vacuum. Look at websites that are the same type as yours (e.g. blog, ecommerce, B2B, B2C, etc.) but sell different types of products/services or serve different industries/niches than your own.</p> <p>When you do, identify common website layouts, best practices, what looks good, and see what you can do better with your layout.</p> <h3 class="wp-block-heading" id="consider-what-you-like">Consider What You Like</h3> <p>Yes, a website is primarily there to serve other people. However, at the same time, it also needs to be something you like. If you are turned off by your own website, it’s unlikely that you will put in the energy and enthusiasm needed to run it and make it successful.</p> <p>For that reason, while considering which website layout to choose, also do some introspection. Think about what you personally like and would like to see on your site.</p> <h3 class="wp-block-heading" id="base-your-design-on-common-layouts">Base Your Design on Common Layouts</h3> <p>The website layouts we discussed above are commonly known because they work. They have proven to be usable over time, are familiar to users, and ready to go. Therefore, it’s a good idea to go with one of the established layouts and then add your individual flavor to it.</p> <h2 class="wp-block-heading" id="creating-a-website-layout-mockup">Creating a website layout mockup</h2> <p>WordPress themes are flexible enough to support different types of page layouts out of the box. But what if you are <a href="https://wordpress.com/go/web-design/create-no-code-wordpress-themes/" target="_blank" rel="noreferrer noopener">designing your own theme</a> or are working with a website developer? In this case, you might want to create a wireframe. This helps to map out your page layout and is also good to clarify your ideas and get them onto paper.</p> <h3 class="wp-block-heading" id="wireframing-your-layout">Wireframing your layout</h3> <p>A wireframe is like a map of your page. It’s not the finished design but something that shows its structure.</p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg"><img data-attachment-id="71871" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-130/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg" data-orig-size="1024,768" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=1024" loading="lazy" width="1024" height="768" src="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=1024" alt="" class="wp-image-71871" srcset="https://en-blog.files.wordpress.com/2024/11/image-18.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-18.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>Here’s how to create a simple wireframe:</p> <ol class="wp-block-list"> <li><strong>Think about the user journey</strong> – Be aware what your goals are with your layout, where you want to steer visitors and what you want them to do.</li> <li><strong>Get sketching (and start with mobile)</strong> – Wireframes are not meant to be superfancy or detailed. Therefore, you can get started right away (see the tools below). A good idea is to start with the mobile design, then move on to larger screen sizes.</li> <li><strong>Create the basic framework</strong> – Take a bird’s-eye view, tackle the basic design problems first. Think about where to place the navigation and other basic UI elements.</li> <li><strong>Identify content areas</strong> – Mark where your content goes. For that, it’s important to know the content you will use ahead of time (both word count and images) so that you can accurately include it in the map.</li> <li><strong>Iterate</strong> – Even if you are satisfied with your first idea, do a few more passes to give yourself options. It often takes a while for the best ideas to bubble to the surface.</li> <li><strong>Test </strong>– Once you have some website layout ideas collected, it’s time to put them in front of potential users and collect feedback. The tools listed below are suitable for that as well. Getting some real-life feedback is great to improve and get closer to the final version.</li> <li><strong>Rinse and repeat</strong> – Do this over and over until you are satisfied with the results and ready to move to the design phase.</li> </ol> <p><strong>Pro Tip</strong>: Did you know that sites hosted with WordPress.com includes wireframe block patterns that you can use? These are patterns that are closer to a blank slate for your page without much design, but they include a basic structural layout. Just choose a wireframe pattern you like from the patterns library and customize it to suit your needs. </p> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg"><img data-attachment-id="71872" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-131/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg" data-orig-size="1011,1024" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=296" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=1011" loading="lazy" width="1011" height="1024" src="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=1011" alt="" class="wp-image-71872" srcset="https://en-blog.files.wordpress.com/2024/11/image-19.jpeg 1011w, https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=148 148w, https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=296 296w, https://en-blog.files.wordpress.com/2024/11/image-19.jpeg?w=768 768w" sizes="(max-width: 1011px) 100vw, 1011px" /></a></figure> <h3 class="wp-block-heading" id="additional-tips">Additional Tips</h3> <p>In order to create the best possible website layout, here are some tips and concepts to keep in mind:</p> <ul class="wp-block-list"> <li><strong>Create a visual hierarchy</strong> – Decide which elements are the most important and build your website layout so that it focuses on them. Make sure that they are placed where they are easily noticeable and identifiable.</li> <li><strong>Use a grid </strong>– Almost all web design is based on some sort of grid. It provides order and a basic structure and scaffolding that you can order your page elements along.</li> <li><strong>Employ the rule of odds</strong> – Use odd numbers of elements rather than even. That way, the focus is always on one element instead of in between two of them.</li> <li><strong>Ensure scanability </strong>– We have already talked about reading patterns. When designing your website layout, be sure to accommodate the way visitors consume content to make it easy to catch the gist of your site.</li> <li><strong>Focus on the fold</strong> – The fold is where the screen cuts off when someone first gets to your site. Above it, in the part that visitors see first, you should have your most important content and call to action.</li> <li><strong>Use enough white space</strong> – Negative space, the part without content, is as important as the content itself. It provides space to breathe and allows the emphasis to be where you want users to focus.</li> </ul> <h3 class="wp-block-heading" id="tools-for-wireframing">Tools for Wireframing</h3> <figure class="wp-block-image size-large"><a href="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg"><img data-attachment-id="71873" data-permalink="https://wordpress.com/blog/2024/11/14/website-layout-examples/image-132/" data-orig-file="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg" data-orig-size="1024,568" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=300" data-large-file="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=1024" loading="lazy" width="1024" height="568" src="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=1024" alt="" class="wp-image-71873" srcset="https://en-blog.files.wordpress.com/2024/11/image-20.jpeg 1024w, https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=150 150w, https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=300 300w, https://en-blog.files.wordpress.com/2024/11/image-20.jpeg?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure> <p>You can use different kinds of tools to build wireframes:</p> <ul class="wp-block-list"> <li><strong>Pen and paper</strong> – Classic but powerful, easy to use, and great to quickly whip up some website layout ideas without having to learn a new tool.</li> <li><a href="https://whimsical.com/" target="_blank" rel="noreferrer noopener">Whimsical</a> – A collaboration tool that works for wireframes and also allows you to get feedback. It’s also easy to use and has a free plan.</li> <li><a href="https://www.invisionapp.com/" target="_blank" rel="noreferrer noopener">Invision</a> – Similar to Whimsical. Also works for collaborative designing. Comes with wireframe templates and has a free plan for up to three online whiteboards.</li> <li><a href="https://www.figma.com/" target="_blank" rel="noreferrer noopener">Figma</a> – A popular tool for design and prototyping that has free wireframe kits to hit the ground running. Use the free plan to get started without paying.</li> <li><a href="https://wordpress.com/blog/2022/11/18/new-patterns-subscriptions-link-in-bio-wireframes-and-more/" target="_blank" rel="noreferrer noopener">WordPress.com</a>’s wireframe patterns – If you want to start with an pre-designed wireframe template, and adjust from there, WordPress.com has some patterns to make this simple.</li> </ul> <h2 class="wp-block-heading" id="find-the-right-website-layout-for-your-wordpress-site">Find the Right Website Layout for Your WordPress Site</h2> <p>The layout is one of the most decisive factors for the usability of your website. For that reason, it deserves ample consideration so that you can serve your visitors in the best way possible.</p> <p>Established page structures are a great way to get started. They have proven themselves over time and are able to fulfill established user expectations. While you can (and should) add your own flavor, you don’t have to reinvent the wheel. It’s also often feasible and sensible to use more than one layout in a website, especially on different pages.</p> <p>When making decisions, consider your type of website, goals, industry, and personal likes. Then, use wireframing to capture your ideas for your website layout. And remember, it’s all about your users. The best layouts are those that they hardly notice.</p> <p><em>Build fast, ship faster with Studio, a fast, free way to develop locally with WordPress. </em><a href="https://developer.wordpress.com/studio/" target="_blank" rel="noreferrer noopener"><em>Get started now</em></a><em>.</em></p> <div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled"><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-tumblr"><a rel="nofollow noopener noreferrer" data-shared="" class="share-tumblr sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=tumblr" target="_blank" title="Click to share on Tumblr" ><span></span><span class="sharing-screen-reader-text">Click to share on Tumblr (Opens in new window)</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-71849" class="share-x sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=x" target="_blank" title="Click to share on X" ><span></span><span class="sharing-screen-reader-text">Click to share on X (Opens in new window)</span></a></li><li class="share-mastodon"><a rel="nofollow noopener noreferrer" data-shared="sharing-mastodon-71849" class="share-mastodon sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=mastodon" target="_blank" title="Click to share on Mastodon" ><span></span><span class="sharing-screen-reader-text">Click to share on Mastodon (Opens in new window)</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-71849" class="share-facebook sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=facebook" target="_blank" title="Click to share on Facebook" ><span></span><span class="sharing-screen-reader-text">Click to share on Facebook (Opens in new window)</span></a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer" data-shared="sharing-linkedin-71849" class="share-linkedin sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=linkedin" target="_blank" title="Click to share on LinkedIn" ><span></span><span class="sharing-screen-reader-text">Click to share on LinkedIn (Opens in new window)</span></a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer" data-shared="" class="share-jetpack-whatsapp sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=jetpack-whatsapp" target="_blank" title="Click to share on WhatsApp" ><span></span><span class="sharing-screen-reader-text">Click to share on WhatsApp (Opens in new window)</span></a></li><li class="share-threads"><a rel="nofollow noopener noreferrer" data-shared="sharing-threads-71849" class="share-threads sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=threads" target="_blank" title="Click to share on Threads" ><span></span><span class="sharing-screen-reader-text">Click to share on Threads (Opens in new window)</span></a></li><li class="share-bluesky"><a rel="nofollow noopener noreferrer" data-shared="sharing-bluesky-71849" class="share-bluesky sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=bluesky" target="_blank" title="Click to share on Bluesky" ><span></span><span class="sharing-screen-reader-text">Click to share on Bluesky (Opens in new window)</span></a></li><li><a href="#" class="sharing-anchor sd-button share-more"><span>More</span></a></li><li class="share-end"></li></ul><div class="sharing-hidden"><div class="inner" style="display: none;"><ul><li class="share-email"><a rel="nofollow noopener noreferrer" data-shared="" class="share-email sd-button share-icon no-text" href="mailto:?subject=%5BShared%20Post%5D%2011%20Website%20Layout%20Examples%20for%20Every%20Type%20of%20Page&body=https%3A%2F%2Fwordpress.com%2Fblog%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F&share=email" target="_blank" title="Click to email a link to a friend" data-email-share-error-title="Do you have email set up?" data-email-share-error-text="If you're having problems sharing via email, you might not have email set up for your browser. You may need to create a new email yourself." data-email-share-nonce="a6e55d1542" data-email-share-track-url="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=email"><span></span><span class="sharing-screen-reader-text">Click to email a link to a friend (Opens in new window)</span></a></li><li class="share-print"><a rel="nofollow noopener noreferrer" data-shared="" class="share-print sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#print" target="_blank" title="Click to print" ><span></span><span class="sharing-screen-reader-text">Click to print (Opens in new window)</span></a></li><li class="share-pinterest"><a rel="nofollow noopener noreferrer" data-shared="sharing-pinterest-71849" class="share-pinterest sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=pinterest" target="_blank" title="Click to share on Pinterest" ><span></span><span class="sharing-screen-reader-text">Click to share on Pinterest (Opens in new window)</span></a></li><li class="share-reddit"><a rel="nofollow noopener noreferrer" data-shared="" class="share-reddit sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=reddit" target="_blank" title="Click to share on Reddit" ><span></span><span class="sharing-screen-reader-text">Click to share on Reddit (Opens in new window)</span></a></li><li class="share-pocket"><a rel="nofollow noopener noreferrer" data-shared="" class="share-pocket sd-button share-icon no-text" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?share=pocket" target="_blank" title="Click to share on Pocket" ><span></span><span class="sharing-screen-reader-text">Click to share on Pocket (Opens in new window)</span></a></li><li class="share-end"></li></ul></div></div></div></div></div><div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-3584907-71849-6741adf0a49d5' data-src='//widgets.wp.com/likes/index.html?ver=20241123#blog_id=3584907&post_id=71849&origin=en.blog.wordpress.com&obj_id=3584907-71849-6741adf0a49d5&domain=wordpress.com' data-name='like-post-frame-3584907-71849-6741adf0a49d5' data-title='Like or Reblog'><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class='loading'>Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div></div> </div> </div> </div> </article> <div id="entry-comments" class="wpblog__container"> <div class="wpblog-comments">  <h3 id="comments" class="commentsheader">2 Comments</h3> <div class="commentnav"> <div class="alignleft"></div> <div class="alignright"></div> </div> <ol class="commentlist"> <li class="comment byuser comment-author-willyholmesspoelder even thread-even depth-1" id="comment-444785"> <cite class="comment-author"> <img alt='' src='https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=32&d=retro' srcset='https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=32&d=retro 1x, https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=48&d=retro 1.5x, https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=64&d=retro 2x, https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=96&d=retro 3x, https://1.gravatar.com/avatar/a9887081c75931189259ada0311f77c29f1ad55d7b5e9680e1035597203e71ee?s=128&d=retro 4x' class='avatar avatar-32' height='32' width='32' loading='lazy' decoding='async' /> <a href="http://www.willyholmesspoelder.org" class="url" rel="ugc external nofollow">willyholmesspoelder</a> </cite> <small class="commentmetadata"> <a href="#comment-444785" title=""> Nov 14th at 10:09 pm </a> </small> <div class="contenttext"><p>Wow, and thank you, Nick Schaeferhoff.<br /> That was a huge WordPress email, which kept me reading (for ages). And very educational too.<br /> Of course I saved it myself in my Gmail archive under WordPress.<br /> The website layout that still suits me best is shown in the email!<br /> Hoping: that those who send me likes, spent 9 minutes reading 📚 my stuff (vs 9 seconds).<br /> Bye bye 👋 </p> <p id="comment-like-444785" data-liked=comment-not-liked class="comment-likes comment-not-liked"><a href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?like_comment=444785&_wpnonce=531ffe3bd9" class="comment-like-link needs-login" data-blog="3584907"><span>Like</span></a><span id="comment-like-count-444785" class="comment-like-feedback">Liked by <a href="#" class="view-likers" data-like-count="9">9 people</a></span></p> </div> <ul class="comment-actions"> </ul> </li> </li> <li class="comment byuser comment-author-connect2y odd alt thread-odd thread-alt depth-1" id="comment-444821"> <cite class="comment-author"> <img alt='' src='https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=32&d=retro' srcset='https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=32&d=retro 1x, https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=48&d=retro 1.5x, https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=64&d=retro 2x, https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=96&d=retro 3x, https://0.gravatar.com/avatar/c1013d82befe14312619027344908757f1a6bdbb352bbb990e6e9278d15a40d1?s=128&d=retro 4x' class='avatar avatar-32' height='32' width='32' loading='lazy' decoding='async' /> <a href="http://connect2y.wordpress.com" class="url" rel="ugc external nofollow">connect2y</a> </cite> <small class="commentmetadata"> <a href="#comment-444821" title=""> Nov 18th at 11:56 am </a> </small> <div class="contenttext"><p>There is a lot of comfort in knowing that there is a log of choice in Website Layouts, Something that we often overlook or were unaware of.. Now, with this knowledge, we can make the right selection in what should be the appearance in the images and content for a website page. Thank you for this article.</p> <p id="comment-like-444821" data-liked=comment-not-liked class="comment-likes comment-not-liked"><a href="https://wordpress.com/blog/2024/11/14/website-layout-examples/?like_comment=444821&_wpnonce=eab61d7430" class="comment-like-link needs-login" data-blog="3584907"><span>Like</span></a><span id="comment-like-count-444821" class="comment-like-feedback">Liked by <a href="#" class="view-likers" data-like-count="4">4 people</a></span></p> </div> <ul class="comment-actions"> </ul> </li> </li> </ol> <div class="commentnav"> <div class="alignleft"></div> <div class="alignright"></div> </div> <div style="clear: both; margin-top: 15px;"></div> <div id="comments_warn"> <p> Please do not use these comments for asking questions, support, or bug reporting. Use the <a href="https://wordpress.com/forums/">forums</a> or <a href="https://wordpress.com/support/contact/">support contact form</a> for that. </p> <p> Please read our <a href="https://wordpress.com/blog/comment-guidelines/">comment guidelines</a> before posting. </p> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/2024/11/14/website-layout-examples/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://en.blog.wordpress.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><div id="comment-form__verbum" class="transparent"></div><div class="verbum-form-meta"><input type='hidden' name='comment_post_ID' value='71849' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> <input type="hidden" name="highlander_comment_nonce" id="highlander_comment_nonce" value="e3e0ad3bd3" /> <input type="hidden" name="verbum_show_subscription_modal" value="hidden_disabled" /></div></form> </div> </div> </div>  <section class="wpblog-signup wpblog__section wpblog--bg-blue wpblog__section--padded wpblog-signup--simple wpblog-subscribed"> <div class="wpblog__container"> <div class="wpblog-signup__container"> <div class="wpblog-signup-header"> <h2 class="wpblog__section-heading">Don’t miss a thing</h2> <p class="wpblog__section-subheading"> Sign up for the WordPress.com newsletter to get news, updates, and all the latest articles straight to your inbox. </p> </div>  <div class="wpblog-signup__form"> <div class="jetpack_subscription_widget"> <div class="wp-block-jetpack-subscriptions__container"> <form action="https://subscribe.wordpress.com" method="post" accept-charset="utf-8" data-blog="3584907" data-post_access_level="everybody" id="subscribe-blog" > <p id="subscribe-email"> <label id="subscribe-field-label" for="subscribe-field" class="screen-reader-text" > Email Address: </label> <input type="email" name="email" style="padding: 8px 12px 8px 12px;" placeholder="Email Address" value="" id="subscribe-field" required /> </p> <p id="subscribe-submit" > <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="blog_id" value="3584907"/> <input type="hidden" name="source" value="https://wordpress.com/blog/2024/11/14/website-layout-examples/"/> <input type="hidden" name="sub-type" value="widget"/> <input type="hidden" name="redirect_fragment" value="subscribe-blog"/> <input type="hidden" id="_wpnonce" name="_wpnonce" value="54d65088db" /> <button type="submit" class="wp-block-button__link" style="padding: 8px 12px 8px 12px; margin: 0px; margin-left: 0px;" > Subscribe </button> </p> </form> </div> </div> </div> </div> </div> </section> </div> </div>   <div class="jetpack-instant-search__widget-area" style="display: none"> <div id="jetpack-search-filters-2" class="widget jetpack-filters widget_search"> <div id="jetpack-search-filters-2-wrapper" class="jetpack-instant-search-wrapper"> </div></div> </div> <section class="wpcom-global-nav-footer lp-block lp-footer-section lp-section is-style-text-white-background-gray-100 lp-padding-top-7 lp-padding-bottom-0" data-section-name="footer"><div class="lp-section__content has-small-font-size has-text-align-left"><div class="lp-wrapper lp-wrapper--layout-center-minus lp-wrapper--layout-wide@L"><div class="lp-padding-bottom-5 lp-padding-bottom-6@L"><h2 class="lp-hidden">WordPress.com</h2><svg class="lp-footer-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 36" role="presentation" aria-label="WordPress.com logo"><path d="M52.84 12.9c1.08 0 2 .24 2.8.71.78.47 1.4 1.14 1.82 1.99.44.85.65 1.84.65 2.97 0 1.13-.21 2.12-.65 2.97a4.78 4.78 0 0 1-1.83 1.97 5.3 5.3 0 0 1-2.79.7c-1.07 0-2-.23-2.79-.7a4.77 4.77 0 0 1-1.83-1.97 6.44 6.44 0 0 1-.64-2.97c0-1.13.21-2.13.64-2.97a4.77 4.77 0 0 1 1.83-1.99c.79-.47 1.72-.7 2.8-.7ZM31.37 9.4l2.65 10.73h.13L36.97 9.4h2.6l2.83 10.74h.13L45.17 9.4h2.85L43.9 24h-2.62l-2.94-10.25h-.11L35.28 24h-2.62L28.52 9.4h2.85Zm21.49 5.55c-.6 0-1.1.16-1.49.49a2.9 2.9 0 0 0-.88 1.3 5.4 5.4 0 0 0-.29 1.82c0 .67.1 1.27.3 1.81.18.54.48.97.87 1.3.4.32.9.48 1.49.48.58 0 1.07-.16 1.46-.48.39-.33.68-.76.88-1.3a5.4 5.4 0 0 0 .29-1.8c0-.68-.1-1.29-.3-1.83a2.88 2.88 0 0 0-.87-1.3c-.4-.33-.87-.49-1.46-.49ZM64.7 12.9a2.75 2.75 0 0 0-2.7 1.98h-.12v-1.83h-2.5v10.96h2.58v-6.44a2.27 2.27 0 0 1 1.2-2.07c.39-.2.81-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm8.95 1.96h-.1a4.93 4.93 0 0 0-.57-.85c-.24-.3-.57-.56-.99-.78a3.44 3.44 0 0 0-1.59-.32 4.24 4.24 0 0 0-3.93 2.55 7.1 7.1 0 0 0-.6 3.08c0 1.22.2 2.22.59 3.06a4.16 4.16 0 0 0 3.94 2.59 3.16 3.16 0 0 0 2.57-1.07c.25-.3.44-.58.58-.84h.15V24h2.55V9.4h-2.6v5.46Zm-.25 5.53c-.2.53-.5.95-.88 1.24-.38.3-.85.45-1.4.45-.55 0-1.04-.15-1.43-.46-.4-.3-.69-.73-.88-1.26-.2-.54-.3-1.15-.3-1.83 0-.69.1-1.28.3-1.81.19-.53.48-.94.87-1.24.38-.3.87-.45 1.44-.45.58 0 1.03.15 1.42.43.38.3.67.7.87 1.22.2.53.3 1.14.3 1.85 0 .7-.1 1.33-.3 1.86Zm13.24-10.36a5.87 5.87 0 0 0-2.84-.63h-5.5V24h2.66v-4.93h2.8c1.13 0 2.08-.2 2.86-.63a4.23 4.23 0 0 0 1.75-1.71c.4-.73.6-1.56.6-2.5s-.2-1.75-.6-2.48a4.22 4.22 0 0 0-1.73-1.72Zm-.68 5.58c-.2.4-.52.71-.93.94-.43.23-.96.34-1.62.34h-2.45v-5.28h2.43c.67 0 1.21.11 1.63.33.42.22.74.53.94.92.2.4.3.85.3 1.37 0 .53-.1.98-.3 1.38Zm9.39-2.71a2.75 2.75 0 0 0-2.71 1.98h-.12v-1.83h-2.51v10.96h2.59v-6.44a2.27 2.27 0 0 1 1.2-2.07c.38-.2.8-.3 1.28-.3a5.55 5.55 0 0 1 1.2.14v-2.37a8.44 8.44 0 0 0-.93-.07Zm9.81 1.33c-.47-.45-1-.78-1.6-1a5.68 5.68 0 0 0-4.66.4 4.87 4.87 0 0 0-1.82 2 6.49 6.49 0 0 0-.65 2.96c0 1.13.22 2.14.65 2.99a4.62 4.62 0 0 0 1.84 1.95c.8.46 1.75.69 2.85.69.85 0 1.61-.13 2.28-.39a4.2 4.2 0 0 0 1.63-1.1c.43-.47.72-1.02.87-1.66l-2.42-.27a2 2 0 0 1-.5.78 2.56 2.56 0 0 1-1.82.63 2.9 2.9 0 0 1-1.48-.36 2.46 2.46 0 0 1-.98-1.04 3.5 3.5 0 0 1-.35-1.57h7.66v-.8c0-.96-.13-1.78-.4-2.48a4.71 4.71 0 0 0-1.1-1.72Zm-6.15 3.26c.03-.43.13-.83.33-1.2a2.57 2.57 0 0 1 2.34-1.37 2.34 2.34 0 0 1 2.18 1.25c.2.38.31.82.32 1.32h-5.17Zm14.65.27-1.87-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.36-.77c0-.37.18-.67.54-.9.37-.24.82-.36 1.36-.36.4 0 .74.07 1.02.2.27.13.5.3.66.5.16.21.28.44.35.67l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.05-.82 6.2 6.2 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.55 1.76c0 .8.25 1.46.75 1.98s1.29.89 2.34 1.1l1.88.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.19.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84.91 0 1.72-.15 2.43-.44.7-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.26-1.42-.77-1.9a4.76 4.76 0 0 0-2.32-1.07Zm10.13 0-1.88-.4c-.56-.13-.96-.3-1.2-.5a.94.94 0 0 1-.35-.77c0-.37.17-.67.54-.9a2.4 2.4 0 0 1 1.36-.36c.4 0 .73.07 1.01.2a1.8 1.8 0 0 1 1.01 1.17l2.36-.25a3.45 3.45 0 0 0-1.38-2.22 5.03 5.03 0 0 0-3.04-.82 6.1 6.1 0 0 0-2.32.4 3.6 3.6 0 0 0-1.57 1.16 2.8 2.8 0 0 0-.56 1.76c0 .8.25 1.46.76 1.98.5.52 1.28.89 2.34 1.1l1.87.4c.5.1.88.26 1.12.47.24.2.36.46.36.78 0 .37-.18.68-.56.93-.38.25-.87.38-1.49.38a2.5 2.5 0 0 1-1.45-.38 1.77 1.77 0 0 1-.73-1.12l-2.53.24c.16 1 .65 1.8 1.47 2.36.82.56 1.9.84 3.25.84a6.3 6.3 0 0 0 2.43-.44c.71-.3 1.26-.7 1.66-1.23.4-.53.6-1.13.6-1.82 0-.79-.25-1.42-.76-1.9a4.76 4.76 0 0 0-2.32-1.07Zm5.85 3.28a1.55 1.55 0 0 0-1.58 1.55c0 .44.15.8.46 1.11.3.3.68.46 1.12.46.28 0 .54-.07.77-.21.24-.14.43-.33.58-.57a1.5 1.5 0 0 0-.25-1.89c-.32-.3-.68-.45-1.1-.45ZM136 15.4c.4-.28.87-.42 1.4-.42.62 0 1.12.18 1.5.53.37.35.61.8.71 1.32h2.48a4.07 4.07 0 0 0-.7-2.07 4.07 4.07 0 0 0-1.65-1.37 5.52 5.52 0 0 0-2.38-.5 4.83 4.83 0 0 0-4.61 2.71 6.47 6.47 0 0 0-.64 2.96c0 1.11.2 2.08.63 2.93a4.77 4.77 0 0 0 1.81 2 5.3 5.3 0 0 0 2.83.72 5.4 5.4 0 0 0 2.4-.5 4.04 4.04 0 0 0 2.3-3.46h-2.47c-.08.4-.22.73-.42 1-.2.28-.46.5-.76.64s-.65.21-1.03.21c-.54 0-1-.14-1.4-.43-.4-.28-.71-.7-.94-1.23a5.03 5.03 0 0 1-.32-1.92c0-.75.1-1.37.33-1.9.22-.53.53-.93.93-1.22Zm14.8-1.8a5.34 5.34 0 0 0-2.79-.7c-1.07 0-2 .23-2.8.7a4.77 4.77 0 0 0-1.82 1.99 6.49 6.49 0 0 0-.65 2.97c0 1.13.22 2.12.65 2.97.43.84 1.04 1.5 1.83 1.97s1.72.7 2.79.7 2-.23 2.8-.7a4.78 4.78 0 0 0 1.82-1.97 6.5 6.5 0 0 0 .65-2.97 6.5 6.5 0 0 0-.65-2.97 4.77 4.77 0 0 0-1.83-1.99Zm-.44 6.76c-.19.54-.48.97-.88 1.3-.39.32-.87.48-1.46.48a2.3 2.3 0 0 1-1.48-.48c-.4-.33-.69-.76-.88-1.3-.2-.54-.3-1.14-.3-1.8 0-.68.1-1.29.3-1.83.2-.54.49-.98.88-1.3.4-.33.89-.49 1.48-.49.6 0 1.07.16 1.46.49.4.32.69.76.88 1.3.2.54.3 1.15.3 1.82 0 .67-.1 1.27-.3 1.81Zm18.68-6.5a3.36 3.36 0 0 0-2.47-.96c-.8 0-1.49.18-2.07.54-.58.37-1 .85-1.23 1.46h-.12a2.85 2.85 0 0 0-1.08-1.47 3.2 3.2 0 0 0-1.89-.54 3.3 3.3 0 0 0-1.9.54c-.53.35-.9.84-1.14 1.47h-.12v-1.87h-2.48V24h2.6v-6.66c0-.46.08-.85.26-1.2.18-.33.43-.6.73-.78.31-.2.65-.28 1.02-.28.55 0 1 .17 1.34.5.34.34.5.8.5 1.36V24h2.55v-6.83c0-.62.17-1.12.52-1.51.35-.39.84-.58 1.47-.58a2 2 0 0 1 1.33.47c.36.32.54.82.54 1.5V24h2.6v-7.35c0-1.23-.32-2.16-.96-2.8v.01ZM11.47 5.33c6.32 0 11.46 5.12 11.46 11.42a11.46 11.46 0 0 1-22.93 0c0-6.3 5.14-11.42 11.47-11.42Zm.18 12.32-3.1 8.95a10.38 10.38 0 0 0 6.34-.16.9.9 0 0 1-.07-.15l-3.17-8.64Zm-9.6-5.08A10.26 10.26 0 0 0 6.97 26Zm18.46-.75c.05.33.07.68.07 1.06 0 1.04-.2 2.21-.78 3.68l-3.15 9.06a10.26 10.26 0 0 0 3.86-13.8ZM11.47 6.5c-3.6 0-6.77 1.84-8.62 4.63A23.92 23.92 0 0 0 6.26 11c.56-.03.62.78.07.85 0 0-.56.06-1.18.1L8.9 23.06l2.26-6.74-1.6-4.39c-.56-.03-1.09-.1-1.09-.1-.55-.03-.49-.87.07-.84 0 0 1.7.13 2.71.13C12.33 11.13 14 11 14 11c.55-.03.62.78.07.85 0 0-.56.06-1.18.1l3.72 11.04 1.03-3.43a9.5 9.5 0 0 0 .79-3.32 5.4 5.4 0 0 0-.85-2.83c-.53-.85-1.02-1.56-1.02-2.4 0-.95.72-1.83 1.74-1.83h.13a10.28 10.28 0 0 0-6.96-2.69Z" /></svg></div><div class="lp-grid lp-grid--type-footer lp-grid--gutter-y-4"><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Products</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--hosting"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/hosting/">WordPress Hosting</a></li><li class="lp-block x-nav-footer--agencies"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/for-agencies/">WordPress for Agencies</a></li><li class="lp-block x-nav-footer--domains"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/domains/">Domain Names</a></li><li class="lp-block x-nav-footer--website-builder"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/website-builder/">Website Builder</a></li><li class="lp-block x-nav-footer--create-blog"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/create-blog/">Create a Blog</a></li><li class="lp-block x-nav-footer--email"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/professional-email/">Professional Email</a></li><li class="lp-block x-nav-footer--p2"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/p2/">P2: WordPress for Teams</a></li><li class="lp-block x-nav-footer--website-design-service"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/website-design-service/">Website Design Services</a></li><li class="lp-block x-nav-footer--vip"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wpvip.com/wordpress-vip-agile-content-platform?utm_source=WordPresscom&utm_medium=automattic_referral&utm_campaign=footer">Enterprise <span class="lp-link-chevron-external">WordPress</span></a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Features</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--features"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/features/">Overview</a></li><li class="lp-block x-nav-footer--themes"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/themes">WordPress Themes</a></li><li class="lp-block x-nav-footer--plugins"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/plugins">WordPress Plugins</a></li><li class="lp-block x-nav-footer--patterns"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/patterns">WordPress Patterns</a></li><li class="lp-block x-nav-footer--google"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/google/">Google Apps</a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Resources</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--support"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/support/">WordPress.com Support</a></li><li class="lp-block x-nav-footer--forums"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/forums/">WordPress Forums</a></li><li class="lp-block x-nav-footer--blog"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/blog/">WordPress News</a></li><li class="lp-block x-nav-footer--experts"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/go/">Website Building Tips</a></li><li class="lp-block x-nav-footer--business-name-generator"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/business-name-generator/">Business Name Generator</a></li><li class="lp-block x-nav-footer--logo-maker"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/logo-maker/">Logo Maker</a></li><li class="lp-block x-nav-footer--discover"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/discover">Discover New Posts</a></li><li class="lp-block x-nav-footer--tags"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/tags">Popular Tags</a></li><li class="lp-block x-nav-footer--search"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/read/search">Blog Search</a></li><li class="lp-block x-nav-footer--webinars"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/webinars/">Daily Webinars</a></li><li class="lp-block x-nav-footer--learn"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/learn/">Learn WordPress</a></li><li class="lp-block x-nav-footer--dev-resources"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://developer.wordpress.com/">Developer <span class="lp-link-chevron-external">Resources</span></a></li><li class="lp-block x-nav-footer--remove_subscriptions"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/me/purchases" data-is-fcca="1">Remove Subscriptions</a></li></ul></details></div><div class="lp-grid__column-span-4 lp-grid__column-span-1@L"><details class="lp-footer-stack"><summary><div class="lp-footer-stack__summary lp-color-primary"><div class="lp-footer-stack__summary__content lp-bold">Company</div><svg class="lp-footer-stack__summary__marker lp-display-none@L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg></div></summary><ul class="lp-footer-stack__content"><li class="lp-block x-nav-footer--about"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/about/">About</a></li><li class="lp-block x-nav-footer--partners"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/partners/">Partners</a></li><li class="lp-block x-nav-footer--press"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/press/"> <span class="lp-link-chevron-external">Press</span></a></li><li class="lp-block x-nav-footer--tos"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://wordpress.com/tos/">Terms of Service</a></li><li class="lp-block x-nav-footer--privacy"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/privacy/">Privacy <span class="lp-link-chevron-external">Policy</span></a></li><li class="lp-block x-nav-footer--ccpa-dnsd"><a class="lp-footer-stack__content__item lp-link-invisible" href="#" data-is-ccpa-dnsd="1" data-is-ccpa-dnsd-trigger="1">Do Not Sell or Share My Personal Information</a></li><li class="lp-block x-nav-footer--ccpa-privacy"><a class="lp-footer-stack__content__item lp-link-invisible" href="https://automattic.com/privacy/#california-consumer-privacy-act-ccpa" data-is-ccpa-dnsd="1">Privacy Notice for California Users</a></li></ul></details></div></div><div class="lp-grid lp-grid--type-footer lp-padding-top-7"><div class="lp-grid__column-span-4 lp-grid__column-span-1@L lp-grid__order-1@L lp-pb-36 lp-pb-0@L"><div class="lp-language-picker" aria-label="Language Picker"><select class="lp-language-picker__content" title="Change Language"><option lang="en" value="en" selected="">English</option><option lang="es" value="es">Español</option><option lang="fr" value="fr">Français</option><option lang="pt-br" value="pt-br">Português do Brasil</option><option lang="ja" value="ja">日本語</option></select><svg class="lp-language-picker__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.636 0 0 3.545 0 8c0 4.364 3.545 8 8 8 4.364 0 8-3.545 8-8s-3.636-8-8-8Zm5.91 5h-2.365c-.454-1.364-1-2.545-1.727-3.455A6.74 6.74 0 0 1 13.91 5Zm.635 2.91c0 .545-.09 1.09-.181 1.635h-2.637c.091-.545.091-1.09.091-1.636 0-.545-.09-1.09-.09-1.636h2.636c.181.545.181 1.09.181 1.636ZM8 14c-.91-.636-1.636-1.727-2.09-3.182h4.18C9.637 12.273 8.91 13.455 8 14ZM5.636 9.545c-.09-.545-.09-1-.09-1.636 0-.545.09-1.09.09-1.636h4.728c.09.545.09 1 .09 1.636 0 .636-.09 1.091-.09 1.636H5.636ZM1.455 7.91c0-.545.09-1.09.181-1.636h2.637c-.091.545-.091 1.09-.091 1.636 0 .546.09 1.091.09 1.636H1.637C1.455 9 1.455 8.455 1.455 7.91ZM8 1.82c.91.636 1.636 1.726 2.09 3.181H5.91C6.363 3.545 7.09 2.364 8 1.818Zm-1.818-.274C5.455 2.455 4.909 3.636 4.545 5H2.091a6.74 6.74 0 0 1 4.09-3.455ZM2.09 10.91h2.364c.363 1.364.909 2.546 1.636 3.364-1.636-.546-3.182-1.818-4-3.364Zm7.727 3.364c.727-.91 1.273-2 1.637-3.364h2.363c-.727 1.546-2.182 2.818-4 3.364Z" /></svg><svg class="lp-language-picker__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="m14 5.98-6 6-6-6 1.06-1.06L8 9.86l4.94-4.93z" /></svg><a class="lp-language-picker__link lp-hidden" lang="en" href="https://wordpress.com/blog/" data-href="https://wordpress.com/blog/" tabindex="-1">English</a><a class="lp-language-picker__link lp-hidden" lang="es" href="https://wordpress.com/es/blog/" data-href="https://wordpress.com/es/blog/" tabindex="-1">Español</a><a class="lp-language-picker__link lp-hidden" lang="fr" href="https://wordpress.com/fr/blog/" data-href="https://wordpress.com/fr/blog/" tabindex="-1">Français</a><a class="lp-language-picker__link lp-hidden" lang="pt-br" href="https://wordpress.com/pt-br/blog/" data-href="https://wordpress.com/pt-br/blog/" tabindex="-1">Português do Brasil</a><a class="lp-language-picker__link lp-hidden" lang="ja" href="https://wordpress.com/ja/blog/" data-href="https://wordpress.com/ja/blog/" tabindex="-1">日本語</a></div></div><div class="lp-grid__column-span-4 lp-grid__column-span-3@L"><div class="lp-flex@L lp-flex--align-center@L has-text-align-center"><h3 class="lp-hidden">Mobile Apps</h3><ul class="lp-flex lp-flex--justify-center lp-flex--wrap lp-flex--gap-1 has-normal-font-size"><li><div class="lp-block lp-mobile-badge lp-mobile-badge--type-apple-app-store"><a class="lp-mobile-badge__link" href="https://apps.apple.com/app/apple-store/id1565481562?ct=wp.com--footer&mt=8&pt=299112"><span class="lp-mobile-badge__content"><svg class="lp-mobile-badge__content__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 23" aria-hidden="true"><path d="m12.88 5.97.28.02c1.6.05 3.08.85 4 2.16a4.95 4.95 0 0 0-2.36 4.15 4.78 4.78 0 0 0 2.92 4.4 10.96 10.96 0 0 1-1.52 3.1c-.9 1.33-1.83 2.64-3.32 2.66-1.45.04-1.94-.85-3.6-.85-1.67 0-2.19.83-3.57.89-1.42.05-2.5-1.43-3.43-2.76-1.85-2.7-3.3-7.63-1.36-10.97a5.32 5.32 0 0 1 4.47-2.73C6.81 6 8.13 7 9 7c.86 0 2.48-1.18 4.16-1zm.3-5.25a4.87 4.87 0 0 1-1.11 3.49 4.1 4.1 0 0 1-3.24 1.53 4.64 4.64 0 0 1 1.14-3.36A4.96 4.96 0 0 1 13.18.72z" /></svg><span class="lp-mobile-badge__content__label"><span class="lp-mobile-badge__line lp-mobile-badge__line--is-top">Download on the</span> <span class="lp-mobile-badge__line lp-mobile-badge__line--is-bottom">App Store</span></span></span></a></div></li><li><div class="lp-block lp-mobile-badge lp-mobile-badge--type-google-play"><a class="lp-mobile-badge__link" href="https://play.google.com/store/apps/details?id=com.jetpack.android&referrer=utm_source%3Dwordpress.com%26utm_campaign%3Dfooter%26utm_medium%3Dwebsite"><span class="lp-mobile-badge__content"><svg class="lp-mobile-badge__content__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 38" aria-hidden="true"><defs><path id="lp-mobile-badge-path-1" d="M31.28 24.77 6.05 39.07A4.05 4.05 0 0 1 0 35.55V6.95a4.05 4.05 0 0 1 6.05-3.52l25.23 14.3a4.05 4.05 0 0 1 0 7.04Z" /></defs><g transform="translate(0 -2.25)"><mask id="lp-mobile-badge-path-2" fill="#fff"><use xlink:href="#lp-mobile-badge-path-1" /></mask><use fill="#34a853" xlink:href="#lp-mobile-badge-path-1" /><path fill="#ea4335" mask="url(#lp-mobile-badge-path-2)" d="M-4 21.25h40v20H-4z" /><path fill="#fbbc04" mask="url(#lp-mobile-badge-path-2)" d="M35 2v38.5L15.62 21.25z" /><path fill="#4285f4" mask="url(#lp-mobile-badge-path-2)" d="m-4 1.75 19.62 19.5L-4 40.75z" /></g></svg><span class="lp-mobile-badge__content__label"><span class="lp-mobile-badge__line lp-mobile-badge__line--is-top">Get it on</span> <span class="lp-mobile-badge__line lp-mobile-badge__line--is-bottom">Google Play</span></span></span></a></div></li></ul><h3 class="lp-hidden">Social Media</h3><ul class="lp-footer-social-media lp-flex lp-flex--justify-center lp-pt-18 lp-pt-0@L lp-pl-24@L"><li class="lp-block x-nav-footer--facebook lp-pl-8@L"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.facebook.com/WordPresscom/" title="WordPress.com on Facebook"><span class="lp-hidden">WordPress.com on Facebook</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2C6.03 1.2 1.2 6.06 1.2 12.06c0 5.43 3.95 9.92 9.11 10.74v-7.6H7.57v-3.14h2.74V9.67c0-2.72 1.61-4.23 4.08-4.23 1.18 0 2.42.22 2.42.22v2.67h-1.36c-1.35 0-1.76.84-1.76 1.7v2.03h3l-.49 3.15h-2.5v7.59a10.85 10.85 0 0 0 9.1-10.74c0-6-4.83-10.86-10.8-10.86Z" /></svg></a></li><li class="lp-block x-nav-footer--twitter"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://twitter.com/wordpressdotcom" title="WordPress.com on X (Twitter)"><span class="lp-hidden">WordPress.com on X (Twitter)</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6ZM10.03 6l2.9 4.23L16.58 6h1l-4.2 4.87 4.56 6.63h-3.35l-3.07-4.47-3.84 4.47h-.99l4.4-5.1L6.67 6h3.35Zm-.47.75H8.03l3.54 5.06.45.64 3.03 4.34h1.52l-3.71-5.32-.45-.63-2.85-4.1Z" /></svg></a></li><li class="lp-block x-nav-footer--instagram"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.instagram.com/wordpressdotcom/" title="WordPress.com on Instagram"><span class="lp-hidden">WordPress.com on Instagram</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6Zm.5 3.6c1.5 0 1.77.01 2.47.04a5.3 5.3 0 0 1 1.75.34c.47.18.87.43 1.27.83.4.4.65.8.83 1.27.18.46.3.99.34 1.75l.02.47v.18c.01.36.02.78.02 1.61v1.42c0 1.32-.01 1.6-.04 2.26a5.34 5.34 0 0 1-.34 1.75c-.18.47-.43.87-.83 1.27-.4.4-.8.65-1.27.83-.46.18-.98.3-1.75.34l-.47.02h-.18c-.36.01-.77.02-1.6.02h-1.43c-.83 0-1.25 0-1.61-.02H9.5l-.47-.02a5.29 5.29 0 0 1-1.75-.34A3.53 3.53 0 0 1 6.01 18c-.4-.4-.65-.8-.83-1.27-.18-.46-.3-.98-.34-1.75l-.02-.47v-.18a51 51 0 0 1-.02-1.4v-1.85c0-.77.01-1.15.02-1.5V9.4l.02-.38c.04-.76.16-1.29.34-1.75.18-.47.43-.87.83-1.27.4-.4.8-.65 1.28-.83a5.28 5.28 0 0 1 2.12-.35h.18c.41-.02.86-.03 1.92-.03Zm-1.14 1.3c-1.35 0-1.6 0-2.27.04-.7.03-1.08.15-1.33.25a2.38 2.38 0 0 0-1.37 1.36c-.1.26-.22.64-.25 1.34-.03.62-.04.88-.04 2.01v1.8c0 1.13.01 1.4.04 2.02.03.7.15 1.08.25 1.33a2.34 2.34 0 0 0 1.37 1.37 4 4 0 0 0 1.33.25c.62.03.89.04 2.02.04h1.79c1.12 0 1.39-.01 2.01-.04.7-.03 1.08-.15 1.34-.25a2.38 2.38 0 0 0 1.36-1.37c.1-.25.22-.63.25-1.33l.02-.38v-.17c.02-.35.02-.71.02-1.47v-1.78c0-1.13-.01-1.4-.04-2.02a3.98 3.98 0 0 0-.25-1.34 2.23 2.23 0 0 0-.53-.82c-.26-.26-.5-.41-.83-.54-.26-.1-.64-.22-1.34-.25-.65-.03-.91-.04-2.21-.04h-1.34ZM12 8.3a3.7 3.7 0 1 1 0 7.4 3.7 3.7 0 0 1 0-7.4Zm0 1.3a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Zm3.84-2.3a.86.86 0 1 1 0 1.72.86.86 0 0 1 0-1.73Z" /></svg></a></li><li class="lp-block x-nav-footer--youtube"><a class="lp-display-block lp-pt-12 lp-pr-8 lp-pb-12 lp-pl-8 lp-color" href="https://www.youtube.com/WordPressdotcom" title="WordPress.com on YouTube"><span class="lp-hidden">WordPress.com on YouTube</span><svg class="lp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 1.2a10.8 10.8 0 1 0 0 21.6 10.8 10.8 0 0 0 0-21.6Zm5.61 5.73c.62.18 1.11.7 1.28 1.36.27 1.07.3 3.15.31 3.62v.19c0 .46-.03 2.55-.3 3.61a1.88 1.88 0 0 1-1.28 1.37c-1.02.3-4.83.32-5.51.32h-.21c-.69 0-4.5-.03-5.52-.32-.62-.18-1.1-.7-1.27-1.37-.27-1.07-.3-3.15-.3-3.61v-.19c0-.47.03-2.55.29-3.6.16-.67.65-1.2 1.27-1.37 1.05-.3 5.09-.34 5.57-.34h.16c.68 0 4.5.03 5.51.33Zm-7.05 2.76v4.63L14.29 12l-3.73-2.3Z" /></svg></a></li></ul></div></div></div></div><div class="lp-wrapper lp-wrapper--layout-full lp-padding-top-5"><footer class="lp-section is-style-white-gray-mono lp-padding-top-4 lp-padding-bottom-4"><div class="lp-section__content has-tiny-font-size has-text-align-center"><h2 class="lp-hidden">Automattic</h2><div class="lp-wrapper lp-wrapper--layout-wide"><div class="lp-grid lp-grid--type-footer lp-grid--align-baseline lp-grid--gutter-y-3"><div class="lp-grid__column-span-4 lp-grid__column-span-2@M lp-text-left@M color-blue-50"><a class="lp-flex lp-flex--inline lp-link-invisible lp-no-wrap" href="https://automattic.com" data-dictionary="WyJBbiBBdXRvbWF0dGljIGJyYWluY2hpbGQiLCJBbiBBdXRvbWF0dGljIGNvbnRyYXB0aW9uIiwiQW4gQXV0b21hdHRpYyBjcmVhdGlvbiIsIkFuIEF1dG9tYXR0aWMgZXhwZXJpbWVudCIsIkFuIEF1dG9tYXR0aWMgaW52ZW50aW9uIiwiQW4gQXV0b21hdHRpYyBqb2ludCIsIkFuIEF1dG9tYXR0aWMgbWVkbGV5IiwiQW4gQXV0b21hdHRpYyBvcHVzIiwiQW4gQXV0b21hdHRpYyBwcm9kdWN0aW9uIiwiQW4gQXV0b21hdHRpYyBydWNrdXMiLCJBbiBBdXRvbWF0dGljIHRoaW5nYW1hamlnIl0="><span class="lp-hidden">Automattic</span><svg class="lp-icon lp-icon--custom-automattic-footer lp-color-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143 12" aria-hidden="true"><path d="M53.01 4.19a.749.749 0 0 0-1.033.226L50.225 7.13a.748.748 0 0 0 .219 1.035.748.748 0 0 0 1.033-.226l1.752-2.713a.748.748 0 0 0-.219-1.035Zm88.303-.303c-.922-.845-2.274-1.644-4.102-1.644-2.735 0-4.272 1.874-4.272 3.826v.2c0 1.935 1.552 3.748 4.41 3.748 1.705 0 3.118-.814 4.01-1.644l1.152 1.214c-1.122 1.106-3.027 2.043-5.285 2.043-3.872 0-6.222-2.52-6.222-5.285v-.338c0-2.765 2.565-5.377 6.314-5.377 2.166 0 4.133.906 5.193 2.043l-1.198 1.214Zm-16.931 7.343V1.967c.768 0 1.076-.415 1.076-.968h.814V11.23h-1.89Zm-9.202-8.633v8.633h-1.92V2.597h-4.471V.999h10.862v1.598h-4.471Zm-14.088 0v8.633h-1.92V2.597H94.7V.999h10.862v1.598h-4.471Zm-14.21.399-2.228 4.302h4.532L86.88 2.996Zm4.408 8.234-1.352-2.534h-6.007l-1.306 2.534h-2.028L86.128 1h1.598l5.623 10.231H91.29Zm-16.438 0V3.134l-.507.891-4.287 7.205h-.937l-4.24-7.205-.507-.89v8.095H62.5V1h2.657l4.04 7.02.477.86.477-.86L74.145 1h2.627V11.23h-1.92ZM37.765 2.597v8.633h-1.92V2.597h-4.471V.999h10.862v1.598h-4.471ZM21.587 11.63c-3.671 0-5.377-1.997-5.377-4.655V.999h1.905v6.007c0 1.89 1.245 3.01 3.61 3.01 2.428 0 3.427-1.12 3.427-3.01V.999h1.92v5.976c0 2.535-1.628 4.655-5.485 4.655ZM6.394 2.996 4.166 7.298h4.532L6.394 2.996Zm4.409 8.234L9.45 8.696H3.444L2.138 11.23H.11L5.64 1H7.24L12.86 11.23h-2.058ZM55.8 5.992c0-1.982-1.444-3.75-4.056-3.75-2.611 0-4.04 1.768-4.04 3.75v.245c0 1.982 1.429 3.78 4.04 3.78 2.612 0 4.056-1.798 4.056-3.78v-.245Zm-4.056 5.638c-3.626 0-5.976-2.612-5.976-5.331V5.96c0-2.766 2.35-5.331 5.976-5.331 3.642 0 5.992 2.565 5.992 5.331V6.3c0 2.72-2.35 5.331-5.992 5.331Z" /></svg></a></div><div class="lp-grid__column-span-4 lp-grid__column-span-2@M lp-text-right@M lp-color-primary"><a class="lp-link-invisible lp-link-chevron-external" href="https://automattic.com/work-with-us/" title="Remote Jobs">Work With Us</a></div></div></div></div></footer></div></div></section> <script id="landpack-nav-script-js-after"> document.addEventListener("DOMContentLoaded", () => { const API_GEO_ENDPOINT = 'https://public-api.wordpress.com/geo/'; const FCCA_LINK_SELECTOR = '.lp-footer-stack [data-is-fcca]'; function fetchGeoData() { return fetch(API_GEO_ENDPOINT).then(res => res.json()); } function removeLink(selector, condition) { document.querySelectorAll(selector).forEach(element => { const parent = element.parentNode; const parentTagName = parent.tagName.toLowerCase(); if (condition) { (parentTagName === 'li' ? parent : element).remove(); } }); } /** * Checks if the given data pertains to the specified region or country * @param {string} key - The key to check in the data * @param {string} name - The region or country name to check for * @param {object} data - The geolocation data * @returns {boolean} - True if the data pertains to the specified region or country */ function pertainsTo(key, name, data) { if (data && data[key] && name) { return data[key].toLowerCase() === name.toLowerCase(); } return false; } fetchGeoData().then(data => { const isFCCA = pertainsTo('country_long', 'germany', data); removeLink(FCCA_LINK_SELECTOR, !isFCCA); }); }); </script>  <script type="text/javascript"> ( function() { 'use strict'; var setupAnalytics = function() { window.a8cAnalyticsConfig = {"cookieBanner":{"version":"2","cssZIndex":50001,"skipBanner":false,"cookieDomain":"wordpress.com","v1CookieName":"sensitive_pixel_option","v2CookieName":"sensitive_pixel_options","v1Text":"Our websites and dashboards use cookies. By continuing, you agree to their use. <a target=\"_blank\" href=\"https:\/\/automattic.com\/cookies\/\">Learn more<\/a>, including how to control cookies.","v2Text":"As an open source company, we take your privacy seriously and want to be as transparent as possible. So: We use cookies to collect some personal data from you (like your browsing data, IP addresses, and other unique identifiers). Some of these cookies we absolutely need in order to make things work, and others you can choose in order to optimize your experience while using our site and services.","v2OptionsText":"Your privacy is critically important to us. We and our partners use, store, and process your personal data to optimize: our <strong>website<\/strong> such as by improving security or conducting analytics, <strong>marketing activities<\/strong> to help deliver relevant marketing or content, and your <strong>user experience<\/strong> such as by remembering your account name, language settings, or cart information, where applicable. You can customize your cookie settings below. Learn more in our <a href=\"https:\/\/automattic.com\/privacy\/\" target=\"_blank\">Privacy Policy<\/a> and <a href=\"https:\/\/automattic.com\/cookies\/\" target=\"_blank\">Cookie Policy<\/a>.","v2EssentialOptionHeading":"Required","v2EssentialOptionText":"These cookies are essential for our websites and services to perform basic functions and are necessary for us to operate certain features, like allowing registered users to authenticate and perform account-related functions, storing preferences set by users (like account name, language, and location), and ensuring our services operate properly.","v2AnalyticsOptionHeading":"Analytics","v2AnalyticsOptionText":"These cookies allow us to optimize performance by collecting information on how users interact with our websites.","v2AdvertisingOptionHeading":"Advertising","v2AdvertisingOptionText":"We and our advertising partners set these cookies to provide you with relevant content and to understand that content\u2019s effectiveness.","v1ButtonText":"Got It!","v2CustomizeButtonText":"Customize","v2AcceptAllButtonText":"Accept all","v2AcceptSelectionButtonText":"Accept selection","hiddenConsents":[],"isLoggedIn":false},"doNotSellDialog":{"contactEmailAddress":"privacypolicyupdates@automattic.com"},"adminAnalytics":"analytics-wpcom-admin.php","fireAnalyticsOptions":[]}; }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script> <div style="display: none;" id="a8c-analytics"> <script type="text/javascript"> ( function() { 'use strict'; /** * Establish the farthest away parent from an element matching * a given list of selectors. Selectors can be css classes, IDs, * element types, etc. (e.g. '.my-class', '#my-id', 'div', etc.) */ const getLastMatchingAncestor = ( event, selectors ) => { let { target: element } = event; let foundElement = null; while ( element && !foundElement ) { for ( const selector of selectors ) { if ( element.matches( selector ) ) { foundElement = element; break; } } element = element.parentElement; } return foundElement; } /** * Establish the closest parent from an element matching * a given list of selectors. Selectors can be css classes, IDs, * element types, etc. (e.g. '.my-class', '#my-id', 'div', etc.) */ const getClosestMatchingAncestor = ( event, selectors ) => { let { target: element } = event; let foundElement; for ( const selector of selectors ) { foundElement = element.closest( selector ); if ( foundElement ) { break; } } return foundElement; } /** * Main function to setup analytics. */ const setupAnalytics = () => { /** * Returns the current page path. */ function getCurrentPagePath( pathname = '' ) { return ( pathname || window.location.pathname ).replace( /^\/|\/$/g, '' ); } /** * Returns the current page name. */ function getCurrentPageName( pathname = '' ) { return getCurrentPagePath( pathname ).replace( getLocaleInPagePathRegExp(), '' ); } /** * Returns the current page locale. */ function getCurrentPageLocale() { const currentPagePath = getLocaleInPagePathRegExp().exec( getCurrentPagePath() ); return getCurrentPagePath !== null && getCurrentPagePath.length === 2 ? getCurrentPagePath[1] : ''; } /** * Helper function to extract locale from page path. */ function getLocaleInPagePathRegExp() { return /^(af|als|am|an|ar|arc|as|ast|av|ay|az|ba|bel|bg|bm|bn|bo|br|bs|ca|ce|ckb|cs|csb|cv|cy|da|de|dv|dz|el|el\-po|en|en\-gb|eo|es|es\-mx|et|eu|fa|fi|fo|fr|fr\-be|fr\-ca|fr\-ch|fur|fy|ga|gd|gl|gn|gu|he|hi|hr|hu|hy|ia|id|ii|ilo|is|it|ja|ka|kal|kir|km|kn|ko|kk|ks|kv|la|li|lo|lv|lt|mk|ml|mwl|mn|mr|ms|mya|nah|nap|ne|nds|nl|nn|nb|non|nv|oci|or|os|pa|pl|ps|pt|pt\-br|qu|ro|ru|rup|sc|si|sk|skr|sl|snd|so|sq|sr|su|sv|ta|te|th|tl|tir|tr|tt|ty|udm|ug|uk|ur|uz|vec|vi|wa|xal|yi|yo|za|zh\-cn|zh\-hk|zh\-tw)(?:\/|$)/; } /** * Returns the config for WPcom analytics. Sets various event props * used in tracking, e.g. locale, page path, etc. Mainly used for Tracks * event props. */ function getWPCOMAnalyticsDefaultConfig() { const currentGenericPageName = null; const cannonicalPath = null; return { // Current page props. currentPagePath: getCurrentPagePath(), currentPageName: getCurrentPageName(), currentGenericPageName: currentGenericPageName ?? getCurrentPageName( cannonicalPath ), currentPageLocale: getCurrentPageLocale(), // Page variation props. pageVariation: '', pagePersonalVariation: '', // Current user props. currentUserIdHash: "", currentUserIdHashShort: "", currentUserEmailHash: "", // Other misc. props. isHomepage: false, affiliateJSVersion: "1716355472", } } // When a8c-analytics:loaded is fired, start main event handling. document.addEventListener( 'a8c-analytics:loaded', () => { const cb = window.a8cAnalytics.cb; const kit = window.a8cAnalytics.kit; const config = getWPCOMAnalyticsDefaultConfig(); const configOptions = window.a8cAnalyticsConfig.fireAnalyticsOptions; // Extend config with any custom props. Object.assign( window.a8cAnalyticsConfig, config ); // Backcompat. for `lpName` and `lpVariation` config properties. config.currentPageName = ! configOptions.currentPageName && 'logged-out-homepage' === configOptions.lpName ? configOptions.lpName : config.currentPageName; config.currentPageName = ! configOptions.currentPageName && 'logged-out-app-promo' === configOptions.lpName ? configOptions.lpName : config.currentPageName; // Backcompat. for `lpPersonalVariation` config property. config.pageVariation = ! configOptions.pageVariation && configOptions.lpVariation ? configOptions.lpVariation : config.pageVariation; config.pagePersonalVariation = ! configOptions.pagePersonalVariation && configOptions.lpPersonalVariation ? configOptions.lpPersonalVariation : config.pagePersonalVariation; /** * Applies linkers, e.g. for "forwarding" certain URL parameters between WordPress.com * and other properties (e.g. Jetpack.com). Used for affiliate tracking, coupons, etc. */ const applyLinkers = () => { kit.linkQueryVars( [ { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack|woocommerce|crowdsignal|wpjobmanager)\.com(?:\/|$)/i, ], linkQueryVars: [ 'aff', 'affiliate', 'cid', // Aff campaign ID. 'sid', // Aff sub ID. 'irclickid' // Impact Affiliate Click ID ], }, { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack)\.com(?:\/|$)/i, ], linkQueryVars: [ 'coupon', ], }, ] ); } /** * Handles currencies. Gets the currency value from cookies, and sets the currency * if the cookie is not present. Can also be overridden by setting the `currency` URL * paramter. */ const fireCurrencyHandlers = () => { let currency = kit.getQueryVar( 'currency' ) || ''; if ( ! currency && 'amex-business-in' === config.currentPageName ) { currency = 'USD'; // Special case for this LP. } if ( currency ) { kit.docCookies.setItem( 'landingpage_currency', currency, 31536000, '/', '.rootDomain' ); } }; /** * Fires the `wpcom_page_view` Tracks event. */ const fireTracks = () => { const props = Object.assign( {}, kit.getQueryVars( '', kit.QUERY_PARAMS ), { // Page props. path: config.currentPagePath, name: config.currentPageName, locale: config.currentPageLocale, variation: config.pageVariation, personal_variation: config.pagePersonalVariation, // Back compat. LP props. lp_name: config.currentGenericPageName, lp_variation: config.pageVariation, lp_personal_variation: config.pagePersonalVariation, } ); window._tkq.push( [ 'recordEvent', 'wpcom_page_view', props ] ); }; function fireRedditAdvertisingPixel() { !function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document); rdt('init','a2_ehx23cq176s3'); rdt('track', 'PageVisit'); } /** * Handles the referral tracking. */ const fireAffiliateReferrals = () => { kit.attachScriptElement( 'https://s1.wp.com/wp-content/themes/h4/landing/marketing/js/affiliate-referrals.js?v=' + config.affiliateJSVersion ); }; /** * Loads the Google Ads gtag. */ const loadGoogleAdsGtag = () => { kit.loadGtag( 'AW-946162814' ); } /** * Loads and fires the Google Analytics 4. */ const fireGoogleAnalyticsFour = () => { const gtagOptions = { 'anonymize_ip': true, 'use_amp_client_id': true }; kit.loadGtag( 'G-1H4VG5F5JF', gtagOptions ); } const fireParsely = ( trackingId ) => { kit.loadParselyTracker( trackingId ); } const fireHotJar = () => { if ( ! kit.pertainsToSTS() ) { kit.fireHotjar( 227769 ); } } /** * Loads and fires the Facebook Pixel. */ const fireFacebook = () => { kit.loadFacebook(); fbq( 'init', '823166884443641' ); fbq( 'track', 'PageView' ); } /** * Loads and fires Microsoft Clarity */ const fireMicrosoftClarity = () => { if ( window.clarity ) { return; } // Needs to be set prior to loading the external script. window.clarity = window.clarity || function () { ( window.clarity.q = window.clarity.q || [] ).push( arguments ); }; const clarityScript = kit.attachScriptElement( 'https://www.clarity.ms/tag/j0cc1i1dba' ); document.body.appendChild( clarityScript ); }; const fireImpactAffiliate = () => { kit.loadImpactAffiliate( config.currentUserIdHash, config.currentUserEmailHash ); } /** * Handles scroll percentage tracking. */ const trackScrollPercentage = () => { const scrollPosition = window.pageYOffset; const pageHeight = document.body.scrollHeight - window.innerHeight; const scrollProgress = ( scrollPosition / pageHeight ) * 100; // Check if the user has scrolled to 25%, 50%, 75%, or 100% of the page if ( scrollProgress >= 25 && scrollProgress < 50 ) { dispatchScrollCustomEvent( 25 ) } else if ( scrollProgress >= 50 && scrollProgress < 75 ) { dispatchScrollCustomEvent( 50 ) } else if ( scrollProgress >= 75 && scrollProgress < 100 ) { dispatchScrollCustomEvent( 75 ) } else if ( scrollProgress >= 100 ) { dispatchScrollCustomEvent( 100 ) } } /** * Dispatches a custom event with the scroll percentage. */ const dispatchScrollCustomEvent = ( scrollPercentage ) => { const event = new CustomEvent( `PageScrollPercentage${scrollPercentage}`, { detail: scrollPercentage } ); window.dispatchEvent(event); } /** * Handles the scroll tracking callback. E.g. firing Tracks and GA events. */ const scrollTrackingCallback = ( event ) => { const { detail: scrollPercentage } = event; const trackingProps = {}; // Event props. trackingProps.percent = event.detail ?? 0; trackingProps.path = config.currentPagePath || ''; trackingProps.name = config.currentPageName || ''; trackingProps.locale = config.currentPageLocale || ''; trackingProps.variation = config.pageVariation || ''; trackingProps.personal_variation = config.pagePersonalVariation || ''; trackingProps.lp_name = config.currentGenericPageName || ''; trackingProps.lp_variation = config.pageVariation || ''; trackingProps.lp_personal_variation = config.pagePersonalVariation || ''; tracksAnalyticsScrollEvent( trackingProps ); } /** * Dispatches a Tracks event for page scroll. */ const tracksAnalyticsScrollEvent = ( trackingProps ) => { window._tkq.push( [ 'recordEvent', 'wpcom_page_scroll', trackingProps ] ); } // Call the trackScrollProgress function every time the user scrolls window.addEventListener( 'scroll', trackScrollPercentage ); // Listen to events for specific scroll percentages, each event is only acted upon once. window.addEventListener( 'PageScrollPercentage25', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage50', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage75', scrollTrackingCallback, { once: true } ) window.addEventListener( 'PageScrollPercentage100', scrollTrackingCallback, { once: true } ) /** * Handles click tracking for certain elements in Tracks and GA. */ const setupTracksGAClickTracking = () => { document.querySelector( 'body' ).addEventListener( 'click', ( event ) => { // We only care about clicks on certain elements. if ( event.target.matches( 'a, button, .click-tracking-enable' ) ) { const { target: clickEventTarget } = event; // Initialize eventProps object with some defaults. const eventProps = {}; eventProps.path = config.currentPagePath || ''; eventProps.name = config.currentPageName || ''; eventProps.lp_name = config.currentGenericPageName || ''; eventProps.locale = config.currentPageLocale || ''; eventProps.variation = config.pageVariation || ''; eventProps.personal_variation = config.pagePersonalVariation || ''; // Identify farthest and closest parent element. const selectors = [ '.wpcom-masterbar.wpcom-header', '.lpc', '.lp-block', '.lp-module', 'section', 'post', 'article' ]; const section = getLastMatchingAncestor( event, selectors ); const container = getClosestMatchingAncestor( event, selectors ); // Get class name and ID for container and add to props. eventProps.container_id = container ? container.getAttribute( 'id' ) : ''; eventProps.container_class = container ? container.getAttribute( 'class' ) : ''; eventProps.container = eventProps.container_id || eventProps.container_class; // What type of element have we clicked? eventProps.is_cta = clickEventTarget.matches( 'is-cta' ) ?? false; eventProps.is_in_header_nav = clickEventTarget.classList.contains('x-nav-link') || clickEventTarget.classList.contains('x-dropdown-link') || clickEventTarget.classList.contains('x-menu-link') || section === 'lpc-header-nav' || section === 'wpcom-masterbar.wpcom-header'; const isClickedElementButton = clickEventTarget.classList.contains('lpc-button') || clickEventTarget.classList.contains('button') || clickEventTarget.classList.contains('wp-block-button__link'); const isParentElementButton = clickEventTarget.parentElement && (clickEventTarget.parentElement.classList.contains('lpc-button') || clickEventTarget.parentElement.classList.contains('button') || clickEventTarget.parentElement.classList.contains('wp-block-button__link')); eventProps.is_button = isClickedElementButton || isParentElementButton; // Link data. eventProps.href = clickEventTarget.getAttribute( 'href' ) || ''; eventProps.target = clickEventTarget.getAttribute( 'target' ) || ''; eventProps.text = clickEventTarget.innerText || ''; eventProps.use_beacon = true; // Emit tracking event in Tracks and GA. window._tkq.push( [ 'recordEvent', 'wpcom_link_click', eventProps ] ); // TODO: Implement a click delay on navigation links and CTA buttons to improve data integrity. // if ( props.is_in_header_nav || props.is_cta || props.is_button ) { // if ( props.href && 0 !== props.href.indexOf( '#' ) && -1 !== [ '', '_top', '_self' ].indexOf( props.target ) ) { // event.preventDefault(); // Allow time for trackers to record the click. // setTimeout( function() { // document.location = props.href; // }, 300 ); // } // } } }); } /** * Add cookie and stats tracking for the Landpack language picker. */ const setupLocaleChangeTracking = () => { function createLocaleCookie( locale ) { const cookieDomain = '.wordpress.com'; const cookieName = 'wpcom_locale'; const date = new Date(); date.setTime( date.getTime() + ( 5 * 365 * 24 * 60 * 60 * 1000 ) ); const expires = " expires=" + date.toGMTString(); document.cookie = cookieName + '=' + locale + ';' + expires +'; path=/; domain=' + cookieDomain; } function createStatsRequest( locale, href ) { const languageChangeStat = new Image(); languageChangeStat.onload = () => window.location.href = href; languageChangeStat.onerror = languageChangeStat.onload; languageChangeStat.src = 'https://pixel.wp.com/g.gif?v=wpcom-no-pv&x_language-switcher=manual-switch-' + locale + '&rm=' + Math.random(); } document.body.addEventListener( 'click', ( event ) => { const { target } = event; if ( target.matches( '.lp-language-picker a[lang]' ) ) { event.preventDefault(); const code = target.getAttribute( 'lang' ); const href = target.getAttribute( 'href' ); createLocaleCookie( code ); createStatsRequest( code, href ); } }); } /** * Loads and fires the Bing tracking pixel. */ const fireBing = () => { ( function( w, d, t, r, u ) { var f, n, i; w[ u ] = w[ u ] || [], f = function() { var o = { ti: "4074038" }; o.q = w[ u ], w[ u ] = new UET( o ), w[ u ].push( "pageLoad" ) }, n = d.createElement( t ), n.src = r, n.async = 1, n.onload = n.onreadystatechange = function() { var s = this.readyState; s && s !== "loaded" && s !== "complete" || ( f(), n.onload = n.onreadystatechange = null ) }, i = d.getElementsByTagName( t )[ 0 ], i.parentNode.insertBefore( n, i ) } )( window, document, "script", "//bat.bing.com/bat.js", "uetq" ); } /** * Adds a click event for Facebook pixel tracking on the /webinar sub pages. */ const trackFacebookWebinarClicks = () => { const facebookPixelURL = 'https://www.facebook.com/tr?id=759053181468957&ev=SubscribedButtonClick&noscript=1'; const elementsToTrack = document.getElementsByClassName( 'webinar-facebook-click-track' ); const handleFacebookClickEvent = ( event ) => { const facebookImgPixel = document.createElement( 'img' ); facebookImgPixel.width = 1; facebookImgPixel.height = 1; facebookImgPixel.src = facebookPixelURL; document.body.appendChild( facebookImgPixel ); } Array.from( elementsToTrack ).forEach( ( element ) => element.addEventListener( 'click', handleFacebookClickEvent )); } // Apply the URL parameter linkers. applyLinkers(); // Add "essential" trackers to queue. cb.addTracker( 'essential', false, fireCurrencyHandlers ); // Add "analytics" trackers to queue. cb.addTracker( 'analytics', false, fireTracks ); cb.addTracker( 'analytics', false, fireAffiliateReferrals ); cb.addTracker( 'analytics', false, setupTracksGAClickTracking ); cb.addTracker( 'analytics', false, trackScrollPercentage ); cb.addTracker( 'analytics', false, setupLocaleChangeTracking ); cb.addTracker( 'analytics', true, fireGoogleAnalyticsFour ); cb.addTracker( 'analytics', true, () => fireParsely( 'wordpress.com' ) ); // Add "advertising" trackers to queue. cb.addTracker( 'advertising', true, loadGoogleAdsGtag ); cb.addTracker( 'advertising', true, fireFacebook ); cb.addTracker( 'advertising', true, trackFacebookWebinarClicks ); cb.addTracker( 'advertising', true, fireBing ); cb.addTracker( 'advertising', true, fireRedditAdvertisingPixel); // cb.addTracker( 'advertising', true, fireHotJar ); - Disabling for now. Enable when Hotjar is required to be used. // cb.addTracker( 'advertising', true, fireMicrosoftClarity ); - Disabling for now. cb.addTracker( 'advertising', true, fireImpactAffiliate ); // Maybe fire trackers now, via cookie banner, based on bucketed consent. cb.maybeFireTrackers(); }); }; // CCPA - Do Not Sell My Data. document.addEventListener( 'a8c-analytics:loaded-is-ccpa', ( event ) => { const { detail } = event; const isCCPAEligible = JSON.parse( detail ).isCCPA; if ( ! isCCPAEligible ) { document.querySelectorAll( '[data-is-ccpa-dnsd]' ).forEach( ( element ) => { const parent = element.parentNode; const parentTagName = parent.tagName.toLowerCase(); // If the link in a part of a list, remove the entire parent item. // Otherwise, remove only the link element. ( parentTagName === 'li' ? parent : element ).remove(); } ); return; } document.querySelector( '[data-is-ccpa-dnsd-trigger]' ).onclick = ( event ) => { event.preventDefault(); window.a8cAnalytics.dnsd.show(); }; } ); if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script> </div> <script type="text/javascript"> ( function() { 'use strict'; var currentScript = document.currentScript; var setupAnalytics = function() { function getScript() { var script = document.createElement( 'script' ); var prev = currentScript || document.getElementsByTagName( 'script' )[ 0 ]; script.setAttribute( 'src', "https:\/\/s0.wp.com\/wp-content\/mu-plugins\/a8c-analytics\/a8c-analytics.js?v=1729607242" ); script.setAttribute( 'async', true ); prev.parentNode.insertBefore( script, prev ); } getScript(); }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script>  <script type="text/javascript" src="//0.gravatar.com/js/hovercards/hovercards.min.js?ver=2024474048849247f5660a2d05b85c6fc286379897f30a1061ad46e7f037e059ed7fe7" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/wp-content/mu-plugins/gravatar-hovercards/wpgroho.js?m=1610363240i'></script> <script> // Initialize and attach hovercards to all gravatars ( function() { function init() { if ( typeof Gravatar === 'undefined' ) { return; } if ( typeof Gravatar.init !== 'function' ) { return; } Gravatar.profile_cb = function ( hash, id ) { WPGroHo.syncProfileData( hash, id ); }; Gravatar.my_hash = WPGroHo.my_hash; Gravatar.init( 'body', '#wp-admin-bar-my-account', { i18n: { 'Edit your profile': 'Edit your profile', 'View profile': 'View profile', 'Sorry, we are unable to load this Gravatar profile.': 'Sorry, we are unable to load this Gravatar profile.', 'Profile not found.': 'Profile not found.', 'Too Many Requests.': 'Too Many Requests.', 'Internal Server Error.': 'Internal Server Error.', }, } ); } if ( document.readyState !== 'loading' ) { init(); } else { document.addEventListener( 'DOMContentLoaded', init ); } } )(); </script> <div style="display:none"> <div class="grofile-hash-map-c37eb985b2bf0538bcaccd96adc0cadb"> </div> <div class="grofile-hash-map-ee6b4ad5859cbf7080bc7acbff38e5ee"> </div> </div> <div id="actionbar" style="display: none;" class="actnbr-a8c-wpblog-2024 actnbr-has-follow"> <ul> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-comment" href="https://wordpress.com/blog/2024/11/14/website-layout-examples/#comments"> <svg class="gridicon gridicons-comment" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 16l-5 5v-5H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2h-7z"/></g></svg> <span>Comment </span> </a> </li> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-reblog" href=""> <svg class="gridicon gridicons-reblog" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M22.086 9.914L20 7.828V18c0 1.105-.895 2-2 2h-7v-2h7V7.828l-2.086 2.086L14.5 8.5 19 4l4.5 4.5-1.414 1.414zM6 16.172V6h7V4H6c-1.105 0-2 .895-2 2v10.172l-2.086-2.086L.5 15.5 5 20l4.5-4.5-1.414-1.414L6 16.172z"/></g></svg><span>Reblog</span> </a> </li> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> <div class="actnbr-popover tip tip-top-left actnbr-notice" id="follow-bubble"> <div class="tip-arrow"></div> <div class="tip-inner actnbr-follow-bubble"> <ul> <li class="actnbr-sitename"> <a href="https://wordpress.com/blog"> <img loading='lazy' alt='' src='https://s2.wp.com/i/logo/wpcom-gray-white.png' srcset='https://s2.wp.com/i/logo/wpcom-gray-white.png 1x' class='avatar avatar-50' height='50' width='50' /> WordPress.com News </a> </li> <div class="actnbr-message no-display"></div> <form method="post" action="https://subscribe.wordpress.com" accept-charset="utf-8" style="display: none;"> <div class="actnbr-follow-count">Join 113,048,769 other subscribers</div> <div> <input type="email" name="email" placeholder="Enter your email address" class="actnbr-email-field" aria-label="Enter your email address" /> </div> <input type="hidden" name="action" value="subscribe" /> <input type="hidden" name="blog_id" value="3584907" /> <input type="hidden" name="source" value="https://wordpress.com/blog/2024/11/14/website-layout-examples/" /> <input type="hidden" name="sub-type" value="actionbar-follow" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="54d65088db" /> <div class="actnbr-button-wrap"> <button type="submit" value="Sign me up"> Sign me up </button> </div> </form> <li class="actnbr-login-nudge"> <div> Already have a WordPress.com account? <a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fwordpress.com%2Fblog%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F&signup_flow=account">Log in now.</a> </div> </li> </ul> </div> </div> </li> <li class="actnbr-ellipsis actnbr-hidden"> <svg class="gridicon gridicons-ellipsis" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M7 12c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zm12-2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-7 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"/></g></svg> <div class="actnbr-popover tip tip-top-left actnbr-more"> <div class="tip-arrow"></div> <div class="tip-inner"> <ul> <li class="actnbr-sitename"> <a href="https://wordpress.com/blog"> <img loading='lazy' alt='' src='https://s2.wp.com/i/logo/wpcom-gray-white.png' srcset='https://s2.wp.com/i/logo/wpcom-gray-white.png 1x' class='avatar avatar-50' height='50' width='50' /> WordPress.com News </a> </li> <li class="actnbr-folded-customize"> <a href="https://en.blog.wordpress.com/wp-admin/customize.php?url=https%3A%2F%2Fen.blog.wordpress.com%2Fblog%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F"> <svg class="gridicon gridicons-customize" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z"/></g></svg> <span>Customize</span> </a> </li> <li class="actnbr-folded-follow"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> </li> <li class="actnbr-signup"><a href="https://wordpress.com/start/">Sign up</a></li> <li class="actnbr-login"><a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fwordpress.com%2Fblog%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F&signup_flow=account">Log in</a></li> <li class="actnbr-shortlink"><a href="https://wp.me/pf2B5-iGR">Copy shortlink</a></li> <li class="flb-report"> <a href="https://wordpress.com/abuse/?report_url=https://wordpress.com/blog/2024/11/14/website-layout-examples/" target="_blank" rel="noopener noreferrer"> Report this content </a> </li> <li class="actnbr-reader"> <a href="https://wordpress.com/read/blogs/3584907/posts/71849"> View post in Reader </a> </li> <li class="actnbr-subs"> <a href="https://subscribe.wordpress.com/">Manage subscriptions</a> </li> <li class="actnbr-fold"><a href="">Collapse this bar</a></li> </ul> </div> </div> </li> </ul> </div> <script> window.addEventListener( "load", function( event ) { var link = document.createElement( "link" ); link.href = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.css?v=20241015"; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild( link ); var script = document.createElement( "script" ); script.src = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.js?v=20231122"; script.defer = true; document.body.appendChild( script ); } ); </script> <div id="jp-carousel-loading-overlay"> <div id="jp-carousel-loading-wrapper"> <span id="jp-carousel-library-loading"> </span> </div> </div> <div class="jp-carousel-overlay" style="display: none;"> <div class="jp-carousel-container">  <div class="jp-carousel-wrap swiper-container jp-carousel-swiper-container jp-carousel-transitions" itemscope itemtype="https://schema.org/ImageGallery"> <div class="jp-carousel swiper-wrapper"></div> <div class="jp-swiper-button-prev swiper-button-prev"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskPrev" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="9" height="12"> <path d="M16.2072 16.59L11.6496 12L16.2072 7.41L14.8041 6L8.8335 12L14.8041 18L16.2072 16.59Z" fill="white"/> </mask> <g mask="url(#maskPrev)"> <rect x="0.579102" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div> <div class="jp-swiper-button-next swiper-button-next"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskNext" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="12"> <path d="M8.59814 16.59L13.1557 12L8.59814 7.41L10.0012 6L15.9718 12L10.0012 18L8.59814 16.59Z" fill="white"/> </mask> <g mask="url(#maskNext)"> <rect x="0.34375" width="23.8822" height="24" fill="#FFFFFF"/> </g> </svg> </div> </div>  <div class="jp-carousel-close-hint"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskClose" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="15" height="14"> <path d="M19.3166 6.41L17.9135 5L12.3509 10.59L6.78834 5L5.38525 6.41L10.9478 12L5.38525 17.59L6.78834 19L12.3509 13.41L17.9135 19L19.3166 17.59L13.754 12L19.3166 6.41Z" fill="white"/> </mask> <g mask="url(#maskClose)"> <rect x="0.409668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div>  <div class="jp-carousel-info"> <div class="jp-carousel-info-footer"> <div class="jp-carousel-pagination-container"> <div class="jp-swiper-pagination swiper-pagination"></div> <div class="jp-carousel-pagination"></div> </div> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-caption"></h2> </div> <div class="jp-carousel-photo-icons-container"> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-info" aria-label="Toggle photo metadata visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskInfo" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7537 2C7.26076 2 2.80273 6.48 2.80273 12C2.80273 17.52 7.26076 22 12.7537 22C18.2466 22 22.7046 17.52 22.7046 12C22.7046 6.48 18.2466 2 12.7537 2ZM11.7586 7V9H13.7488V7H11.7586ZM11.7586 11V17H13.7488V11H11.7586ZM4.79292 12C4.79292 16.41 8.36531 20 12.7537 20C17.142 20 20.7144 16.41 20.7144 12C20.7144 7.59 17.142 4 12.7537 4C8.36531 4 4.79292 7.59 4.79292 12Z" fill="white"/> </mask> <g mask="url(#maskInfo)"> <rect x="0.8125" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </span> </a> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-comments" aria-label="Toggle photo comments visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskComments" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.3271 2H20.2486C21.3432 2 22.2388 2.9 22.2388 4V16C22.2388 17.1 21.3432 18 20.2486 18H6.31729L2.33691 22V4C2.33691 2.9 3.2325 2 4.3271 2ZM6.31729 16H20.2486V4H4.3271V18L6.31729 16Z" fill="white"/> </mask> <g mask="url(#maskComments)"> <rect x="0.34668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-has-comments-indicator" aria-label="This image has comments."></span> </span> </a> </div> </div> <div class="jp-carousel-info-extra"> <div class="jp-carousel-info-content-wrapper"> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-title"></h2> </div> <div class="jp-carousel-comments-wrapper"> <div id="jp-carousel-comments-loading"> <span>Loading Comments...</span> </div> <div class="jp-carousel-comments"></div> <div id="jp-carousel-comment-form-container"> <span id="jp-carousel-comment-form-spinner"> </span> <div id="jp-carousel-comment-post-results"></div> <div id="jp-carousel-comment-form-commenting-as"> <p id="jp-carousel-commenting-as"> You must be <a href="#" class="jp-carousel-comment-login">logged in</a> to post a comment. </p> </div> </div> </div> <div class="jp-carousel-image-meta"> <div class="jp-carousel-title-and-caption"> <div class="jp-carousel-photo-info"> <h3 class="jp-carousel-caption" itemprop="caption description"></h3> </div> <div class="jp-carousel-photo-description"></div> </div> <ul class="jp-carousel-image-exif" style="display: none;"></ul> <a class="jp-carousel-image-download" href="#" target="_blank" style="display: none;"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="19" height="18"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84615 5V19H19.7775V12H21.7677V19C21.7677 20.1 20.8721 21 19.7775 21H5.84615C4.74159 21 3.85596 20.1 3.85596 19V5C3.85596 3.9 4.74159 3 5.84615 3H12.8118V5H5.84615ZM14.802 5V3H21.7677V10H19.7775V6.41L9.99569 16.24L8.59261 14.83L18.3744 5H14.802Z" fill="white"/> </mask> <g mask="url(#mask0)"> <rect x="0.870605" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-download-text"></span> </a> <div class="jp-carousel-image-map" style="display: none;"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/wordpress.com\/blog\/2024\/11\/14\/website-layout-examples\/":71849}; </script> <link crossorigin='anonymous' rel='stylesheet' id='all-css-0-2' href='https://s2.wp.com/_static/??-eJydjEEKgCAQAD+UrR6KLtFbTJfQdJXWxe9HUB/oOMMw0KtyhRpSgyyqJjkCMURs1brzZWAhyMVLQgZnryKMCbiHipfahXzC0TEP8H/2NZ94fltezbxMxkx61vEGx+U/hQ==&cssminify=yes' type='text/css' media='all' /> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/_static/??-eJx9zUsOwjAMRdENEazy7QSxFOQ2pjhNnFLbsH0QAsSI4bs60oP7FPoqRmKQFErtOFNwpRmHZwss57pMuoAfVzxM2QcWhcwjKVydnC4oMdP8ByeyCfvxvUFdPul0I4l1BnSrBc24/2JUJVPonHMEbloJuWJ8/RzLodmvNu1216zb9ABpbUrx'></script> <script type="text/javascript" id="wp-jp-i18n-loader-js-after"> /* <![CDATA[ */ wp.jpI18nLoader.state = {"baseUrl":"https://widgets.wp.com/languages/","locale":"en_US","domainMap":{"jetpack-admin-ui":"plugins/jetpack","jetpack-assets":"plugins/jetpack","jetpack-backup-pkg":"plugins/jetpack","jetpack-blaze":"plugins/jetpack","jetpack-boost-core":"plugins/jetpack","jetpack-boost-speed-score":"plugins/jetpack","jetpack-classic-theme-helper":"plugins/jetpack","jetpack-compat":"plugins/jetpack","jetpack-config":"plugins/jetpack","jetpack-connection":"plugins/jetpack","jetpack-explat":"plugins/jetpack","jetpack-forms":"plugins/jetpack","jetpack-image-cdn":"plugins/jetpack","jetpack-import":"plugins/jetpack","jetpack-ip":"plugins/jetpack","jetpack-jitm":"plugins/jetpack","jetpack-licensing":"plugins/jetpack","jetpack-masterbar":"plugins/jetpack","jetpack-my-jetpack":"plugins/jetpack","jetpack-password-checker":"plugins/jetpack","jetpack-plugins-installer":"plugins/jetpack","jetpack-post-list":"plugins/jetpack","jetpack-protect-models":"plugins/jetpack","jetpack-protect-status":"plugins/jetpack","jetpack-publicize-pkg":"plugins/jetpack","jetpack-search-pkg":"plugins/jetpack","jetpack-stats":"plugins/jetpack","jetpack-stats-admin":"plugins/jetpack","jetpack-sync":"plugins/jetpack","jetpack-videopress-pkg":"plugins/jetpack","jetpack-waf":"plugins/jetpack","jetpack-wordads":"plugins/jetpack","woocommerce-analytics":"plugins/jetpack"},"domainPaths":{"jetpack-admin-ui":"jetpack_vendor/automattic/jetpack-admin-ui/","jetpack-assets":"jetpack_vendor/automattic/jetpack-assets/","jetpack-backup-pkg":"jetpack_vendor/automattic/jetpack-backup/","jetpack-blaze":"jetpack_vendor/automattic/jetpack-blaze/","jetpack-boost-core":"jetpack_vendor/automattic/jetpack-boost-core/","jetpack-boost-speed-score":"jetpack_vendor/automattic/jetpack-boost-speed-score/","jetpack-classic-theme-helper":"jetpack_vendor/automattic/jetpack-classic-theme-helper/","jetpack-compat":"jetpack_vendor/automattic/jetpack-compat/","jetpack-config":"jetpack_vendor/automattic/jetpack-config/","jetpack-connection":"jetpack_vendor/automattic/jetpack-connection/","jetpack-explat":"jetpack_vendor/automattic/jetpack-explat/","jetpack-forms":"jetpack_vendor/automattic/jetpack-forms/","jetpack-image-cdn":"jetpack_vendor/automattic/jetpack-image-cdn/","jetpack-import":"jetpack_vendor/automattic/jetpack-import/","jetpack-ip":"jetpack_vendor/automattic/jetpack-ip/","jetpack-jitm":"jetpack_vendor/automattic/jetpack-jitm/","jetpack-licensing":"jetpack_vendor/automattic/jetpack-licensing/","jetpack-masterbar":"jetpack_vendor/automattic/jetpack-masterbar/","jetpack-my-jetpack":"jetpack_vendor/automattic/jetpack-my-jetpack/","jetpack-password-checker":"jetpack_vendor/automattic/jetpack-password-checker/","jetpack-plugins-installer":"jetpack_vendor/automattic/jetpack-plugins-installer/","jetpack-post-list":"jetpack_vendor/automattic/jetpack-post-list/","jetpack-protect-models":"jetpack_vendor/automattic/jetpack-protect-models/","jetpack-protect-status":"jetpack_vendor/automattic/jetpack-protect-status/","jetpack-publicize-pkg":"jetpack_vendor/automattic/jetpack-publicize/","jetpack-search-pkg":"jetpack_vendor/automattic/jetpack-search/","jetpack-stats":"jetpack_vendor/automattic/jetpack-stats/","jetpack-stats-admin":"jetpack_vendor/automattic/jetpack-stats-admin/","jetpack-sync":"jetpack_vendor/automattic/jetpack-sync/","jetpack-videopress-pkg":"jetpack_vendor/automattic/jetpack-videopress/","jetpack-waf":"jetpack_vendor/automattic/jetpack-waf/","jetpack-wordads":"jetpack_vendor/automattic/jetpack-wordads/","woocommerce-analytics":"jetpack_vendor/automattic/woocommerce-analytics/"}}; /* ]]> */ </script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/url/index.min.js?m=1731954715i&ver=499ac283dc628dfb623e" id="wp-url-js"></script> <script type="text/javascript" id="jetpack-instant-search-js-before"> /* <![CDATA[ */ var JetpackInstantSearchOptions=JSON.parse(decodeURIComponent("%7B%22overlayOptions%22%3A%7B%22colorTheme%22%3A%22light%22%2C%22enableInfScroll%22%3Atrue%2C%22enableFilteringOpensOverlay%22%3Atrue%2C%22enablePostDate%22%3Atrue%2C%22enableSort%22%3Atrue%2C%22highlightColor%22%3A%22%23FFC%22%2C%22overlayTrigger%22%3A%22submit%22%2C%22resultFormat%22%3A%22expanded%22%2C%22showPoweredBy%22%3Atrue%2C%22defaultSort%22%3A%22relevance%22%2C%22excludedPostTypes%22%3A%5B%22attachment%22%5D%7D%2C%22homeUrl%22%3A%22https%3A%5C%2F%5C%2Fwordpress.com%5C%2Fblog%22%2C%22locale%22%3A%22en%22%2C%22postsPerPage%22%3A11%2C%22siteId%22%3A3584907%2C%22postTypes%22%3A%7B%22post%22%3A%7B%22singular_name%22%3A%22Post%22%2C%22name%22%3A%22Posts%22%7D%2C%22page%22%3A%7B%22singular_name%22%3A%22Page%22%2C%22name%22%3A%22Pages%22%7D%2C%22attachment%22%3A%7B%22singular_name%22%3A%22Media%22%2C%22name%22%3A%22Media%22%7D%2C%22wp_tv_video%22%3A%7B%22singular_name%22%3A%22WP%20TV%20Video%22%2C%22name%22%3A%22WP%20TV%20Videos%22%7D%7D%2C%22webpackPublicPath%22%3A%22https%3A%5C%2F%5C%2Fs2.wp.com%5C%2Fwp-content%5C%2Fmu-plugins%5C%2Fjetpack-plugin%5C%2Fsun%5C%2Fjetpack_vendor%5C%2Fautomattic%5C%2Fjetpack-search%5C%2Fbuild%5C%2Finstant-search%5C%2F%22%2C%22isPhotonEnabled%22%3Atrue%2C%22isFreePlan%22%3Afalse%2C%22apiRoot%22%3A%22https%3A%5C%2F%5C%2Fpublic-api.wordpress.com%5C%2F%22%2C%22apiNonce%22%3A%22d0775af470%22%2C%22isPrivateSite%22%3Afalse%2C%22isWpcom%22%3Atrue%2C%22hasOverlayWidgets%22%3Atrue%2C%22widgets%22%3A%5B%7B%22filters%22%3A%5B%7B%22name%22%3A%22Year%22%2C%22type%22%3A%22date_histogram%22%2C%22count%22%3A10%2C%22field%22%3A%22post_date%22%2C%22interval%22%3A%22year%22%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22date_histogram_0%22%7D%2C%7B%22name%22%3A%22Tags%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22post_tag%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22taxonomy_1%22%7D%2C%7B%22name%22%3A%22Categories%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22category%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22taxonomy_2%22%7D%5D%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%7D%5D%2C%22widgetsOutsideOverlay%22%3A%5B%5D%2C%22hasNonSearchWidgets%22%3Afalse%2C%22preventTrackingCookiesReset%22%3Atrue%7D")); /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/wp-content/mu-plugins/jetpack-plugin/sun/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?m=1731341983i'></script> <script type="text/javascript" crossorigin='anonymous' src="//stats.wp.com/w.js?ver=202447" id="jp-tracks-js"></script> <script type="text/javascript" id="comment-like-js-extra"> /* <![CDATA[ */ var comment_like_text = {"loading":"Loading...","swipeUrl":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/comment-likes\/js\/lib\/swipe.js?ver=20131008"}; /* ]]> */ </script> <script type="text/javascript" id="coblocks-loader-js-extra"> /* <![CDATA[ */ var wpcom_coblocks_js = {"coblocks_masonry_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-masonry.min.js","coblocks_lightbox_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-lightbox.min.js","jquery_core_js":"\/wp-includes\/js\/jquery\/jquery.min.js","jquery_migrate_js":"\/wp-includes\/js\/jquery\/jquery-migrate.min.js","masonry_js":"\/wp-includes\/js\/masonry.min.js","imagesloaded_js":"\/wp-includes\/js\/imagesloaded.min.js"}; var coblocksLigthboxData = {"closeLabel":"Close Gallery","leftLabel":"Previous","rightLabel":"Next"}; /* ]]> */ </script> <script type="text/javascript" id="jetpack-carousel-js-extra"> /* <![CDATA[ */ var jetpackSwiperLibraryPath = {"url":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/jetpack-plugin\/sun\/_inc\/build\/carousel\/swiper-bundle.min.js"}; var jetpackCarouselStrings = {"widths":[370,700,1000,1200,1400,2000],"is_logged_in":"","lang":"en","ajaxurl":"https:\/\/wordpress.com\/blog\/wp-admin\/admin-ajax.php","nonce":"be92ef1f70","display_exif":"1","display_comments":"1","single_image_gallery":"1","single_image_gallery_media_file":"","background_color":"black","comment":"Comment","post_comment":"Post Comment","write_comment":"Write a Comment...","loading_comments":"Loading Comments...","image_label":"Open image in full-screen.","download_original":"View full size <span class=\"photo-size\">{0}<span class=\"photo-size-times\">\u00d7<\/span>{1}<\/span>","no_comment_text":"Please be sure to submit some text with your comment.","no_comment_email":"Please provide an email address to comment.","no_comment_author":"Please provide your name to comment.","comment_post_error":"Sorry, but there was an error posting your comment. Please try again later.","comment_approved":"Your comment was approved.","comment_unapproved":"Your comment is in moderation.","camera":"Camera","aperture":"Aperture","shutter_speed":"Shutter Speed","focal_length":"Focal Length","copyright":"Copyright","comment_registration":"1","require_name_email":"1","login_url":"https:\/\/wordpress.com\/wp-login.php?redirect_to=https%3A%2F%2Fwordpress.com%2Fblog%2F2024%2F11%2F14%2Fwebsite-layout-examples%2F","blog_id":"3584907","meta_data":["camera","aperture","shutter_speed","focal_length","copyright"],"stats_query_args":"blog=3584907&v=wpcom&tz=0&user_id=0&subd=en.blog","is_public":"1"}; /* ]]> */ </script> <script type="text/javascript" id="sharing-js-js-extra"> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type="text/javascript" id="verbum-settings-js-before"> /* <![CDATA[ */ window.VerbumComments = {"Log in or provide your name and email to leave a reply.":"Log in or provide your name and email to leave a reply.","Log in or provide your name and email to leave a comment.":"Log in or provide your name and email to leave a comment.","Receive web and mobile notifications for posts on this site.":"Receive web and mobile notifications for posts on this site.","Name":"Name","Email (address never made public)":"Email (address never made public)","Website (optional)":"Website (optional)","Leave a reply. (log in optional)":"Leave a reply. (log in optional)","Leave a comment. (log in optional)":"Leave a comment. (log in optional)","Log in to leave a reply.":"Log in to leave a reply.","Log in to leave a comment.":"Log in to leave a comment.","Logged in via %s":"Logged in via %s","Log out":"Log out","Email":"Email","(Address never made public)":"(Address never made public)","Instantly":"Instantly","Daily":"Daily","Reply":"Reply","Comment":"Comment","WordPress":"WordPress","Weekly":"Weekly","Notify me of new posts":"Notify me of new posts","Email me new posts":"Email me new posts","Email me new comments":"Email me new comments","Cancel":"Cancel","Write a comment...":"Write a comment...","Write a reply...":"Write a reply...","Website":"Website","Optional":"Optional","We'll keep you in the loop!":"We'll keep you in the loop!","Loading your comment...":"Loading your comment...","Discover more from":"Discover more from WordPress.com News","Subscribe now to keep reading and get access to the full archive.":"Subscribe now to keep reading and get access to the full archive.","Continue reading":"Continue reading","Never miss a beat!":"Never miss a beat!","Interested in getting blog post updates? Simply click the button below to stay in the loop!":"Interested in getting blog post updates? Simply click the button below to stay in the loop!","Enter your email address":"Enter your email address","Subscribe":"Subscribe","Comment sent successfully":"Comment sent successfully","Save my name, email, and website in this browser for the next time I comment.":"Save my name, email, and website in this browser for the next time I comment.","siteId":3584907,"postId":71849,"mustLogIn":true,"requireNameEmail":true,"commentRegistration":true,"connectURL":"https:\/\/en.blog.wordpress.com\/public.api\/connect\/?action=request","logoutURL":"https:\/\/wordpress.com\/wp-login.php?action=logout&_wpnonce=fb5108aad3","homeURL":"https:\/\/wordpress.com\/blog\/","subscribeToBlog":true,"subscribeToComment":true,"isJetpackCommentsLoggedIn":false,"jetpackUsername":"","jetpackUserId":0,"jetpackSignature":"","jetpackAvatar":"https:\/\/0.gravatar.com\/avatar\/?s=96&d=retro","enableBlocks":true,"enableSubscriptionModal":false,"currentLocale":"en","isJetpackComments":false,"allowedBlocks":["core\/paragraph","core\/list","core\/code","core\/list-item","core\/quote","core\/image","core\/embed","core\/quote","core\/code"],"embedNonce":"3ab859a298","verbumBundleUrl":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/jetpack-mu-wpcom-plugin\/sun\/vendor\/automattic\/jetpack-mu-wpcom\/src\/features\/verbum-comments\/dist\/index.js","isRTL":false,"vbeCacheBuster":1721244820,"iframeUniqueId":0} /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??-eJydUdtSgzAQ/SFDBHHsi+OnOOlmpQu5TTZpp39vWoJS2vHBp5DDuW1WnoIA7xK6JG0WweSBHMsRU1AwiQKdAnhbf0jOTh7RaR+lyslblRLBHVtyBLnPZHQhx322JcLaEsFSMWM59NkpSyCMVxpjM/KTfFykCoWhCUutDbAV/qr2xsPEsmvaXdMKJhsMiojHppeaOM1OM2kpYcktfuTAZH0bGDGY85q0DTXK6csz1Mmv5gIMXcQMkUISX94njIIREvk7o3RAWzLVDgpa5IPonru+2pUmM/jHYy17WC3rs4xSHUBFnxnND20BHg21XkGl1d3eXv/dhg8qolZan6+f5IZa48O+t28vbd/17Ws/fgPeFvp8'></script> <script type="text/javascript" id="sharing-js-js-after"> /* <![CDATA[ */ var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-tumblr' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-tumblr' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-x' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-mastodon' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-mastodon' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcommastodon', 'menubar=1,resizable=1,width=460,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-linkedin' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-linkedin' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-threads' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-threads' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomthreads', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-bluesky' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-bluesky' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcombluesky', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-pocket' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-pocket' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcompocket', 'menubar=1,resizable=1,width=450,height=450' ); return false; } } ); } )(); /* ]]> */ </script> <script type="text/javascript"> (function () { var wpcom_reblog = { source: 'toolbar', toggle_reblog_box_flair: function (obj_id, post_id) { // Go to site selector. This will redirect to their blog if they only have one. const postEndpoint = `https://wordpress.com/post`; // Ideally we would use the permalink here, but fortunately this will be replaced with the // post permalink in the editor. const originalURL = `${ document.location.href }?page_id=${ post_id }`; const url = postEndpoint + '?url=' + encodeURIComponent( originalURL ) + '&is_post_share=true' + '&v=5'; const redirect = function () { if ( ! window.open( url, '_blank' ) ) { location.href = url; } }; if ( /Firefox/.test( navigator.userAgent ) ) { setTimeout( redirect, 0 ); } else { redirect(); } }, }; window.wpcom_reblog = wpcom_reblog; })(); </script> <script type="text/javascript"> // <![CDATA[ (function() { try{ if ( window.external &&'msIsSiteMode' in window.external) { if (window.external.msIsSiteMode()) { var jl = document.createElement('script'); jl.type='text/javascript'; jl.async=true; jl.src='/wp-content/plugins/ie-sitemode/custom-jumplist.php'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jl, s); } } }catch(e){} })(); // ]]> </script> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241123#ver=20241123&origin=https://wordpress.com' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"> <div class="likes-text"> <span>%d</span> </div> <ul class="wpl-avatars sd-like-gravatars"></ul> </div> <script src="//stats.wp.com/w.js?67" defer></script> <script type="text/javascript"> _tkq = window._tkq || []; _stq = window._stq || []; _tkq.push(['storeContext', {'blog_id':'3584907','blog_tz':'0','user_lang':'en','blog_lang':'en','user_id':'0'}]); _stq.push(['view', {'blog':'3584907','v':'wpcom','tz':'0','user_id':'0','post':'71849','subd':'en.blog'}]); _stq.push(['extra', {'crypt':'UE5tW3cvZGQwfmw4QjJzN1ZjenZiRjh0Ry4lYVF1b2FbTj1MRTdvSlY4Sn4zMFZDcHc4K0Z6ZHJkWlFybDBnJXRPSmlpOFF3SVlCdnRxVVVEP3o0WVh8Q3hTakliVXBySFpPP08rTExTNDNlK1pMSCUsQ3BFaHk2VGVJOXdYeUQ9TSVVLW9FSVlNS1J1M2RQNGdQTGkmUnp2K0lHbXBbLFVvWUx2XU5HclRDMXZpPURQbHJLZ0RxWWZaeXJfSGdIWDNvXUQlSzFlZXJOUE5OMCxrOHF8cXIlLn5UdixdLDdWTDZUU3RT'}]); _stq.push([ 'clickTrackerInit', '3584907', '71849' ]); </script> <noscript><img src="https://pixel.wp.com/b.gif?v=noscript" style="height:1px;width:1px;overflow:hidden;position:absolute;bottom:1px;" alt="" /></noscript> <script defer id="bilmur" data-customproperties="{"enq_jquery":"1","logged_in":"0","wptheme":"a8c\/wpblog-2024","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur.min.js?i=12&m=202447"></script><script defer id="bilmur" data-customproperties="{"enq_jquery":"1","logged_in":"0","wptheme":"a8c\/wpblog-2024","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur-4.min.js?i=12&m=202447"></script> <script type="text/javascript"> ( function( $ ) { if ( ! $ ) return; // Not possible. $( document ).ajaxSend( function( event, jqXhr, settings ) { if ( 0 === String( settings.url || '' ).indexOf( "https:\/\/en.blog.wordpress.com\/wp-admin\/admin-ajax.php" ) ) { settings.xhrFields = settings.xhrFields || {}; settings.xhrFields.withCredentials = true; } } ); } )( window.jQuery ); </script> <script> ( function() { function getMobileUserAgentInfo() { if ( typeof wpcom_mobile_user_agent_info === 'object' ) { wpcom_mobile_user_agent_info.init(); var mobileStatsQueryString = ''; if ( wpcom_mobile_user_agent_info.matchedPlatformName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_platforms' + '=' + wpcom_mobile_user_agent_info.matchedPlatformName; } if ( wpcom_mobile_user_agent_info.matchedUserAgentName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_devices' + '=' + wpcom_mobile_user_agent_info.matchedUserAgentName; } if ( wpcom_mobile_user_agent_info.isIPad() ) { mobileStatsQueryString += '&x_' + 'ipad_views' + '=' + 'views'; } if ( mobileStatsQueryString != '' ) { new Image().src = document.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv' + mobileStatsQueryString + '&baba=' + Math.random(); } } } document.addEventListener( 'DOMContentLoaded', getMobileUserAgentInfo ); } )(); </script> <script> (function() { 'use strict'; const fetches = {}; const promises = {}; const urls = { 'verbum': 'https://s2.wp.com/wp-content/mu-plugins/jetpack-mu-wpcom-plugin/sun/vendor/automattic/jetpack-mu-wpcom/src/build/verbum-comments/verbum-comments.js?m=1731953849i&minify=false&ver=97043884103359931e09' }; const loaders = { 'verbum': () => { fetchExternalScript('verbum'); promises['verbum'] = promises['verbum'] || loadWPScript('verbum'); return promises['verbum']; }, }; const scriptExtras = { }; window.WP_Enqueue_Dynamic_Script = { loadScript: (handle) => { if (!loaders[handle]) { console.error('WP_Enqueue_Dynamic_Script: unregistered script `' + handle + '`.'); } return loaders[handle](); } }; function fetchExternalScript(handle) { if (!urls[handle]) { return Promise.resolve(); } fetches[handle] = fetches[handle] || fetch(urls[handle], { mode: 'no-cors' }); return fetches[handle]; } function runExtraScript(handle, type, index) { const id = 'wp-enqueue-dynamic-script:' + handle + ':' + type + ':' + (index + 1); const template = document.getElementById(id); if (!template) { return Promise.reject(); } const script = document.createElement( 'script' ); script.innerHTML = template.innerHTML; document.body.appendChild( script ); return Promise.resolve(); } function loadExternalScript(handle) { if (!urls[handle]) { return Promise.resolve(); } return fetches[handle].then(() => { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.onload = () => resolve(); script.onerror = (e) => reject(e); script.src = urls[handle]; document.body.appendChild(script); }); }); } function loadExtra(handle, pos) { const count = (scriptExtras[handle] && scriptExtras[handle][pos]) || 0; let promise = Promise.resolve(); for (let i = 0; i < count; i++) { promise = promise.then(() => runExtraScript(handle, pos, i)); } return promise; } function loadWPScript(handle) { // Core loads scripts in this order. See: https://github.com/WordPress/WordPress/blob/a59eb9d39c4fcba834b70c9e8dfd64feeec10ba6/wp-includes/class-wp-scripts.php#L428. return loadExtra(handle, 'translations') .then(() => loadExtra(handle, 'before')) .then(() => loadExternalScript(handle)) .then(() => loadExtra(handle, 'after')); } } )(); </script> </body> </html>