ไฮไลท์ปลั๊กอิน Divi – ลอจิกการแสดงผล Divi

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

Divi Display Logic เป็นปลั๊กอินของบุคคลที่สามจาก Tortoise IT ที่ทำงานร่วมกับทั้ง Divi และ Extra เพื่อเพิ่มตรรกะในการแสดงผล ในไฮไลต์ของปลั๊กอินนี้ เราจะดูปลั๊กอินและดูตัวอย่างสิ่งที่สามารถทำได้

รูปภาพสำหรับตัวอย่างเหล่านี้นำมาจาก Unsplash.com และจากเลย์เอาต์ Divi ฟรีที่มีให้ที่นี่ในบล็อก Elegant Themes

การติดตั้ง Divi Display Logic

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

Display Logic ถูกเพิ่มไปยังส่วน แถว และโมดูลทั้งหมดในแท็บเนื้อหาภายใน Divi Builder แบ็กเอนด์ คุณสมบัติต่างๆ รวมถึงการเลือกวันที่และเวลา กล่องดรอปดาวน์ที่คุณสามารถเลือกตรรกะที่กำหนดไว้ล่วงหน้า และกล่องที่แสดงรหัสย่อที่ปลั๊กอินสร้างขึ้นสำหรับตรรกะของคุณ

ลอจิกที่กำหนดไว้ล่วงหน้า

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

ตัวเลือกคือแสดงหรือซ่อนตามเวลาที่กำหนด ระหว่างเวลาที่แน่นอน บางวัน แสดงว่ามีหมวดหมู่ NEWS หรือไม่ หากผู้ใช้เข้าสู่ระบบ บทบาทของผู้ใช้บางตำแหน่ง ตำแหน่งใดตำแหน่งหนึ่ง และอิงตาม รหัส PHP ทั้งหมดนี้สามารถแก้ไขได้

รหัสย่อลอจิก

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

คุณยังสามารถใช้รหัสย่อที่ห่อหุ้ม (รหัสย่อที่มีแท็กเริ่มต้นและสิ้นสุด [รหัสย่อ][/รหัสย่อ]) เพื่อสร้างอาร์กิวเมนต์ของคุณเองได้ สิ่งนี้อธิบายไว้ในคำอธิบายใต้ช่องรหัสย่อ แต่ฉันต้องการดูตัวอย่างที่ให้ไว้ในคำอธิบายด้วย

หากต้องการแก้ไข เพียงเน้นส่วนในรหัสย่อและทำการเปลี่ยนแปลง

นี่คือตัวอย่างที่จะซ่อนเนื้อหาในวันธรรมดา หากคุณต้องการแสดงเนื้อหาแทนการซ่อน คุณจะต้องเปลี่ยน "ซ่อน" เป็น "แสดง" ในรหัสย่อ อีกทางเลือกหนึ่งคือการแทนที่ตัวเลข 1-5 ด้วย “6,7” ซึ่งจะซ่อนเนื้อหาในวันหยุดสุดสัปดาห์

ฉันพบว่าการจัดการรหัสย่อนั้นใช้งานง่าย เนื่องจากคำหลักส่วนใหญ่ในสตริงนั้นตรงไปตรงมา

ตัวอย่างรหัสย่อในตัว

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

การเลือกวันที่และเวลา

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

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

สิ่งสำคัญคือต้องใช้เวลาของเซิร์ฟเวอร์มากกว่าเวลาจริง นี่คือที่ที่ WordPress ได้รับเวลาปัจจุบันและเป็นเวลาที่ Divi Display Logic จะใช้

โมดูลจะแสดงเนื้อหาระหว่างวันที่และเวลาที่ฉันเลือก

สิ่งนี้เปิดโอกาสมากมาย ตัวอย่างเช่น:

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

Divi Display Logic Examples – School Call to Action

สำหรับตัวอย่างแรกของฉัน ฉันกำลังสร้างหน้า Landing Page สำหรับโรงเรียน หน้านี้จะมีคำกระตุ้นการตัดสินใจสำหรับนักเรียนในสหรัฐอเมริกา แต่ใครก็ตามที่อยู่นอกสหรัฐอเมริกาจะไม่สามารถลงทะเบียนได้ ตัวอย่างนี้ใช้เค้าโครงหน้าแรกสำหรับมหาวิทยาลัยและวิทยาลัย

