როგორ შევქმნათ სურათის გადახვევის ეფექტი Elementor-ში

საჭიროა გზა გამოსახულების გადახვევის ეფექტის შესაქმნელად Elementor ? ამ სტატიაში, ჩვენ გაგიძღვებით, რომ შექმნათ გამოსახულების გადახვევის ეფექტი Elementor-ის გამოყენებით თქვენს ვებ გვერდებზე.

სურათის გადახვევის ეფექტი საშუალებას მოგცემთ გამოავლინოთ სრული სურათი, როდესაც მომხმარებელი აჩერებს სურათებს. როდესაც ეწვევით ვებსაიტს, რომელიც ყიდის ვებსაიტების შაბლონებს, შეგიძლიათ ნახოთ შაბლონების სრული გადახედვა სურათის გადახვევის ეფექტის მახასიათებლებით.

ამ ფუნქციებით თქვენ შეგიძლიათ მარტივად აჩვენოთ თქვენს მომხმარებლებს ვებგვერდის სრული ხედი მცირე სივრცეში. ჩვეულებრივ, თუ გსურთ ვებსაიტის სრული სურათის ჩვენება, ის დიდ ადგილს დაიკავებს თქვენს ვებ გვერდებზე. უფრო მეტიც, ეს გავლენას ახდენს თქვენი ვებსაიტის დიზაინზე.

მაგრამ სურათის გადახვევის ეფექტით, შეგიძლიათ დაამატოთ მეტი სურათი მიმზიდველად, რომელიც ადვილად მიიპყრობს აუდიტორიის ყურადღებას.

შექმენით სურათის გადახვევის ეფექტი Elementor-ში

Elementor არ იძლევა ვიჯეტს სურათის გადახვევის ეფექტის დასამატებლად. ასე რომ, თქვენ უნდა დაამატოთ ეფექტი მორგებული CSS-ის გამოყენებით. მორგებული CSS ფუნქცია ხელმისაწვდომია მხოლოდ Elementor პრო. ასე რომ, დარწმუნდით, რომ განახლდით Elementor პრო

ახლა გახსენით გვერდი Elementor რედაქტორით და დააწკაპუნეთ პლუსის ხატულაზე განყოფილების დასამატებლად.

ახლა თქვენ უნდა აირჩიოთ სვეტი თქვენი განყოფილებისთვის. აქ ჩვენ ვირჩევთ ერთი სვეტის განყოფილებას.

შექმენით სურათის გადახვევის ეფექტი Elementor-ში

ახლა დააჭირეთ განყოფილების რედაქტირების ხატულას და განლაგების ჩანართში დააყენეთ მინიმალური სიმაღლე 500-მდე.

ახლა ბლოკის ვიჯეტიდან დაამატეთ შიდა განყოფილების ბლოკი თქვენს შექმნილ განყოფილებაში და წაშალეთ ნაგულისხმევი სვეტი. დააწკაპუნეთ მაუსის მარჯვენა ღილაკით სვეტის რედაქტირების ხატულაზე და დააწკაპუნეთ წაშლის ოფციაზე, რომ წაშალოთ მთავარი სვეტი.

ისევ გადადით შიდა განყოფილების რედაქტირების ვარიანტზე და განლაგების ჩანართში დააყენეთ მინიმალური სიმაღლე 500-ზე, როგორც ადრე ვაჩვენეთ.

ახლა გადადით შიდა განყოფილების სტილის ჩანართზე და დააყენეთ ფონი როგორც კლასიკური ფონის ვარიანტიდან. შემდეგი, თქვენ უნდა დაამატოთ თქვენი ფონის სურათი. სურათის პოზიციის ოფციიდან დააყენეთ სურათის პოზიცია ტოპ ცენტრი. გამეორების ოფციიდან დააყენეთ ვარიანტი არ განმეორდეს და ზომა მოსწონს მოიცავს.

ახლა გადადით ჩანართზე მოწინავე მორგებული CSS-ის დასამატებლად. მორგებული CSS ველში დაამატეთ შემდეგი კოდი:

სელექტორი{ -webkit-transition: ease-in-out 3s !მნიშვნელოვანი; გარდამავალი: ease-in-out 3s !მნიშვნელოვანი; } selector:hover{ background-position: ცენტრში ქვედა !მნიშვნელოვანი; }

თქვენ შეგიძლიათ შეცვალოთ გადასვლის მნიშვნელობა სურათების გადახვევის ეფექტის შესაცვლელად. თუ გსურთ დაამატოთ მრავალი სურათი იმავე ეფექტით, შეგიძლიათ დააკოპიროთ სვეტი და შემდეგ შეცვალოთ ფონის სურათი.

დასკვნა

პროცესის შემდეგ, თქვენ შეძლებთ დაამატოთ სურათის გადახვევის ეფექტი თქვენს ვებსაიტზე გვერდის შემქმნელის გამოყენებით Elementor. თქვენ შეგიძლიათ ნახოთ ჩვენი სხვა სტატიები, რომ გაიგოთ:

ვიმედოვნებთ, რომ ეს სტატია თქვენთვის სასარგებლო იქნება. თუ მოგწონთ ეს სტატია, გთხოვთ მოიწონოთ ჩვენი ფეისბუქის გვერდი, რომ დარჩეთ კავშირში.