วิธีเพิ่มเอฟเฟกต์ Parallax ให้กับเว็บไซต์ Elementor ใน 2 นาที

เผยแพร่แล้ว: 2022-03-08

ต้องการปรับปรุงประสบการณ์ผู้ใช้ไซต์ของคุณโดยการเพิ่มเอฟเฟกต์พารัลแลกซ์ใช่หรือไม่ คุณได้มาถึงสถานที่ที่เหมาะสม. เราจะแนะนำคุณตลอดกระบวนการทั้งหมดเพื่อเพิ่มคุณสมบัติพิเศษแต่เจ๋งนี้ให้กับไซต์ WordPress ของคุณ

คุณอาจเคยเห็นหน้าเว็บจำนวนมากที่ใช้ประโยชน์จากการเลื่อนแบบพารัลแลกซ์ได้อย่างดีเยี่ยม โดยที่พื้นหลังจะเคลื่อนที่ด้วยความเร็วที่ช้ากว่าองค์ประกอบพื้นหน้าเพื่อถ่ายทอดความลึก เอฟเฟกต์นี้ไม่ใช่เรื่องแปลก คุณจะพบเอฟเฟกต์พารัลแลกซ์บนเว็บไซต์ทุกประเภท

Parallax ช่วยให้คุณเปิดเผยรายละเอียดเกี่ยวกับผลิตภัณฑ์/บริการของคุณแบบไดนามิกเมื่อผู้ใช้อ่านเรื่องราวที่คุณสร้างขึ้นสำหรับพวกเขา

องค์ประกอบ

นอกเหนือจากการช่วยให้คุณบรรลุการออกแบบเว็บไซต์ที่ยอดเยี่ยมแล้ว คุณลักษณะพารัลแลกซ์ยังสามารถอำนวยความสะดวกได้หลายวิธี เช่น:

  • ปรับปรุงประสบการณ์ผู้ใช้
  • ลดอัตราตีกลับ
  • เพิ่มการมีส่วนร่วมของผู้ใช้

อย่างไรก็ตาม การเพิ่มคุณสมบัตินี้ด้วยตนเองต้องใช้เวลาและความพยายามอย่างมาก คุณจะต้องมีทักษะการเขียนโปรแกรมเช่นกัน แต่ถ้าคุณมีไซต์ WordPress คุณไม่จำเป็นต้องกังวล เนื่องจากผู้สร้างเพจอย่าง Elementor จะช่วยคุณเพิ่มเอฟเฟกต์พารัลแลกซ์บนเว็บไซต์ของคุณโดยไม่ต้องใช้โค้ดหรือผู้เชี่ยวชาญ

ดังนั้น ในบทช่วยสอนวันนี้ เราจะอธิบายว่าเอฟเฟกต์พารัลแลกซ์คืออะไร เหตุใดคุณจึงควรใช้เอฟเฟกต์เหล่านี้ และวิธีสร้างเอฟเฟกต์พารัลแลกซ์โดยใช้ Elementor

มาเริ่มกันที่พื้นฐานกันก่อน เราจะ?

ผล Parallax คืออะไร?

Types of Parallax Effect

เอฟเฟกต์พารัลแลกซ์เป็นรูปแบบการออกแบบที่มีสไตล์ซึ่งใช้กันอย่างแพร่หลายในเว็บไซต์ต่างๆ เพื่อให้ดูน่าสนใจและสบายตายิ่งขึ้น รูปแบบพื้นฐานของการออกแบบนี้คือเอฟเฟกต์การเลื่อน ซึ่งหมายความว่าภาพพื้นหลังจะเคลื่อนไหวช้ากว่าเนื้อหาหลักเล็กน้อย ในขณะนั้น จะให้ความรู้สึก 3D ของภาพลวงตาบนพื้นผิว 2D

ภาพพารัลแลกซ์บนเว็บไซต์คือการออกแบบสไตล์วิดีโอที่ช้าซึ่งให้ความรู้สึกถึงความคิดถึง ซึ่งเข้ากันได้ดีกับภาพยนตร์

Web Designer Depot

เมื่อมันถูกนำไปใช้กับเว็บไซต์เฉพาะเช่นเว็บไซต์เกม แต่ตอนนี้ คุณสามารถสังเกตเห็นรูปแบบการออกแบบนี้ได้ในเว็บไซต์เกือบทุกประเภท รวมทั้งเว็บไซต์พอร์ตโฟลิโอและเว็บไซต์ท่องเที่ยว เพื่อความเป็นเอกลักษณ์และการใช้งานที่ง่ายดาย ผู้คนจึงเต็มใจที่จะเพิ่มเลย์เอาต์ระดับพรีเมียมนี้ลงในเว็บไซต์ของตน

ดังที่ได้กล่าวไว้ข้างต้น เป็นเรื่องที่ยากและใช้เวลานานสำหรับผู้ใช้ทั่วไป เนื่องจากต้องใช้ความรู้ด้านการเขียนโปรแกรม แต่แพลตฟอร์มโอเพ่นซอร์สอย่าง – WordPress ทำให้ทุกคนสามารถสร้างการออกแบบเพจที่สวยงามได้ แน่นอนว่ามันจะทำให้การนำทางเว็บไซต์มีการโต้ตอบและน่าสนใจยิ่งขึ้นสำหรับผู้ใช้ของคุณ

คุณยังสามารถใช้เอฟเฟกต์พารัลแลกซ์บน

  • แลนดิ้งเพจ
  • ขายหน้า
  • เว็บไซต์ธุรกิจ
  • เว็บไซต์ท่องเที่ยว
  • เว็บไซต์ผลงานส่วนบุคคล ฯลฯ

หมายเหตุสำคัญ: การเลื่อนแบบพารัลแลกซ์ไม่ดีสำหรับเว็บไซต์เมื่อใช้งานอย่างไม่ถูกต้อง

นี่คือเหตุผลที่คุณต้องเลือกเทมเพลตเว็บไซต์ที่สะดุดตา ดังนั้นมันจะช่วยให้เว็บไซต์ของคุณมีโครงสร้างที่ดี

เรียนรู้เพิ่มเติมเกี่ยวกับเทมเพลตการออกแบบเว็บไซต์ที่มีประโยชน์ที่สุดที่นี่

ประเภทของเอฟเฟกต์พารัลแลกซ์ใน Elementor

Types of parallax

โดยทั่วไป คุณสามารถดูรูปแบบการออกแบบพารัลแลกซ์ได้สองประเภท เอฟเฟกต์การเลื่อนพารัลแลกซ์และเอฟเฟกต์เมาส์ แต่คุณสามารถผสมรูปแบบเหล่านี้เพื่อให้ได้โมเดลเพิ่มเติมตามประเภทเว็บไซต์ของคุณ

01. การเลื่อนแบบพารัลแลกซ์ ทำงานตามการเลื่อนผ่านหน้า

02. เอฟเฟกต์เมาส์ ทำงานเมื่อคุณเลื่อนเมาส์

มาดูกันว่าการออกแบบพารัลแลกซ์ประเภทใดบ้างที่คุณสามารถสร้างได้ภายในเว็บไซต์ของคุณ:

  • เลื่อนพื้นหลัง
  • เลื่อนแนวตั้ง
  • เลื่อนแนวนอน
  • ติดตามเมาส์
  • เอฟเฟกต์เบลอ
  • หมุนเอฟเฟกต์
  • เอฟเฟกต์เมาส์

ติดตามเมาส์

