{"id":28139,"date":"2016-10-07T23:09:39","date_gmt":"2016-10-07T15:09:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28139"},"modified":"2022-10-16T18:02:21","modified_gmt":"2022-10-16T10:02:21","slug":"vertical-split-screen-layouts","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/","title":{"rendered":"20 Examples of Vertical Split-Screen Layout in Web Design"},"content":{"rendered":"<p>A split-screen layout is in use when full-screen elements are <strong>divided into two or more vertical parts<\/strong>. Despite the fact that such kind of website layouts are trendy these days, this decision can make or break your design. When it\u2019s made logically and correctly, split-screen layout offers magical viewing experience for your users.<\/p>\n<p>Split-screen layout would be a perfect fit for <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/clean-simple-minimalist-website-design\/\" rel=\"noopener noreferrer\">minimalist website designs<\/a> not overloaded with bold elements. Besides, it would be also a great choice for <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/beautiful-landing-pages\/\" rel=\"noopener noreferrer\">landing pages<\/a> with side-by-side selectable options. Let\u2019s take a look at some <strong>terrific examples of split-screen websites<\/strong> we put together below..<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/cool-website-experiments\/\" class=\"ref-block__link\" title=\"Read More: 20 Web Design Concepts That\u2019ll Blow Your Mind\" rel=\"bookmark\"><span class=\"screen-reader-text\">20 Web Design Concepts That\u2019ll Blow Your Mind<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/cool-website-experiments.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-26151 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/cool-website-experiments.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">20 Web Design Concepts That\u2019ll Blow Your Mind<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCreating an effective and exciting experience is a crucial part of the success of any website design. With...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3>Thalida<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg\" alt=\"thalida\" width=\"700\" height=\"409\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/theoceanfortlauderdale.com\/\">The Ocean<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/theoceanfortlauderdale.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/theoceanfortlauderdale.jpg\" alt=\"theoceanfortlauderdale\" width=\"700\" height=\"442\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/fillet.com.br\/\">Fillet<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/fillet.com.br\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/fillet.jpg\" alt=\"fillet\" width=\"700\" height=\"439\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.enginethemes.com\/\">Engine Themes<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.enginethemes.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/enginethemes.jpg\" alt=\"enginethemes\" width=\"700\" height=\"416\"><\/a><\/figure>\n<h3>Joris Delacroix<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/jorisdelacroix.jpg\" alt=\"jorisdelacroix\" width=\"700\" height=\"463\"><\/figure>\n<h3>kirichik<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/kirichik.jpg\" alt=\"kirichik\" width=\"700\" height=\"434\"><\/figure>\n<h3>Darkly<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/darkly.jpg\" alt=\"darkly\" width=\"700\" height=\"429\"><\/figure>\n<h3>Bose<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/bose.jpg\" alt=\"bose\" width=\"700\" height=\"432\"><\/figure>\n<h3>bigcartel<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/bigcartel.jpg\" alt=\"bigcartel\" width=\"700\" height=\"430\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/deweyspizza.com\/\">Dewey\u2019s Pizza<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/deweyspizza.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/deweyspizza.jpg\" alt=\"deweyspizza\" width=\"700\" height=\"434\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/res.im\/\">Res.im<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/res.im\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/res.jpg\" alt=\"res\" width=\"700\" height=\"428\"><\/a><\/figure>\n<h3>Prevention R3 Summit<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/preventionr3summit.jpg\" alt=\"preventionr3summit\" width=\"700\" height=\"432\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.peugeot.com\/en\/\">Peugeot<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.peugeot.com\/en\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/peugeot.jpg\" alt=\"peugeot\" width=\"700\" height=\"463\"><\/a><\/figure>\n<h3>Construction Papers<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/constructionpapers.jpg\" alt=\"constructionpapers\" width=\"700\" height=\"432\"><\/figure>\n<h3>Studio Meta<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/studiometa.jpg\" alt=\"studiometa\" width=\"700\" height=\"433\"><\/figure>\n<h3>Benchmark<\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.benchmarkcorporate.com\/Home\/Index\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/benchmarkcorporate.jpg\" alt=\"benchmarkcorporate\" width=\"700\" height=\"432\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.madame-de.net\/\">Madame de<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.madame-de.net\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/madame.jpg\" alt=\"madame\" width=\"700\" height=\"431\"><\/a><\/figure>\n<h3>Focus Challenge 2016<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/challenge.jpg\" alt=\"challenge\" width=\"700\" height=\"434\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/xavierbourdil.com\/\">Xavier Bourdil<\/a><\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/xavierbourdil.jpg\" alt=\"xavierbourdil\" width=\"700\" height=\"432\"><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.renaterechner.at\/en\/\">Renate Rechner<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.renaterechner.at\/en\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/renaterechner.jpg\" alt=\"renaterechner\" width=\"700\" height=\"432\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts are trendy these days, this decision can make or break your design. When it\u2019s made logically and correctly, split-screen layout offers magical viewing experience for your users. Split-screen layout&hellip;<\/p>\n","protected":false},"author":124,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Examples of Vertical Split-Screen Layout in Web Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Examples of Vertical Split-Screen Layout in Web Design\" \/>\n<meta property=\"og:description\" content=\"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-07T15:09:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-16T10:02:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg\" \/>\n<meta name=\"author\" content=\"Nancy Young\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nancy Young\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/\"},\"author\":{\"name\":\"Nancy Young\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\"},\"headline\":\"20 Examples of Vertical Split-Screen Layout in Web Design\",\"datePublished\":\"2016-10-07T15:09:39+00:00\",\"dateModified\":\"2022-10-16T10:02:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/\"},\"wordCount\":145,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/vertical-split-screen-layouts\\\/thalida.jpg\",\"keywords\":[\"Website Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/\",\"name\":\"20 Examples of Vertical Split-Screen Layout in Web Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/vertical-split-screen-layouts\\\/thalida.jpg\",\"datePublished\":\"2016-10-07T15:09:39+00:00\",\"dateModified\":\"2022-10-16T10:02:21+00:00\",\"description\":\"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/vertical-split-screen-layouts\\\/thalida.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/vertical-split-screen-layouts\\\/thalida.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/vertical-split-screen-layouts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Examples of Vertical Split-Screen Layout in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\",\"name\":\"Nancy Young\",\"description\":\"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/nancy_young\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Examples of Vertical Split-Screen Layout in Web Design - Hongkiat","description":"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/","og_locale":"en_US","og_type":"article","og_title":"20 Examples of Vertical Split-Screen Layout in Web Design","og_description":"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts","og_url":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-10-07T15:09:39+00:00","article_modified_time":"2022-10-16T10:02:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg","type":"","width":"","height":""}],"author":"Nancy Young","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Nancy Young","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/"},"author":{"name":"Nancy Young","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32"},"headline":"20 Examples of Vertical Split-Screen Layout in Web Design","datePublished":"2016-10-07T15:09:39+00:00","dateModified":"2022-10-16T10:02:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/"},"wordCount":145,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg","keywords":["Website Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/","url":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/","name":"20 Examples of Vertical Split-Screen Layout in Web Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg","datePublished":"2016-10-07T15:09:39+00:00","dateModified":"2022-10-16T10:02:21+00:00","description":"A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. Despite the fact that such kind of website layouts","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/vertical-split-screen-layouts\/thalida.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/vertical-split-screen-layouts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Examples of Vertical Split-Screen Layout in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32","name":"Nancy Young","description":"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.","url":"https:\/\/www.hongkiat.com\/blog\/author\/nancy_young\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7jR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28139"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28139\/revisions"}],"predecessor-version":[{"id":62890,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28139\/revisions\/62890"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28139"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}