Volgen

WordPress Tutorial | Pagina-delen verbergen op mobiel of juist alleen op mobiel tonen

Je WordPress-website van WebGenerator is responsive. Dat wil zeggen dat de website en inhoud zich op mobiele schermen automatisch aanpassen en goed leesbaar en bedienbaar blijven. De navigatie verandert bijvoorbeeld in een dropdown-menu en tekst- en beeldelementen worden netjes onder elkaar geplaatst.

Soms kan het echter handig zijn om bepaalde elementen in een pagina in de mobiele weergave "uit te schakelen". Want de responsive techniek zorgt in 99% dat alles goed gaat, maar soms komt het toch niet lekker uit. Denk aan uitgebreide formulieren, bepaalde foto's of foto-albums of tabellen. In die gevallen kun je zo'n element in de mobiele weergave van je website verbergen met de class hide-mobile. Er is ook een trucje om elementen juist alléén in mobiele weergave te tonen, de class show-mobile-only.

Iets mobiel verbergen: een voorbeeld

Je wilt een bepaald formulier op een pagina in de mobiele weergave verbergen. Klik dan op het potloodje rechtsboven op de rij waarin dat formulier staat:

001.jpg

 

Er komt een schermpje omhoog met daarin een veld Extra class naam. Vul in dat veld de letterlijke tekst hide-mobile in, zoals hieronder aangegeven:

002.jpg

Klik op Save changes. Als je nu vervolgens de pagina opslaat, zul je zien dat het formulier niet meer wordt getoond op mobiele schermen. 

Tip: je kunt dat ook makkelijk testen door je browser even heel smal te maken en daarmee als het ware het smalle scherm van een mobiele telefoon te simuleren.

Bedenk dat je de rij met daarin het formulier verborgen hebt. Als er nog meer elementen in die rij staan, zullen die ook worden verborgen. Je kunt de class hide-mobile echter ook toepassen op kolommen (elke kolom heeft ook z'n eigen potloodje en class-veld), en ook direct op veel andere elementen. Maar het formulier-element heeft toevallig geen eigen class-veldje, en dus moet je het toepassen op de kolom of de rij waar het formulier in staat.

Iets juist alléén op mobiel tonen

In het bovenstaande voorbeeld hebben we een formulier mobiel verborgen. Maar we willen misschien nog wel een contactmogelijkheid bieden. Bijvoorbeeld een aanklikbaar e-mailadres (bijna iedereen heeft tegenwoordig e-mail op z'n telefoon en mobiel mailen is soms makkelijker dan mobiel een formulier invullen). In dat geval kun je gebruik maken van de class show-mobile-only. Voeg een tekstelement toe aan de pagina met het gewenste e-mailadres, en type de class show-mobile-only in in het veld Extra class naam van dat tekstelement, of de kolom of rij waar dat tekstelement zich in bevindt. Bezoekers die de pagina op een gewoon beeldscherm bekijken zien alleen het formulier, en mobiele bezoekers zien alleen het e-mailadres.

Je hebt dus ook altijd de mogelijkheid om, wanneer je iets mobiel verbergt, er een meer mobielgeschikt alternatief voor in de plaats te tonen.

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen