ไฮไลท์ปลั๊กอิน Divi: Easy Slide-Ins

Easy Slide-Ins เป็นปลั๊กอินของบุคคลที่สามสำหรับ Divi และ Extra ที่ให้คุณสร้างสไลด์อิน (และป๊อปอัป) โดยใช้ตัวสร้าง Divi สไลด์อินสามารถแสดงอะไรก็ได้ที่สามารถสร้างด้วย Divi Builder ทริกเกอร์สไลด์อินด้วยเปอร์เซ็นต์การเลื่อน ความตั้งใจออก ปุ่มที่มีหลายตำแหน่ง และด้วยคลาส CSS รวมถึงการอัปเดตและการสาธิตตลอดอายุการใช้งาน

ในบทความนี้ เราจะมาดู Easy Slide-Ins กัน และดูว่ามันทำอะไรได้บ้างและใช้งานง่ายแค่ไหน เราจะดูการสาธิตบางส่วนที่มาพร้อมกับปลั๊กอินด้วย ปลั๊กอินมีให้จากเว็บไซต์ของผู้พัฒนา

การติดตั้ง Easy Slide-Ins

ขั้นแรกให้แตกไฟล์ ภายในโฟลเดอร์ คุณจะพบการสาธิต ไฟล์ที่มีลิงก์ไปยังเอกสารประกอบ และปลั๊กอิน Easy Slide-Ins

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ

เมนูใหม่ถูกเพิ่มลงในแดชบอร์ดที่เรียกว่า Easy Slide-Ins คลิกเมนูนี้และป้อนรหัสใบอนุญาตของคุณ

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

การสร้าง Slide-In ใหม่

การคลิกเพื่อเพิ่มสไลด์ใหม่ในจะเป็นการเปิดตัวแก้ไขซึ่งคุณสามารถใช้ Divi Builder เพื่อสร้างสไลด์อินได้

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

แสดงชื่อเรื่องและป้อนข้อความเพื่อแสดง เลือกพื้นหลังและสีของข้อความของชื่อเรื่อง รวมถึงตระกูลแบบอักษร ขนาด และน้ำหนัก ตั้งค่าความโค้งมนของมุม ความสูงของฉลาก และความกว้างของฉลาก แสดงไอคอนปิดและเลือกพื้นหลังและสีของไอคอนและขนาดไอคอน

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

ฟีเจอร์อื่นๆ จะถูกเพิ่มหรือลบออก ขึ้นอยู่กับตัวเลือกที่คุณเลือก ฉันเลือก Box Shadow และตอนนี้มีตัวเลือกสำหรับตำแหน่งแนวนอนและแนวตั้ง ความเบลอและการกระจาย และสี

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

แท็บฟิลด์กำหนดเองช่วยให้คุณเพิ่มฟิลด์ที่กำหนดเองได้เช่นเดียวกับหน้าหรือโพสต์ใดๆ

ตัวอย่างสไลด์อินอย่างง่าย

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

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

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

ตัวอย่างแสดงเงาของกล่อง ฉันได้เปลี่ยนตำแหน่งเป็นแถบด้านข้างทางขวา ซึ่งแสดงปุ่มปิด ฉันได้เปลี่ยนสีของฉลากและปุ่มปิด และทำให้มุมของฉลากมีความโค้งมนมากขึ้น ฉันยังตั้งค่าความกว้างของสไลด์อินเป็น 600 พิกเซล

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

เปิดแบบเต็มหน้าจอและมีปุ่มปิด

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

มันเปิดจากด้านซ้าย ฉันให้ความกว้างพิกเซล 1,000 พิกเซล ดังนั้นมันจึงครอบคลุมหน้าจอของฉันได้มาก สไลด์อินผู้ติดต่อยังคงแสดงอยู่ที่ด้านบนแม้ว่าเมนูจะถูกปิดโดยสไลด์อินจดหมายข่าว

สไลด์อินให้คลาสทริกเกอร์ปุ่ม คุณสามารถใช้สิ่งนี้กับปุ่มต่างๆ เพื่อเปิดสไลด์เข้าได้

คัดลอกคลาสและวางลงในฟิลด์ CSS Class ของปุ่ม

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

สาธิตสไลด์อินอย่างง่าย

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

นี่คืออีเมลคอลเลกชั่นที่มีเจตนาออก ประกอบด้วยโมดูลข้อความ แบบฟอร์มติดต่อ และโมดูลรูปภาพ

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

อันนี้คือ Collection Email พร้อม Scroll Intent ประกอบด้วยรูปภาพพื้นหลัง โมดูลข้อความสองโมดูล และโมดูลอีเมล

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

อันนี้เป็นแนวทางสำหรับผู้เข้าชมของคุณ ประกอบด้วยโมดูลโค้ด (สำหรับ Google Maps) การนำเสนอ ข้อความ และแบบฟอร์มการติดต่อ

นี่คือลักษณะที่ปรากฏบนหน้าเว็บโดยใช้การตั้งค่าเริ่มต้น

หนึ่งนี้เป็นโปรโมชั่นที่มีป้ายกำกับ ประกอบด้วยโมดูลข้อความ ตารางราคาหลายตาราง และปุ่ม

นี่คือลักษณะที่ปรากฏบนหน้าจอ ฉันตั้งค่าเป็น 800 พิกเซล ดังนั้นมันจะแสดงความกว้างเต็มถ้าเลื่อนเข้ามา ฉันลบป้ายกำกับและตั้งค่าให้แสดงเมื่อเลื่อนหน้าถึง 60%

นี่คือเลย์เอาต์เดียวกันเมื่อดูด้วย Extra ฉันดีใจที่เห็นว่าใช้งานได้ดีกับทั้ง Divi และ Extra

ราคาและเอกสารประกอบของ Slide-In อย่างง่าย

Easy Slide-Ins พร้อมใช้งานจากเว็บไซต์ของผู้พัฒนา มีสองตัวเลือกในการซื้อ:

• ไซต์เดียว – $27
• ไม่จำกัดไซต์ – $97

ใบอนุญาตทั้งสองรวมถึงการสาธิตและการอัปเดตตลอดอายุการใช้งาน

เอกสารมีให้ที่เอกสารของผู้พัฒนาและหน้าสนับสนุน หน้านี้มีการแนะนำแต่ละจุดพร้อมรูปภาพเพื่อแสดง หน้านี้ยังมีลิงก์ไปยังการสนับสนุนทางอีเมล

จบความคิด

Easy Slide-Ins ทำให้ง่ายต่อการสร้างสไลด์และป๊อปอัปสำหรับ Divi และ Extra ฉันพบว่ามันใช้งานง่าย ฉันไม่เคยต้องการเอกสาร แต่มีถ้าจำเป็น เป็นวิธีที่น่าสนใจในการนำองค์ประกอบของหน้าที่ซ่อนอยู่ เนื่องจากทุกอย่างสามารถใช้ในสไลด์อิน คุณจึงสามารถแสดงแบบฟอร์มติดต่อ การสมัครรับจดหมายข่าว คำกระตุ้นการตัดสินใจ วิดีโอ โมดูลร้านค้า ฯลฯ ได้ ไม่ว่าจะเป็นโมดูลเดียวหรือเค้าโครงหน้าเต็ม

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

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

หากคุณกำลังมองหาวิธีที่ง่ายและใช้งานง่ายในการสร้างสไลด์อินโดยใช้ Divi Builder Easy Slide-Ins นั้นควรค่าแก่การดู

เราต้องการได้ยินจากคุณ คุณได้ลอง Easy Slide-Ins สำหรับ Divi แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

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