közösségi

Szia! A nevem Ricardo Prieto, és a SiloCreativo weblaptervezésével, elrendezésével és felhasználói élményével foglalkozom (és írok), ahol oktatóanyagok, tippek és forrásokkal segítjük az embereket projektjeik kidolgozásában.

20% kedvezmény
A WordPress-témák, például a Divi 1 dollárért

Néhány hónappal ezelőtt átalakítottuk weboldalunkat, és az egyik kérdés, amely mindig fejjel lefelé fordított minket, a közösségi média gombjai voltak a tartalom megosztására. A vita mindig két kérdés körül zajlott, egyrészt a a partner bár helyel (függőleges vagy vízszintes, úszó vagy statikus) és másrészt a társadalmi hálózatok, amelyeket felvennénk azon a közösségi sávon belül (twitter, facebook, pinterest ...).

A közösségi ikonok helyét illetően egyértelműek voltunk, hogy a lehető legkevésbé kell észrevenni, mivel az a fontos, hogy a felhasználó elolvassa a tartalmat, és ha tetszik neki, és hasznosnak tartja, akkor megoszthatja. Ezért láttuk érdekesnek a hálózati gombok helyét a cikk végén, így ha a felhasználó elolvasta, megoszthatja. Ne feledje, először a felhasználói élményt.

De számunkra is jó lehetőségnek tűnt lehetőséget adni arra, hogy a gombokat bármikor megossza. Ehhez megvolt tervezzen egy lebegő közösségi billentyűzetet A képernyő függőleges részében rögzítve jelenik meg, amikor az asztalon vagyunk, és vízszintesen az alsó részben mobiltelefonokon és táblagépeken. Több tervet és tesztet készítettünk HTML és CSS segítségével, és itt megosztjuk az egyik opciót, amely a legjobban tetszett.

Javítva a közösségi média sáv HTML-vel és CSS3-mal

Ehhez a mobilokra és táblagépekre orientált kialakításhoz egy vízszintes sávot választottunk maradjon rögzítve a képernyő belsejében, 100% szélességet elfoglal. A kiválasztott közösségi hálózatok a Facebook, a Twitter, a Pinterest és a WhatsApp, amelyek közül négy a legjobb eredményt nyújtja a tartalmunkkal kapcsolatban. Két további blokkot is felvettünk, egyet, amely a hírlevél feliratkozási űrlapjára vezet, és egy másik, hogy továbbléphessünk a következő cikkre.

A HTML egy féltárolóból áll egy ul listával, ahol a közösségi ikonok mindegyike a lista eleme lesz.

A .social-sharing osztályú félretett tároló maga a közösségi sáv lesz, és rögzítve lesz (bár a példában abszolútnak látja, mivel csak így lehet elhelyezni az erre a célra létrehozott példaablakban ).

A közösségi ikonok rendezéséhez a flexboxot választottuk, a négy közösségi hálózat ikonjainak rögzített szélességet adva (40 képpont), és elosztva a fennmaradó helyet a hírlevélblokk és a következő cikkre mutató hivatkozás között.

A társadalmi ikonok tekintetében követtük az itt kifejtett lépéseket és elveket. Pozitív pont ugyanaz az ikon-betűtípus (ebben az esetben a FontAwesome) használata, amelyet már használ a webhelyén a hamburger menü ikonjainál, vagy a twitter, a facebook és más hálózatok ikonjainak keresése, mivel nem adunk hozzá képeket és nem számítunk fel külön díjat. weboldalunkra. A CSS álelemek használata lehetővé teszi számunkra, hogy ezeket a közösségi ikonokat képek nélkül állítsuk elő, és hogy helyesen láthassuk őket a retina képernyőkön.

Ezt a CSS-t globálisan alkalmazzák az egész internetre, de ha korlátozni szeretné, hogy csak a mobiltelefonokon és a táblagépeken jelenjen meg, akkor médiafigyelmet kell használnia, és tartalmaznia kell benne az összes CSS-szabályt.

Lebegő közösségi sáv beépülő modulok és egyéb lehetőségek

Különösnek találhatja, hogy a WordPress programban készített projekt esetében úgy dönt, hogy a közösségi sávot HTML és CSS segítségével tervezi, és nem használja a sok beépülő modul egyikét a gombpanel létrehozásához. Az igazság az, hogy a SiloCreativo 2.0 verziójában a Jetpack plugint használjuk annak megosztó moduljával, de úgy döntöttünk, hogy abbahagyjuk a használatát.

Az ok nagyon egyszerű. A legtöbb beépülő modul saját ikonkönyvtárakat, új stílusokat és néhány más JS fájlt használ. Ennek célja a web terhelésének növelése, hogy végre módosítsuk a stílusokat, hogy azok a tervünkhöz igazodjanak. Az egyetlen dolog, amit elvesztettünk, az volt, hogy meg tudtuk számolni, hányszor osztották meg a hálózatokon, de őszintén szólva nem tűnik elegendő súlyú oknak 3 vagy 4 extra fájl feltöltésére a megfelelő hívások mellett. számolja meg a részvények számát.

Tehát valami könnyebbet (csak HTML és CSS) és testreszabhatót választottunk, ahová a következő cikkre való navigálás mellett hozzáadhatja, amint látta a hírlevél feliratkozását. Mit gondol erről a döntésről? Hogyan valósítja meg a közösségi ikonokat a webhelyén?