Divi Code AI - Uw persoonlijke codeerassistent in Divi

Goed nieuws voor webontwerpers en ontwikkelaars: er is een baanbrekende toevoeging aan de Divi AI-toolset gearriveerd. In oktober 2023 kondigde Divi een nieuwe toevoeging aan hun AI-toolkit aan: Divi Code AI, een tool die webontwikkeling binnen het Divi-ecosysteem vereenvoudigt. Divi Code AI beschikt over het unieke vermogen om code te schrijven, CSS te genereren en waardevolle hulp te bieden bij het aanpassen van Divi-websites via de Visual Builder. Gebruikers kunnen nu profiteren van de expertise van een doorgewinterde front-end webontwikkelaar, die goed thuis is in de fijne kneepjes van elke Divi-module. Deze blog onderzoekt hoe Divi Code AI de Divi-webontwerpervaring transformeert en een grotere efficiëntie en een hoger niveau van plezier belooft.

Pas de website aan met AI-codering

Gebruikers kunnen gemakkelijk een nieuw AI-pictogram herkennen onder de codevelden van Divi. Door simpelweg op dit pictogram te klikken, kunnen individuen hun specifieke vereisten aan Divi AI doorgeven. Afhankelijk van het element dat wordt aangepast en de aard van het veld dat wordt bewerkt, stemt Divi AI zijn reacties onmiddellijk af op de uit te voeren taak.

Als een gebruiker bijvoorbeeld gradiënttekst in een kop wil opnemen, een ontwerpfunctie die niet standaard beschikbaar is in Divi, kan hij Divi AI eenvoudigweg vragen om de benodigde CSS te genereren. Binnen enkele ogenblikken wordt de kop versierd met een verbluffend verloopeffect.

Gebruikers kunnen een voortdurende dialoog aangaan met Divi AI om de uitkomst te verfijnen. In een videodemonstratie vond de gebruiker dat de initiële gradiënt enigszins ingetogen was en daarom vroegen ze Divi AI om deze te intensiveren. Het resultaat is nu het ideale verloop, waardoor de gewenste levendigheid wordt bereikt.

Aangepaste elementen maken

De Code-module onderscheidt zich als de stralende ster van Divi Code AI en biedt de mogelijkheid om met gemak met HTML, CSS en JavaScript om te gaan. Gebruikers kunnen Divi AI eenvoudigweg vragen om een ​​pop-up met een vertraging van 30 seconden te maken, waarin bezoekers worden uitgenodigd zich te abonneren op hun nieuwsbrief, met de vrijheid om het uiterlijk van de pop-up te beschrijven. Binnen enkele ogenblikken genereert Divi AI moeiteloos de code, wat resulteert in een opvallende en effectieve pop-up die de aandacht van websitebezoekers trekt.

Divi AI beschikt over een breed scala aan mogelijkheden als het gaat om codemodules. Het kan moeiteloos functies integreren zoals een type-effect voor de kop van je held of het transformeren van een Divi-sectie in een handige, verwijderbare zwevende zijbalk. Zodra gebruikers vertrouwd raken met de interactie met Divi AI, ontvouwt zich een wereld van opwindende mogelijkheden voor hen.

Gratis CSS-optie voor alle modules

Ze hebben een opmerkelijke verbetering geïmplementeerd in alle Divi-modules: een CSS-functie in vrije vorm waarmee gebruikers de focus van de module en alle onderliggende elementen kunnen opmaken met behulp van de "selector" pseudo-klasse. Wanneer u bijvoorbeeld een Blurb-module bewerkt, kunt u eenvoudig een vakschaduw toepassen en het uiterlijk van de IMG- en H3-elementen aanpassen door CSS-regels te maken zoals hieronder:

selector { <span class="webkit-css-property" aria-label="CSS property name: box-shadow">box-shadow</span><span class="styles-name-value-separator">: </span><span class="value" aria-label="CSS property value: 0 10px 20px 0 #000">0 10px 20px 0 #000</span><span class="styles-semicolon">; }</span>
 
selector img { border-radius: 100px; border: 5px solid #000; }
 
selector h3 { margin-top: 20px; }

Deze toevoeging blijkt van onschatbare waarde te zijn voor Divi AI, waardoor het de flexibiliteit krijgt die nodig is om aan uw verzoeken te voldoen en hele modules moeiteloos aan te passen.

Door AI gegenereerde CSS-aanpassing

Het gebruik van Divi Code AI in het nieuwe vrije-vorm CSS-veld blijkt een opmerkelijke ervaring te zijn. In de onderstaande videodemonstratie kunnen gebruikers zien hoe Divi AI moeiteloos een reeks aanpassingen uitvoert. De instructies zijn duidelijk: de afbeelding transformeren in een cirkelvorm, een subtiele doosschaduw toevoegen, de afbeelding overlappen met een semi-transparant verloop en een hover-triggered zoom-in-animatie toepassen.

Dankzij Divi AI's diepgaande kennis van Divi-modulestructuren en zijn CSS-vaardigheid worden deze complexe taken doorgaans met succes aangepakt bij de eerste poging, of worden ze opmerkelijk dicht bij het gewenste resultaat gebracht.

Divi Codebase

Wat Divi Code AI onderscheidt, is de afstemming op de codebasis van de Divi-module, wat een duidelijk voordeel biedt vergeleken met andere grote taalmodellen. Dankzij de bekendheid met Divi-moduleklassen en HTML-uitvoer blinkt het uit in het begrijpen van dubbelzinnige verzoeken en het herkennen van Divi-specifieke termen binnen gebruikersprompts.

In de onderstaande video geeft een gebruiker bijvoorbeeld Divi Code AI de opdracht om CSS te maken voor het aanpassen van het uiterlijk van Blurb- en Button-modules. Het is indrukwekkend dat Divi Code AI instinctief de aard van Blurb- en Button-elementen onderscheidt en nauwkeurig de relevante klassen aanwijst. Deze precisie maakt het mogelijk om vanaf de allereerste poging nauwkeurige aanpassingen te leveren.

Handige codering

Divi Code AI biedt gebruiksvriendelijke snelle acties voor het verfijnen van uw code. Met slechts één klik kan het automatisch de compatibiliteit met oudere browsers optimaliseren, formatteren en verbeteren. Bovendien hebt u de flexibiliteit om code aan te passen met behulp van aanwijzingen, waardoor eindeloze creatieve mogelijkheden ontstaan.

Cloudgebaseerde bibliotheek met codefragmenten

Hoewel Divi AI misschien niet vlekkeloos is, kunnen gebruikers hun gesprek voortzetten en samenwerken met de AI om het gewenste resultaat te verfijnen. Gebruikers kunnen ook een 'opnieuw proberen' aanvragen. Bij elke poging genereert Divi AI enigszins gevarieerde resultaten, waarbij vaak na enkele pogingen de gewenste oplossing wordt ontdekt.

Zelfs voor mensen met een fundamenteel begrip van webontwikkeling kan Divi AI het aanpassen van websites versnellen en specifieke resultaten bereiken die voorheen alleen bereikt konden worden door de inschakeling van een expert.

Afsluiten

Divi Code AI is meer dan alleen een technologische vooruitgang; het is een game-changer in de wereld van webdesign. Het biedt gebruikers de mogelijkheid om rechtstreeks vanuit Divi Visual Builder de mogelijkheden van een ervaren front-end webontwikkelaar te benutten.

Of u nu een ervaren webontwerper bent of een beginneling op dit gebied, Divi Code AI opent de deur naar verbeterde efficiëntie en maatwerk. Duik erin en ervaar de toekomst van webdesign met Divi Code AI.