{"id":219,"date":"2014-03-17T10:22:26","date_gmt":"2014-03-17T10:22:26","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=219"},"modified":"2020-08-21T16:27:39","modified_gmt":"2020-08-21T15:27:39","slug":"marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/","title":{"rendered":"Marvel Now Supports Fixed Header and Footers For Mobile and Web Prototypes!"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It seems like every other day we get emails requesting the ability to set fixed headers and footers in your prototypes.. well I'm happy to announced that you can now fix headers and footers across both mobile <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">AND<\/strong> web!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the past fixed header and footers were typically used in apps, but it's becoming more and more common for websites to use it for navigation too. So we decided to make the feature work across all types of prototypes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The aim of Marvel is to quickly turn images into prototypes that look and feel like the real thing, fixed areas help add that extra bit of realism.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Check out the example below to see how it looks when you select a fixed header area. As you can see the blue top navigation bar remains static as the rest of the image scrolls underneath.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/player.vimeo.com\/video\/110960941?title=0&amp;byline=0&amp;portrait=0\" width=\"720\" height=\"405\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It's really easy to add the area you want to fix. Head over to the editor and you'll notice two handles either side of your image, simply grab the handles and drag to define the section.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And there you have it!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We'll be improving the feature over the next couple of weeks, if you have any suggestions or spot any bugs let us know!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Not using Marvel yet? <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.www.shopjessicabuckley.com\">Sign up for free<\/a> and created unlimited prototypes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It seems like every other day we get emails requesting the ability to set fixed headers and footers in your prototypes.. well I&#8217;m happy to announced that you can now fix headers and footers across both mobile AND web! In the past fixed header and footers were typically used in apps, but it&#8217;s becoming more and more common for websites&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":1,"featured_media":741,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[481],"tags":[419],"class_list":["post-219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-features"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Marvel Now Supports Fixed Header and Footers For Mobile and Web Prototypes! | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"It seems like every other day we get emails requesting the ability to set fixed headers and footers in your prototypes.. well I&#039;m happy to announced that you can now fix headers and footers across both mobile AND web! In the past fixed header and footers were typically used in apps, but it&#039;s becoming more and more common for websites... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-17T10:22:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-21T15:27:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2014\/03\/Marvel_web_4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1334\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2014\/03\/Marvel_web_4.jpg\",\"width\":2000,\"height\":1334},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/\",\"name\":\"Marvel Now Supports Fixed Header and Footers For Mobile and Web Prototypes! | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#primaryimage\"},\"datePublished\":\"2014-03-17T10:22:26+00:00\",\"dateModified\":\"2020-08-21T15:27:39+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\"},\"headline\":\"Marvel Now Supports Fixed Header and Footers For Mobile and Web Prototypes!\",\"datePublished\":\"2014-03-17T10:22:26+00:00\",\"dateModified\":\"2020-08-21T15:27:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#webpage\"},\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#primaryimage\"},\"keywords\":\"Features\",\"articleSection\":\"Product Updates\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/marvel-now-supports-fixed-header-and-footers-for-mobile-and-web-prototypes\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\",\"name\":\"Murat\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b7fb1722edde45406cb169ec3eb1e56dc54bf074f00186ba92dae286837d96?s=96&d=mm&r=g\",\"caption\":\"Murat\"},\"description\":\"Hi! I'm one of the co-founders at Marvel and a Product Designer by trade. You can often find me asking why Arsenal haven't signed anyone this season. Follow me on Twitter.\",\"sameAs\":[\"http:\/\/www.shopjessicabuckley.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=219"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/219\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/741"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}