{"id":197,"date":"2021-12-18T14:07:52","date_gmt":"2021-12-18T14:07:52","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/2-een-overzichtpagina-voor-je-blog-maken\/"},"modified":"2024-01-03T15:17:09","modified_gmt":"2024-01-03T15:17:09","slug":"3-een-blogoverzicht-template-maken","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=3-een-blogoverzicht-template-maken","title":{"rendered":"3. Een blogoverzicht pagina maken"},"content":{"rendered":"<p>Alles wat in de video wordt uitgelegd kan je hieronder ook in tekstvorm terugvinden. Altijd handig wanneer je snel iets wil opzoeken.<\/p>\n<p style=\"\">Er is een nieuwe functie van Elementor om een blogpost overzicht te maken, nl. de Loop Grid. Dit element heeft ongelooflijk veel mogelijkheden, hier kan je meer info vinden: <a href=\"https:\/\/elementor.com\/help\/loop-grid\/\" target=\"_blank\" style=\"outline: none;\" rel=\"noopener\">https:\/\/elementor.com\/help\/loop-grid\/ <\/a><\/p>\n<p style=\"\">Een video van mij volgt nog in een latere fase.<\/p>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n<h2>Inleiding<\/h2>\n<p style=\"\">Het woord spreekt voor zich: op de overzichtpagina van je blog wordt er een overzicht getoond van al je blogberichten.&nbsp;<\/p>\n<blockquote><p>Je start best deze les nadat je 2 of meer blogberichten hebt toegevoegd. Het is moeilijk om een overzichtpagina voor je blog te maken als er maar 1 blog item gepubliceerd werd.<\/p><\/blockquote>\n<h2>Een blogoverzicht pagina maken<\/h2>\n<ul>\n<li style=\"\">Klik in het WP dashboard links in het menu op <em>Pagina&#8217;s<\/em> en vervolgens op <em>Nieuwe pagina<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2525\" width=\"614\" data-init-width=\"1824\" height=\"288\" data-init-height=\"856\" title=\"Screenshot 2023-08-23 at 17.08.43\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/08\/Screenshot-2023-08-23-at-17.08.43.png\" data-width=\"614\" style=\"aspect-ratio: auto 1824 \/ 856;\" data-height=\"288\"><\/span><\/p>\n<ul>\n<li>Geef de pagina een logische naam (bv. &#8220;Blog&#8221;)<\/li>\n<li>Klik rechts bovenaan 2x op <em>Publiceren<\/em><\/li>\n<li>Klik op <em>Bewerk met Elementor<\/em><\/li>\n<\/ul>\n<h3><span style=\"text-decoration: underline;\">Starten vanuit een template<\/span><\/h3>\n<ul>\n<li>Klik in het midden op het mapje om de template bibliotheek te openen<\/li>\n<\/ul>\n<p>Er zitten een aantal kant-en-klare blogoverzicht templates tussen dus we gaan er hier eentje uitkiezen.<\/p>\n<ul>\n<li>\bKies er een design uit dat je mooi vindt en klik op&nbsp;<em>Invoegen<\/em><\/li>\n<li><strong>Doe per container\/element aanpassingen waar nodig:<\/strong>\n<ul>\n<li>Achtergrondkleuren<\/li>\n<li>Achtergrondafbeelding (let op: van je blogberichten zelf kan je de afbeeldingen NIET wijzigen in de overzichtapgina, dat doe je in het blogbericht zelf)<\/li>\n<li>Typografie<\/li>\n<li>Tekstkleuren<\/li>\n<li>Marges &amp; padding<\/li>\n<li>Delen vertalen<\/li>\n<li>Elementen\/containers die je niet nodig vindt verwijderen<\/li>\n<li>Eventueel nieuwe elementen\/containers toevoegen waarvan je vindt dat die ontbreken<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"845\" width=\"593\" data-init-width=\"2744\" height=\"316\" data-init-height=\"1462\" title=\"Screenshot 2022-02-13 at 19.06.44\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-13-at-19.06.44.png\" data-width=\"593\" data-height=\"316\" style=\"aspect-ratio: auto 2744 \/ 1462;\"><\/span><\/p>\n<h3 style=\"\"><span style=\"text-decoration: underline;\">Van nul starten<\/span><\/h3>\n<p>Je kan er ook voor kiezen om van nul te starten en zelf nieuwe containers en elementen in te voegen op de pagina. Links bovenaan in de instellingen komt een lijst van de belangrijkste elementen van toepassing op een blog archive:<\/p>\n<ul>\n<li>Denk op voorhand goed na over de structuur van je blogoverzicht template (links de titel, rechts de uitgelichte foto of de uitgelichte foto met daarop de titel of,&#8230;)<\/li>\n<li>Voeg de juiste container in om mee te starten, afhankelijk van de structuur die je in gedachten hebt<\/li>\n<li>Voeg het <strong><em>P<\/em><em>osts<\/em><\/strong> element toe in de container door het op de gewenste plaats te slepen, gebruik eventueel geneste containers om tot het resultaat te komen dat je wil<\/li>\n<li>Elk element kan je nog opmaken in het tabblad&nbsp;<em>Stijl<\/em><\/li>\n<li><em>De titel, Author Box en Posts<\/em>&nbsp;zijn allemaal&nbsp;<strong>variabele elementen<\/strong> die automatisch aangepast zullen worden naargelang de inhoud van de blogpost<\/li>\n<\/ul>\n<h2 style=\"\">De weergave van het blogoverzicht (Posts element) aanpassen<\/h2>\n<ul>\n<li>Selecteer het overzicht (Archive Posts element) door er in te klikken<\/li>\n<li>Aan de linkerzijde kunnen er heel wat instellingen gedaan worden. Maak alles op naar keuze<\/li>\n<\/ul>\n<p>INHOUD &#8211; LAYOUT<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Uiterlijk<\/span>: hier kan je kiezen uit verschillende vooraf opgemaakte stijlen (in het voorbeeld gebruiken we &#8220;Cards&#8221;)<\/li>\n<li><span style=\"text-decoration: underline;\">Columns<\/span>: Het aantal kolommen dat je wil weergeven (in het voorbeeld gebruiken we 3 kolommen)<\/li>\n<li><span style=\"text-decoration: underline;\">Posts per Page<\/span>: Het aantal posts dat je op een pagina wil weergeven<\/li>\n<li><span style=\"text-decoration: underline;\">Image Ratio<\/span>: de grootte van de afbeelding<\/li>\n<li><span style=\"text-decoration: underline;\">Afmeting afbeeldin<\/span>g<\/li>\n<li><span style=\"text-decoration: underline;\">Titel<\/span>: of je de titel wil weergeven of niet<\/li>\n<li><span style=\"text-decoration: underline;\">Samenvatting (exerpt)<\/span>: of je de samenvatting van het bericht wil weergeven of neit<\/li>\n<li><span style=\"text-decoration: underline;\">Lengte samentvatting (exerpt lenght)<\/span>: indien de samenvatting aan staat: uit hoeveel tekens die moet bestaan<\/li>\n<li><span style=\"text-decoration: underline;\">Meta Data<\/span>: auteur, datum,&#8230;<\/li>\n<li><span style=\"text-decoration: underline;\">Read more<\/span>: of je een &#8220;lees meer&#8221; knop wil<\/li>\n<li><span style=\"text-decoration: underline;\">Read more text<\/span>: de tekst die op de &#8220;lees meer&#8221; knop moet komen<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1804\" width=\"234\" data-init-width=\"596\" height=\"1658\" data-init-height=\"1658\" title=\"Screenshot 2023-04-27 at 18.00.35\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-18.00.35.png\" data-width=\"234\" style=\"aspect-ratio: auto 596 \/ 1658;\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"847\" width=\"235\" data-init-width=\"582\" height=\"141\" data-init-height=\"350\" title=\"Screenshot 2022-02-13 at 19.10.06\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-13-at-19.10.06.png\" data-width=\"235\" data-height=\"141\" style=\"aspect-ratio: auto 582 \/ 350;\"><\/span><\/p>\n<p>STIJL<\/p>\n<p>Afhankelijk van het uiterlijk dat je hebt gekozen, kan je nog allerhande stijlaanpassingen doen aan:<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Layout<\/span>: de plaats tussen de kolommen &amp; rijen en de uitlijning<\/li>\n<li><span style=\"text-decoration: underline;\">Card<\/span>: het vak waar de inhoud in staat (bv. achtergrondkleur)<\/li>\n<li><span style=\"text-decoration: underline;\">Afbeelding<\/span><\/li>\n<li style=\"\"><span style=\"text-decoration: underline;\">Content<\/span>: de inhoud zelf (bv. tekstkleur, tekengrootte,&#8230;)<\/li>\n<li style=\"\"><span style=\"text-decoration: underline;\">Pagination:<\/span> de nummering (bv. typografie, kleur,&#8230;)<\/li>\n<li style=\"\"><span style=\"text-decoration: underline;\">Nothing found message:<\/span> wanneer iemand zoekt en er komt &#8220;niets gevonden&#8221; (bv. tekstkleur)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1805\" width=\"239\" data-init-width=\"608\" height=\"624\" data-init-height=\"624\" title=\"Screenshot 2023-04-27 at 18.02.07\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-18.02.07.png\" data-width=\"239\" style=\"aspect-ratio: auto 608 \/ 624;\"><\/span><\/p>\n<h4 style=\"\">Laat je helemaal gaan en maak er iets mooi van! Hieronder 2 voorbeelden<\/h4>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"849\" width=\"758\" data-init-width=\"2650\" height=\"1190\" data-init-height=\"1190\" title=\"Screenshot 2022-02-13 at 19.23.17\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-13-at-19.23.17.png\" data-width=\"758\" style=\"aspect-ratio: auto 2650 \/ 1190;\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"1806\" width=\"760\" data-init-width=\"2330\" height=\"1118\" data-init-height=\"1118\" title=\"Screenshot 2023-04-27 at 18.05.28\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-18.05.28.png\" data-width=\"760\" style=\"aspect-ratio: auto 2330 \/ 1118;\"><\/span><\/p>\n<h2 style=\"\">Je pagina publiceren &amp; toevoegen in het menu<\/h2>\n<ul>\n<li>Klik links onderaan op de roze knop <em>Publiceren<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1618\" width=\"244\" data-init-width=\"602\" height=\"81\" data-init-height=\"81\" title=\"Publiceren\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.21.41-e1682251299564.png\" data-width=\"244\" style=\"aspect-ratio: auto 602 \/ 81;\"><\/span><\/p>\n<ul>\n<li>Ga terug naar het WP dasbhoard door links bovenaan op de 3 streepjes in de zwarte balk te klikken en vervolgens op <em>Afsluiten<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1808\" width=\"194\" data-init-width=\"602\" height=\"876\" data-init-height=\"876\" title=\"Screenshot 2023-04-27 at 18.10.59\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-27-at-18.10.59.png\" data-width=\"194\" style=\"aspect-ratio: auto 602 \/ 876;\"><\/span><\/p>\n<p>Je kan er nu voor kiezen om je <a href=\"https:\/\/leeromgeving.fixityourself.be\/course\/1-paginas-toevoegen-aan-het-menu-3-2-2\/\" target=\"_blank\" style=\"outline: none;\" data-tcb_hover_state_parent=\"\" rel=\"noopener\">blog toe te voegen aan je menu<\/a> of als <a href=\"https:\/\/leeromgeving.fixityourself.be\/course\/4-een-externe-link-toevoegen-aan-het-menu-3-2\/\" target=\"_blank\" style=\"outline: none;\" data-tcb_hover_state_parent=\"\" rel=\"noopener\">uitgelichte knop in de header<\/a> te verwerken.<\/p>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-197","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-4-een-blog-maken","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/197"}],"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=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}