Hoe logo's weergeven in WordPress (met/zonder plugin)

Hoe logo's weergeven in WordPress (met/zonder plugin)

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.

Voeg het blok Kolommen toe aan de editor

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.

Selecteer een kolomindeling

Zodra het blok is toegevoegd, kun je het kolomnummer verder verhogen.

Om dit te doen, klik op de Kolom pictogram op de werkbalkGa 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.

Kolomnummer verhogen

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.

Het afbeeldingsblok afzonderlijk aan de kolommen toevoegen

Upload nu een logo vanaf je lokale schijf of de Mediabibliotheek.

Logo uploaden naar het Gutenberg kolomblok

Je kunt zien dat we een logo hebben toegevoegd aan het kolomblok.

Logo 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.

Logo's toevoegen aan de andere kolommen

Stap 05: Het kolomblok stylen

Het blok stileren, ga naar de Tabblad Stijlen in de rechterzijbalk.

Het kolomblok stylen na het toevoegen van logo's

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.

Voeg ruimte toe tussen kolommen en een rand

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.

Voeg het TableBerg-blok toe aan uw Gutenberg-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.

Selecteer het aantal rijen en kolommen

Het vereiste aantal cellen wordt aangemaakt, zoals je kunt zien.

Cellen gemaakt voor het weergeven van logo's

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.

Logo's toevoegen aan de Tableberg-cellen

Nu, een logo uploaden, Via uploaden of vanuit de mediabibliotheek.

Logo toegevoegd aan de Tableberg-cel

Voeg alle andere logo's toe aan de rest van de Tableberg cellen.

Voeg alle logo's toe aan 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.

Stylizeer de weergegeven logo's met Tableberg

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.

Voeg ruimte toe tussen de logocellen

Kom aan tafel grens. In het gedeelte Binnenrand kun je de kleur en straal van de rand wijzigen.

Randkleur en straal toevoegen

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.



Het Tableberg-team