เอฟเฟกต์แทร็กของเมาส์คือการเปลี่ยนแบบเฟดเอาต์ ยิ่งคุณย้ายจากส่วนบนลงล่าง ระบบนำทางอัตโนมัติจะปรากฏขึ้น มันดูน่าสนใจและน่าติดตามมาก แน่นอนว่ามันจะปรับปรุงประสบการณ์การใช้งานเว็บไซต์ของคุณ คุณสามารถใช้การออกแบบนี้เพื่อเปิดเผยหัวข้อใหม่สำหรับผู้ใช้ หรือเพียงแค่ทำให้พวกเขาประหลาดใจ – อะไรจะเกิดขึ้นต่อไป!

How to create a parallax effect
เครดิตรูปภาพ Fat Media

หมุนเอฟเฟกต์

เอฟเฟกต์การหมุนหมายถึงการเพิ่มการเคลื่อนไหวให้กับองค์ประกอบ ดังนั้นในขณะที่ผู้ใช้นำทางหน้าหรือเลื่อนหน้าลง องค์ประกอบจะหมุนตามเข็มนาฬิกาหรือทวนเข็มนาฬิกา

การเพิ่มลงในเว็บไซต์ของคุณอาจเป็นผลดี คุณสามารถทำให้ผู้ใช้รู้สึกเหมือนกำลังดูวิดีโอขณะเลื่อนเว็บไซต์ของคุณ

Rotate Parallax Effect
เครดิตรูปภาพ – Goonies Webflow

เลื่อนพื้นหลัง

รูปแบบการออกแบบที่เก่าแก่ที่สุดรูปแบบหนึ่งคือเอฟเฟกต์การเลื่อนพื้นหลัง เป็นวิธีที่ดีในการเริ่มต้นด้วยการออกแบบนี้ คุณสามารถเห็นภาพที่เปลี่ยนไปทีละภาพในขณะที่คุณเลื่อนลงไปที่หน้า นอกจากนี้ คุณจะได้รับเรื่องราวในขณะที่คุณเลื่อนจากบนลงล่าง หากคุณมีเว็บไซต์หน้าเดียว การออกแบบนี้อาจยอดเยี่ยมสำหรับคุณ

Background scrolling effect_how to create a parallax effect
เครดิตรูปภาพ: Cadillacs & Dinosaurs

เลื่อนแนวตั้ง

เอฟเฟกต์การเลื่อนพารัลแลกซ์แนวตั้งนั้นน่าดึงดูดและน่าดึงดูดใจมากกว่าเอฟเฟกต์การเลื่อนพื้นหลัง คุณสามารถให้ผู้ใช้ของคุณรู้สึกว่าองค์ประกอบต่างๆ กำลังลอยอยู่เมื่อพวกเขาไปยังส่วนต่างๆ ของเว็บไซต์ ประกอบด้วยความเร็วที่แตกต่างกันโดยมีหลายชั้นในทิศทางเดียวกัน

Vertical scroll effect
ตัวอย่างจาก Daniel Spatzek

เลื่อนแนวนอน

ความคิดแรกหลังจากดูเอฟเฟกต์การเลื่อนแนวนอนคืออะไร? เห็นได้ชัดว่าคุณรู้สึกเหมือนอยู่ในอวกาศ ใช่ไหม?

มันสามารถเติมสีสันให้กับการออกแบบที่น่าเบื่อและน่าเบื่อของคุณให้เป็นผลงานชิ้นเอกได้อย่างง่ายดาย

สมมติว่าคุณสร้างม็อคอัพสำหรับโปรเจ็กต์ แต่มันดูจืดชืดไปหน่อย และคุณต้องการเพิ่มสีสันให้กับโปรเจ็กต์ การบินกระสวยไปตรงกลางหน้าจอโดยใช้การเลื่อนแนวนอนควรทำเคล็ดลับอย่างแน่นอน อย่างที่คุณเห็นเอฟเฟกต์ทำงานควบคู่ไปกับสิ่งที่คุณทำมากขึ้นจากบนลงล่าง

Horizontal scroll effect

เอฟเฟกต์เบลอ

