{"id":3646,"date":"2024-09-20T17:22:30","date_gmt":"2024-09-20T17:22:30","guid":{"rendered":"https:\/\/tableberg.com\/?p=3646"},"modified":"2024-09-20T17:22:33","modified_gmt":"2024-09-20T17:22:33","slug":"hoe-logos-weergeven-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/nl\/how-to-showcase-logos-in-wordpress\/","title":{"rendered":"Hoe logo's weergeven in WordPress (met\/zonder plugin)"},"content":{"rendered":"

Een logo is een krachtige visuele weergave van een merk. Als je bedrijf verbonden is met andere merken, via een partnerschap of affiliatie, kan het nodig zijn om hun logo's op je website weer te geven om vertrouwen en geloofwaardigheid op te bouwen bij webbezoekers.<\/p>\n\n\n\n

Als je bijvoorbeeld een portfoliowebsite hebt, moet je logo's weergeven van de merken waarmee je hebt samengewerkt. Hetzelfde geldt voor veel andere websites. Met WordPress kun je dit op verschillende eenvoudige en probleemloze manieren doen.<\/p>\n\n\n\n

In deze tutorial laten we je twee eenvoudige methodes zien om logo's te laten zien in WordPress, met en zonder plugin. Aan de slag!<\/p>\n\n\n\n

Eerste methode: zonder plugin (met het kolomblok)<\/h2>\n\n\n\n

De kolom is een standaardblok van de Gutenberg-editor. <\/p>\n\n\n\n

Stap 01: Kolomblok toevoegen aan de editor<\/h3>\n\n\n\n

Voeg toe Kolom blok<\/strong> naar de editor door op de plus (+) pictogram<\/strong>.<\/p>\n\n\n\n

\"Voeg<\/figure>\n\n\n\n

Stap 02: Selecteer een kolomindeling<\/h3>\n\n\n\n

Selecteer een kolomindeling. Hoe meer kolommen je selecteert, hoe meer logo's je kunt toevoegen. Laten we de lay-out selecteren 33\/33\/33<\/strong>.<\/p>\n\n\n\n

\"Selecteer<\/figure>\n\n\n\n

Zodra het blok is toegevoegd, kun je het kolomnummer verder verhogen. <\/p>\n\n\n\n

Om dit te doen, klik op<\/strong> de Kolom pictogram<\/strong> op de werkbalk. Ga naar<\/strong> de Tabblad Instellingen<\/strong>. Kom dan naar de Kolommen<\/strong>. <\/span><\/p>\n\n\n\n

U kunt <\/span>verhoog de kolom nu<\/span>mber<\/strong> door de schaal te verslepen of rechtstreeks een cijfer te typen.<\/p>\n\n\n\n

\"Kolomnummer<\/figure>\n\n\n\n

Stap 03: Voeg het afbeeldingsblok afzonderlijk toe aan de kolommen<\/h3>\n\n\n\n

Je kunt alle andere Gutenberg-blokken toevoegen binnen de kolommen. Ga naar de eerste kolom<\/strong> en klik op<\/strong> de plus (+) pictogram<\/strong>. <\/p>\n\n\n\n

Type afbeelding<\/strong> in het zoekvak. Zodra het blok verschijnt, voeg je het toe aan de kolom.<\/p>\n\n\n\n

\"Het<\/figure>\n\n\n\n

Upload nu een logo vanaf je lokale schijf of de Mediabibliotheek.<\/p>\n\n\n\n

\"Logo<\/figure>\n\n\n\n

Je kunt zien dat we een logo hebben toegevoegd aan het kolomblok.<\/p>\n\n\n\n

\"Logo<\/figure>\n\n\n\n

Stap 04: E\u00e9n voor \u00e9\u00e9n logo's toevoegen aan de andere kolommen<\/h3>\n\n\n\n

Voeg op dezelfde manier logo's toe aan de andere kolommen van het blok.<\/p>\n\n\n\n

\"Logo's<\/figure>\n\n\n\n

Stap 05: Het kolomblok stylen<\/h3>\n\n\n\n

Het blok stileren, ga naar<\/strong> de Tabblad Stijlen<\/strong> in de rechterzijbalk.<\/p>\n\n\n\n

\"Het<\/figure>\n\n\n\n

Door door het tabblad te scrollen, komen naar<\/strong> Afstand tussen blokken<\/strong>. In dit gedeelte kun je ruimte toevoegen tussen de logo's, zowel verticaal als horizontaal. Maar in dit geval is het beter om spaties horizontaal toe te voegen.<\/p>\n\n\n\n

Dan, een rand toevoegen<\/strong> rond het hele kolomblok. Je kunt de kleur en breedte van de rand wijzigen.<\/p>\n\n\n\n

\"Voeg<\/figure>\n\n\n\n

Voor aanpassingen op geavanceerd niveau moet je een plugin van derden gebruiken. We zullen de volgende methode met zo'n plugin uitleggen.<\/p>\n\n\n\n

Tweede methode: een plug-in gebruiken (Tableberg)<\/h2>\n\n\n\n

Tafelberg<\/strong> is een veelzijdige plugin voor het bouwen van tabellen, pictogramvakken, afbeeldingsvakken, logovakken en meer. Met deze plugin kun je logo's met geavanceerde aanpassingen op je website laten zien. Haal het van de bannerslag.<\/p>\n\n\n\n

\n
\n
\n
\n

Maak prachtige tafels <\/strong>
Met blok-editor<\/strong><\/p>\n\n\n\n

\n
Probeer gratis<\/a><\/div>\n\n\n\n
Krijg Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Volg na de installatie het onderstaande schema.<\/p>\n\n\n\n

Stap 01: Voeg het Tableberg-blok toe aan de editor<\/h3>\n\n\n\n

De plugin voegt een blok toe aan de Gutenberg blokbibliotheek met de naam Tafelberg<\/strong>. Voeg het blok toe aan de editor.<\/p>\n\n\n\n

\"Voeg<\/figure>\n\n\n\n

Je moet tabelcellen defini\u00ebren voor het aantal logo's dat je wilt weergeven. Maak gewoon het vereiste aantal cellen aan door het aantal rijen en kolommen op te geven.<\/p>\n\n\n\n

We hebben bijvoorbeeld acht cellen nodig om acht logo's weer te geven. Stel het kolom- en rijnummer in 4*2<\/strong>.<\/p>\n\n\n\n

\"Selecteer<\/figure>\n\n\n\n

Het vereiste aantal cellen wordt aangemaakt, zoals je kunt zien.<\/p>\n\n\n\n

\"Cellen<\/figure>\n\n\n\n

Stap 02: Logo's toevoegen aan de Tableberg-cellen<\/h3>\n\n\n\n

Met Tableberg kun je verschillende aangepaste blokken toevoegen aan de cellen. Zoeken en het blok Afbeelding toevoegen<\/strong> naar een cel.<\/p>\n\n\n\n

\"Logo's<\/figure>\n\n\n\n

Nu,\u00a0een logo uploaden,<\/strong><\/span>\u00a0Via uploaden of vanuit de mediabibliotheek.<\/p>\n\n\n\n

\"Logo<\/figure>\n\n\n\n

Voeg alle andere logo's toe aan de rest van de Tableberg cellen.<\/p>\n\n\n\n

\"Voeg<\/figure>\n\n\n\n

Stap 03: De cellen stylen<\/h3>\n\n\n\n

Nu, ga naar<\/strong> de tabblad stijlen<\/strong> terwijl de hele tabel geselecteerd blijft. Je kunt de achtergrondkleur voor alle rijen en cellen afzonderlijk wijzigen. Maar omdat we dit niet nodig hebben voor de tutorial, laten we deze optie staan.<\/p>\n\n\n\n

\"Stylizeer<\/figure>\n\n\n\n

Kom naar<\/strong> de Celafstand<\/strong> sectie door naar beneden te scrollen. Met de optie in dit gedeelte kunt u spaties toevoegen tussen de logokolommen, zowel verticaal als horizontaal.<\/p>\n\n\n\n

\"Voeg<\/figure>\n\n\n\n

Kom aan tafel grens<\/strong>. In het gedeelte Binnenrand kun je de kleur en straal van de rand wijzigen. <\/p>\n\n\n\n

\"Randkleur<\/figure>\n\n\n\n

Zo kun je de logokolommen een esthetisch uitzicht geven.<\/p>\n\n\n\n

Conclusie<\/h2>\n\n\n\n

Tableberg is een spannende multifunctionele plugin waarmee je talloze prachtige ontwerpen voor je website kunt maken. Voordat je afsluit, kun je nog een aantal tutorials bekijken over de plugin. <\/p>\n\n\n\n