Wordpress'те Flipbox катмарларын кантип түзүү керек

WordPressте Flipbox Overlays жана Hovers кантип түзүү керек

WordPress сайтыңызга флипбокс катмарларын жана сүрөттүн чапкыч эффекттерин кошкуңуз келеби? Эгер сиз жогорку сапаттагы WordPress темасын колдонуп жатсаңыз да, ыңгайлаштыруу параметрлери менен чектелген сезилиши мүмкүн. Flipboxes жана Image Hovers сайтыңызга көз жоосун алган анимациялык эффекттерди кошот. Бул макалада биз сизге WordPress сайтыңызга түшүрүүчү кутучаларды жана сүрөттөрдү кантип кошууну көрсөтөбүз.

Flipbox деген эмне?

Жыйналма куту – чычкандын үстүнөн оодарылып турган куту. Сиз бул сыдырма анимация эффектин веб-сайтыңыздын белгилүү бир бөлүмдөрүнө, анын ичинде текст кутучаларына жана сүрөттөрүнө кошо аласыз.

Flipbox демо анимациясы
Бул термин чычкан сүрөттүн үстүнөн өткөндө пайда болгон уникалдуу "флип" функциясынан келип чыккан. Сиз сүрөт кандайча оодарылып жатканын, ошондой эле сүрөттүн эки тарабындагы маалыматты жана макетти көзөмөлдөй аласыз. Эгер веб-сайтыңыз салыштырмалуу статикалык болсо, аны интерактивдүү кылуу үчүн flipbox эффектин колдонсоңуз болот. Мисалы, сиз өнүм баа барагына калкып жүрүүчү сүрөт флипбоксун кошо аласыз. Мына ушундай жол менен, колдонуучулар курсуңуздун баанын деңгээлине келгенде, баа көрсөтүлөт. Же болбосо, эгер сиз штаттан тышкаркы жазуучу болсоңуз, сиз иштеген компаниянын логотиптерин кошуп, ар бир долбоорго шилтеме бере аласыз. Бул анимацияланган эффекттер веб-сайтыңыздын колдонуучу тажрыйбасын жакшыртса да, аны ашыкча кылбоо маанилүү. Тамакка татымал кошуу сыяктуу флипбокс эффекти жөнүндө ойлонуп көрүңүз. Ал бар даамдарды жана ингредиенттерди жакшыртуу үчүн бар, бирок өтө көп болсо, тамакты бузат. Ушуну менен бирге, келгиле, WordPress блогуңузга же веб-сайтыңызга флипбокстун катмарларын жана сүрөттүн өтүүчү эффекттерин кантип кошо аларыңызды карап көрөлү.

WordPress'те Flipbox Overlays жана Hover Effects кантип түзүүгө болот

