Úszó közösségi sáv létrehozása HTML és CSS3 segítségével • Silo Creativo
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.