Avada-webwerfopskrif: ‘n Stap-vir-stap-gids

Inleiding

Die belangrikheid van ‘n webwerf-opskrif kan nie genoeg beklemtoon word nie – dit dien as die primêre navigasie-instrument vir gebruikers en beïnvloed die algehele ontwerp en daaropvolgende gebruikerservaring aansienlik.

Laat my nou toe om jou bekend te stel aan die Avada-tema, beskou as een van, indien nie die gewildste WordPress-temas wat beskikbaar is nie. Bekend vir sy veelsydigheid, Avada bied ‘n reeks funksies wat WordPress-webwerfontwerpers en -ontwikkelaars bemagtig om uitsonderlike oplossings te skep.

Verstaan ​​​​Avada se bouer

Kom ons neem ‘n tree terug en verduidelik waaroor die Avada-bouer gaan.

In wese werk die Avada Builder baie soos ander bladsybouers wat in die mark beskikbaar is, alhoewel met sy unieke flair. Hierdie “bouer” bied gebruikers ‘n intuïtiewe koppelvlak om verskeie elemente en komponente van hul webwerfbladsye en -afdelings te bou. Onder hierdie elemente is die kopskrif, ‘n deurslaggewende aspek wat behuisingskomponente soos die webwerflogo, primêre spyskaart, en dikwels ‘n oproep-tot-aksie of primêre knoppie. Afhangende van die webwerf se aard, kan bykomende elemente soos taal- of geldeenheidwisselaars ook hul plek in die kopskrif vind.

Met Avada het gebruikers die buigsaamheid om óf ‘n voorafgeboude kop uit die uitgebreide biblioteek te kies óf om een ​​van nuuts af te ontwerp en te bou. Selfs as hulle ‘n voorafgeboude opsie kies, behou gebruikers volle toegang om dit volgens hul visie en vereistes aan te pas.

Beplan jou kopontwerp

As u u webwerfkopontwerp ontwerp, moet u prioritiseer om slegs die mees noodsaaklike elemente in te sluit. Weerstaan ​​die drang om dieselfde neigings as ander webwerf-eienaars blindelings te volg. Onthou, daar is geen een-grootte-pas-almal benadering nie. Byvoorbeeld, as jou werf klein of enkelbladsy is, is ‘n prominente “kontak ons”-knoppie dalk nie nodig op die primêre spyskaart nie; dit kan eerder strategies geplaas word om die bladsy na die betrokke afdeling te blaai. Die sleutel is om rommel in die kop-afdeling te vermy, aangesien ‘n deurmekaar en verwarrende uitleg gebruikersnavigasie sal belemmer.

Kom ons delf nou in waarom noukeurige beplanning noodsaaklik is vir jou kopskrifontwerp:

1. Beperkte spasie: Die webwerfopskrif is die eerste ding wat gebruikers teëkom wanneer hulle op u webwerf beland, en dit is uiters belangrik om hierdie beperkte spasie doeltreffend te gebruik. Terwyl besluite soos om die kopskrif taai te maak of animasies in te sluit na latere stadiums uitgestel kan word, moet aanvanklike beplanning fokus op die optimalisering van ruimtegebruik.
2. Logo-plasing: Tradisioneel word logo’s aan die linkerkant of in die middel van die kopskrif geplaas. Dit is ongewoon dat logo’s aan die regterkant geplaas word. In ons tradisionele benadering sal ons die logo aan die linkerkant posisioneer—elegante grootte om handelsmerk voor te stel sonder om die kyker te oorweldig.
3. Kieslysstruktuur: Die spyskaart, sentraal geposisioneer, dien as ‘n navigasiespilpunt. Ons sal ‘n knoppie afsonderlik insluit wat tipies geplaas word as die laaste kieslys-item in ‘n horisontale oriëntasie, wat aan die regterkant verskyn.
4. Opvulling en hoogte: Om visuele aantrekkingskrag en bruikbaarheid te verseker, sal ons opvulling rondom die spyskaartitems inkorporeer. ‘n Beskeie hoogte vir die kopskrif, met ongeveer 10px vulling bo en onder die elemente, tesame met 30px spasiëring tussen items, skep ‘n balans tussen elegansie en funksionaliteit.

