{"id":1018,"date":"2022-02-14T21:13:50","date_gmt":"2022-02-14T21:13:50","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/clone-of-2-een-overzichtpagina-voor-je-blog-maken\/"},"modified":"2024-01-03T15:16:45","modified_gmt":"2024-01-03T15:16:45","slug":"2-een-overzichtpagina-voor-je-blog-maken-2","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=2-een-overzichtpagina-voor-je-blog-maken-2","title":{"rendered":"Een overzichtpagina voor je blog maken"},"content":{"rendered":"

Inleiding<\/h2>\n

Het woord spreekt voor zich: op de overzichtpagina van je blog wordt er een overzicht getoond van al je blogberichten. <\/p>\n

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

Een blogoverzicht template maken<\/h2>\n
    \n
  • Klik in het WP dashboard links in het menu op Templates<\/em><\/li>\n<\/ul>\n

    \"\"<\/span><\/p>\n

      \n
    • Klik bovenaan op Nieuwe toevoegen<\/em>. Er zal een pop-up openen<\/li>\n
    • Bij Type<\/em> kies je Archive<\/em> en geef je template een logische naam (bv. Blogoverzicht)<\/li>\n
    • Klik op Template aanmaken,<\/em> Elementor zal geladen worden<\/li>\n<\/ul>\n

      \"\"<\/span><\/p>\n

      Starten vanuit een template<\/span><\/h3>\n

      De template bibliotheek wordt meteen geopend. Er zitten een aantal kant-en-klare blogoverzicht templates tussen dus we gaan er hier eentje uitkiezen.<\/p>\n

        \n
      • \bKies er een design uit dat je mooi vindt en klik op Invoegen<\/em><\/li>\n
      • Doe per container\/element aanpassingen waar nodig:<\/strong>\n
          \n
        • Achtergrondkleuren<\/li>\n
        • 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
        • Typografie<\/li>\n
        • Tekstkleuren<\/li>\n
        • Marges & padding<\/li>\n
        • Delen vertalen<\/li>\n
        • Elementen\/containers die je niet nodig vindt verwijderen<\/li>\n
        • Eventueel nieuwe elementen\/containers toevoegen waarvan je vindt dat die ontbreken<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

          \"\"<\/span><\/p>\n

          Van nul starten<\/span><\/h3>\n

          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

            \n
          • 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,…)<\/li>\n
          • Voeg de juiste container in om mee te starten, afhankelijk van de structuur die je in gedachten hebt<\/li>\n
          • Voeg het Archive<\/em> P<\/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
          • Elk element kan je nog opmaken in het tabblad Stijl<\/em><\/li>\n
          • De titel, Author Box en Archive Posts<\/em> zijn allemaal variabele elementen<\/strong> die automatisch aangepast zullen worden naargelang de inhoud van de blogpost<\/li>\n<\/ul>\n

            De weergave van het blogoverzicht (Archive Posts element) aanpassen<\/h2>\n
              \n
            • Selecteer het overzicht (Archive Posts element) door er in te klikken<\/li>\n
            • Aan de linkerzijde kunnen er heel wat instellingen gedaan worden. Maak alles op naar keuze<\/li>\n<\/ul>\n

              INHOUD – LAYOUT<\/p>\n

                \n
              • Uiterlijk<\/span>: hier kan je kiezen uit verschillende vooraf opgemaakte stijlen (in het voorbeeld gebruiken we “Cards”)<\/li>\n
              • Columns<\/span>: Het aantal kolommen dat je wil weergeven (in het voorbeeld gebruiken we 3 kolommen)<\/li>\n
              • Posts per Page<\/span>: Het aantal posts dat je op een pagina wil weergeven<\/li>\n
              • Image Position<\/span>: de positie van de afbeelding (top, left, right, none)<\/li>\n
              • Afmeting afbeeldin<\/span>g<\/li>\n
              • Titel<\/span>: of je de titel wil weergeven of niet<\/li>\n
              • Samenvatting (exerpt)<\/span>: of je de samenvatting van het bericht wil weergeven of neit<\/li>\n
              • Lengte samentvatting (exerpt lenght)<\/span>: indien de samenvatting aan staat: uit hoeveel tekens die moet bestaan<\/li>\n
              • Meta Data<\/span>: auteur, datum,…<\/li>\n
              • Read more<\/span>: of je een “lees meer” knop wil<\/li>\n
              • Read more text<\/span>: de tekst die op de “lees meer” knop moet komen<\/li>\n<\/ul>\n

                \"\"<\/span>\"\"<\/span><\/p>\n

                STIJL<\/p>\n

                Afhankelijk van het uiterlijk dat je hebt gekozen, kan je nog allerhande stijlaanpassingen doen aan:<\/p>\n

                  \n
                • Layout<\/span>: de plaats tussen de kolommen & rijen en de uitlijning<\/li>\n
                • Card<\/span>: het vak waar de inhoud in staat (bv. achtergrondkleur)<\/li>\n
                • Afbeelding<\/span><\/li>\n
                • Content<\/span>: de inhoud zelf (bv. tekstkleur, tekengrootte,…)<\/li>\n
                • Pagination:<\/span> de nummering (bv. typografie, kleur,…)<\/li>\n
                • Nothing found message:<\/span> wanneer iemand zoekt en er komt “niets gevonden” (bv. tekstkleur)<\/li>\n<\/ul>\n

                  \"\"<\/span><\/p>\n

                  Laat je helemaal gaan en maak er iets mooi van! Hieronder 2 voorbeelden<\/h4>\n

                  \"\"<\/span>\"\"<\/span><\/p>\n

                  Je template publiceren & condities instellen<\/h2>\n
                    \n
                  • Klik links onderaan op de groene knop Publiceren<\/em><\/li>\n<\/ul>\n

                    \"\"<\/span><\/p>\n

                    Er zal een pop-up openen waarin je de condities (voorwaarden) moet instellen. Met andere woorden: waar op je site wil je dat deze header wordt toegevoegd? Het antwoord is eenvoudig, namelijk het berichten<\/strong>archief<\/strong><\/p>\n

                      \n
                    • Klik op Add condition<\/em><\/li>\n
                    • Include > All archives<\/em> staat automatisch al klaar<\/li>\n
                    • Wijzig dit naar Include > Berichten Archive<\/em><\/strong><\/li>\n
                    • Klik daarna op Save & close<\/em><\/li>\n<\/ul>\n

                      \"\"<\/span><\/p>\n","protected":false},"template":"","class_list":["post-1018","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\/1018"}],"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=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}