เค้าโครงประกอบด้วยแถวที่มีโมดูลข้อความและปุ่ม ฉันต้องการให้ข้อความและปุ่มถูกแทนที่ด้วยโมดูลต่างๆ สำหรับทุกคนที่อยู่นอกสหรัฐอเมริกา

ภายในการตั้งค่าแถว ฉันเลือก "ซ่อนเนื้อหาหากผู้ใช้อยู่ในสหรัฐฯ"

ต่อไปฉันเปลี่ยน "ซ่อน" ในรหัสย่อเป็น "แสดง" เพื่อสร้างรหัสย่อใหม่อย่างมีประสิทธิภาพ

ฉันโคลนแถวและเลือกที่จะซ่อนเนื้อหาสำหรับผู้ใช้ในสหรัฐอเมริกาสำหรับแถวใหม่

ขณะนี้มีเพียงแถวเดียวเท่านั้นที่จะแสดงตามตำแหน่งของผู้เข้าชม

ผู้เข้าชมในสหรัฐฯ จะเห็นสโลแกนและปุ่มเดิมที่จะใช้

ผู้เข้าชมทั้งหมดที่อยู่นอกสหรัฐอเมริกาจะเห็นสโลแกนและปุ่มที่ต่างกันพร้อมคำอธิบายภาพที่แตกต่างกัน

Divi Display Logic Examples – ลดราคาแฟลช

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

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

ตัวนับเวลาถอยหลังและตรรกะการแสดงผลทำงานแยกจากกัน ฉันได้ตั้งเวลาสำหรับตัวนับให้ตรงกับเวลาที่จะแสดงลอจิกการแสดงผล

Divi Display Logic Examples – เว็บไซต์ผู้แต่งพร้อมพื้นที่สมาชิก

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

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

แทนที่จะโคลนทั้งส่วน ฉันแค่โคลนปุ่มเท่านั้น สิ่งอื่น ๆ จะยังคงเหมือนเดิม วิธีนี้หากฉันตัดสินใจเปลี่ยนภาพพื้นหลัง ฉันต้องเปลี่ยนเฉพาะในส่วนเดียวเท่านั้น

ฉันตั้งค่าตรรกะสำหรับปุ่มบนสุดเพื่อแสดงเนื้อหาต่อผู้ใช้ที่ออกจากระบบเท่านั้น

ปุ่มที่สองจะแสดงต่อผู้ใช้ที่เข้าสู่ระบบเท่านั้น

อีกวิธีหนึ่งคือฉันสามารถใช้ 'แสดงเนื้อหานี้ หากผู้ใช้มีความสามารถ "view_content"

ผู้ใช้ที่เข้าสู่ระบบจะเห็นปุ่มใหม่ซึ่งมีลิงก์ไปยังหน้าหรือโพสต์เฉพาะ

Divi Display Logic Examples – ไซต์ผู้แต่งพร้อมหน้า Landing Page ใหม่

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

ฉันได้ตั้งค่าตรรกะสำหรับแต่ละส่วน ทุกส่วนที่ประกอบเป็นหน้า Landing Page จะแสดงต่อผู้ใช้ที่ไม่ได้เข้าสู่ระบบ สองส่วนด้านล่างซึ่งสร้างหน้าบล็อกที่มีส่วนหัวแบบเต็ม จะแสดงสำหรับผู้ใช้ที่เข้าสู่ระบบ

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

การใช้ Divi Display Logic กับ Extra

Divi Display Logic ยังใช้งานได้กับ Extra ตัวอย่างนี้แสดงโมดูล Posts Carousel ในตัวสร้างหมวดหมู่

ใบอนุญาต

Divi Display Logic สามารถใช้ได้บนเว็บไซต์ไม่จำกัดสำหรับคุณและลูกค้าของคุณ ประกอบด้วยการสนับสนุน 6 เดือนและการอัปเดต 12 เดือน หลังจาก 12 เดือนผ่านไป คุณจะต้องซื้อปลั๊กอินอีกครั้งเพื่อรับการอัปเดต ราคาซื้อคืนคือ 50% ของราคาซื้อเริ่มต้น

ความคิดสุดท้าย

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

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

ดู Divi Display Logic ที่ Tortoise IT สำหรับข้อมูลการซื้อ

เราต้องการได้ยินจากคุณ คุณเคยใช้ Divi Display Logic หรือไม่? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่นผ่าน phipatbig / shutterstock.com