Stap 1: Toegang tot die Header Builder

Om saam te volg, sal jy ‘n WordPress-toetsomgewing moet hê met die Avada-tema geïnstalleer. Gebruik ideaal die kindertema wat by jou Avada-tema-aankoop ingesluit is.

Om jou webwerf-opskrif te begin maak deur die Avada-tema te gebruik, sal jy eers toegang tot die Header Builder moet kry. Volg hierdie eenvoudige stappe om te begin:

1. Teken in op jou WordPress Dashboard: Voer jou webwerf se URL in, gevolg deur “/wp-admin” in jou blaaier se adresbalk. Meld aan met jou WordPress-geloofsbriewe.
2. Navigeer na Avada-uitlegte: Sodra jy aangemeld is, soek die Avada-uitleg-oortjie op die linkerkantse kieslys. Klik daarop om die opsies uit te brei.
3. Toegang tot die Header Builder: Binne die Avada-uitleg vind u ‘n element genaamd ‘Globale uitleg’. Soek die pen-ikoon wanneer jy op die koptitel beweeg en klik daarop. Dit sal jou na die Header Builder-koppelvlak neem.
4. Verken die Header Builder Interface: Jy is nou in die Kopbouer, waar jy jou webwerf se kopskrif na jou smaak sal kan bou en aanpas. Neem tyd om jouself te vergewis van die verskillende gereedskap en opsies wat beskikbaar is.

Stap 2: Kies ‘n voorafgeboude kopuitleg:

Let wel: jy sal “Avada Studio” moet aangeskakel hê onder die Avada-tema Opsies > Kenmerke om die opsie te hê om voorafgeboude uitleg in te voer.

As jy die stappe hierbo gevolg het, en jy moes Avada Studio aanskakel, dan kan jy eenvoudig die bladsy van die “Hoofkop”-bouer verfris om die geaktiveerde opsies te sien.

Sodra jy toegang tot die Kopbouer verkry het, is die keuse van ‘n voorafgeboude kopskrifuitleg ‘n eenvoudige proses.

Klik op die “Biblioteek”-oortjie regs van “Bouer” (dit is die swart balk in die Avada-bouer), sodra die dialoog oop is, skakel dan na die “Studio”-oortjie. Blaai deur die beskikbare webwerfopskrifontwerpe en klik op die plus-ikoon om die kopskrif in te voer. Hiervoor het ek “Overlay Header 3187” gekies.

Stap 3: Pasmaak van die kopskrif:

Noudat jy ‘n voorafgeboude kopskrifuitleg gekies het, is dit tyd om dit aan te pas om by jou webwerf se handelsmerk- en funksionele vereistes te pas. Volg hierdie stappe om jou kopskrifontwerp aan te pas:

1. Wysig die beeldelement. Klik op die Pen-ikoon om jou beeldelement te wysig.
   Kies die dinamiese inhoudikoon om die veld te verander, gebruik die aftreklys om Webwerf > Logo te kies, kies dan vir Logo Tipe “Verstek (Normaal)” en voeg dan in die CSS Klas “logo”. Klik Stoor. Om die logo te vertoon, sal ons nou die logo-wydte moet definieer. Skakel oor na die Custom CSS-oortjie en voeg die css .logo { width: 160px; } dan Stoor veranderinge.

Bykomende (opsionele) stap
Skakel SVG-beeldondersteuning aan
Dupliseer jou huidige blaaieroortjie, gaan dan na Avada Global Options, soek svg, klik Aktiveer vir SVG-media-oplaai.

2. Steeds op die Avada-opsies, skakel oor na die “Logo”-oortjie aan die linkerkant, en laai ‘n versteklogo op.
   Let wel: omdat ons ‘n svg gebruik wat ‘n vektorlêer is, kan ons die logo-beeld skaal tot byna enige grootte. Daar is dus geen behoefte aan ‘n retina en mobiele beeld nie.
   Terwyl jy hier is, kan jy ook oorskakel na die “Favicon”-suboortjie en ‘n gunsteling-prent oplaai. Gebruik hierdie keer eerder ‘n .png- of .gif-beeldlêer, aangesien dit meer algemeen in die blaaieroortjies ondersteun word.
