วิธีเพิ่มลักษณะพิเศษ Parallax ให้กับธีม WordPress ใด ๆ

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


การเพิ่มเอฟเฟ็กต์พารัลแลกซ์ให้กับธีม WordPress ใด ๆ

Parallax Effect คืออะไร?

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

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

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

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

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

วิธีที่ 1: เพิ่มเอฟเฟ็กต์ Parallax ให้กับธีม WordPress ใด ๆ ที่ใช้ปลั๊กอิน

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

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

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

ปุ่มพื้นหลัง WordPress ขั้นสูง

คลิกที่มันจะปรากฏขึ้นป๊อปอัพที่คุณสามารถเปลี่ยนการตั้งค่าที่แตกต่างกันสำหรับพื้นหลังที่คุณต้องการเพิ่ม.

ขั้นแรกคุณต้องเลือกรูปภาพเป็นประเภทพื้นหลังแล้วเลือกตัวเลือก “ยืด”.

การตั้งค่าพื้นหลัง Parallax

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

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

คลิกที่ปุ่มแทรกเพื่อดำเนินการต่อ.

ปลั๊กอินจะเพิ่มรหัสย่อในเครื่องมือแก้ไขบทความ WordPress ของคุณ มันจะมีลักษณะดังนี้:

[nk_awb awb_type =” ภาพ” awb_stretch =” จริง” awb_image =” 22″ awb_image_size =” เต็ม” awb_parallax =” เลื่อน” awb_parallax_speed =” 0.5″ awb_mouse

เนื้อหาของคุณที่นี่

[/ nk_awb]

แทนที่ ‘เนื้อหาของคุณที่นี่’ ด้วยเนื้อหาของคุณเองแล้วบันทึกหน้าของคุณ.

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

ตัวอย่างผล Parallax

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

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

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

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

คัดลอก URL รูปภาพ

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

เนื้อหาของคุณไปที่นี่…

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

.พารัลแลกซ์
ภาพพื้นหลัง: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
ความสูง: 100%;
พื้นหลังแนบ: แก้ไข;
พื้นหลังตำแหน่ง: ศูนย์;
พื้นหลังซ้ำ: ไม่ทำซ้ำ;
ขนาดพื้นหลัง: ปก;
ขอบซ้าย: -410px;
ขอบขวา: -410px;
}

.เนื้อหาพารารัลแลกซ์
ความกว้าง: 50%;
กำไรขั้นต้น: 0 อัตโนมัติ
สี: # fff;
padding ด้านบน: 50px;
}

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

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

เพิ่มเอฟเฟกต์ Parallax ด้วย CSS

หมายเหตุ: คุณอาจต้องปรับ CSS เพื่อให้ทำงานกับเค้าโครงของไซต์ของคุณ.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map