เช่นเดียวกับเอฟเฟกต์ด้านบน มันทำงานในลักษณะเดียวกัน แต่ความแตกต่างคือ เอฟเฟกต์เบลอจะปรากฏขึ้นเมื่อคุณเลื่อนลง ตรงกันข้ามเมื่อคุณเลื่อนขึ้นอีกครั้งจะแสดงข้อความพร่ามัว

Blur effect_Elementor Parallax

เอฟเฟคเมาส์

สุดท้ายแต่ไม่ท้ายสุด เรามีเอฟเฟกต์เมาส์พารัลแลกซ์ที่จะพูดถึง มันดูเรียบง่ายและเท่มาก เมื่อคุณเลื่อนตัวชี้เมาส์ หน้าต่างทั้งหมดจะย้ายไปตาม นอกจากนี้ คุณจะรู้สึกเหมือนอยู่ในยานอวกาศ ดังนั้นคุณจึงนำรูปแบบการออกแบบนี้ไปใช้ในไซต์ของคุณได้ แต่เราขอแนะนำให้คุณเพิ่มในส่วนเฉพาะ

เช่น เกี่ยวกับหน้า ส่วนพอร์ต หรือหน้าแบบสอบถาม ด้วยวิธีนี้ คุณจะดึงดูดความสนใจของพวกเขาให้อยู่ในเว็บไซต์ของคุณได้มากขึ้น

Rotate Effect

แม้ว่าจะมีเอฟเฟกต์พารัลแลกซ์มากมายที่คุณสามารถสังเกตเห็นได้ในหลายเว็บไซต์ แต่เราเพิ่งเลือกเอฟเฟกต์ยอดนิยมบางส่วนที่คุณสามารถนำไปใช้กับเว็บไซต์ของคุณได้

เพื่อให้เว็บไซต์ของคุณมีส่วนร่วมและดึงดูดความสนใจมากขึ้นด้วยการออกแบบที่ยอดเยี่ยม คลิกที่นี่

ตอนนี้เราจะแสดงวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้คุณ

  1. บนองค์ประกอบเว็บไซต์โดยใช้ Elementor
  2. บนพื้นหลังเว็บไซต์โดยใช้ Happy Elementor Addons

วิธีสร้างเอฟเฟกต์พารัลแลกซ์โดยใช้ Elementor

How to create a parallax effect

เมื่อพิจารณาจากประเภทการออกแบบข้างต้น มาดูวิธีการสร้างเอฟเฟกต์พารัลแลกซ์โดยใช้ Elementor ทุกรูปแบบการออกแบบมีจุดประสงค์เฉพาะตัว ดังนั้นขึ้นอยู่กับหมวดหมู่ธุรกิจและเว็บไซต์ของคุณ ให้เลือกประเภทที่ดีที่สุดที่ตรงกับการผสมสีของเว็บไซต์ของคุณ

ข้อกำหนดในการสร้างการออกแบบพารัลแลกซ์ด้วย Elementor

  • WordPress
  • Elementor (ฟรีและ Pro)

เพิ่มหน้าและแก้ไขด้วย Elementor

คุณมีสองวิธีในการเพิ่มเอฟเฟกต์พารัลแลกซ์ด้วย Elementor คุณสามารถเพิ่มคุณสมบัตินี้บนหน้าที่มีอยู่ หรือเพียงแค่สร้างหน้าแยกต่างหากแล้วทำงานกับมัน

มาสร้างเพจกันเถอะ คุณสามารถเพิกเฉยได้หากคุณสร้างเพจไว้แล้ว

ไปที่ WordPress Dashboard> Pages> Add a new page> Edit with Elementor

Create a page

เมื่อคุณเข้าไปแล้ว ให้เพิ่มไฟล์มีเดียในหน้านี้ หากไม่ได้ทำก่อนหน้านี้

Elementor Canvas
Elementor Canvas

เพิ่มเอฟเฟกต์การเคลื่อนไหว

