Conflicterende stijlen prioriteren

Het stylen van elementen in de Elementor Editor V4 is gebaseerd op het idee van klassen. Voor meer informatie over klassen in V4, zie Klassen in Elementor.  

Werken met klassen heeft veel voordelen, vooral de mogelijkheid om elementen te hergebruiken, waardoor je werk sneller en efficiënter wordt. Het gebruik van klassen kan echter soms betekenen dat je conflicterende stijlen aan een element toevoegt. Een alinea-element kan bijvoorbeeld een klasse hebben die de tekstkleur op groen zet en een andere klasse die de tekstkleur op rood zet. Hoe bepaalt de Editor welke kleur te gebruiken?

Prioriteren van klassen en identificeren van conflicten

In het volgende voorbeeld gebruiken we twee klassen:

• Red_text: Deze klasse is ingesteld om de tekst rood te maken.
• Green_text: Deze klasse is ingesteld om de tekst groen te maken.

Om te leren hoe je klassen maakt, zie Klassen in Elementor.

Om klasseprioriteit en conflictidentificatie te demonstreren, maken we een voorbeeldelement. 

1. Voeg een Alinea-element toe aan het canvas.
   Omdat we de alinea nog niet hebben gestyled, gebruikt deze de standaard tekstkleur – zwart.
    
2. Klik op het tabblad Stijl.
   

Bovenaan het Stijl-tabblad staat het tekstvak Klassen. Het tekstvak Klassen bevat de namen van alle klassen die van toepassing zijn op het element. Op dit moment is de enige klasse die van toepassing is op het element Lokaal.  

Lokaal is een speciale klasse. Elk element heeft een lokale klasse die alleen van toepassing is op dat element. Op dit punt hebben we nog geen stijlen toegevoegd aan de lokale klasse, dus het Alinea-element gebruikt de standaardinstellingen.

Laten we nu wat kleur aan de tekst toevoegen.

• Voeg in het tekstvak Klassen de klasse Red_text toe.

De tekst wordt rood omdat deze de kleur gebruikt die is ingesteld door de Red_text-klasse.

Laten we nu naar indicatoren kijken. Indicatoren tonen je welke instellingen worden gebruikt voor je element.

• Open het veld Typografie en kijk naar de instelling Tekstkleur. De indicatorstip is groen en toont dat dit de instelling is die wordt gebruikt.  

Note

Als je het Typografie-veld zou sluiten, zou er een indicatorstip verschijnen bij het woord Typografie. Indicatoren verschijnen bij elke Stijl-instelling die een waarde heeft. Zie hieronder voor een overzicht van wat de kleur van de indicator betekent.

Ga nu naar de lokale klasse en kijk naar de Typografie-instelling.

Er is een grijze stip bij Tekstkleur. Dat toont dat dit element een andere klasse bevat die de tekstkleur instelt.

• We gaan terug naar het tekstvak Klassen en voegen de klasse Green_text toe.

Merk op dat ondanks het feit dat we de Green_text-klasse na de Red_text-klasse hebben toegevoegd, deze naar links van de Red_class verschuift. Klassen aan de linkerkant hebben altijd prioriteit over de klassen aan de rechterkant. Dit betekent dat de lokale klasse altijd de hoogste prioriteit heeft omdat deze altijd de meest linkse klasse is.

Om te begrijpen waarom, klik op het Klassenbeheer-pictogram om de Klassenbeheerder te openen. Voor details, zie De Elementor Editor Klassenbeheerder.  
  

Merk op dat Green_text boven Red_text staat, wat betekent dat deze prioriteit heeft boven Red_text. Elk element met zowel Green_text als Red_text zal de Green_text-instellingen overnemen.

Als we naar de Typografie-instellingen voor elke klasse kijken, zien we:

• In de Red_text-klasse is er een oranje stip bij Tekstkleur . Dit toont dat er een andere klasse is die de instelling voor deze klasse overschrijft.
• In de Green_text-klasse is er een groene stip bij Tekstkleur . Dit toont dat dit de kleur is die wordt gebruikt in dit element.   
• In de lokale klasse is er een grijze stip bij Tekstkleur . Dit toont dat dit element een andere klasse heeft die deze instelling bepaalt, maar het botst niet met deze klasse.

Laten we ten slotte kijken wat er gebeurt wanneer we de lokale klasse bewerken.

• Verander in Typografie de Tekstkleur. 

De tekst verandert naar die kleur omdat de lokale klasse altijd de hoogste prioriteit heeft. De indicator naast Tekstkleur wordt roze, wat aangeeft dat deze kleur lokaal is en de hoogste prioriteit heeft.

Hieronder is een overzicht van indicatoren en wat ze betekenen:

De responsieve bewerkingsmogelijkheden van de editor stellen je in staat om verschillende klassen in te stellen voor verschillende schermformaten. Als voorbeeld stellen we verschillende lettergroottes in voor desktops en mobiele apparaten.

1. Voeg een Alinea-element toe aan het canvas en voer wat tekst in.
2. Open het veld Typografie.
   
3. Voer in de teller Lettergrootte 14 in.
   
4. Klik op het mobiele pictogram.
   
5. Open het veld Typografie en stel de tekstgrootte in op 24.
   
6. Klik op de indicator bij Lettergrootte.
   
7. De popup toont welke lettergrootte wordt gebruikt voor mobiel en welke voor desktops. Omdat we in mobiele modus zijn, is de desktop-eigenschap doorgestreept.