3. Nou terug na die Header Builder. Klik op die pen-ikoon op die “kieslys”-element om sy instellings te wysig.
   Kies jou Primêre Kieslys uit die Menu-aftreklys. Gaan voort deur spyskaartpyle en ander algemene instellings by te voeg.
   Skakel oor na die “Hoof”-oortjie en belyn items met vertikale middelpunt, met middelregverdiging.
   Rollees af en kies ‘n lettertipe, of laat dit leeg om jou globale style te gebruik. Voeg by Hoofkieslys-itemvulling en Hoofkieslys Itemspasiëring, in my geval sal dit 10px 0px 10px 0px en 30px wees. Kies die tekskleur en beweeg tekskleur en Stoor.
4. Wysig die knoppie-element.
   Kies die knoppie URL en Voeg knoppie teks in, dan Stoor. Pasmaak gerus die knoppie Ontwerp aan, maar vir die doel van hierdie stap sal ons die Avada Global verstekke gebruik.
   Daar is nog ‘n ikoonelement wat ons nie geredigeer het nie, dit is die mobiele spyskaart vir die ingevoerde kopskrif, meer daarvan in ‘n sekonde.
5. Wysig die ouerhouer en sien die minimumhoogte- en belyningsinstellings daaronder, sowel as die Ontwerp-oortjie vir meer instellings wat die opvulling en skakelkleur beheer.
   Dit is in hierdie stadium ‘n goeie idee om die afdeling te stoor en op te dateer, en dan ‘n voorskou van die webwerf te sien om die kopskrif te sien.

Let wel: Wanneer jy sjablone invoer, moet jy dikwels die opvulling en marge aanpas, so maak seker dat jy die verstek vir die Tuis-inhouduitleg na 120px ignoreer. Dit sal slegs vir die tuisblad wees, anders sal ons dit wêreldwyd onder die Avada-opsies verander.

Stap 4: Gebruik dinamiese waardes vanaf opsiebladsy met gevorderde aansigte-kortkode

Vir hierdie afdeling van die artikel gaan ons die volgende inproppe gebruik:

Advanced Custom Fields (ACF) – Een van die beste pasgemaakte veld-inproppe.
Advanced Views Lite – Slim sjablone om plasings en ACF-velde te vertoon.

Om dinamiese waardes vanaf ‘n opsiebladsy te implementeer, kan jy die Advanced Custom Fields (ACF)-inprop gebruik om ‘n opsiebladsy te skep. Alternatiewelik kan jy ‘n PHP-kodebrokkie in jou tema se functions.php-lêer gebruik vir soortgelyke funksionaliteit.

Hier is hoe om dit te doen:

1. Opstelopsiesbladsy met ACF:
   • Skep ‘n opsiebladsy deur ACF te gebruik en voeg dan ‘n veldgroep by. Byvoorbeeld, jy kan ‘n “Aankondiging” gewone teksveld binne hierdie veldgroep insluit.

2. Installeer Advanced Views Lite-inprop:
3. Skep ‘n nuwe aansig:
   • Skep ‘n nuwe aansig binne die Gevorderde Aansig-raamwerk. Kies die Veldgroep wat jou verlangde veld bevat en kies dan die Veld (in hierdie geval die “Aankondiging” veld).
4. Konfigureer en publiseer aansig:
   • Pasmaak die aansig-instellings soos nodig en publiseer die aansig. Kopieer die gegenereerde kortkode.

5. Integreer kortkode in kop-afdeling:
   • Navigeer na die kop-afdeling binne die uitleginstellings.
   • Voeg ‘n houer onder die opskrifinhoud by en sleep dit na bo. Hierdie houer sal die aankondigingsteksveld bevat.
6. Voeg ‘n tekselement in die kolom by. Kies die “Dynamiese” inhoudopsie en soek vir/kies die Kortkode-element.

