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

วิธีสร้างสไลด์โชว์ด้วย Slider Revolution บน WordPress

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

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

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

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

คุณจะกำจัด Slider Revolution โดยฝึกนิสัยและอ่านบทช่วยสอนนี้

ระหว่างบทเรียนที่ผ่านมาเราพบว่า:

และตอนนี้เราได้ตั้งค่าตัวเลื่อนของเราแล้วเราจะสร้าง สไลด์ "ของ" เลื่อน '

วิธีควบคุมบรรณาธิการ "สไลด์"

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

บรรณาธิการสไลด์ปฏิวัติเลื่อน

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

ค้นพบยังของเรา ปลั๊กอิน WordPress 10 ที่ให้คุณประเมินบทความในบล็อกของคุณ

ปฏิวัติแถบเลื่อน doutil รุ่นของภาพนิ่ง

ที่ด้านล่างเรามีส่วนใหม่ที่ช่วยให้เราเห็นเลเยอร์ทั่วโลก "สไลด์" ที่แตกต่างกันและปุ่มเพื่อเพิ่มใหม่ " สไลด์ '

การสร้างของสไลด์ปุ่มเลื่อนการปฏิวัติ

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

เลื่อนตัวเลือกการสร้างสไลด์ปฏิวัติ

ด้วยการวางเมาส์เหนือปุ่มเพิ่มสไลด์คุณจะสังเกตเห็นตัวเลือกอื่น ๆ ที่ให้คุณเพิ่มสไลด์เปล่าเพิ่มหลายสไลด์เพิ่มสไลด์จากเทมเพลต (แบบ).

การสร้างของสไลด์ตัวเลือกการปฏิวัติเลื่อน

ขณะนี้คุณอยู่บนสไลด์ 1 ซึ่งเป็นสาเหตุที่มีการเน้นในรายการสไลด์ หากคุณสร้างสไลด์ใหม่มันจะถูกไฮไลต์แทนที่สไลด์แรก

สองสไลด์การสร้าง-ตาลเลื่อนเลื่อนปฏิวัติ

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

อ่านบทความของเราเกี่ยวกับ 6 ปลั๊กอินการบีบอัดรูปภาพ WordPress สำหรับบล็อกของคุณ

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

วิธีเพิ่มภาพพื้นหลังในฉาก

สิ่งแรกที่คุณต้องการทำก่อนคือเพิ่มพื้นหลังให้กับสไลด์ของเรา ที่นี่คุณมีตัวเลือกระหว่าง: ภาพพื้นหลัง (จากไลบรารีสื่อของคุณ), URL ภายนอกที่ชี้ไปที่รูปภาพ, พื้นหลังโปร่งใสที่จะใช้สีที่เสนอโดยชุดรูปแบบ WordPress, สีคงที่, วิดีโอ Youtube Vimeo หรือ HTML5 เราจะเลือกพื้นหลัง " ภาพ '

พื้นหลังภาพตัวอย่าง

คุณสามารถค้นหารูปภาพฟรีมากมายบนเว็บ เพียงค้นหาบน Google

ภาพกลับแผนปฏิวัติเลื่อน

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

ฉากปฏิวัติเลื่อน

วิธีการเพิ่มองค์ประกอบในฉาก

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

หากต้องการเพิ่มรายการในฉากให้เลื่อนเมาส์ไปวางเหนือ เพิ่มเลเยอร์ '

บินเพิ่มชั้นเลื่อนปฏิวัติ

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

เราจะเริ่มต้นด้วยการเพิ่มภาพโปร่งใสของ Snoopy ลูกสุนัขตัวเล็ก

เริ่มโปรโมตบล็อกของคุณ

ดาวน์โหลดโลโก้แบนเนอร์แม่แบบเว็บไซต์และเครื่องมือทางการตลาดอื่น ๆ อีกมากมายเพื่อทำการตลาดบล็อก WordPress ของคุณ [แนะนำ]

