{"id":1900,"date":"2020-05-22T21:48:52","date_gmt":"2020-05-22T21:48:52","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=1900"},"modified":"2020-05-22T22:39:39","modified_gmt":"2020-05-22T22:39:39","slug":"top-bar-header","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/nl\/user-guide\/top-bar-header\/","title":{"rendered":"Bovenbalk en koptekst"},"content":{"rendered":"<p><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><\/head><\/p>\n<h2>Indeling<\/h2>\n<p>Er zijn zeven koptekstlay-outs beschikbaar in The7 (fig.1):<\/p>\n<div id=\"attachment_2876\" class=\"wp-caption aligncenter c1\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/header-layouts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2876\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2018\/04\/header-layouts-2.png\" alt=\"\" width=\"924\" height=\"576\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 1. Koptekstlay-outs.<\/p>\n<\/div>\n<p>Hieronder vindt u enkele voorbeelden (afb.2.1 - 2.3):<\/p>\n<div id=\"attachment_2224\" class=\"wp-caption aligncenter c2\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/2015-10-26_1446.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-2224\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/2015-10-26_1446-1024x291-1.png\" alt=\"Afb.2.1. Klassieke koptekst.\" width=\"625\" height=\"178\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.2.1. Klassieke koptekst.<\/p>\n<\/div>\n<div id=\"attachment_2225\" class=\"wp-caption aligncenter c2\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/2015-10-26_1449.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-2225\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/2015-10-26_1449-1024x249-1.png\" alt=\"Afb.2.2. Inline koptekst.\" width=\"625\" height=\"152\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.2.2. Inline koptekst.<\/p>\n<\/div>\n<div id=\"attachment_2226\" class=\"wp-caption aligncenter c2\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/2015-10-26_1454.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-2226\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/2015-10-26_1454-1024x234-1.png\" alt=\"Afb. 2.3. Koptekst splitsen.\" width=\"625\" height=\"143\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb. 2.3. Koptekst splitsen.<\/p>\n<\/div>\n<p>De lay-out van de koptekst is van invloed op het aantal en de positie van gebieden waar u microgolven kunt plaatsen (balk bovenaan rechts, balk bovenaan links, enz.).<\/p>\n<p>U kunt op dit tabblad ook de uitlijning van de elementen verfijnen (fig. 2.4):<\/p>\n<div id=\"attachment_3563\" class=\"wp-caption aligncenter c3\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/header-padding-alignment.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3563 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/01\/header-padding-alignment.png\" alt=\"Afb. 2.4. Header paddings en uitlijning.\" width=\"843\" height=\"406\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb. 2.4. Header paddings en uitlijning.<\/p>\n<\/div>\n<h2 id=\"microwidgets\">Microwidgets<\/h2>\n<p>U kunt zogenaamde <strong>Microwidgets<\/strong> (pictogrammen zoals &quot;Winkelwagen&quot;, &quot;Werkuren&quot;, &quot;Zoeken&quot;, enz.) en sleep ze naar de bovenbalk en een andere beschikbare locatie op basis van de koptekstlay-out die je hebt geselecteerd (fig. 3.1):<\/p>\n<div id=\"attachment_3082\" class=\"wp-caption aligncenter c4\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3._Microwidgets_001.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3082 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3._Microwidgets_001.png\" alt=\"Afb. 3. Microwidgets.\" width=\"806\" height=\"506\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.3.1. Microwidgets.<\/p>\n<\/div>\n<p>Om Microwidget-inhoud te bewerken, klikt u op het potloodpictogram (fig. 3.1). Wanneer u een specifieke micro-widget bewerkt, kunt u de zichtbaarheid van een widget voor verschillende apparaten configureren, een pictogram toewijzen, kleuren selecteren, enz. (Afb.3.2):<\/p>\n<div id=\"attachment_3084\" class=\"wp-caption aligncenter c5\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4._Edit_microwidget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3084 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4._Edit_microwidget.png\" alt=\"Fig. 4. Bewerk microwidget\" width=\"846\" height=\"569\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.3.2. Bewerk microwidget<\/p>\n<\/div>\n<p>De volgende Microwidget-elementen zijn beschikbaar:<\/p>\n<ul>\n<li>negen &quot;multifunctionele&quot; widgets met tekst en pictogrammen (bijvoorbeeld adres, telefoon, e-mail);<\/li>\n<li>vijf tekstgebieden;<\/li>\n<li>twee knoppen;<\/li>\n<li>twee menu&#039;s;<\/li>\n<li>Log in;<\/li>\n<li>sociale iconen;<\/li>\n<li>zoeken;<\/li>\n<li>winkelwagen (wanneer de WooCommerce-plug-in is geactiveerd);<\/li>\n<li>taalwisselaar (als de WPML-plug-in actief is).<\/li>\n<\/ul>\n<p>U kunt de lettertypefamilie, -grootte en -kleur specificeren voor een specifiek microwidget-gebied (afb.3.3):<\/p>\n<div id=\"attachment_3087\" class=\"wp-caption aligncenter c6\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.3._Configure_appearance_of_microwidgets.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3087\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.3._Configure_appearance_of_microwidgets.png\" alt=\"Afb.3.3. Configureer het uiterlijk van microwidgets.\" width=\"758\" height=\"399\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.3.3. Configureer het uiterlijk van microwidgets.<\/p>\n<\/div>\n<h2>Bovenste balk<\/h2>\n<p>In het tabblad Bovenste balk (afb. 4) kunt u specificeren:<\/p>\n<ul>\n<li>hoogte en vullingen;<\/li>\n<li>achtergrondkleur of afbeelding;<\/li>\n<li>achtergrondstijl: lijn met inhoudsbreedte, lijn met volledige breedte, uitgeschakeld.<\/li>\n<\/ul>\n<div id=\"attachment_3092\" class=\"wp-caption aligncenter c7\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4._Top_bar_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3092 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4._Top_bar_settings..png\" alt=\"Fig. 4. Instellingen bovenbalk.\" width=\"714\" height=\"512\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 4. Instellingen bovenbalk.<\/p>\n<\/div>\n<h2>Header<\/h2>\n<p>Het is mogelijk om de volgende instellingen op te geven in het tabblad Header (afb.5):<\/p>\n<div id=\"attachment_3093\" class=\"wp-caption aligncenter c8\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._5._Header_settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3093\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._5._Header_settings.png\" alt=\"Fig. 5. Koptekst instellingen\" width=\"678\" height=\"481\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 5. Koptekst instellingen.<\/p>\n<\/div>\n<ul>\n<li>achtergrondkleur of afbeelding;<\/li>\n<li>koptekstversiering (schaduw, lijn);<\/li>\n<li>menuachtergrond voor de koptekst &quot;Klassiek&quot; en andere lay-outgerelateerde instellingen.<\/li>\n<\/ul>\n<h2>Menu<\/h2>\n<p>Het is mogelijk om de volgende instellingen te specificeren in het tabblad Menu (afb.6.1):<\/p>\n<div id=\"attachment_3099\" class=\"wp-caption aligncenter c9\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._6._Menu_settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3099\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._6._Menu_settings.png\" alt=\"Fig. 6. Menu-instellingen.\" width=\"803\" height=\"511\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.6.1. Menu-instellingen.<\/p>\n<\/div>\n<ul>\n<li>hoofdmenu lettertypefamilie, lettergrootte, kleuren;<\/li>\n<li>hover en actieve menu-items stijl;<\/li>\n<li>pictogrammen voor indicator van het volgende niveau inschakelen \/ uitschakelen;<\/li>\n<li>specificeer menu-items marges &amp; opvullingen;<\/li>\n<li>inschakelen (fig.6.2) of uitschakelen (fig.6.3) links met volledige hoogte en volledige breedte:\n<div id=\"attachment_2245\" class=\"wp-caption aligncenter c10\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Screenshot-2015-10-26-16.26.54.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2245\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-26-16.26.54.png\" alt=\"Afb.7.1. Ingeschakelde links op volledige breedte.\" width=\"299\" height=\"100\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.6.2. Ingeschakelde links op volledige breedte.<\/p>\n<\/div>\n<div id=\"attachment_2244\" class=\"wp-caption aligncenter c11\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Screenshot-2015-10-26-16.25.38.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2244\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/Screenshot-2015-10-26-16.25.38.png\" alt=\"Afb.7.2. Uitgeschakelde links op volledige breedte.\" width=\"192\" height=\"99\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.6.3. Uitgeschakelde links op volledige breedte.<\/p>\n<\/div>\n<\/li>\n<li>scheidingslijnen tussen menu-items in- of uitschakelen;<\/li>\n<li>decoratiestijlen voor horizontale kopteksten (kleuromtrek of achtergrond voor zweeftoestellen, animatie, randradius, enz.).<\/li>\n<\/ul>\n<h2>Submenu<\/h2>\n<p>Het is mogelijk om de volgende instellingen te specificeren in het tabblad Submenu (afb.7):<\/p>\n<div id=\"attachment_3101\" class=\"wp-caption aligncenter c12\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._7._Submenu_settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3101\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._7._Submenu_settings.png\" alt=\"Fig. 7. Submenu instellingen.\" width=\"895\" height=\"386\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 7. Submenu instellingen.<\/p>\n<\/div>\n<ul>\n<li>dropdown menu achtergrondkleur;<\/li>\n<li>vervolgkeuzemenu breedte en opvulling;<\/li>\n<li>menu-items lettertypefamilie, grootte, kleur;<\/li>\n<li>hover en actieve menu-items stijl;<\/li>\n<li>specificeer menu-items marges &amp; opvullingen;<\/li>\n<li>selecteer een zijwaartse of neerwaartse indeling als u zijnavigatie gebruikt.<\/li>\n<\/ul>\n<div class=\"mceTemp\">\u00a0U kunt ook vinden <a href=\"https:\/\/the7kennisbank.nl\/user-guide\/mega-menu\/\">Mega-menu<\/a> instellingen daar.<\/div>\n<h2>Zwevende koptekst<\/h2>\n<div id=\"attachment_3103\" class=\"wp-caption aligncenter c4\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._8._Floating_header_settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3103\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._8._Floating_header_settings.png\" alt=\"Fig. 8. Instellingen voor zwevende koptekst.\" width=\"806\" height=\"466\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 8. Instellingen voor zwevende koptekst.<\/p>\n<\/div>\n<p>Op het tabblad Zwevende koptekst (afb. 8) kunt u specificeren:<\/p>\n<ul>\n<li>of deze header moet worden ingeschakeld;<\/li>\n<li>zwevende kopteksthoogte, kleur en decoratie (schaduw, lijn, uitgeschakeld);<\/li>\n<li>effect: vervagen bij scrollen, schuiven bij scrollen, plakkerig;<\/li>\n<li>lettertypekleuren voor inactieve, zwevende en actieve staten;<\/li>\n<\/ul>\n<p>Het is ook mogelijk om in te schakelen <strong>Zwevende bovenbalk<\/strong> (inclusief de bovenste balk in de zwevende koptekst) daar.<\/p>\n<h2>Mobiele koptekst<\/h2>\n<p>Op dit tabblad kunt u specificeren:<\/p>\n<ul>\n<li>eerste koptekstschakelpunt (voor tablets) en tweede koptekstschakelpunt (voor telefoons);<\/li>\n<li>header hoogte en indeling voor tablets en telefoons (fig.9.1):\n<div id=\"attachment_3566\" class=\"wp-caption aligncenter c13\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/mob-header-layout.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3566 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/01\/mob-header-layout.png\" alt=\"Afb.9.1. Mobiele koptekstlay-outs.\" width=\"838\" height=\"259\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.9.1. Mobiele koptekstlay-outs.<\/p>\n<\/div>\n<\/li>\n<li>mobiele koptekst achtergrondkleur, pictogrammen grootte en kleuren;<\/li>\n<li>zwevende mobiele navigatie in- of uitschakelen;<\/li>\n<li>specificeer lettertypefamilie, grootte en kleuren (inclusief hover \/ actieve menu-items);<\/li>\n<li>kleur van website-overlay wanneer mobiel menu geopend is;<\/li>\n<li>mobiele menuachtergrond en uitlijning (fig.9.2):<a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/2015-10-26_1710.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2253\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2015\/10\/2015-10-26_1710.png\" alt=\"Fig. 11. Mobiele menu-uitlijning.\" width=\"469\" height=\"141\"><\/a><\/li>\n<li>&quot;Open&quot; knopontwerp (fig. 9.3): pictogram, positie, vullingen \/ marges, rand, kleur.\n<div id=\"attachment_3594\" class=\"wp-caption aligncenter c14\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/open-button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3594 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/open-button.png\" alt='Afb.9.3. &quot;Open&quot; knop ontwerp.' width=\"834\" height=\"522\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.9.3. &quot;Open&quot; knop ontwerp.<\/p>\n<\/div>\n<h2>Mobiel menu<\/h2>\n<\/li>\n<\/ul>\n<p>Het is mogelijk om de volgende instellingen op te geven op het tabblad Mobiel menu:<\/p>\n<ul>\n<li>mobiele menu-items lettertypefamilie, grootte, kleur;<\/li>\n<li>menu verdelers;<\/li>\n<li>menubreedte, vullingen, achtergrondkleur, links \/ rechts positie;<\/li>\n<li>site-overlay (bij het openen van een mobiel menu) kleuren;<\/li>\n<li>Ontwerp van de knop &quot;Sluiten&quot; (fig. 10.1): pictogram, positie, vullingen \/ marges, rand, kleur.\n<div id=\"attachment_3591\" class=\"wp-caption aligncenter c15\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/mobile-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3591\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/mobile-menu.png\" alt='Afb.10.1. &quot;Sluiten&quot; knop ontwerp.' width=\"836\" height=\"583\"><\/a><\/p>\n<p class=\"wp-caption-text\">Afb.10.1. &quot;Sluiten&quot; knop ontwerp.<\/p>\n<\/div>\n<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Layout Er zijn zeven header layouts beschikbaar in The7 (fig. 1): Fig. 1. Header layouts. Hieronder vindt u enkele voorbeelden (afb. 2.1 - 2.3): Afb. 2.1. Klassieke koptekst. Afb.2.2. Inline koptekst. Afb. 2.3. Koptekst splitsen. De lay-out van de koptekst is van invloed op het aantal en de positie van gebieden waar u microwidgets kunt plaatsen (balk bovenaan rechts, balk bovenaan ...<\/p>","protected":false},"author":2,"featured_media":1959,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10,9],"tags":[],"class_list":["post-1900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theme-options","category-user-guide","category-10","category-9","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/1900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/comments?post=1900"}],"version-history":[{"count":3,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/1900\/revisions"}],"predecessor-version":[{"id":2566,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/1900\/revisions\/2566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media\/1959"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media?parent=1900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/categories?post=1900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/tags?post=1900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}