7. Plak die gekopieerde Advanced Views-kortkode in die tekselement. Maak seker dat jy die object-id=”options”-parameter binne die kortkode insluit om die waarde van die opsiebladsy af te haal.

8. Dateer of stoor jou veranderinge en kyk na die resultate. Onthou om die “Aankondiging”-veld binne jou opsiebladsy in te vul sodat daar iets is om te vertoon.

Deur hierdie stappe te volg, kan jy dinamiese waardes van jou opsiebladsy naatloos in jou webwerf se kopskrif-afdeling integreer, wat ‘n gerieflike metode bied vir werfadministrateurs om noodsaaklike inligting op te dateer.

Stap 5: Optimaliseer vir mobiele toestelle:

Nou weet ons daar is hierdie ekstra element, wat in werklikheid ‘n ikoonelement is wat ‘n off-canvas-aksie sal veroorsaak. Ons wil dit nie in hierdie geval hê nie, en sal ‘n eenvoudige spyskaart verkies wat uitbrei wanneer die mobiele spyskaart getik word. Kom ons vee die ikoonelement uit en wysig die Menu-element.
Op die Algemeen-oortjie kies Elementsigbaarheid om Kleinskerm en Mediumskerm in te sluit. Doen dieselfde vir die kolom.

Skakel oor na die Mobile-oortjie en kies Vou in na mobiele breekpunt > Medium skerm. Stoor en werk nou die afdeling op. Skakel oor na die blaaieroortjie wat jy gebruik om voor te kyk en te verfris.

Stap 6: Toets en finale aanraking:

Toets is regtig ‘n kwessie van ‘n voorskou en aanpassing van die belyning en opvulling totdat dit perfek is. Gebruik die blaaier ingeboude nutsgoed of ‘n werklike toestel, en probeer verskeie toestelle om seker te maak dit sal goed lyk, met verloop van tyd sal jy weet watter kode en style nie op watter blaaiers werk nie.

‘n Goeie wenk om die uitleg perfek te kry, is om die Responsiewe-oortjies aan die bokant van die Avada-houer en -kolom se wysigingsdialoog te gebruik. Dit is redelik maklik, skakel net oor na die toestel, en kies dan ‘n breedte, dan Stoor, en doen dieselfde vir die Kolom wat die Menu-element bevat.

Dit is al wat daar is.

Gevolgtrekking: Ontsluit die krag van Avada-tema

In ons reis van die beplanning van die kopontwerp tot die naatlose implementering van dinamiese waardes, het ons die doeltreffendheid en gerief ervaar van die gebruik van die Avada Builder. Sonder om in kode- of temasjabloonlêers te delf, en ons kon steeds ‘n visueel aantreklike en funksionele kopskrif binne net minder as ‘n uur skep.

Die Avada-tema se robuuste basis bemagtig gebruikers om ‘n magdom opsies te verken om hul webwerf se ontwerp en funksionaliteit te verbeter. Met kenmerke soos die Gevorderde Aansigte-raamwerk, word die vertoon van gepasmaakte velde en plasings ‘n briesie. Deur te eksperimenteer in ‘n ontwikkeling-/vervoer-omgewing en veranderinge aan die lewendige webwerf met omsigtigheid en gereelde rugsteun te ontplooi, kan gebruikers die volle potensiaal van die Avada-tema ontsluit terwyl hulle die integriteit en sekuriteit van hul webwerf behou.

As ‘n woord van waarskuwing, is dit noodsaaklik om die gebruik van nietige plugins te vermy, aangesien dit aansienlike risiko’s vir webwerfsekuriteit en -funksionaliteit inhou. Kies altyd vir wettige en gelisensieerde inproppe om ‘n gladde en veilige webwerf-ervaring te verseker.

So, hoekom begin jy nie met jou eie verkenning van die Avada-tema se vermoëns nie? Met sy gebruikersvriendelike koppelvlak en kragtige instrumente, sal jy verbaas wees oor hoe vinnig jy jou webwerf in ‘n meesterstuk kan omskep.

Lekker verken!