<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Creating Header / Footer &#8211; GoodLayers</title>
	<atom:link href="https://docs.goodlayers.com/category/creating-header-footer/feed/" rel="self" type="application/rss+xml" />
	<link>https://docs.goodlayers.com</link>
	<description>Documentation</description>
	<lastBuildDate>Mon, 07 Dec 2020 06:48:20 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Custom Header</title>
		<link>https://docs.goodlayers.com/custom-header/</link>
		
		<dc:creator><![CDATA[loc]]></dc:creator>
		<pubDate>Fri, 27 Nov 2020 03:32:55 +0000</pubDate>
				<category><![CDATA[Creating Header / Footer]]></category>
		<guid isPermaLink="false">https://docs.goodlayers.com/?p=2581</guid>

					<description><![CDATA[You can create difference header style/color in difference pages with our custom header. Themes that has this feature : Infinite and all themes since Chariti. Now we&#8217;ll go to the details below, we&#8217;re hoping it&#8217;s useful for you and feel free to ask us any questions in our support system if you have problem to [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>You can create difference header style/color in difference pages with our custom header.</p>



<p>Themes that has this feature : <strong>Infinite</strong> and <strong>all themes since Chariti</strong>.</p>



<p>Now we&#8217;ll go to the details below, we&#8217;re hoping it&#8217;s useful for you and feel free to ask us any questions in our support system if you have problem to set up it.</p>



<h4 class="wp-block-heading">Step 1: Create header style/color in Header</h4>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="496" src="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-3-1024x496.png" alt="" class="wp-image-2586" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-3-1024x496.png 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-3-300x145.png 300w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-3-768x372.png 768w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-3.png 1036w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h4 class="wp-block-heading">Step 2: Select custom header in Page Options</h4>



<figure class="wp-block-image size-large"><img decoding="async" width="892" height="393" src="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-2.png" alt="" class="wp-image-2584" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-2.png 892w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-2-300x132.png 300w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-2-768x338.png 768w" sizes="(max-width: 892px) 100vw, 892px" /></figure>



<h4 class="wp-block-heading">Step 3: Choose menu in Page Options &gt; Header</h4>



<figure class="wp-block-image size-large"><img decoding="async" width="891" height="445" src="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-1.png" alt="" class="wp-image-2583" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/11/header-1.png 891w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-1-300x150.png 300w, https://docs.goodlayers.com/wp-content/uploads/2020/11/header-1-768x384.png 768w" sizes="(max-width: 891px) 100vw, 891px" /></figure>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Footer / Copyright</title>
		<link>https://docs.goodlayers.com/footer-copyright/</link>
		
		<dc:creator><![CDATA[loc]]></dc:creator>
		<pubDate>Mon, 18 May 2020 18:32:01 +0000</pubDate>
				<category><![CDATA[Creating Header / Footer]]></category>
		<guid isPermaLink="false">https://docs.goodlayers.com/?p=2129</guid>

					<description><![CDATA[The footer and copyright area can be changed at the &#8220;Customize > General > Footer / Copyright&#8221; section or Goodlayers > General > Footer/Copyright. Footer You can select the layout as shown on the following screenshot. After selecting the layout, you can assign the widget to the footer at the &#8220;Appearance > Widget&#8221; area. The [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>The footer and copyright area can be changed at the &#8220;<strong>Customize > General > Footer / Copyright</strong>&#8221; section or <strong>Goodlayers > General > Footer/Copyright</strong>.</p>



<h4 class="wp-block-heading">Footer</h4>



<p>You can select the layout as shown on the following screenshot.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="511" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-layout-1024x511.jpg" alt="" class="wp-image-2130" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-layout-1024x511.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-layout-300x150.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-layout-768x383.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-layout.jpg 1414w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Footer</figcaption></figure>



<p>After selecting the layout, you can assign the widget to the footer at the &#8220;Appearance > Widget&#8221; area. The widget you assigned will matched with the footer layout. ( Eg. Footer 4 will be ignored if you select the 3 column footer style ).</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="503" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-widget-1024x503.jpg" alt="" class="wp-image-2131" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-widget-1024x503.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-widget-300x147.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-widget-768x377.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/footer-widget.jpg 1258w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Footer sidebar/widget</figcaption></figure>



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Setup One-Page</title>
		<link>https://docs.goodlayers.com/setup-one-page/</link>
		
		<dc:creator><![CDATA[loc]]></dc:creator>
		<pubDate>Mon, 18 May 2020 18:24:10 +0000</pubDate>
				<category><![CDATA[Creating Header / Footer]]></category>
		<guid isPermaLink="false">https://docs.goodlayers.com/?p=2118</guid>

					<description><![CDATA[One-Page Menu One-page website can be created using page builder. By defining an ID to each section of the page, you can create a menu which scroll to the individual section. 1) Defining ID to each section of the page. Try editing any item to fill the ID to the element. 2) Creating the menu [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">One-Page Menu</h3>



<p>One-page website can be created using page builder. By defining an ID to each section of the page, you can create a menu which scroll to the individual section.</p>



<h4 class="wp-block-heading">1) Defining ID to each section of the page.</h4>



<p>Try editing any item to fill the ID to the element.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="615" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page-1024x615.jpg" alt="" class="wp-image-2119" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page-1024x615.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page-300x180.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page-768x461.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page.jpg 1178w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Edit wrapper</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="371" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page2-1024x371.jpg" alt="" class="wp-image-2120" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page2-1024x371.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page2-300x109.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page2-768x278.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page2.jpg 1026w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Add id in wrapper</figcaption></figure>



<h4 class="wp-block-heading">2) Creating the menu anchor</h4>



<p>At the &#8220;Appearance > Menu&#8221; area, try creating custom link menu item with #id as URL.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="432" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page3-1024x432.jpg" alt="" class="wp-image-2121" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page3-1024x432.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page3-300x126.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page3-768x324.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/one-page3.jpg 1160w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Add anchor link</figcaption></figure>



<p>Keep doing this with another section in page builder. If you need 4 menu, you have to separate your page builder to 4 sections and create 4 menu anchors.</p>



<h4 class="wp-block-heading">3) Creating bullet anchor</h4>



<p>You can create the &#8220;Bullet Anchor&#8221; at the &#8220;Page Options&#8221; when you edit each page. Choosing the &#8220;Bullet Anchor&#8221; tab to add new bullet and assign #id in the same way as menu anchor.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="621" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/bullet-anchor2-1024x621.jpg" alt="" class="wp-image-2122" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/bullet-anchor2-1024x621.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/bullet-anchor2-300x182.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/bullet-anchor2-768x466.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/bullet-anchor2.jpg 1191w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Bullet anchor</figcaption></figure>



<p style="color:#ffffff" class="has-text-color has-background has-vivid-green-cyan-background-color">You can check the result here: <a href="https://demo.goodlayers.com/infinite/homepages/onepage/"><strong>https://demo.goodlayers.com/infinite/homepages/onepage/</strong></a></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Creating Menu</title>
		<link>https://docs.goodlayers.com/creating-menu/</link>
		
		<dc:creator><![CDATA[loc]]></dc:creator>
		<pubDate>Mon, 18 May 2020 18:18:29 +0000</pubDate>
				<category><![CDATA[Creating Header / Footer]]></category>
		<guid isPermaLink="false">https://docs.goodlayers.com/?p=2111</guid>

					<description><![CDATA[1) Adding menu items You can create menu by going to &#8220;Appearance &#62; Menu&#8221; section. 2) Mega Menu Mega menu consists of 3 menu levels. First Level : use to defind a mega menu supported Second Level : acts as a column of the mega menu items Third Level : display the menu item lists [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h4 class="wp-block-heading">1) Adding menu items</h4>



<p>You can create menu by going to &#8220;Appearance &gt; Menu&#8221; section.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="573" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/menu-1024x573.jpg" alt="" class="wp-image-2112" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/menu-1024x573.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/menu-300x168.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/menu-768x430.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/menu.jpg 1149w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Menu items</figcaption></figure>



<h5 class="wp-block-heading">2) Mega Menu</h5>



<p>Mega menu consists of 3 menu levels.</p>



<ol class="wp-block-list"><li>First Level : use to defind a mega menu supported</li><li>Second Level : acts as a column of the mega menu items</li><li>Third Level : display the menu item lists</li></ol>



<p>You may follow the steps on below screenshot to create mega menu</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="995" height="476" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu2.jpg" alt="" class="wp-image-2113" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu2.jpg 995w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu2-300x144.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu2-768x367.jpg 768w" sizes="auto, (max-width: 995px) 100vw, 995px" /><figcaption>First menu level</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1001" height="539" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu3.jpg" alt="" class="wp-image-2114" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu3.jpg 1001w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu3-300x162.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu3-768x414.jpg 768w" sizes="auto, (max-width: 1001px) 100vw, 1001px" /><figcaption>Second menu level</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="532" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu4-1024x532.jpg" alt="" class="wp-image-2115" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu4-1024x532.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu4-300x156.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu4-768x399.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/mega-menu4.jpg 1031w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Third menu level</figcaption></figure>



<p style="color:#ffffff" class="has-text-color has-background has-vivid-green-cyan-background-color">Check the result when hover FEATURES menu item in: <a href="https://demo.goodlayers.com/infinite/homepages/main3/"><strong>https://demo.goodlayers.com/infinite/homepages/main3/</strong></a></p>



<h4 class="wp-block-heading">3) Assign Menu</h4>



<p>After you finished creating the menu, try assigning it to various themes locations at the &#8220;Manage Location&#8221; section.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="804" height="427" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/theme-locations.jpg" alt="" class="wp-image-2116" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/theme-locations.jpg 804w, https://docs.goodlayers.com/wp-content/uploads/2020/05/theme-locations-300x159.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/theme-locations-768x408.jpg 768w" sizes="auto, (max-width: 804px) 100vw, 804px" /><figcaption>Menu locations</figcaption></figure>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Header / Logo</title>
		<link>https://docs.goodlayers.com/header-logo/</link>
		
		<dc:creator><![CDATA[loc]]></dc:creator>
		<pubDate>Mon, 18 May 2020 18:12:53 +0000</pubDate>
				<category><![CDATA[Creating Header / Footer]]></category>
		<guid isPermaLink="false">https://docs.goodlayers.com/?p=2106</guid>

					<description><![CDATA[Header Option You can set the header style in the &#8220;Customize&#8221; page. Header area consists of 5 section under the general tab. Top Bar Topbar is an area that resides above logo &#38; navigation. Header Style Header is an area that includes logo and navigation. You can select &#8220;header style&#8221; in header tab, then set [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h4 class="wp-block-heading">Header Option</h4>



<p>You can set the header style in the &#8220;Customize&#8221; page. Header area consists of 5 section under the general tab.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="533" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/header-option-1024x533.jpg" alt="" class="wp-image-2107" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/header-option-1024x533.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header-option-300x156.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header-option-768x400.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header-option.jpg 1355w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Header Option</figcaption></figure>



<h4 class="wp-block-heading">Top Bar</h4>



<p>Topbar is an area that resides above logo &amp; navigation.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="567" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/top-bar-1024x567.jpg" alt="" class="wp-image-2108" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/top-bar-1024x567.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/top-bar-300x166.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/top-bar-768x426.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/top-bar.jpg 1054w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Top Bar</figcaption></figure>



<h4 class="wp-block-heading">Header Style</h4>



<p>Header is an area that includes logo and navigation. You can select &#8220;header style&#8221; in header tab, then set the logo / navigation spaces from the corresponding tabs.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="567" src="https://docs.goodlayers.com/wp-content/uploads/2020/05/header-1024x567.jpg" alt="" class="wp-image-2109" srcset="https://docs.goodlayers.com/wp-content/uploads/2020/05/header-1024x567.jpg 1024w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header-300x166.jpg 300w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header-768x426.jpg 768w, https://docs.goodlayers.com/wp-content/uploads/2020/05/header.jpg 1054w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>Header Style</figcaption></figure>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
