Er is een nieuwe grote update van Elementor uitgebracht. We zijn overgestapt van versie 2.x naar versie 3.0 . Deze nieuwe versie wordt geleverd met een nieuwe manier om websites te maken met WordPress en Elementor. We zullen proberen deze nieuwe functies om te zetten.
Wat zijn de belangrijkste toevoegingen aan Elementor 3.0?
Elementor 3.0 wordt geleverd met 3 hoofdtoevoegingen, namelijk: Design System Features, New Theme Builder en aanzienlijke prestatieverbeteringen.
Kenmerken van het ontwerpsysteem
Heb je je ooit afgevraagd hoe grote bedrijven het doen om zo goed te presteren, ongeacht het platform waarop ze werken? Alles wat ze maken, ziet er consistent uit en heeft hetzelfde ontwerp. Dat is mogelijk dankzij het zogenaamde " Design System ". Volgens UnxDesign.cc is het ontwerpsysteem:
De enige bron van waarheid die alle elementen groepeert waarmee de teams een product kunnen ontwerpen, realiseren en ontwikkelen. Een ' Design System' is dus geen deliverable, maar een set van deliverables. Het zal constant evolueren met het product, de tools en de nieuwe technologieën.
UX Collective
Door een ontwerpsysteem te implementeren, houdt u uw hele team consistent rond één ontwerptaal en zorgt u ook voor een revolutie in de manier waarop uw team werkt en zorgt u voor een snellere workflow.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuDe ontwerpsysteemfuncties van Elementor 3.0 omvatten:
- Wereldwijde kleuren
- Nieuw paneel met site-instellingen
- Algemene lettertypen
Laten we eens kijken hoe dit u zal helpen om betere professionele websites te bouwen.
Wereldwijde kleuren
Elementor 3.0 voegt een nieuwe manier toe om met sitekleuren te werken. Die nieuwe methode heet Global Colors.
Met de Global Colors kunt u de kleur vanaf één locatie wijzigen en die kleur overal waar deze wordt gebruikt, laten bijwerken.
U begint met het kiezen van de basis Global Colors voor uw website. Ga vervolgens naar een kleurstijl in Elementor en definieer deze als een van de vier kleuren. Houd er rekening mee dat u zoveel aangepaste kleuren kunt toevoegen aan de algemene lijst .
Nu komen de CSS-variabelen binnen. Ga terug naar Global Colors en verander een van de kleuren. Het kleurenschema van uw hele site verandert volgens de nieuwe Global Color. Heb je ooit zoiets gemakkelijkers meegemaakt?
U kunt ook een andere globale kleur ontwerpen vanuit de controle-invoer of een nieuwe globale kleur maken, allemaal met dezelfde kleurkiezer in de controle-invoer.
Site-instellingen
Het maken van de eerste ontwerpinstellingen voor een website kost veel tijd. Je zult moeten jongleren tussen de themacode, Customizer, functions.php. Dat zijn genoeg redenen om uw hoofdpijn te rechtvaardigen.
De nieuwe site-instellingen toont verschillende configuratietools. Op die manier blijf je al deze taken vanaf één plek doen.
Om aan de slag te gaan, klikt u op elke pagina die u met Elementor bewerkt, in het linkerzijpaneel op het pictogram linksboven. Dat zorgt ervoor dat u overschakelt naar het paneel Globale instellingen.
Binnen dat paneel Globale instellingen vindt u:
- Lay-out: Om de standaard lay-outinstellingen van Elementor te configureren, zoals standaard inhoudsbreedte of standaard paginalay-out.
- Site-identiteit: Pas uw cross-site identiteiten aan, zoals het logo, de titel, de slogan en zelfs het favicon.
- Themastijl: Pas HTML-elementen aan die niet gerelateerd zijn aan Elementor (meestal ingesteld door het thema) voor typografie, knoppen en formuliervelden.
- Lightbox:Â Definieer de standaardstijl van Elementor Lightboxes
- Algemene kleuren en lettertypen: hiermee kunt u de algemene kleuren en lettertypen configureren die van toepassing zijn op uw website.
Algemene lettertypen
De kleuren en typografie maken deel uit van de bouwcomponenten van elke website. Met dezelfde logica als de functie Global Colors, is dit een nieuwe methode om met de tekststijlen van uw site te werken.
Met de Global Fonts kunnen alle typografische instellingen globaal worden toegepast. U kunt nu al uw sitetypografie-instellingen globaal instellen, inclusief lettertypefamilie, lettergrootte en -schaal, lettergewicht, lettertypetransformatie, lettertypestijl, lettertypedecoratie, regelhoogte, letterafstand en zelfs responsieve instellingen. U kunt deze instellingen ook instellen voor elke widget die tekst bevat en uw eigen algemene lettertypen aanpassen.
Met een typografie die correct is ontworpen, kunt u deze wijzigingen globaal toepassen.
Hele site gevisualiseerd en georganiseerd op één plek
Hoewel de bekende Theme Builder  de marktleider is geworden op het gebied van een volledig overzicht van het website-ontwerp, gaat deze nieuwe gebruikersinterface nog verder. De nieuwe Theme Builder geeft je nu op een heel intuïtieve manier een overzicht van een hele website.
Die Theme Builder geeft een overzicht van de site, dit omvat alle onderdelen van de site: koptekst, voettekst, globale paginasjabloon, globale postsjabloon en meer. Elk onderdeel van de site kan worden bekeken, waardoor het ontwerpen van een complete website een stuk eenvoudiger wordt.
Prestatieverbeteringen
Terwijl een applicatie groeit, is het duidelijk dat de ontwikkelaar om de prestaties moet geven. De updates op Elementor 3.0 zijn gemaakt om een mooie code-infrastructuur te garanderen, wat heeft geleid tot opmerkelijke prestatieverbeteringen.
Er is veel DOM-element verwijderd, waardoor Elementor sneller rendert. Dit zou zeker de ranking van uw paginasnelheid en de algehele ervaring voor gebruikers op uw website moeten verbeteren.
Concreet, wat is er veranderd in termen van paginasnelheid?
Elementor 3.0 biedt aanzienlijke verbeteringen voor de weergaveprocessen aan de serverzijde en voor de manier waarop Elementor dynamische CSS-waarden weergeeft. Hierdoor kunt u dynamische elementen en waarden in uw hele website opnemen. U kunt bijvoorbeeld een sjabloon voor siteberichten maken en besluiten dat u de uitgelichte afbeelding van elk bericht als achtergrond achter de berichttitel wilt weergeven.
Op de achtergrond, wanneer Elementor een bericht voorbereidt om naar de browser te worden verzonden, ontleedt het het bericht op dynamische waarden, haalt het deze op en als het CSS-waarden bevat, drukt het die CSS af.
Met Elementor 3.0 is de tijd die aan dit proces wordt besteed aanzienlijk teruggebracht. Dankzij dynamische waarden die voor elk van uw berichten worden opgeslagen. Zodra die lijst is opgeslagen, gaat Elementor, telkens wanneer iemand de post bezoekt, rechtstreeks naar deze lijst, waardoor het proces sneller gaat. Dynamische waarden die door deze optimalisatie worden beïnvloed, zijn onder meer achtergrondafbeeldingen, kleuren en nog veel meer. Deze verbetering zorgt voor een merkbare vermindering van de serverbelasting.
Samenvatting over Elementor 3.0-update
Zoals we hierboven vermeldden, wordt deze versie geleverd met interessante goodies die echt van invloed moeten zijn op uw dagelijkse werk. We hebben meegemaakt :
De "Design System Features" die u helpen om consistenter en efficiënter te werken.
De nieuwe Theme Builder is een krachtige visuele tool om elk onderdeel van je website vanaf één plek te beheren.
Prestatieverbeteringen  voor een betere gebruikerservaring.
Elementor 3.0 zal je als professionele webmaker zeker tot het uiterste brengen. Als je dat nog niet hebt gedaan, upgrade dan nu naar Elementor Pro . Overweeg ook om ons bericht te lezen waarin wordt uitgelegd waarom Elementor zeker de beste gratis Page Builder op WordPress is .