Сиз WordPress сайтыңызга Flipboxes жана hover эффекттерин кошо аласыз, мисалы, Elementor баракча куруучусу же ыңгайлаштырылган CSS кошуу менен. Бирок, биз сунуш кылган ыкма Flipbox – Awesomes Flip Boxes Image Overlay плагинин колдонот. Бул плагин ийкемдүү жана колдонууга оңой. Бул эң мыкты WordPress сүрөтү жана флипбокс плагини. Плагиндин акысыз версиясы сизге ылдамдыкты жана жөнөкөйлүктү сунуш кылат. Плагин орнотулгандан кийин, сиз тез сайтка кооз флип кутучаларды кошо аласыз. Эгер сизге көбүрөөк ыңгайлаштыруу параметрлери керек болсо, плагиндин премиум версиясына жаңыртууну кааласаңыз болот. Бул сизге флипбоксуңуздун түстөрүн көзөмөлдөөгө жана ыңгайлаштырылган CSS кошууга мүмкүндүк берет. Учурдагы шаблондор сиздин сайтка кошулганда мурунтан эле сонун көрүнөрүн байкасаңыз болот, бул учурда эч кандай жаңыртуулардын кереги жок. Сизге керек болгон биринчи нерсе - бул Flipbox – Awesomes Flip Boxes Image Overlay плагинин орнотуу жана иштетүү. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Плагин орнотулуп, иштетилгенден кийин, төмөнкүгө өтүп, биринчи флипбоксуңузду түзө аласыз Flip Box »Жаңы түзүү.
Жаңы Flipbox түзүү
Бул моделдердин бүт тандоосун көрсөтөт. Эгер бул жетишсиз болсо, сиз колдоно ала турган дагы көп шаблондорду алуу үчүн "Импорттук шаблондор" менюсун чыкылдатсаңыз болот.
Flipbox үлгүсүн импорттоо
Плагиндин акысыз версиясы менен сиз 5 түрдүү шаблондун, ошондой эле импорттоого боло турган дагы 10 шаблондун ичинен тандай аласыз. Жаңы ыңгайлаштырылган шаблонду импорттоо үчүн, стилдин номеринин жанындагы "Импорт" баскычын чыкылдатыңыз.
Flipbox Импорт баскычын чыкылдатыңыз
Эми шаблонуңузду тандап, ыңгайлаштыра баштоого убакыт келди. Биринчи flipbox дизайныңызды жүктөө үчүн "Стиль түзүү" баскычын басыңыз. Бул контексттик менюну ачат, анда сиз флипбоксуңузду атай аласыз жана ыңгайлаштыруу үчүн макетти тандай аласыз.
Ыңгайлаштыруу үчүн Flipbox тандаңыз
1-, 2-, 3- "Макетинг" опциялары макеттеги жеке флипбоксторго туура келет. Тандоолорду жасагандан кийин "Сактоо" баскычын басыңыз. Сиздин акыркы дизайныңыз flipbox шаблонуна тыгыз дал келерин белгилеп кетүү маанилүү, андыктан веб-сайтыңызда сиз каалагандай көрүнгөн шаблонду тандап алганыңыз жакшы. Флипбоксуңуздун көрүнүшүн өзгөртүү үчүн колдоно турган үч негизги өтмөк бар: "Жалпы", "Мындан мурда" жана "Артка".
Flipbox Жалпы Орнотуулар Менюсу
Бул өтмөктөрдүн ар биринде ариптерди, толтурууну жана четтерин өзгөртө аласыз. Бирок биз демейки параметрлер мурунтан эле сонун көрүнөт деп ойлойбуз. Андан кийин, биз флипбокстун эки жагындагы текстти өзгөртөбүз. Экрандын ылдый жагындагы флипбокстун үстүнө курсорду алып барып, "Түзөтүү" баскычын басыңыз.
Flipbox Preview Текстти түзөтүү
Бул алдыңкы текстти, арткы текстти жана фон сүрөтүн оңдоого мүмкүндүк берген калкыма терезени ачат. Аталышын өзгөртүү үчүн, эгер сиз башка сөлөкөт пайда болушун кааласаңыз, "Титл Мурунку" текст кутучасын жана "Шрифт Белгиси:" кутучасын түзөтүңүз.
Flipbox алдыңкы панелинин аталышын жана сөлөкөтүн өзгөртүү
Фон сүрөтүн кошкуңуз келсе, "Алдыңкы сүрөт" опциясынын оң жагындагы "Сүрөттү жүктөө" баскычын басыңыз. Андан кийин жаңы сүрөт жүктөңүз же учурдагы медиа китепканаңыздан сүрөт тандаңыз.
Flipbox үчүн алдыңкы фон сүрөтүн жүктөп алыңыз
Андан кийин, сиз « Backend орнотуулары » бөлүмүндө флипбокстун арткы бөлүгү үчүн бирдей кадамдарды аткарасыз. Бул жерде сиз карта которулганда көрсөтүлүүчү аталышты жана текстти өзгөртө аласыз.
Flipbox Backend Текстти өзгөртүү
Сиз ошондой эле "Backend Button Text" жана "Шилтеме" талааларын түзөтө аласыз. Колдонуучу аны басканда, бул баскычтын текстин жана анын колдонуучуларынын көздөгөн жерин өзгөртөт.
Flipbox Backendден баскычты жана шилтемени кошуңуз
Акырында, флипбокстун артындагы фон сүрөтүн өзгөртүү үчүн "Азыр жүктөп алуу" баскычын чыкылдатыңыз. Жогоруда айтылгандай, сиз сүрөттү жүктөй аласыз же медиа китепканаңыздан бирөөнү тандай аласыз.
Backend Фондук Сүрөттү жүктөп алыңыз
Өзгөртүүлөр аяктагандан кийин, өзгөртүүлөрүңүздү сактоо үчүн "Тапшыруу" баскычын басууну унутпаңыз. Жаңы өзгөртүүлөрүңүз дароо "Алдын ала көрүү" терезесинде пайда болоорун байкайсыз. Эгер сиз флипбокстордун бүтүндөй катарын түзгүңүз келсе, "Жаңы флипбокс кошуу" мета кутучасындагы "+" белгисин басыңыз.
Flipboxes бир катар кошуу
Жогорудагыдай диалог терезеси пайда болуп, экинчи флипбоксуңузду ыңгайлаштырууга мүмкүндүк берет. Сиз азыр флипбоксуңузду түзүп, ыңгайлаштырдыңыз, андыктан аларды WordPress сайтыңызга кошууга убакыт келди. Муну жасоонун эң оңой жолу - камтылган кыска кодду колдонуу. Экраныңыздын оң жагында « Shortcode » деген мета кутуча бар, төмөндөгү сүрөттөгүдөй кыска кодду көчүрүңүз.
Flipbox кыска кодун көчүрүү
Андан кийин флипбоксту кошкуңуз келген баракка же постко өтүп, кыска кодуңузду чаптаңыз. Андан кийин билдирүүңүз онлайн болсо, "Жарыялоо" же "Жаңыртуу" баскычын басыңыз.
Flipbox кыска кодун чаптаңыз
Жаңы флипбоксуңуз азыр сайтыңызда онлайн болот. Браузердин терезесинин өлчөмүн өзгөрткөнүңүздө, флипбокстор 100% жооп бергендиктен туураланарын эске алыңыз.
Wordpress Live Flipbox экраны
Бул плагин ошондой эле темаңыз тарабынан колдоого алынган каалаган виджет аймагына кошо турган Flipbox виджетин камтыйт. Бул үчүн, өтүңүз Көрүнүш » Виджеттер жана "Flipbox – Flip Boxes Awesomes Image Overlay" аттуу виджетти издеңиз.
Flipbox Widget кошуу
Андан кийин сиз виджетти сүйрөп, каалаган жериңизге таштасаңыз болот. Акырында, Flipbox плагининин негизги менюсунан тапса болот стилдин идентификаторун киргизип, "Сактоо" баскычын чыкылдатыңыз.
Flipbox Widget Id
Бул макала сизге WordPress сайтыңызга флипбокс катмарларын жана жылмаларды кантип кошууну үйрөнүүгө жардам берди деп үмүттөнөбүз. Сиз ошондой эле SEO үчүн сүрөттөрдү оптималдаштыруу боюнча колдонмобузду жана WordPress сүрөтүнүн жалпы көйгөйлөрүн кантип чечүү боюнча көйгөйдү чечүү боюнча колдонмобузду текшере аласыз. Эгер сизге бул макала жакса, WordPress видео сабактары үчүн YouTube каналыбызга жазылыңыз. Бизди Twitter жана Facebookтан да таба аласыз.

Башында жарыяланган 2021-02-23 19:10:03.

Таштап Жооп