ข้ามไปยังเนื้อหาหลัก

วิธีการเพิ่มผล Parallax ในรูปแบบใด ๆ WordPress

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

เมื่อเร็ว ๆ นี้ผู้อ่านคนหนึ่งของเราถามเราว่าจะเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างไร?

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

ในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างง่ายดาย

แต่ถ้าคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

แต่กลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีมเวิร์ดเพรส e1567702269161

Parallax Effect คืออะไร?

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

ค้นพบของเรา 25 ธีม WordPress พร้อม Parallax เพื่อสร้างเว็บไซต์

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

หลาย ธีม WordPress พรีเมี่ยม มีเอฟเฟกต์พารัลแลกซ์ในตัวในหน้าแรก คุณยังสามารถใช้เอฟเฟกต์พารัลแลกซ์กับปลั๊กอินส่วนใหญ่ได้ WordPress การสร้างภาพของหน้า

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

มาดูวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างง่ายดาย

วิธีที่ 1: เพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress โดยใช้ปลั๊กอิน

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

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

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

เพิ่มพื้นหลังเวิร์ดเพรสขั้นสูง

คลิกที่หน้าต่างป๊อปอัปที่คุณสามารถเปลี่ยนการตั้งค่าพื้นหลังต่างๆที่คุณต้องการเพิ่มได้

ก่อนอื่นคุณต้องเลือกภาพเป็นพื้นหลังจากนั้นเลือกตัวเลือก " ยืด'

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

พื้นหลังหน้าต่าง wordpress ขั้นสูง

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

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

คลิกที่ปุ่ม สิ่งที่ใส่เข้าไป เพื่อดำเนินการต่อ

ปลั๊กอินจะเพิ่ม รหัสผู้ใช้ บน บรรณาธิการสำนักพิมพ์. มันจะมีลักษณะเช่นนี้:

[Nk_awb awb_type = "ภาพ" awb_stretch = awb_image "จริง" = "22" awb_image_size = "เต็ม" awb_parallax = "เลื่อน" awb_parallax_speed = "0.5" awb_mouse_parallax = awb_mouse_parallax_size "จริง" = "30" awb_mouse_parallax_speed = "10000"] เนื้อหาของคุณ ที่นี่ [/ nk_awb]

แทนที่ " เนื้อหานี้ ตามเนื้อหาของคุณเองจากนั้นบันทึกหน้าของคุณ

คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูการทำงาน

Parallax มีผลต่อ wordpressวิธีที่ 2: เพิ่มเอฟเฟกต์ "Parallax" ให้กับธีม WordPress ด้วย CSS

วิธีนี้ต้องการให้คุณมีความรู้เกี่ยวกับ "HTML / CSS" รวมถึงการทำงานของธีมและปลั๊กอินของ WordPress

ขั้นแรกคุณต้องอัปโหลดไปยังไลบรารีสื่อ WordPress ของคุณรูปภาพที่คุณต้องการใช้สำหรับเอฟเฟกต์พารัลแลกซ์โดยไปที่ " สื่อ> เพิ่มใหม่ '

ดำเนินการต่อไปโดยการค้นหา วิธีการจัดระเบียบสื่อในบล็อก WordPress ของคุณ

หลังจากอัปโหลดรูปภาพคุณต้องคัดลอก URL ของรูปภาพโดยแก้ไขรูปภาพในไลบรารีสื่อของ WordPress

คัดลอก url ของรูปภาพไปที่ wordpress

จากนั้นคุณต้องเพิ่มโค้ด HTML ต่อไปนี้ในหน้าที่คุณต้องการแสดงเอฟเฟกต์พารัลแลกซ์ คุณยังสามารถเพิ่มโค้ด HTML นี้ในไฟล์ ธีม WordPress หรือธีมลูกของคุณ.

div class = "parallax"> เนื้อหาของคุณที่นี่ ...

จากนั้นคุณต้องเพิ่มรหัส CSS ที่กำหนดเองต่อไปนี้ในธีม WordPress ของคุณ

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

.parallax {background-image:: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); ความสูง: 100%; พื้นหลังแนบ: ถาวร พื้นหลังตำแหน่ง: ศูนย์; พื้นหลังซ้ำ: ไม่มีซ้ำ; พื้นหลัง-size: ปก; ขอบซ้าย: -410px; ขอบขวา: -410px; } .parallax เนื้อหา {กว้าง: 50%; margin: 0 อัตโนมัติ; สี: # fff; padding ด้านบน: 50px; }

อย่าลืมแทนที่ URL ของภาพพื้นหลังด้วยภาพของคุณเอง

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

ตัวอย่างเอฟเฟกต์พารัลแลกซ์ Wordpress

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

ค้นพบบางธีมและปลั๊กอิน WordPress พรีเมี่ยม  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 การบริจาค WooCommerce

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


ปลั๊กอินการบริจาค Woocommerce

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

แต่ละขั้นตอนของการใช้ WooCommerce Donation อธิบายไว้ในเอกสารประกอบพร้อมภาพหน้าจอ เพียงเปิดใช้งานปลั๊กอินแล้วคุณจะพบช่อง "เพิ่มการบริจาค" บนรถเข็น

ดาวน์โหลด | สาธิต เว็บโฮสติ้ง

2 LinkedIn เพิ่มเติม

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 ใช้ YouTube

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

Youtuber youtube ปลั๊กอิน wordpress

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

คุณสมบัติอื่น ๆ : ความเป็นไปได้ของ อัปโหลดวิดีโอไปยัง YouTube จากเว็บไซต์ WordPress ของคุณได้อย่างง่ายดาย วิดีโอง่ายเพลย์ลิสต์และช่อง YouTube สู่เว็บไซต์ของคุณรองรับ Visual Composer, การเลื่อนอย่างไม่มีที่สิ้นสุดในเพลย์ลิสต์แคชที่ยอดเยี่ยมเค้าโครงที่ตอบสนองได้ เอกสารรายละเอียดและอื่น ๆ

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

สรุป

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

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

และหากคุณมีข้อเสนอแนะหรือข้อสังเกตใด ๆ ปล่อยไว้ในส่วนของเรา ความเห็น.

... 

บทความนี้ประกอบด้วยข้อคิดเห็น 0

แสดงความคิดเห็น

ที่อยู่อีเมล์ของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน