{"id":538,"date":"2022-01-24T15:47:06","date_gmt":"2022-01-24T15:47:06","guid":{"rendered":"https:\/\/rockythemes.com\/documentation\/?p=538"},"modified":"2022-01-26T15:01:47","modified_gmt":"2022-01-26T15:01:47","slug":"creating-a-header-layout-with-elementor-and-creativo","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/","title":{"rendered":"Creating a Header Layout with Elementor and Creativo"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">After installing and activating Creativo theme, the site will have a generated Header and Footer area. The Header and Footer are auto generated from the Theme Options of Creativo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since Creativo version 7.7, we are able to build our own <strong>Custom Header Layouts<\/strong> and assign them to different post types &#8211; we have created a conditional setting which allows to decide the individual posts, pages, portfolio items or products that will be using these custom Header Layouts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The building process is very easy thanks to the Elementor page builder and Creativo Elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You must have <strong>Creativo Elements<\/strong> plugin installed as well as the Creativo theme active. See this tutorial on how to <strong><a href=\"https:\/\/rockythemes.com\/documentation\/installing-activating-and-updating-creativos-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">Install, Activate and Update Plugins<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-header\">Creating the Header Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create our first Header layout, navigate to your WordPress admin dashboard -&gt; <strong>Creativo Elements<\/strong> -&gt; <strong>Headers<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"447\" height=\"580\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg\" alt=\"\" class=\"wp-image-544\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg 447w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1-231x300.jpg 231w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Creativo Header Builder page will open up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All the existing headers will be listed here. If this is a new installation of Creativo, the page will be blank.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s create our new Header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on <strong>Add New<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"950\" height=\"390\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-1.jpg\" alt=\"\" class=\"wp-image-550\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-1.jpg 950w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-1-300x123.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-1-768x315.jpg 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a <strong>Title<\/strong> for the new Header. Try using something descriptive: Global Header is a good name for our new Header which will be set for the entire site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-2-1024x475.jpg\" alt=\"\" class=\"wp-image-553\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-2-1024x475.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-2-300x139.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-2-768x356.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-2.jpg 1241w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next click on <strong>Publish<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The page will be opened with Elementor Editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Close all the sections on Elementor Navigator, but leave Creativo Header section open.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3.jpg\" rel=\"prettyPhoto\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3-1024x584.jpg\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3-1024x584.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3-300x171.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3-768x438.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3-1536x876.jpg 1536w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-3.jpg 1547w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Add a new section by clicking the plus sign<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"58\" height=\"64\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-4.jpg\" alt=\"\" class=\"wp-image-561\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a layout\/structure for the Section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this example let&#8217;s use a 2 columns layout &#8211; we want to have two elements: a logo on the left and the navigation menu on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5.jpg\" rel=\"prettyPhoto\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"67\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5-1024x67.jpg\" alt=\"\" class=\"wp-image-562\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5-1024x67.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5-300x20.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5-768x50.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-5.jpg 1530w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the Elements button to access the Creativo Header elements again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"154\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-6.jpg\" alt=\"\" class=\"wp-image-565\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">From the Creativo Header section, drag the Site Logo element to the left column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7.jpg\" rel=\"prettyPhoto\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7-1024x590.jpg\" alt=\"\" class=\"wp-image-566\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7-1024x590.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7-300x173.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7-768x443.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-7.jpg 1528w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the Logo upload image and choose a Graphic Image that will be used as the logo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also upload a Retina Logo if you want your site to look perfectly on retina enabled devices &#8211; Apple devices. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember that the Retina Logo should be twice the size of your Default Logo. If your default Logo is 200&#215;100, the retina logo should be 400&#215;200.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"571\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-8.jpg\" alt=\"\" class=\"wp-image-567\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-8.jpg 292w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-8-153x300.jpg 153w\" sizes=\"(max-width: 292px) 100vw, 292px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once the logo images have been set, navigate to the Elements section again and from Creativo Header, add Navigation Menu to the right column, by dragging and dropping the element inside the column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu.jpg\" rel=\"prettyPhoto\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu-1024x590.jpg\" alt=\"\" class=\"wp-image-570\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu-1024x590.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu-300x173.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu-768x443.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/adding-menu.jpg 1529w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the menu to be used from the Layout -&gt; Menu section.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Play around with the styling options of the <strong>Navigation Menu<\/strong> by going to the Style tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"395\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-9.jpg\" alt=\"\" class=\"wp-image-573\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-9.jpg 297w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-9-226x300.jpg 226w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Under Style tab -&gt; Menu Item Typography, we can choose a different font family. If the Default option is used, the Menu will inherit the Font Family set under Theme Options -&gt; Typography area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Edit the Menu Item Typography -&gt; Line Height and choose 70. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will make the menu items to have a height of 70px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10.jpg\" rel=\"prettyPhoto\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10-1024x584.jpg\" alt=\"\" class=\"wp-image-574\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10-1024x584.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10-300x171.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10-768x438.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10-1536x876.jpg 1536w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-10.jpg 1547w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The menu looks good, but the Logo and the menu are not on the same line anymore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To change that and have the Logo correctly aligned with the menu, we can edit the Section and set the elements to be centered align, vertically.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11-1024x584.jpg\" alt=\"\" class=\"wp-image-577\" srcset=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11-1024x584.jpg 1024w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11-300x171.jpg 300w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11-768x438.jpg 768w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11-1536x876.jpg 1536w, https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/header-builder-11.jpg 1547w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Under Layout -&gt; Vertical Align -&gt; choose Middle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now the Logo and the Navigation Menu are correctly aligned.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Update the Header and you are ready to go.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The new header will be automatically assigned to your entire site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Creativo Elements and Elementor plugins, we can create custom Header layouts.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[75,63,74,76,78,77],"class_list":["post-538","post","type-post","status-publish","format-standard","hentry","category-header","tag-custom-header","tag-elementor-tutorial","tag-header-builder","tag-header-layouts","tag-sticky-header","tag-transparent-header"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation\" \/>\n<meta property=\"og:description\" content=\"Using Creativo Elements and Elementor plugins, we can create custom Header layouts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/\" \/>\n<meta property=\"og:site_name\" content=\"Creativo Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/rockythemes\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-24T15:47:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-26T15:01:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg\" \/>\n<meta name=\"author\" content=\"rockystef\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rockythemes\" \/>\n<meta name=\"twitter:site\" content=\"@rockythemes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rockystef\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/\"},\"author\":{\"name\":\"rockystef\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/2834fc1584d086bb31b3a7ff0230858a\"},\"headline\":\"Creating a Header Layout with Elementor and Creativo\",\"datePublished\":\"2022-01-24T15:47:06+00:00\",\"dateModified\":\"2022-01-26T15:01:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/\"},\"wordCount\":579,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/custom-header-1.jpg\",\"keywords\":[\"Custom Header\",\"Elementor Tutorial\",\"Header Builder\",\"Header Layouts\",\"Sticky Header\",\"Transparent Header\"],\"articleSection\":[\"Header\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/\",\"name\":\"Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/custom-header-1.jpg\",\"datePublished\":\"2022-01-24T15:47:06+00:00\",\"dateModified\":\"2022-01-26T15:01:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/custom-header-1.jpg\",\"contentUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/custom-header-1.jpg\",\"width\":447,\"height\":580},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/creating-a-header-layout-with-elementor-and-creativo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Header Layout with Elementor and Creativo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\",\"name\":\"Creativo Documentation\",\"description\":\"Documentation, Tutorials, Tips and Tricks for the Creativo Theme\",\"publisher\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\",\"name\":\"RockyThemes\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/creativo-green.png\",\"contentUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/creativo-green.png\",\"width\":228,\"height\":50,\"caption\":\"RockyThemes\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/rockythemes\",\"https:\\\/\\\/x.com\\\/rockythemes\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/2834fc1584d086bb31b3a7ff0230858a\",\"name\":\"rockystef\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"caption\":\"rockystef\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation","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:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation","og_description":"Using Creativo Elements and Elementor plugins, we can create custom Header layouts.","og_url":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/","og_site_name":"Creativo Documentation","article_publisher":"https:\/\/facebook.com\/rockythemes","article_published_time":"2022-01-24T15:47:06+00:00","article_modified_time":"2022-01-26T15:01:47+00:00","og_image":[{"url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg","type":"","width":"","height":""}],"author":"rockystef","twitter_card":"summary_large_image","twitter_creator":"@rockythemes","twitter_site":"@rockythemes","twitter_misc":{"Written by":"rockystef","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#article","isPartOf":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/"},"author":{"name":"rockystef","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/person\/2834fc1584d086bb31b3a7ff0230858a"},"headline":"Creating a Header Layout with Elementor and Creativo","datePublished":"2022-01-24T15:47:06+00:00","dateModified":"2022-01-26T15:01:47+00:00","mainEntityOfPage":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/"},"wordCount":579,"commentCount":0,"publisher":{"@id":"https:\/\/rockythemes.com\/documentation\/#organization"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#primaryimage"},"thumbnailUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg","keywords":["Custom Header","Elementor Tutorial","Header Builder","Header Layouts","Sticky Header","Transparent Header"],"articleSection":["Header"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/","url":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/","name":"Creating a Header Layout with Elementor and Creativo &#8211; Creativo Documentation","isPartOf":{"@id":"https:\/\/rockythemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#primaryimage"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#primaryimage"},"thumbnailUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg","datePublished":"2022-01-24T15:47:06+00:00","dateModified":"2022-01-26T15:01:47+00:00","breadcrumb":{"@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#primaryimage","url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg","contentUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2022\/01\/custom-header-1.jpg","width":447,"height":580},{"@type":"BreadcrumbList","@id":"https:\/\/rockythemes.com\/documentation\/creating-a-header-layout-with-elementor-and-creativo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rockythemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Creating a Header Layout with Elementor and Creativo"}]},{"@type":"WebSite","@id":"https:\/\/rockythemes.com\/documentation\/#website","url":"https:\/\/rockythemes.com\/documentation\/","name":"Creativo Documentation","description":"Documentation, Tutorials, Tips and Tricks for the Creativo Theme","publisher":{"@id":"https:\/\/rockythemes.com\/documentation\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rockythemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/rockythemes.com\/documentation\/#organization","name":"RockyThemes","url":"https:\/\/rockythemes.com\/documentation\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/logo\/image\/","url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/creativo-green.png","contentUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/creativo-green.png","width":228,"height":50,"caption":"RockyThemes"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/rockythemes","https:\/\/x.com\/rockythemes"]},{"@type":"Person","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/person\/2834fc1584d086bb31b3a7ff0230858a","name":"rockystef","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","caption":"rockystef"}}]}},"_links":{"self":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":33,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/538\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/538\/revisions\/668"}],"wp:attachment":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}