เมื่อเร็ว ๆ นี้ผู้อ่านคนหนึ่งของเราถามเราว่าจะเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างไร?
เอฟเฟกต์ Parallax เป็นเทรนด์ที่ได้รับความนิยมในปัจจุบันบนเว็บซึ่งภาพพื้นหลังจะเลื่อนช้ากว่าเนื้อหาเบื้องหน้า
ในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างง่ายดาย
แต่ถ้าคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
แต่กลับไปที่สาเหตุที่เราอยู่ที่นี่
Parallax Effect คืออะไร?
Parallax Effect เป็นเทคนิคการออกแบบเว็บสมัยใหม่ที่องค์ประกอบพื้นหลังจะเลื่อนช้ากว่าเนื้อหาเบื้องหน้า เอฟเฟกต์นี้จะเพิ่มความลึกให้กับภาพพื้นหลังและทำให้มีการโต้ตอบ
ค้นพบของเรา 25 ธีม WordPress พร้อม Parallax เพื่อสร้างเว็บไซต์
สามารถใช้เอฟเฟกต์พารัลแลกซ์ได้ เชื่อมโยงไปถึงหน้าการขายหรือหน้าแรกของเว็บไซต์ธุรกิจ เป็นวิธีที่ดีในการเน้นส่วนต่างๆในหน้ายาว
หลาย ธีม WordPress พรีเมี่ยม มีเอฟเฟกต์พารัลแลกซ์ในตัวในหน้าแรก คุณยังสามารถใช้เอฟเฟกต์พารัลแลกซ์กับปลั๊กอินส่วนใหญ่ได้ WordPress การสร้างภาพของหน้า
อย่างไรก็ตาม ทั้งหมด ธีม WordPress ไม่มีเอฟเฟกต์พารัลแลกซ์ในตัว และคุณอาจไม่ต้องการใช้ตัวสร้างเพจแบบภาพเพียงเพื่อเอฟเฟกต์พารัลแลกซ์
มาดูวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างง่ายดาย
วิธีที่ 1: เพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress โดยใช้ปลั๊กอิน
วิธีนี้ไม่จำเป็นต้องเพิ่มโค้ดใด ๆ ในธีม WordPress ของคุณ ง่ายกว่าและแนะนำสำหรับผู้ใช้ส่วนใหญ่
สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน พื้นหลัง WordPress ขั้นสูง. สำหรับรายละเอียดเพิ่มเติม ดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress.
หลังจากเปิดใช้งานปลั๊กอินคุณต้องแก้ไขหน้าที่คุณต้องการเพิ่มเอฟเฟกต์พารัลแลกซ์ คุณจะสังเกตเห็นปุ่มใหม่ "พื้นหลัง 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]
แทนที่ " เนื้อหานี้ ตามเนื้อหาของคุณเองจากนั้นบันทึกหน้าของคุณ
คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูการทำงาน
วิธีที่ 2: เพิ่มเอฟเฟกต์ "Parallax" ให้กับธีม WordPress ด้วย CSS
วิธีนี้ต้องการให้คุณมีความรู้เกี่ยวกับ "HTML / CSS" รวมถึงการทำงานของธีมและปลั๊กอินของ WordPress
ขั้นแรกคุณต้องอัปโหลดไปยังไลบรารีสื่อ WordPress ของคุณรูปภาพที่คุณต้องการใช้สำหรับเอฟเฟกต์พารัลแลกซ์โดยไปที่ " สื่อ> เพิ่มใหม่ '
ดำเนินการต่อไปโดยการค้นหา วิธีการจัดระเบียบสื่อในบล็อก WordPress ของคุณ
หลังจากอัปโหลดรูปภาพคุณต้องคัดลอก URL ของรูปภาพโดยแก้ไขรูปภาพในไลบรารีสื่อของ WordPress
จากนั้นคุณต้องเพิ่มโค้ด HTML ต่อไปนี้ในหน้าที่คุณต้องการแสดงเอฟเฟกต์พารัลแลกซ์ คุณยังสามารถเพิ่มโค้ด HTML นี้ในไฟล์ ธีม WordPress หรือธีมลูกของคุณ.
div class = "parallax"> เนื้อหาของคุณที่นี่ ...
จากนั้นคุณต้องเพิ่มรหัส CSS ที่กำหนดเองต่อไปนี้ในธีม WordPress ของคุณ
.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 พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้
1 การบริจาค WooCommerce
ยอมรับผ่านการบริจาคส่วนขยายนี้บนเว็บไซต์ WooCommerce ของคุณตามจำนวนที่ลูกค้ากำหนด พวกเขาจะสามารถให้ได้มากเท่าที่พวกเขาต้องการ การบริจาคแต่ละครั้งสามารถนำเสนอเป็นผลิตภัณฑ์ตามปกติของ WooCommerce.
หากลูกค้าข้ามหน้ารถเข็นหรือไปที่จุดชำระเงินโดยตรงโดยไม่ได้ทำการบริจาคลิงก์จะปรากฏเหนือหน้าชำระเงินเพื่อให้พวกเขาสามารถบริจาคได้
แต่ละขั้นตอนของการใช้ WooCommerce Donation อธิบายไว้ในเอกสารประกอบพร้อมภาพหน้าจอ เพียงเปิดใช้งานปลั๊กอินแล้วคุณจะพบช่อง "เพิ่มการบริจาค" บนรถเข็น
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 LinkedIn เพิ่มเติม
LinkedIn Plus เป็น WordPress ปลั๊กอิน ซึ่งช่วยให้คุณสามารถนำเสนอโปรไฟล์ LinkedIn ของคุณในบล็อกของคุณ นอกจากนี้ยังใช้ได้กับบล็อกที่มีผู้เขียนหลายคน เพิ่มปุ่มติดตามและแชร์ไปยังบทความ เพจ หรือวิดเจ็ต WordPress ของคุณ
เป็นวิธีที่ยอดเยี่ยมในการเพิ่มคุณลักษณะ LinkedIn ทั้งหมดในบล็อกของคุณและตรวจสอบความถูกต้องของแบรนด์ของคุณกับผู้บริโภค ช่วยให้คุณสามารถปรับแต่งรูปลักษณ์กำหนดการตั้งค่าและเปิดใช้งานตัวเลือกขั้นสูงอื่น ๆ เพื่อโปรโมตโปรไฟล์ของคุณให้กับนายหน้าหรือนายจ้างที่มีศักยภาพ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 ใช้ YouTube
YouTubeR เป็น WordPress ปลั๊กอิน แพลตฟอร์มที่ไม่เหมือนใคร ซึ่งช่วยให้คุณอัปโหลดวิดีโอไปยัง YouTube จากเว็บไซต์ของคุณ และฝังวิดีโอ เพลย์ลิสต์ และช่อง YouTube บนเว็บไซต์ของคุณได้อย่างง่ายดาย
ด้วยปลั๊กอินนี้คุณมีโอกาสสร้างแกลเลอรี่วิดีโอที่ยอดเยี่ยมบนเว็บไซต์ของคุณ
คุณสมบัติอื่น ๆ : ความเป็นไปได้ของ อัปโหลดวิดีโอไปยัง YouTube จากเว็บไซต์ WordPress ของคุณได้อย่างง่ายดาย วิดีโอง่ายเพลย์ลิสต์และช่อง YouTube สู่เว็บไซต์ของคุณรองรับ Visual Composer, การเลื่อนอย่างไม่มีที่สิ้นสุดในเพลย์ลิสต์แคชที่ยอดเยี่ยมเค้าโครงที่ตอบสนองได้ เอกสารรายละเอียดและอื่น ๆ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
ทรัพยากรที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- วิธีแก้ไขข้อผิดพลาด "ไม่สามารถเขียนลงดิสก์" บน WordPress
- วิธีที่จะเป็น blogger ที่ประสบความสำเร็จและสร้างรายได้ด้วย WordPress
- วิธีการเผยแพร่บทความของคุณโดยอีเมลบน WordPress
- วิธีที่จะเป็น blogger ที่ประสบความสำเร็จและสร้างรายได้ด้วย WordPress
สรุป
นั้นคือทั้งหมด! เราหวังว่าจะได้รับความช่วยเหลือเป็นอย่างดี อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
และหากคุณมีข้อเสนอแนะหรือข้อสังเกตใด ๆ ปล่อยไว้ในส่วนของเรา ความเห็น.
...