ใต้ส่วนขั้นสูง คุณจะพบ Motion นอกจากนี้ยังมีสองส่วนย่อย เอฟเฟกต์เลื่อนและเอฟเฟกต์เมาส์ นอกเหนือจากนี้ คุณสามารถใช้องค์ประกอบที่ติดหนึบ แอนิเมชัน เพิ่มระยะเวลาของแอนิเมชัน และดีเลย์ของแอนิเมชันได้

Elementor Motion effect

เลือกส่วนการออกแบบของคุณ จากนั้นคลิกที่ส่วนขั้นสูงเพื่อเพิ่มคุณสมบัติเหล่านี้ ในกรณีนี้ เราเลือกหัวข้อ หลังจากนั้นคลิกที่ ไอคอนแก้ไขได้ ทางด้านขวาของหน้าจอ

จากนั้นแตะที่ Advanced> Motion effects

Applying Motion effects
การเพิ่มเอฟเฟกต์พารัลแลกซ์

สลับ เอฟเฟกต์การเลื่อน และคุณสามารถดูเอฟเฟกต์พารัลแลกซ์อื่น ๆ ให้คุณใช้งานได้ ทำสิ่งเดียวกันทีละตัวแล้วนำการออกแบบไปใช้กับส่วน

Add a motion effect

มาดูกันว่าคุณสามารถใช้ Scroll Effect อะไรได้อีก

  • เลื่อนแนวตั้ง
  • เลื่อนแนวนอน
  • ความโปร่งใส
  • เบลอ
  • หมุน
  • มาตราส่วน

เลื่อนแนวตั้ง

หากต้องการนำการออกแบบไปใช้ ก่อนอื่น ให้คลิกส่วนการออกแบบใดๆ จากนั้นไปที่ Advanced> Motion Effect> Toggle the Scrolling effects on> แตะที่ปุ่มเลื่อนแนวตั้ง

Adding vertical scroll

หมายเหตุ: ในการป้อนและแก้ไขส่วนที่คุณต้องการ คุณต้องเลือกตัวเลือกนั้น มิฉะนั้น มันจะทำงานไม่ถูกต้อง

เมื่อคุณคลิกที่ปุ่ม ปากกา คุณสามารถตั้งค่าเอฟเฟกต์การเลื่อนได้ เช่นคุณสามารถเปลี่ยนทิศทางขึ้นและลง ปรับความเร็วการเลื่อนขององค์ประกอบ ปรับมุมมองให้เหมาะสม

คุณยังสามารถดูความคืบหน้าการออกแบบของคุณข้างหน้าจอด้านขวาได้อีกด้วย

Vertical scroll effect

เอฟเฟกต์เลื่อนแนวนอน

เช่นเดียวกับเอฟเฟกต์การเลื่อนแนวตั้ง ตอนนี้คุณสามารถทำสิ่งเดียวกันกับการเลื่อนแนวนอนได้แล้ว เพียงเลือกส่วนการออกแบบของคุณและไปที่ ขั้นสูง> การเคลื่อนไหว> เอฟเฟกต์การเลื่อน> เอฟเฟกต์แนวนอน

Horizontal scroll effect

ผลโปร่งใส

มาดูกันว่าเอฟเฟกต์ความโปร่งใสบนเว็บไซต์ของคุณทำงานอย่างไร ในการทำเช่นนั้น ให้แตะที่ตัวเลือกโปร่งใสอีกครั้งแล้วปรับการตั้งค่า

คุณสามารถใช้เอฟเฟกต์ความโปร่งใสสี่ประเภทได้ที่นี่ นอกจากนี้ คุณสามารถปรับระดับได้ตั้งแต่ 1 ถึง 10

Transparency Effect

เอฟเฟกต์เบลอ

อีกครั้ง เลือกส่วนการออกแบบของคุณ ในกรณีของเรา เราได้เลือกหมวดเกี่ยวกับฉัน ด้วยวิธีที่คล้ายกัน คลิกที่ตัวเลือกแก้ไขและไปที่การตั้งค่าขั้นสูงเพื่อค้นหา Motion Effect

