{"id":1061,"date":"2022-02-22T13:18:00","date_gmt":"2022-02-22T13:18:00","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/clone-of-3-een-footer-maken\/"},"modified":"2024-01-03T15:17:04","modified_gmt":"2024-01-03T15:17:04","slug":"3-een-footer-maken-3-2","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=3-een-footer-maken-3-2","title":{"rendered":"3. Een footer maken"},"content":{"rendered":"

Alles wat in de video wordt uitgelegd kan je hieronder ook in tekstvorm terugvinden. Altijd handig wanneer je snel iets wil opzoeken.<\/p>\n

Denk eraan om je footer responsief<\/a> te maken!<\/p>\n

Inleiding<\/h2>\n

De footer staat helemaal onderaan op de site en is \u00e9\u00e9n van de eerste onderdelen die mensen zien. Meestal worden de bedrijfsgegevens, social links en het menu er in geplaatst. Bv: links bedrijfsgegevens – midden social icons – rechts menu. Sommigen zetten hier ook een lead generation formulier<\/a> in om in te schrijven voor de nieuwsbrief.<\/p>\n

In Astra Theme wordt automatisch een footer geplaatst, maar omdat je via Astra al snel op beperkingen botst, gaan we dat menu eruit halen en onze eigen custom footer<\/strong> toevoegen met Elementor<\/strong>.<\/p>\n

Een footer maken met Elementor<\/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 Footer <\/em>en geef daaronder je header een naam<\/li>\n
    • Klik op Template aanmaken,<\/em> Elementor zal geladen worden<\/li>\n<\/ul>\n

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

      De template bibliotheek wordt meteen geopend. Als je een kant-en-klare footer ziet die je mooi vindt, kan je die invoegen en aanpassen. Meestal moet je er zodanig veel aanpassingen aan doen dat het beter is om van nul te starten.<\/p>\n

        \n
      • \bKlik rechts bovenaan op het kruisje om de bibliotheek te sluiten<\/li>\n
      • Klik op het plusteken in het midden van de pagina<\/li>\n
      • Klik vervolgens op \u00e9\u00e9n van de vakken, afhankelijk van welke container structuur je wil. In het voorbeeld kiezen we 1 rij container, zodat we daarna 3 elementen naast elkaar kunnen slepen<\/li>\n<\/ul>\n

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

        Elementen in de footer slepen<\/span><\/h3>\n

        We gaan eerst alle 3 de elementen die we nodig hebben in de footer in de containter slepen, daarna worden ze opgemaakt.<\/p>\n

          \n
        • Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong> om elementen toe te voegen<\/li>\n<\/ul>\n

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

            \n
          • Sleep eerst het icon list element<\/strong>, <\/strong>dan het Social icons element<\/strong> en daarna het WordPress<\/strong>menu element<\/strong> in de container<\/li>\n
          • Ze komen naast elkaar, omdat de rij container werd ingevoegd. Het is normaal dat de verhoudingen niet kloppen, dat wordt in de volgende stap aangepast<\/li>\n<\/ul>\n

            Tip: als je op je contactpagina al een icon list had ingevoegd met je gegevens, dan kan je die kopi\u00ebren in de ene pagina en plakken op de andere<\/strong>. Een element kopi\u00ebren doe je door met de rechtermuisknop op het potloodje rechts bovenaan het element te klikken<\/em>.<\/p><\/blockquote>\n

            Icon list invoegen:<\/strong><\/p>\n

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

            Social icons invoegen:<\/strong><\/p>\n

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

            WordPress Menu invoegen:<\/strong><\/p>\n

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

            De breedte van de elementen aanpassen<\/span><\/h3>\n
              \n
            • Selecteer de icon list door er in te klikken<\/li>\n
            • Ga links in de instellingen naar het tabblad Geavanceerd<\/em> en klik vervolgens op Breedte > Aangepast<\/em>, vul daar in 33%<\/em><\/li>\n<\/ul>\n

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

                \n
              • Selecteer nu de social icons & het menu en doe daar exact hetzelfde<\/li>\n<\/ul>\n

                De volledige breedte van je pagina is 100%, dus de breedte van alle elementen in een container moet altijd samen 100 zijn (op desktop, op mobile moet het samen 320 zijn).<\/p>\n

                De hoogte en uitlijning van de container aanpassen<\/span><\/h3>\n
                  \n
                • Selecteer de container door op het roze vak met de bolletjes te klikken<\/li>\n
                • Kies bij Align items<\/em> voor C<\/em>enter<\/em><\/li>\n<\/ul>\n

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

                    \n
                  • Klik links in de instellingen op Layout<\/em> en pas de minimum hoogte van de container aan, zodat er meer ruimte komt boven en onder de elementen<\/li>\n<\/ul>\n

                    Een achtergrondkleur toevoegen<\/span><\/h3>\n
                      \n
                    • Zorg ervoor dat de container geselecteerd is door midden bovenaan op de zwarte bolletjes in het roze vak te klikken<\/li>\n<\/ul>\n

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

                        \n
                      • Klik links bovenaan in de instellingen op Stijl<\/em><\/li>\n
                      • Klik bij Achtergrond<\/em> op het icoon van het verfborsteltje<\/li>\n
                      • Klik bij Kleur<\/em> op het witte vakje om een kleur te kiezen of op het wereldbolletje om \u00e9\u00e9n van je opgeslagen kleuren te kiezen<\/li>\n<\/ul>\n

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

                        Je (bedrijfs)gegevens toevoegen in een iconenlijst<\/h2>\n
                          \n
                        • Zorg ervoor dat het Iconenlijst element<\/em> geselecteerd is door er in te klikken en pas links in de instellingen zowel de tekst als de iconen aan<\/li>\n
                        • Wijzig bij Stijl<\/em> de tekstkleur eventueel naar wit als je een donkerdere achtergrondkleur gebruikt<\/li>\n<\/ul>\n

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

                          Een e-mailadres klikbaar maken<\/span><\/h3>\n

                          Het is nuttig om je e-mailadres klikbaar te maken zodat bezoekers meteen een e-mail kunnen sturen wanneer erop geklikt wordt.<\/p>\n

                            \n
                          • Zorg ervoor dat het Iconenlijst<\/em> Element<\/em> geselecteerd is door er in te klikken<\/li>\n
                          • Klik links in de instellingen op het item waar je e-mailadres in staat<\/li>\n
                          • Vul bij Link<\/em> het volgende in: mailto:mail@jouwwebsite.be<\/strong> (bv. mailto:sofie@virtualfixer.be). Gebruik geen spaties<\/li>\n<\/ul>\n

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

                            Een telefoonnummer klikbaar maken<\/span><\/h3>\n

                            Het is nuttig om je telefoonnummer (of gsm-nummer) klikbaar te maken zodat bezoekers je meteen kunnen bellen wanneer ze erop klikken.<\/p>\n

                              \n
                            • Zorg ervoor dat het Iconenlijst<\/em> Element<\/em> geselecteerd is door er in te klikken<\/li>\n
                            • Klik links in de instellingen op het item waar je telefoonnummer in staat<\/li>\n
                            • Vul bij Link<\/em> het volgende in: tel:0000000000 <\/strong> (bv. tel:0497316363). Gebruik geen spaties of vreemde tekens<\/li>\n<\/ul>\n

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

                              Social icons bewerken<\/h2>\n
                                \n
                              • Selecteer het Social icons element door er in te klikken<\/li>\n
                              • Ga links in de instellingen naar Inhoud > Sociale pictogrammen<\/em> en doe de volgende instellingen per item:\n
                                  \n
                                • Wijzig eventueel het pictogram door erop te klikken<\/li>\n
                                • Voeg de juiste link toe<\/li>\n
                                • De kleur pas je best hier niet aan, tenzij als je voor elk icoon een andere kleur wil. Als je dezelfde kleur wil voor elk icoon, dan doe je dat beter in het tabblad Stijl<\/em> zodat je het maar 1 keer hoeft in te stellen<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

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

                                    \n
                                  • Verwijder items die je niet nodig hebt door op het kruisje rechts ernaast te klikken<\/li>\n<\/ul>\n

                                    Vervolgens kan je de stijl van de iconen aanpassen in het tabblad Stijl. <\/em><\/p>\n

                                    STIJL > PICTOGRAM:<\/strong><\/p>\n

                                      \n
                                    • <\/em>Kleur:<\/span> laat dit ongewijzigd indien je de offici\u00eble kleur van het logo wil gebruiken. Klik op Aangepast<\/em> om zelf de kleuren te kiezen zodat het beter bij de stijl van je site past. In het voorbeeld zetten we de primaire kleur op transparant en de secundaire kleur op wit<\/li>\n
                                    • Afmeting<\/u>:<\/span> hiermee kan je de grootte van de iconen aanpassen<\/li>\n
                                    • Padding en Afstand<\/span>: hiermee kan je de plaats tussen de iconen aanpassen<\/li>\n<\/ul>\n

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

                                      STIJL > HOVER PICTOGRAM<\/strong><\/p>\n

                                      Hier kan je de kleuren van de pictogrammen bepalen wanneer er met de muis over gehoverd wordt. Je kan eventueel ook nog een hoveranimatie instellen.<\/p>\n

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

                                      GEAVANCEERD<\/strong><\/p>\n

                                      Zoals bij elk element kan je indien gewenst de marges & padding aanpassen, een rand & achtergrond toevoegen,…<\/p>\n

                                      Het menu bewerken<\/h2>\n
                                        \n
                                      • Selecteer het menu door erop te klikken<\/li>\n
                                      • Daarna kan je links in de instellingen allerhande aanpassingen doen<\/li>\n<\/ul>\n

                                        INHOUD & STIJL<\/strong><\/p>\n

                                        Doe de nodige instellingen bij Inhoud en Stijl<\/em><\/p>\n

                                          \n
                                        • Layout<\/span>: dit is de verticale uitlijning. Kies hier best voor Vertical<\/em><\/li>\n
                                        • Align<\/span>: in dit geval kan er best rechts uitgelijnd worden<\/li>\n
                                        • Typografie<\/span><\/li>\n
                                        • Text color<\/span> in normal<\/strong>, hover<\/strong> en active state<\/strong><\/li>\n
                                        • Vertical padding<\/span>: de plaats tussen de rijen<\/li>\n<\/ul>\n

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

                                          Algemene Voorwaarden & Privacy Policy toevoegen<\/h2>\n

                                          Om de volgende stappen te kunnen uitvoeren, is het belangrijk dat je eerst de pagina’s maakt waar je Algemene Voorwaarden en Privacy Policy op staan. Meestal is dit “droge” tekst met titels.<\/p><\/blockquote>\n

                                          Een nieuwe container invoegen<\/h3>\n
                                            \n
                                          • Klik op het plusteken in het midden van de pagina<\/li>\n
                                          • Klik vervolgens op de structuur met 1 rij container<\/li>\n<\/ul>\n

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

                                            De container opmaken<\/h3>\n
                                              \n
                                            • Zorg dat de container geselecteerd is en geef het een achtergrondkleur. Je kan eventueel ook nog een bovenrand toevoegen<\/li>\n
                                            • Pas de minimum hoogte van de container aan zodat die minder hoog wordt<\/li>\n
                                            • Kies bij Justify Content<\/em> in het tabblad Inhoud<\/em> voor Center<\/em><\/li>\n<\/ul>\n

                                              Het tekstbewerker element toevoegen en opmaken<\/h3>\n
                                                \n
                                              • Sleep het Tekstbewerker element<\/em> naar het midden van de onderste container en laat los wanneer je de roze balk ziet<\/li>\n
                                              • Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong><\/li>\n<\/ul>\n

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

                                                  \n
                                                • Vervang de bestaande tekst door “Algemene Voorwaarden – Privacy Policy”<\/li>\n
                                                • Selecteer links in de instellingen “Algemene Voorwaarden” en klik op het link icoon<\/em><\/li>\n
                                                • Voeg de URL toe naar je Algemene voorwaarden<\/strong> en druk op Enter<\/em><\/li>\n
                                                • Doe exact hetzelfde voor de Privacy Policy<\/li>\n<\/ul>\n

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

                                                    \n
                                                  • Klik op het tabblad Stijl<\/em> en maak de tekst op naar keuze<\/li>\n
                                                  • Zet bij Geavanceerd<\/em> de onderste marge wat kleiner<\/strong> zodat er minder witruimte onder het element komt<\/li>\n<\/ul>\n

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

                                                    Je footer publiceren & condities instellen<\/h2>\n
                                                      \n
                                                    • Klik links onderaan op de roze 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 footer wordt weergegeven? Er zijn 2 opties:<\/p>\n

                                                        \n
                                                      • Include<\/li>\n
                                                      • Exclude<\/li>\n<\/ul>\n

                                                        Bij Include<\/em> kan je kiezen voor Entire site<\/em>, dat wil zeggen dat de footer op de volledige site en dus op alle pagina’s wordt weergegeven. Of je kan ervoor kiezen om deze footerr op specifieke pagina’s weer te geven. Of je kan ervoor kiezen om deze footer op de volledige site weer te geven, behalve op een aantal geselecteerde pagina’s.<\/p>\n

                                                        In het voorbeeld wordt de footer op de volledige site weergegeven.<\/p><\/blockquote>\n

                                                        De footer op je volledige site weergeven<\/span><\/h3>\n
                                                          \n
                                                        • Klik op Add condition<\/em><\/li>\n
                                                        • Include > Entire site<\/em> staat automatisch al klaar<\/li>\n
                                                        • Klik rechts onderaan op de groene knop Save & close<\/em> <\/li>\n<\/ul>\n

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

                                                          De footer op enkele specifieke pagina’s weergeven<\/h3>\n
                                                            \n
                                                          • Klik op Add condition<\/em><\/li>\n
                                                          • Kies voor Include > Singular > Pagina > typ de naam van de gewenste pagina’s in en selecteer ze<\/em><\/li>\n
                                                          • Herhaal de 2 vorige stappen indien je nog pagina’s wil toevoegen<\/li>\n
                                                          • Klik rechts onderaan op de groene knop Save & close<\/em> <\/li>\n<\/ul>\n

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

                                                            De footer op je volledige site weergeven, behalve op een aantal geselecteerde pagina’s<\/h3>\n
                                                              \n
                                                            • Klik op Add condition<\/em><\/li>\n
                                                            • Kies voor Include > Entire site<\/em><\/li>\n
                                                            • Klik op Add condition<\/em><\/li>\n
                                                            • Kies voor Exclude > Singular > Pagina > typ de naam van de gewenste pagina’s in die je wil uitsluiten en selecteer ze<\/em><\/em><\/li>\n
                                                            • Herhaal de 2 vorige stappen indien je nog pagina’s wil uitsluiten<\/li>\n
                                                            • Klik rechts onderaan op de groene knop Save & close<\/em> <\/li>\n<\/ul>\n

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

                                                              Je footer responsive maken (mobile)<\/h2>\n
                                                                \n
                                                              • Klik links onderaan op Responsive modus<\/em> (icoon met computer & gsm)<\/li>\n<\/ul>\n

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

                                                                Bovenaan verschijnt nu een balk waar je kan wisselen tussen desktop, tablet en mobile view<\/p>\n

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

                                                                  \n
                                                                • Klik links in de instellingen op Geavanceerd<\/em> en zet bij Breedte<\/em> elk element op 320%<\/em><\/li>\n
                                                                • Doe links in de instellingen bij Stijl<\/em> per element de nodige stijlaanpassingen zodat alles er goed uitziet op mobile (uitlijning<\/strong>, toggle button kleur<\/strong>,…)<\/li>\n<\/ul>\n

                                                                  \"\"<\/span><\/p>\n","protected":false},"template":"","class_list":["post-1061","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-4-het-menu-een-header-en-een-footer","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/1061"}],"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=1061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}