{"id":996,"date":"2022-02-14T19:45:06","date_gmt":"2022-02-14T19:45:06","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/pictogrambox-iconbox\/"},"modified":"2024-01-03T15:16:44","modified_gmt":"2024-01-03T15:16:44","slug":"pictogrambox-iconbox","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=pictogrambox-iconbox","title":{"rendered":"Pictogrambox (iconbox)"},"content":{"rendered":"<ul>\n<li>Voeg indien nodig een nieuwe container toe, door op het roze plusteken te klikken onderaan de pagina (in het voorbeeld gebruiken we een rijcontainer, waarin dan 3 elementen naast elkaar zullen komen)<\/li>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Typ in het zoekvak &#8220;pictogram&#8221; of &#8220;icon&#8221; in<\/li>\n<li>Sleep het <em>Pictogrambox<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1687\" width=\"386\" data-init-width=\"2174\" height=\"1210\" data-init-height=\"1210\" title=\"Screenshot 2023-04-22 at 12.16.14 3\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.16.14-3.png\" data-width=\"386\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Wanneer je de pictogrambox selecteert, kan je aan de linkerzijde allerhande instellingen doen.&nbsp;<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Inhoud<\/span>: hier kan je een <strong>ander pictogram kiezen<\/strong> door erop te klikken, de <strong>titel en de tekst aanpassen<\/strong> en eventueel een <strong>link toevoegen<\/strong> aan de hele box. Ook de <strong>positie van het icoon<\/strong> kan hier gewijzigd worden (links, boven of rechts)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1688\" width=\"229\" data-init-width=\"582\" height=\"1440\" data-init-height=\"1440\" title=\"Screenshot 2023-04-22 at 12.18.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.00.png\" data-width=\"229\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Stijl<\/span>: hier kan je allerhande stijlaanpassingen doen aan het icoon en de inhoud. Icoon: &nbsp;<strong>tekstkleur<\/strong>, <strong>afstand<\/strong> van het icoon tot de tekst, <strong>grootte<\/strong>, <strong>draaien<\/strong> &#8211; alles in <strong>normal en hover state<\/strong>. Inhoud: <strong>uitlijning<\/strong>, van titel &amp; tekst de <strong>tekstkleur<\/strong>,<strong>&nbsp;typografie<\/strong>, <strong>afstand<\/strong>,<strong> tekstschaduw<\/strong>,&#8230;<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1689\" width=\"228\" data-init-width=\"596\" height=\"786\" data-init-height=\"786\" title=\"Screenshot 2023-04-22 at 12.18.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.58.png\" data-width=\"228\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Geavanceerd<\/span>:&nbsp;hier kan je zoals bij elk element onder andere de&nbsp;<strong>marges<\/strong>&nbsp;en&nbsp;<strong>padding<\/strong> instellen. Je kan hier ook de breedte van het element instellen.&nbsp;<em>In het voorbeeld wordt er aan alle kanten 20 padding toegevoegd en wordt de breedte op 33% gezet. <\/em>Er kan ook een <strong>achtergrondkleur <\/strong>of <strong>rand<\/strong> toegevoegd worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1690\" width=\"523\" data-init-width=\"1926\" height=\"1176\" data-init-height=\"1176\" title=\"Screenshot 2023-04-22 at 12.21.41\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.21.41.png\" data-width=\"523\" style=\"\" loading=\"lazy\"><\/span><\/p>\n","protected":false},"template":"","class_list":["post-996","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-quick-fix","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/996"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}