จากนั้นค้นหาเอฟเฟกต์ Blur และคลิกที่มัน คุณจะพบเอฟเฟกต์สี่แบบที่จะนำไปใช้กับการออกแบบของคุณ นอกจากนี้ คุณสามารถปรับให้เข้ากับระดับสีน้ำเงินได้

Blur Effect

หมุนเอฟเฟกต์

ตอนนี้ได้เวลาแสดงให้เห็นว่าเอฟเฟกต์การหมุนทำงานอย่างไร เช่นเดียวกับวิธีเดียวกัน เพียงเลือกส่วนการออกแบบใดๆ ของคุณและปรับตัวเลือกการออกแบบขั้นสูงเพื่อรับเอฟเฟกต์การหมุนบนการออกแบบของคุณ

Rotate effect

สเกลเอฟเฟกต์

การใช้เอฟเฟกต์นี้จะซูมออกโดยอัตโนมัติ และในระหว่างที่คุณเลื่อนหน้าลงหรือขึ้น ดังนั้น คุณสามารถกำหนดได้ว่าจะให้แสดงตัวมันเองอย่างไร คุณสามารถเปลี่ยนทิศทางได้สี่วิธี นอกจากนี้ คุณสามารถเปลี่ยนความเร็วของฟีเจอร์ตามทิศทางได้

Scale effect

เมื่อเสร็จแล้วจะมีลักษณะดังนี้

Scale effect

เอฟเฟกต์เมาส์

ประกอบด้วยเอฟเฟกต์สองประเภท แทร็กเมาส์และการเอียง 3 มิติ

ขณะใช้แทร็กเมาส์ คุณสามารถกำหนดทิศทางด้วยเมาส์หรือตรงข้ามทิศทางก็ได้

Mouse effect

ถัดมา สำหรับการเอียง 3D ให้แตะที่มัน และทำสิ่งเดียวกันกับที่คุณทำกับ Mouse Track

3D mouse tilt

สมัครแอนิเมชั่น

ข่าวดีก็คือ คุณสามารถใช้แอนิเมชั่นประเภทต่างๆ ในการออกแบบของคุณเพื่อให้น่าสนใจและให้ผลกำไรมากขึ้น ตัวอย่างเช่น คุณต้องสังเกตเห็นปุ่มชื่อ Animation คลิกที่มันแล้วคุณจะพบกับแอนิเมชั่นประเภทต่างๆ

Animation

ดูตัวอย่างสุดท้าย

หลังจากเริ่มต้นการออกแบบ การออกแบบขั้นสุดท้ายของคุณจะดูเหมือนด้านล่าง เราได้เพิ่มการออกแบบพารัลแลกซ์ประเภทนี้โดยขึ้นอยู่กับโครงสร้างเทมเพลต ดังนั้นคุณต้องสำรวจตัวเลือกทั้งหมดด้วยตัวเอง หลังจากนั้นคุณอาจสร้างสิ่งที่แตกต่างออกไปที่เราแสดงไว้ที่นี่

Final Preview of Parallax Effect

ต้องการรับคำแนะนำโดยละเอียดเกี่ยวกับการนำการออกแบบพารัลแลกซ์ไปใช้ในไซต์ของคุณ โดยทำตามคำแนะนำด้านล่างนี้!

ดูวิดีโอนี้เพื่อทราบวิธีการเพิ่มเอฟเฟกต์พารัลแลกซ์บนเว็บไซต์ของคุณ!

Happy Addons Parallax Block จะช่วยให้คุณเพิ่มเอฟเฟกต์ Parallax บนพื้นหลังเว็บไซต์

Happy Addons Parallax Effect