ตลกด้อม-PNG

จากนั้นเพิ่มภาพนี้ในฉากและคุณจะมีดังนี้:

ตัวอย่างเลื่อนเลื่อนการปฏิวัติ

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

การปรับขนาดทำได้โดย " ลาก " หากต้องการปรับขนาดในขณะที่รักษาสัดส่วนให้กดปุ่ม "ค้างไว้" พฤษภาคม จากแป้นพิมพ์ของคุณในขณะที่ปรับขนาด

ดูเพิ่มเติมที่ ปลั๊กอิน WordPress 10 ที่จะทำให้คุณเป็น Blogger ที่ดีขึ้น

ใหม่เป็นตัวแทนด้อมปฏิวัติเลื่อน

ตอนนี้ Snoopy มีลักษณะเช่นนี้มันเหมาะสมกว่า คุณสามารถพลิกภาพโดยใช้แสงที่มุมขวาบนของแต่ละภาพเช่นนี้:

หมุน DIMAGE ปฏิวัติเลื่อน

วิธีการจัดวางองค์ประกอบด้วยตารางวิธีใช้

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

เครื่องปิ้งขนมปัง daide ปฏิวัติเลื่อน

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

การลงทุนของภาพ

วิธีการเพิ่มภาพเคลื่อนไหว

มีภาพเคลื่อนไหวประเภท 3 ใน Slider Revolution: ภาพเคลื่อนไหวอินพุต, ภาพเคลื่อนไหวในระหว่าง (การมีอยู่ขององค์ประกอบในฉาก) และภาพเคลื่อนไหวที่สิ้นสุด

ดูเพิ่มเติมที่ 6 ปลั๊กอินการบีบอัดรูปภาพ WordPress สำหรับบล็อกของคุณ

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

ดังนั้นคลิกที่ Snoopy ขึ้นบนหน้าและคลิกที่แท็บ« นิเมชั่น '

ภาพเคลื่อนไหวเลื่อนปฏิวัติ

ในภาพก่อนหน้าฉันมีภาพเคลื่อนไหวอินพุตเป็นสีน้ำเงินและภาพเคลื่อนไหวออกเป็นสีแดง

หากต้องการเปลี่ยนแอนิเมชันให้คลิกที่รายการดรอปดาวน์หลังไอคอนของนักวิ่ง

ไอคอนเคลื่อนไหวเลื่อนปฏิวัติ

จากนั้นคุณจะมีภาพเคลื่อนไหวหลากหลายรูปแบบตามที่คุณต้องการ ฉันปล่อยให้คุณเลือกภาพเคลื่อนไหวที่คุณต้องการกำหนดสำหรับรายการขององค์ประกอบ สำหรับส่วนของฉันฉันเลือก " easeOutElastic เพื่อให้ได้ผลลัพธ์นี้:

แอนิเมชั่ entree-ด้อม

ที่นี่สำหรับคุณของเรา ปลั๊กอิน WordPress 4 เพื่อเพิ่มส่วนท้ายของบล็อกของคุณ

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

การกำหนดค่าเนินเคลื่อนไหวเลื่อนปฏิวัติ

aussi Lire วิธีการซ่อนชื่อของบทความและหน้า WordPress

ตอนนี้ฉันอยากจะลอยสนูปปี้ไปที่ " ห่วง และบนตัวเลือกแบบหล่นลงให้เลือก " คลื่น " ตอนนี้สนูปปี้ลอย:

Snoppy ลอย

วิธีกำหนดค่าการเปิดเผยองค์ประกอบ

สนูปปี้ของฉันลอยได้ แต่ฉันไม่ต้องการให้ปรากฏบนมือถือ ดังนั้นคลิกที่ " ความชัดเจน และที่ไอคอนสมาร์ทโฟนตรวจสอบให้แน่ใจว่าปิดอยู่:

การมองเห็นองค์ประกอบปฏิวัติเลื่อน

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

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

