Искате ли да направите иконите на социалните си медии лепкави с Divi?
С вградените „залепващи“ опции на Divi можете лесно да проектирате залепващ модул „Следене в социалните медии“, който ще държи тези икони на социални медии отпред и в центъра, докато потребителят превърта надолу по страницата.
Освен това, чрез добавяне на персонализиран стил към модула в залепващо състояние, можем да създадем уникални дизайнерски преходи при превключване към залепващо състояние, докато превъртате.
Така че, ако търсите пълен контрол върху дизайна на вашите бутони за социални медии, този урок е за вас!
изследване
Ето кратък преглед на резултата, който ще получим в този урок.
Създайте нова страница с "Divi Builder"
От таблото за управление на WordPress отидете на „Страници > Добавяне на нова“
Дайте му заглавие, което има смисъл за вас, след което щракнете „Използване на DiviBuilder“
За този урок ще използваме предварително дефинирано оформление. За да направите това, щракнете върху „Преглед на оформления“
Намерете и изберете оформлението "Моден дизайнер"
Изберете оформление „Кацане“ след това щракнете върху „Използване на това оформление“
Дизайн на модула „Следване в социалните медии“ в Divi
Създаване на секцията
Добавете нов редовен раздел към оформлението.
След това преместете новата секция в горната част на страницата (или където искате да добавите вашите връзки за следване в социалните медии).
Отворете настройките на секцията и актуализирайте цвета на фона, за да съответства на оформлението, както следва:
- Цвят на фона: #fff9f2
Под раздела Дизайн, разгънете опцията Разстояние и променете следните параметри:
- Подложка (отгоре и отдолу): 10px
Създаване на линията
Вътре в секцията добавете ред към колона.
Отворете настройките на линията, дръпнете надолу опцията Разстояние и променете настройките, както следва:
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
Продължете, като превъртите надолу опцията Отстояние
- Подложка (отгоре и отдолу): 0px
Създаване на залепващия модул „Последване в социалните медии“.
След като секцията и линията са на мястото си, добавете нов модул „Social MediaFollow“ на линията.
Актуализиране на настройките на модула
Отворете настройките на модула „Последване в социалните медии“.
Първото нещо, което трябва да направим, е да добавим залепваща позиция към модула.
Под раздела Подробно, дръпнете надолу опцията Ефекти на превъртане и актуализирайте следното:
- Залепваща позиция: Придържайте се към върха
След като позицията е в лепкаво състояние, ще можете да насочите стила на модула в лепкаво състояние (подобно на това, което можете за състоянието на задържане). Това може да стане, като задържите курсора на мишката върху опция и щракнете върху иконата на карфица.
Под раздела Дизайн, актуализирайте следното:
- Модул за подравняване: Център
- Цвят на иконата: #000000 (Desktop), #ffffff (Hover), #ffffff (Sticky)
- Ширина: 100%
- Максимална ширина: 100%
- Подложка: 20px (отгоре), 12px (отдолу), 10px (отляво и отдясно)
Настройки на социалните медии
След като настройките на модула са готови, вече можем да насочим вниманието си към стилизирането на отделните икони на социалните медии.
За да направим това, първо ще персонализираме икона на социална мрежа. След това ще дублираме социалната мрежа, за да създадем останалите.
Вече трябва да имате две социални мрежи под раздела съдържание по подразбиране. Изтрийте едно и щракнете, за да редактирате оставащото.
След като влезете в настройките на социалната мрежа, изберете социална мрежа и актуализирайте цветовете на фона за работния плот, задържане и залепени състояния.
- Социална мрежа : TikTok (или каквото искате)
- Фон: прозрачен (Desktop), #fe2c55 (Hover), #000000 (Sticky)
ТРИК: Цветът на фона автоматично ще се промени, за да съответства на марката на социалната медия. Можете да копирате този цвят и да го добавите като цвят на фона на състоянието при задържане на мишката за иконата. Това ще покаже цвета на фона на социалната мрежа по подразбиране, когато задържите курсора на мишката над иконата.
Вече можете да превключвате между раздели, за да видите цвета на фона и за трите състояния (работен плот, задържане и залепване).
След това нека придадем на иконата хубава овална форма и рамка, за да съответства по-добре на оформлението. Под раздела Дизайн, актуализирайте следното:
- Заоблени ъгли: 50%
- Ширина на рамката: 1px
- Цвят на рамката: #000000 (Desktop), Transparent (Hover)
В момента иконата има формата на кръг. За да получим по-овална форма, ще променим настройките за разстояние, както следва:
- Поле (ляво и дясно): 15px (Desktop), 0px (Sticky), 0px (Phone)
- Подложка (ляво и дясно): 16px (десктоп), 14px (таблет), 0px (телефон)
Дублирана социална мрежа
Сега, след като приключихме с проектирането на първата социална мрежа, можем да дублираме иконата, за да създадем други.
За да направите това, отворете настройките на модула Media SocialFollow и щракнете върху иконата за дублиране. За този пример нека създадем още 4.
Сега всичко, което трябва да направим, е да актуализираме всяка от новите социални мрежи. Тъй като това ще промени цвета на фона, вие също ще трябва да актуализирате цвета на фона за всеки.
За да направите това, отворете настройките на втората социална мрежа и актуализирайте следното:
- Социална мрежа: Facebook
- Фон: прозрачен (Desktop), #3b5998 (Hover)
Продължете същия процес, за да актуализирате останалите социални мрежи.
Краен резултат
Сега нека видим резултата, получен на различни размери на екрана.
Изтеглете DIVI сега!!!
Изтеглете DIVI сега!!!
Заключение
Бутоните за социални медии почти винаги са ключова функция на a уеб сайт. Те са един от основните начини за свързване на социални медийни канали с a уеб сайт. Ето защо модулът „Следване в социалните медии“ на Divi съдържа всички мрежови икони и опции за дизайн, от които се нуждаете, за да създадете идеалното решение за вашия сайт.
Надяваме се, че този урок ще ви бъде полезен в следващите ви Divi проекти. Ако искате да научите повече за Divi, не се колебайте да посетите нашия каталог на Divi уроци. Можете също да се консултирате Как да създадете страницата на блога с модула Divi Blog
Ако имате някакви въпроси или предложения, не се колебайте да оставите коментар в раздела за коментари по-долу.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...