เรายินดีที่จะบอกว่า Happy Addons ซึ่งเป็นหนึ่งในส่วนเสริมยอดนิยมของ Elementor ได้รวมชุดของการออกแบบพารัลแลกซ์ที่พร้อมสำหรับคุณ หากคุณไม่สามารถเพิ่มการออกแบบด้วยตัวเองได้ คุณสามารถขอความช่วยเหลือจาก Happy Addons คุณเพียงแค่ต้องคัดลอกและวางการออกแบบที่ตั้งไว้ล่วงหน้าไปยังไซต์ของคุณและทำงานให้เสร็จ

หากต้องการออกแบบเบื้องต้นด้วย Happy Addons คุณต้องติดตั้งปลั๊กอินต่อไปนี้บนเว็บไซต์ของคุณ:

  • Happy Addons ฟรี
  • Happy Addons Pro

เมื่อเสร็จแล้ว ให้นำทางไปยังหน้าที่คุณกำลังออกแบบหน้าของคุณอีกครั้ง และคุณจะพบไอคอน Happy Addons ของเราที่นั่น คลิกเลย!

Adding Happy Parallax Block

เมื่อคุณเข้าไปแล้ว ให้แตะที่ปุ่มตัวกรอง และนั่นคือ! คลิกที่ Parallax เพื่อใช้งานต่อไป

Parallax Block

ที่นี่คุณจะได้พบกับการออกแบบทั้งแบบฟรีและแบบพรีเมียม ดังนั้นหากคุณซื้อเวอร์ชันพรีเมียม คุณก็สามารถใช้งานได้

Happy Parallax Premium & Free Block

ตอนนี้เพียงแค่เลือกรูปแบบการออกแบบที่คุณชอบแล้วคลิกปุ่มแทรกเพื่อเริ่มต้น!

Using Happy Addons Parallax Block

หลังจากที่คุณแทรกการออกแบบบนเพจของคุณ เอฟเฟกต์พารัลแลกซ์จะเริ่มทำงานโดยอัตโนมัติ!

Final preview of Happy Parallax Block

คุณสามารถเพิ่มการออกแบบอื่นๆ ได้ในลักษณะเดียวกัน

How to create a parallax effect

นี่คือวิธีที่คุณสามารถใช้ Happy Addons เพื่อเพิ่มการออกแบบพารัลแลกซ์ที่สร้างไว้ล่วงหน้าเพื่อสร้างเอฟเฟกต์พารัลแลกซ์ให้กับเว็บไซต์ Elementor ของคุณ

ชอบใช้ Happy Addons หรือไม่? คุณสามารถตรวจสอบคุณสมบัติเพิ่มเติมของ Happy Addons เพื่อสร้างเว็บไซต์ WordPress ที่สมบูรณ์ได้

ให้ฉันตรวจสอบคุณสมบัติทั้งหมดของ Happy Addons!

คำถามที่พบบ่อยเกี่ยวกับ Parallax Effect

ฉันจะสร้างเอฟเฟกต์พารัลแลกซ์บน WordPress ได้อย่างไร

ตอบ: ทำได้หลายวิธี หากคุณกำลังใช้ไซต์ WordPress คุณสามารถทำได้โดย ติดตั้งปลั๊กอิน WordPress Parallax เช่น – Elementor

คุณสามารถทำตามขั้นตอนด้านล่าง:

01. ดาวน์โหลดปลั๊กอิน Parallax
02. เลือกรูปภาพ
03. เปิดใช้งาน Parallax และเลือก Parallax Type
04. สลับคุณสมบัติ 'พารัลแลกซ์ของเมาส์'
05. อัปโหลดรูปภาพไปยังไลบรารีสื่อ WordPress ของคุณ
06. เพิ่ม HTML ลงในหน้า/โพสต์
07. เพิ่ม CSS ให้กับธีมของคุณ

ฉันจะเพิ่มเอฟเฟกต์การเคลื่อนไหวใน Elementor ได้อย่างไร