วิธีปรับพฤติกรรมขององค์ประกอบต่างๆ

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

พฤติกรรมองค์ประกอบปฏิวัติเลื่อน

วิธีการสร้างทริกเกอร์ที่กำหนดเองในองค์ประกอบ

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

เพิ่ม-a-ชัตเตอร์ปุ่ม

มีทริกเกอร์ประเภท 3:

  • คลิกคือการกระทำของการคลิกเมาส์
  • การใส่เมาส์เหนือองค์ประกอบ
  • ทางออกของเมาส์เหนือองค์ประกอบ

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

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

การบริหารจัดการของทริกเกอร์ปฏิวัติเลื่อน

วิธีการใช้ Slider Revolution TimeLine

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

จุดเริ่มต้นและสิ้นสุดเนินภาพยนตร์-on-เลื่อนการปฏิวัติ

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

aussi Lire วิธีการเพิ่มการนับถอยหลังในบล็อกของคุณ WordPress

คุณจะพบจุดสิ้นสุดที่คล้ายกับส่วนท้ายของช่วงเวลาอื่น ๆ (ภาพเคลื่อนไหวอินพุตเวลาชีวิตและภาพเคลื่อนไหวสิ้นสุด).

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

ไทม์ไลน์ยังมีผู้เล่นที่คุณสามารถเปิดใช้งานเพื่อดูตัวอย่างสไลด์

แอนิเมชั่ไทม์ไลน์ปฏิวัติเลื่อน

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

การสำรองข้อมูลและ previsulisation

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

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

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

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

1 ดิสก์เสียง

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

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

อ่าน: ปลั๊กอิน 10 WordPress เพื่อเพิ่มศักยภาพในการวิจัยเกี่ยวกับบล็อกของคุณ

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

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

2 จองกิจกรรมการท่องเที่ยว Pro

นี่เป็นอีกหนึ่งปลั๊กอิน WordPress 100% ที่ตอบสนองได้ง่ายปรับแต่งและอุทิศให้กับการจัดการการจองบนเว็บไซต์ใด ๆ ที่ให้บริการในพื้นที่ของกิจกรรม

คุณสมบัติหลัก ได้แก่ : การปรับแต่งข้อความสีเส้นขอบและอื่น ๆ รองรับ PayPal การจัดการรหัสคูปองและคูปองการสนับสนุน Google Mapsการสนับสนุนการจัดการอีเมล การสนับสนุนของรหัสย่อแผงควบคุมที่ใช้งานง่ายการสร้างเหตุการณ์ง่ายควบคุมทั้งหมดได้อย่างชัดเจน

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

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

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

3 แบ่งปันสังคมและ Locker Pro

ส่วนขยาย Social Share & Locker Pro ถูกออกแบบมาเพื่อช่วยให้เว็บไซต์ของคุณปรากฏบนเครือข่ายสังคมมากขึ้น ในการคลิกเพียงไม่กี่ครั้งคุณสามารถกำหนดตำแหน่งของไอคอนโซเชียลของคุณหรือล็อคเนื้อหาของคุณโดยกำหนดให้แชร์ในเครือข่ายโซเชียลที่เสนอโดยคุณ

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

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

นอกจากนี้ด้วย Social Share & Locker Pro คุณจะสามารถดูชื่อเต็มของเครือข่ายสังคมออนไลน์หรือเพียงแค่ไอคอน มันจะขึ้นอยู่กับการออกแบบพื้นที่ว่างหรือความปรารถนาของคุณ

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

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

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

บทสรุป

Voila! เราหวังว่าบทช่วยสอนนี้จะให้พื้นฐานการสร้างสไลด์โชว์ด้วย Slider Revolution บนบล็อกหรือเว็บไซต์ WordPress หากคุณมีคำถามข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

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

อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.

...

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

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

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

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

กลับไปด้านบน
5 หุ้น
หุ้น2
ทวีต
Enregistrer3