YOOtheme Pro yra modernus puslapių kūrimo įrankis, suderinamas tiek su Joomla, tiek su WordPress, leidžiantis greitai kurti ir redaguoti puslapius naudojant drag-and-drop funkcionalumą ir iš anksto paruoštus elementus. Builder (kūrimo aplinka) susideda iš sekcijų (sections), eilučių (rows) ir elementų (elements). Sekcija gali turėti kelias eilutes, eilutė gali būti padalyta į vieną ar daugiau stulpelių, o kiekvienas stulpelis užpildomas elementais: Headline, tekstu, image, button ir pan.
Prieš pradėdami darbą su socialinių tinklų ikonėlėmis, pasirūpinkite, kad jūsų YOOtheme Pro būtų suinstaliuotas ir prieinamos ikonų kolekcijos. Icons Collection praplečia YOOtheme Pro su integruotomis ikonų kolekcijomis, paruoštomis naudoti Icon Picker lange. Tai leidžia pasirinkti ikonas iš įvairių šaltinių: Font Awesome, Bootstrap, Ionicons, Zondicons ir kitų.
1. Kur statyti socialinių tinklų ikonėles
Ikonėles galite pridėti bet kurioje sekcijoje, eilutėje ar stulpelyje. Dažniausios vietos: svetainės header, footer arba atskiros kontaktų skilties elementas. Builder leidžia pridėti eilutes, padalinti jas į stulpelius ir į tuos stulpelius įdėti elementus - todėl jūs galite lengvai pritaikyti poziciją pagal savo dizaino poreikius.
2. Ikonų šaltiniai ir paruošimas
Icons Collection yra ikonos biblioteka su pritaikomomis ir trečiųjų šalių kolekcijomis. Pasirinkite norimą ikonų kolekciją per Builder Icon Picker, kad socialinių tinklų ikonėlės būtų vienodos stiliaus ir tinkamai atvaizduotos. Jei reikia specifinių ikonų, jas galite pridėti per papildomas kolekcijas arba naudoti išoriniams šaltiniams pritaikytas ikonų rinkinius.
Naudingos pastabos
- Jeigu dizainui svarbus dydis ir tarpai - valdykite ikonų dydį ir tarpus tiesiai elementų nustatymuose.
- Atminkite, jog yra galimybė naudoti nuorodas: kiekviena ikonėlė gali būti susieta su socialinio profilio URL.
- Galima naudoti hover efektus ar animacijas per Animator elementą, kad ikonėlės atrodytų gyviau.
3. Kaip techniniu požiūriu pridėti ikonėles (žingsnis po žingsnio)
- Atidarykite YOOtheme Pro Builder ir pasirinkite puslapį, kuriame norite pridėti ikonėles. Po to pasirinkite sekciją arba pridėkite naują sekciją.
- Pridėkite eilutę ir suskirstykite ją į norimą skaičių stulpelių (pvz., 4 stulpelius keturioms ikonėlėms).
- Į stulpelį įdėkite Icon elementą arba Button elementą su ikona - priklausomai nuo to, ar norite klikabilios nuorodos su mygtuko stiliumi.
- Atidarykite Icon Picker ir pasirinkite ikoną iš Icons Collection arba kitos prieinamos ikonų bibliotekos.
- Pridėkite nuorodą prie ikonėlės - įveskite socialinio tinklo profilį ar dalijimosi nuorodą.
- Reguliuokite dydį, spalvą, tarpus ir hover efektus elementų nustatymuose.
- Saugokite pakeitimus - paspauskite „Save Layout“; nepamirškite išsaugoti, kad pakeitimai būtų pritaikyti puslapyje.
Patarimai
- Jeigu dirbate mažame ekrane, naudokite ekranų peržiūros ikonėles apačioje builder lange ir stebėkite, kaip ikonėlės atrodys planšetėje bei telefone.
- Naudokite stulpelius ir elementus atsakingai - nėra maksimaliojo eilučių ar elementų skaičiaus, tad suskirstykite išdėstymą taip, kad būtų patogu administruoti.
4. Papildomi funkcionalumai ir įskiepių pritaikymas
YOOtheme Pro ekosistemoje yra daugybė priedų, kurie gali pagerinti socialinių tinklų ikonėlių panaudojimą ir interaktyvumą. Pvz., Animator Element leidžia kurti animuotus header'us ir kūrybines banerių animacijas - galite panaudoti tai, kad ikonėlės turėtų subtilius judesius arba pasirodytų kai puslapyje paspaudžiamas mygtukas.
Taip pat skaitykite: Visa informacija apie Kaišiadorių socialinę paramą
Jei norite rodyti papildomas sąveikas (pvz., paspaudus ikonėlę atverti popup), naudokite pop-up/Modal elementus: „Use it to build any popup or modal. You can put anything in the popup and manage it with the help of a page builder.“ Tokiu būdu galite aukštos kokybės modalus kurti be papildomos programavimo įrangos.
Pažangios sąlygos ir dinaminės reikšmės
Compose conditions nustatys, ar YOOtheme Pro elementas turėtų būti atvaizduojamas, palaikant Dynamic Values ir konfigūraciją, nustatomą taisyklėmis. Tai naudinga, jei norite, kad socialinių tinklų ikonėlės būtų rodomos tik tam tikroms vartotojų grupėms ar tik tam tikruose įrašuose.
5. Dizaino ir prieinamumo aspektai
DJ-Accessibility yra įrankių rinkinys, padedantis neįgaliesiems naviguoti svetainėje; galite rodyti prieinamumo parinktis kaip pop-up arba toolbar. Užtikrinkite, kad socialinių tinklų ikonėlės būtų pasiekiamos klaviatūros naudotojams ir turi aiškius alt/aria atributus, užtikrinančius prieinamumą.
Stiliaus rekomendacijos
- Laikykite ikonų spalvas suderintas su svetainės spalvų palete ir šriftais.
- Naudokite kontrastingą foną arba apvalkalą, kad ikonėlės būtų matomos visiems vartotojams.
- Testuokite ikonas skirtinguose įrenginiuose ir ekrano dydžiuose.
6. Istorijos ir papildomos galimybės
YOOtheme Pro leidžia greitai redaguoti tekstus tiesiai Builder kairėje ir matyti pakeitimus dešiniajame puslapio peržiūros lange. Jei pakeisite tekstą ar paveikslėlį, pasirodys „Save Layout“ mygtukas - nepamirškite įrašyti pakeitimų. Tai taikoma ir ikonėlių elementams: atlikę pakeitimus, išsaugokite, kad jie būtų pritaikyti gyvai.
7. Greiti sprendimai ir dažnai naudojami papildiniai
- Icons Collection - greitas aksesas prie daugybės ikonų.
- Animator Element - subtilioms ikonų animacijoms.
- Popup/Modal elementai - socialinių nuorodų dialogams ar dalijimo pasirinkimams.
- Compose conditions - rodyti ikonėles pagal sąlygas ir dinaminę logiką.
8. Papildoma lentelė: žingsniai santrauka
| Žingsnis | Veiksmas |
|---|---|
| 1 | Atidaryti YOOtheme Pro Builder ir pasirinkti puslapį |
| 2 | Pridėti sekciją → eilutę → stulpelius |
| 3 | Įdėti Icon/ Button elementą į stulpelį |
| 4 | Pasirinkti ikoną per Icon Picker (Icons Collection) |
| 5 | Pridėti URL ir nustatyti stilių, animaciją |
| 6 | Išsaugoti layout (Save Layout) ir patikrinti responsyvumą |
Naudodami YOOtheme Pro ir papildomas ikonų kolekcijas, galite greitai ir patogiai pridėti socialinių tinklų ikonėles, valdyti jų išvaizdą, elgseną ir prieinamumą. Jei norite daugiau interaktyvumo - integruokite Animator elementą ar popup'us, o sudėtingesnė logika gali būti valdoma per Compose conditions.
Taip pat skaitykite: Socialinė parama
Taip pat skaitykite: Birštono savivaldybės iniciatyvos
tags: #youtheme #socialines #ikonos