วิธีเพิ่มเอฟเฟกต์ Parallax ให้กับธีม WordPress ใด ๆ
เมื่อเร็ว ๆ นี้หนึ่งในผู้อ่านของเราถามเราว่าจะเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างไร เอฟเฟกต์พารัลแลกซ์เป็นเทรนด์การออกแบบเว็บไซต์ที่ภาพพื้นหลังเลื่อนช้ากว่าเนื้อหาเบื้องหน้า ในบทความนี้ เราจะแสดงวิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ใด ๆ ได้อย่างง่ายดาย
Parallax Effect คืออะไร?
เอฟเฟกต์พารัลแลกซ์เป็นเทคนิคการออกแบบเว็บไซต์สมัยใหม่ที่องค์ประกอบพื้นหลังเลื่อนช้ากว่าเนื้อหาเบื้องหน้า เอฟเฟ็กต์นี้จะเพิ่มความลึกให้กับภาพพื้นหลังและทำให้รู้สึกเหมือนมีการโต้ตอบกัน
เอฟเฟกต์พารัลแลกซ์สามารถใช้ได้กับแลนดิ้งเพจ เนื้อหาแบบยาว หน้าขาย หรือหน้าแรกของเว็บไซต์ธุรกิจ เป็นวิธีที่ยอดเยี่ยมในการเน้นส่วนต่างๆ บนหน้าที่มีความยาว
ธีม WordPress ระดับพรีเมียมจำนวนมากมาพร้อมกับเอฟเฟกต์พารัลแลกซ์ในตัวบนหน้าแรก คุณยังสามารถใช้เอฟเฟกต์พารัลแลกซ์ในปลั๊กอินตัวสร้างเพจ WordPress ส่วนใหญ่ได้เช่นกัน
อย่างไรก็ตาม ไม่ใช่ทุกธีมที่มีเอฟเฟกต์พารัลแลกซ์ในตัว และคุณอาจไม่ต้องการใช้ตัวสร้างเพจเพื่อสร้างโครงร่างเพจแบบกำหนดเองสำหรับเอฟเฟกต์พารัลแลกซ์เท่านั้น
มาดูวิธีเพิ่มเอฟเฟกต์พื้นหลังพารัลแลกซ์ให้กับธีม WordPress กัน
วิธีที่ 1: เพิ่มเอฟเฟกต์ Parallax ให้กับธีม WordPress ใด ๆ โดยใช้ปลั๊กอิน
วิธีนี้ไม่ต้องการให้คุณเพิ่มโค้ดใดๆ ให้กับธีม WordPress ของคุณ ง่ายกว่าและแนะนำสำหรับผู้ใช้ส่วนใหญ่
สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอินพื้นหลัง WordPress ขั้นสูง สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีติดตั้งปลั๊กอิน WordPress
เมื่อเปิดใช้งาน คุณจะต้องแก้ไขเพจหรือโพสต์ในตำแหน่งที่คุณต้องการเพิ่มเอฟเฟกต์พารัลแลกซ์ คุณจะสังเกตเห็นปุ่ม 'พื้นหลัง WordPress ขั้นสูง' ใหม่ในตัวแก้ไขภาพ
การคลิกจะเป็นการเปิดป๊อปอัปขึ้นมาซึ่งคุณสามารถเปลี่ยนการตั้งค่าต่างๆ สำหรับพื้นหลังที่คุณต้องการเพิ่มได้
ขั้นแรก คุณต้องเลือกรูปภาพเป็นประเภทพื้นหลัง จากนั้นเลือกตัวเลือก "ยืด"
ถัดไป คุณต้องคลิกที่ปุ่ม "เลือกภาพ" เพื่ออัปโหลดหรือเลือกภาพที่คุณต้องการใช้ ตรวจสอบให้แน่ใจว่าคุณใช้ภาพขนาดใหญ่ ไม่เช่นนั้นภาพจะแตกเป็นพิกเซล
หลังจากนั้นคุณจะต้องเปิดใช้งานพารัลแลกซ์โดยเลือกประเภทพารัลแลกซ์ มีหลายสไตล์ที่คุณสามารถทดลองใช้ได้ เอฟเฟกต์พารัลแลกซ์ที่ใช้กันมากที่สุดคือการเลื่อน
คลิกที่ปุ่มแทรกเพื่อดำเนินการต่อ
ปลั๊กอินจะเพิ่มรหัสย่อลงในโปรแกรมแก้ไขโพสต์ WordPress ของคุณ มันจะมีลักษณะดังนี้:
[nk_awb awb_type=”ภาพ” awb_stretch=”true” awb_image=”22″ awb_image_size=”เต็ม” awb_parallax=”เลื่อน” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”100 00″]
เนื้อหาของคุณที่นี่
[/nk_awb]
แทนที่ "เนื้อหาของคุณที่นี่" ด้วยเนื้อหาของคุณเอง จากนั้นบันทึกเพจของคุณ
ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูการทำงานจริงได้แล้ว
วิธีที่ 2: เพิ่มเอฟเฟกต์ Parallax ให้กับธีม WordPress ใด ๆ ด้วย CSS
วิธีการนี้คุณต้องมีความเข้าใจที่ถูกต้องเกี่ยวกับ HTML/CSS รวมถึงวิธีการทำงานของธีม WordPress
ขั้นแรก คุณจะต้องอัปโหลดภาพที่คุณต้องการใช้สำหรับเอฟเฟกต์พารัลแลกซ์ไปยังไลบรารีสื่อ WordPress ของคุณโดยไปที่หน้า สื่อ » เพิ่มใหม่
หลังจากอัปโหลดรูปภาพ คุณจะต้องคัดลอก URL ของรูปภาพโดยแก้ไขรูปภาพในไลบรารีสื่อ WordPress
ถัดไป คุณต้องเพิ่ม HTML ต่อไปนี้ลงในหน้าหรือโพสต์ที่คุณต้องการแสดงเอฟเฟกต์พารัลแลกซ์ คุณยังสามารถเพิ่ม HTML นี้ลงในธีม WordPress หรือธีมลูกของคุณได้
<div class="parallax"> <div class="parallax-content"> Your content goes here... </div> </div>
ถัดไป คุณต้องเพิ่ม CSS ที่กำหนดเองต่อไปนี้ให้กับธีม WordPress ของคุณ
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}
อย่าลืมแทนที่ URL ภาพพื้นหลังด้วยภาพพื้นหลังของคุณเอง
ตอนนี้คุณสามารถบันทึกการเปลี่ยนแปลงและเยี่ยมชมเว็บไซต์ของคุณเพื่อดูการทำงานได้
หมายเหตุ: คุณอาจต้องปรับ CSS ให้ทำงานกับเลย์เอาต์ของเว็บไซต์ของคุณ
เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่มเอฟเฟกต์พารัลแลกซ์ให้กับธีม WordPress ได้อย่างง่ายดาย คุณอาจต้องการดูรายการเคล็ดลับ เคล็ดลับ และแฮ็ก WordPress ที่เป็นที่ต้องการมากที่สุดของเรา
หากคุณชอบบทความนี้ โปรดสมัครรับวิดีโอบทช่วยสอนช่อง YouTube สำหรับ WordPress ของเรา คุณสามารถหาเราได้ทาง Twitter และ Facebook