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.
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.
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!
Eerste methode: zonder plugin (met het kolomblok)
De kolom is een standaardblok van de Gutenberg-editor.
Stap 01: Kolomblok toevoegen aan de editor
Voeg toe Kolom blok naar de editor door op de plus (+) pictogram.
Stap 02: Selecteer een kolomindeling
Selecteer een kolomindeling. Hoe meer kolommen je selecteert, hoe meer logo's je kunt toevoegen. Laten we de lay-out selecteren 33/33/33.
Zodra het blok is toegevoegd, kun je het kolomnummer verder verhogen.
Om dit te doen, klik op de Kolom pictogram op de werkbalk. Ga naar de Tabblad Instellingen. Kom dan naar de Kolommen.
U kunt verhoog de kolom number door de schaal te verslepen of rechtstreeks een cijfer te typen.
Stap 03: Voeg het afbeeldingsblok afzonderlijk toe aan de kolommen
Je kunt alle andere Gutenberg-blokken toevoegen binnen de kolommen. Ga naar de eerste kolom en klik op de plus (+) pictogram.
Type afbeelding in het zoekvak. Zodra het blok verschijnt, voeg je het toe aan de kolom.
Upload nu een logo vanaf je lokale schijf of de Mediabibliotheek.
Je kunt zien dat we een logo hebben toegevoegd aan het kolomblok.
Stap 04: Eén voor één logo's toevoegen aan de andere kolommen
Voeg op dezelfde manier logo's toe aan de andere kolommen van het blok.
Stap 05: Het kolomblok stylen
Het blok stileren, ga naar de Tabblad Stijlen in de rechterzijbalk.
Door door het tabblad te scrollen, komen naar Afstand tussen blokken. 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.
Dan, een rand toevoegen rond het hele kolomblok. Je kunt de kleur en breedte van de rand wijzigen.
Voor aanpassingen op geavanceerd niveau moet je een plugin van derden gebruiken. We zullen de volgende methode met zo'n plugin uitleggen.
Tweede methode: een plug-in gebruiken (Tableberg)
Tafelberg 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.
Maak prachtige tafels
Met blok-editor
Volg na de installatie het onderstaande schema.
Stap 01: Voeg het Tableberg-blok toe aan de editor
De plugin voegt een blok toe aan de Gutenberg blokbibliotheek met de naam Tafelberg. Voeg het blok toe aan de editor.
Je moet tabelcellen definiëren 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.
We hebben bijvoorbeeld acht cellen nodig om acht logo's weer te geven. Stel het kolom- en rijnummer in 4*2.
Het vereiste aantal cellen wordt aangemaakt, zoals je kunt zien.
Stap 02: Logo's toevoegen aan de Tableberg-cellen
Met Tableberg kun je verschillende aangepaste blokken toevoegen aan de cellen. Zoeken en het blok Afbeelding toevoegen naar een cel.
Nu, een logo uploaden, Via uploaden of vanuit de mediabibliotheek.
Voeg alle andere logo's toe aan de rest van de Tableberg cellen.
Stap 03: De cellen stylen
Nu, ga naar de tabblad stijlen 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.
Kom naar de Celafstand sectie door naar beneden te scrollen. Met de optie in dit gedeelte kunt u spaties toevoegen tussen de logokolommen, zowel verticaal als horizontaal.
Kom aan tafel grens. In het gedeelte Binnenrand kun je de kleur en straal van de rand wijzigen.
Zo kun je de logokolommen een esthetisch uitzicht geven.
Conclusie
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.