ตอบ : ไปที่แท็บ Advanced แล้วเปิดส่วนควบคุม Motion Effects ต้องการทำให้ภาพพื้นหลังเคลื่อนไหวหรือไม่? ไปที่แท็บ Style และภายใต้ Background> Image คุณจะเห็นเอฟเฟกต์การเลื่อนและเมาส์ Motion Effects มีคุณสมบัติพิเศษเฉพาะสองชุด: Scrolling Effects และ Mouse Effects

เอฟเฟกต์การเลื่อนของ Elementor คืออะไร

ตอบ: เอฟเฟกต์การเลื่อนแนวตั้งเป็นเอฟเฟกต์ พารัลแลกซ์แบบคลาสสิก การเลื่อนแนวตั้งทำให้องค์ประกอบเคลื่อนที่ด้วยความเร็วที่แตกต่างจากหน้าในขณะที่เลื่อนไปในทิศทางและความเร็วที่คุณเลือก

ฉันต้องการ Elementor Pro สำหรับการเลื่อนเอฟเฟกต์หรือไม่

ตอบ : เอ ฟเฟกต์การเลื่อนเป็น หนึ่งในคุณสมบัติ Elementor Pro กล่าวอีกนัยหนึ่ง คุณต้องใช้ Elementor Pro เพื่อใช้คุณลักษณะนี้ ด้านล่างนี้คือตัวอย่างก่อนใช้เอฟเฟกต์การเลื่อนแนวนอน และนี่คือตัวอย่างหลังจากใช้ Horizontal Scroll

จะเพิ่มเอฟเฟกต์เหนียวบนองค์ประกอบได้อย่างไร?

ตอบ : ในการใช้เอฟเฟกต์การเลื่อนแบบติดหนึบ ให้ไปที่ ขั้นสูง > เอฟเฟกต์การเลื่อน > เหนียว และเลือกตัวเลือกด้านบน หลังจากนั้นก็จะติดอยู่ที่ด้านบนของหน้า

เรียนรู้ว่าจะเกิดอะไรขึ้นหาก Elementor pro หมดอายุ

บทสรุป

การเพิ่มเอฟเฟกต์พารัลแลกซ์ด้วยตนเองให้กับการออกแบบเว็บไซต์นั้นเป็นงานที่น่ากลัว โดยเฉพาะอย่างยิ่งสำหรับผู้เริ่มต้น นอกจากนี้ยังไม่มีธีม WordPress เฉพาะที่ให้เอฟเฟกต์พารัลแลกซ์โดยอัตโนมัติ ดังนั้นในกรณีนี้ Elementor อาจเป็นทางเลือกที่ดีที่สุดของคุณสำหรับสิ่งอำนวยความสะดวกที่ใช้งานง่ายและการลากและวาง นอกจากนี้ ฟีเจอร์ในตัว ของ Happy Add-on จะช่วยยกระดับประสบการณ์การออกแบบของคุณไปอีกระดับ

เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณปรับเปลี่ยนมุมมองเว็บไซต์ของคุณ สร้างเค้าโครงที่ยอดเยี่ยม และสร้างหน้า Landing Page ที่น่าประหลาดใจ

ไม่ว่าคุณจะเป็นฟรีแลนซ์ ธุรกิจขนาดเล็ก หรือทั้งองค์กร — ใครๆ ก็สามารถเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับเว็บไซต์ของตนได้ในตอนนี้

เพียงทำตามขั้นตอนของเราและเริ่มสร้างเอฟเฟกต์พารัลแลกซ์ที่ยอดเยี่ยมบนเว็บไซต์ของคุณ

คุณสามารถแบ่งปันความคิดเห็นและข้อเสนอแนะอันมีค่าของคุณผ่านส่วนความคิดเห็นด้านล่าง เรายินดีที่จะได้ยินเสียงของคุณและตอบกลับแบบเรียลไทม์!

ฉันต้องการ Happy Addons ตอนนี้!