Elementor vs Divi: การเปรียบเทียบคุณสมบัติการออกแบบ

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

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

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

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

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

ทรัพย์สินและสื่อ

– ห้องสมุดไอคอน

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

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

หากคุณมีชุดไอคอนของคุณเองที่ดาวน์โหลดจาก Fontello, IcoMoon หรือ Fontastic Elementor จะอนุญาตให้คุณใช้งานได้

แล้ว Divi ล่ะ?

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

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

– วิดีโอพื้นหลัง

ไม่ว่าจะเป็น Elementor หรือ Divi คุณสามารถเพิ่มวิดีโอเป็นพื้นหลังในส่วนได้ ความแตกต่างคือ Divi ไม่อนุญาตให้คุณเพิ่มวิดีโอพื้นหลังจากแหล่งภายนอก (เช่น YouTube) คุณสามารถใช้พื้นหลังวิดีโอได้โดยการอัปโหลดไฟล์วิดีโอในรูปแบบ MP4 หรือ Webm เท่านั้น

ในขณะเดียวกัน Elementor ให้คุณเพิ่มวิดีโอพื้นหลังจากแหล่งบุคคลที่สาม (YouTube และ Vimeo) คุณยังสามารถเพิ่มวิดีโอไดนามิกโดยใช้ปลั๊กอินฟิลด์ที่กำหนดเอง เช่น ACF หรือ JetEngine

– สไลด์โชว์พื้นหลัง

นอกจากวิดีโอแล้ว Elementor ยังให้คุณใช้สไลด์โชว์เป็นพื้นหลังของส่วนได้อีกด้วย ฟีเจอร์เดียวกันนี้ไม่มีใน Divi

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

– หน้ากากพื้นหลัง

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

คุณลักษณะนี้ทำงานอย่างไร:

แล้ว Elementor ล่ะ?

จนถึงตอนนี้ Elementor ยังไม่มีฟีเจอร์มาสก์พื้นหลังดั้งเดิม

– รูปแบบพื้นหลัง

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

Elementor ยังไม่มีคุณสมบัติดั้งเดิมที่จะเพิ่มรูปแบบให้กับพื้นหลัง

– ตัวแบ่งรูปร่าง

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

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

– การกำบังภาพ

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

Divi ไม่มีคุณสมบัติการกำบังรูปภาพดั้งเดิม

สีและเอฟเฟกต์

– Global Colours

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

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

– การไล่ระดับสี

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

คุณสมบัติการไล่ระดับสีของ Elementor รองรับเพียงสองสี

– การซ้อนทับพื้นหลัง

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

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

– โหมดผสมผสาน

หากคุณใช้ Photoshop และเครื่องมือแก้ไขภาพอื่นๆ บ่อยครั้ง คุณต้องคุ้นเคยกับคำว่า "โหมดผสมผสาน" อยู่แล้ว คุณลักษณะนี้ช่วยให้คุณสามารถผสมสององค์ประกอบเข้าด้วยกันเพื่อให้เป็นสีเดียวกันได้

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

– ตัวกรอง CSS

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

ใน Elementor คุณมีตัวเลือกตัวกรอง CSS ห้าตัวเลือก ในขณะที่อยู่ใน Divi มีตัวเลือกตัวกรอง CSS 8 แบบที่คุณสามารถเลือกได้:

– กล่องเงา

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

วิชาการพิมพ์

– วิชาการพิมพ์สากล

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

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

Elementor เป็นเครื่องมือสร้างเพจที่มีคุณสมบัติประเภทนี้ น่าเสียดายที่ Divi ไม่มีคุณสมบัติดังกล่าว

– การควบคุมการพิมพ์

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

ตัวเลือกการตั้งค่าต่อไปนี้มีให้เพื่อปรับแต่งฟอนต์ใน Elementor และ Divi:

• สี
• ขนาด
• น้ำหนัก
• การแปลง (ตัวพิมพ์ใหญ่, ตัวพิมพ์เล็ก, ตัวพิมพ์ใหญ่)
• สไตล์ (ปกติ ตัวเอียง เฉียง)
• ตกแต่ง (ขีดเส้นใต้ ขีดเส้น ขีดเส้นผ่าน)
• ความสูงของเส้น
• ระยะห่างระหว่างตัวอักษร
• การเว้นวรรคคำ

ไม่ว่าจะเป็นใน Elementor หรือ Divi การแสดงตัวอย่างแบบอักษรมีให้เพื่อให้คุณดูตัวอย่างแบบอักษรก่อนใช้งาน

– แบบอักษรที่กำหนดเอง

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

สำหรับโครงการเว็บไซต์บางโครงการ คุณอาจต้องการใช้แบบอักษรที่กำหนดเองแทน ทั้ง Elementor และ Divi ทำให้เป็นไปได้หากคุณต้องการใช้แบบอักษรของคุณเอง ใน Divi ประเภทไฟล์ที่อนุญาตสำหรับแบบอักษรที่กำหนดเองคือ TTF และ OTF ใน Elementor คุณสามารถอัปโหลด TTF และ WOFF

หากคุณใช้ Adobe Fonts Elementor รองรับการทำงานร่วมกับ Adobe Fonts เพื่อให้คุณสามารถใช้แบบอักษรจาก Adobe Fonts โดยไม่ต้องดาวน์โหลดไฟล์แบบอักษรก่อน Divi ไม่รองรับการรวมเข้ากับ Adobe Font ดังนั้น คุณต้องดาวน์โหลดไฟล์ฟอนต์ก่อนจึงจะใช้ฟอนต์จาก Adobe Fonts ได้

เค้าโครง

- เค้าโครงหน้า

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

• ค่าเริ่มต้น: เค้าโครงหน้าเริ่มต้นที่คุณตั้งค่าจากการตั้งค่าไซต์
• Elementor Canvas: เค้าโครงหน้าว่าง ไม่มีส่วนหัวและส่วนท้าย
• Elementor Full-width: คล้ายกับ Elementor Canvas แต่มีส่วนหัวและส่วนท้าย
• ธีม: เทมเพลตหน้าเริ่มต้นของธีมของคุณ

Divi ไม่มีตัวเลือกการตั้งค่าในการตั้งค่าเค้าโครงหน้าจากตัวแก้ไข ใน Divi คอนเทนเนอร์ (ส่วน) จะถูกตั้งค่าเป็นเต็มความกว้างโดยอัตโนมัติ หากคุณต้องการให้เพจของคุณมีขนาดเฉพาะ (เช่น 1200px) คุณสามารถกำหนดขนาดของแถวได้ (คุณสามารถกำหนดความกว้างเริ่มต้นของแถวผ่าน Theme Customizer)

Divi ยังช่วยให้คุณสร้างหน้าเปล่า (ไม่มีส่วนท้ายและแถบด้านข้าง) อย่างไรก็ตาม คุณต้องตั้งค่าผ่านแผงการตั้งค่า Gutenberg แทนแผงการตั้งค่า Divi Builder

– กำหนดตำแหน่งเอง

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

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

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

– Margin & Padding

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

– Z-ดัชนี

ดัชนี Z เป็นคุณสมบัติ CSS ที่ระบุลำดับสแต็กขององค์ประกอบ องค์ประกอบที่มีลำดับสแต็กมากกว่ามักจะอยู่ด้านหน้าองค์ประกอบที่มีลำดับสแต็กที่ต่ำกว่าเสมอ ทั้ง Elementor และ Divi อนุญาตให้คุณตั้งค่าดัชนี z ขององค์ประกอบ

– การจัดตำแหน่ง Flexbox

การจัดตำแหน่งแบบ Flexbox ช่วยให้คุณสามารถจัดแนวและกระจายองค์ประกอบในแต่ละคอลัมน์ภายในส่วนได้ทั้งแนวตั้งและแนวนอน

ใน Elementor คุณสามารถตั้งค่าการจัดตำแหน่งเฟล็กบ็อกซ์จากคอลัมน์การตั้งค่า มีตัวเลือกการตั้งค่าในตัวที่คุณสามารถเลือกได้ดังที่แสดงด้านล่าง:

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

– การวางตำแหน่งแบบอินไลน์

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

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

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

การออกแบบที่ตอบสนอง

– เบรกพอยต์ที่กำหนดเอง

เลย์เอาต์ของหน้าเว็บจะแตกต่างกันไปในแต่ละอุปกรณ์ มันเป็นไปตามขนาดของอุปกรณ์หน้าจอ

ใน Elementor และ Divi คุณสามารถปรับเลย์เอาต์ของการออกแบบของคุณให้เหมาะสมบนอุปกรณ์สามประเภท (เดสก์ท็อป แท็บเล็ต และอุปกรณ์) จะทำอย่างไรถ้าคุณต้องการปรับการออกแบบของคุณให้เหมาะสมสำหรับอุปกรณ์ที่มีขนาดหน้าจอเฉพาะ (เช่น เดสก์ท็อปหน้าจอขนาดใหญ่)

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

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

สำหรับข้อมูลของคุณ ต่อไปนี้คือขนาดหน้าจอของประเภทอุปกรณ์:

• จอกว้าง: 2400px
• เดสก์ท็อป: 1209px
• แล็ปท็อป: 1025px
• แท็บเล็ต: 881px
• มือถือ (สมาร์ทโฟน): 360px

– คอลัมน์ย้อนกลับ

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

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

Divi ยังอนุญาตให้คุณตั้งค่าการย้อนกลับของคอลัมน์ในส่วน อย่างไรก็ตาม คุณต้องจัดการกับโค้ด CSS

– แสดง/ซ่อนองค์ประกอบ

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

การเคลื่อนไหวและการโต้ตอบ

– เอฟเฟกต์การเลื่อน

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

เอฟเฟกต์การเลื่อนสามารถใช้ได้กับส่วน คอลัมน์ และวิดเจ็ต/โมดูล

– เอฟเฟกต์เมาส์

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

มีเอฟเฟกต์เมาส์สองแบบที่คุณสามารถใช้ได้ใน Elementor: Mouse Track และ 3D Tilt

– โฮเวอร์แอนิเมชั่นและการแปลง CSS

ต้องการเพิ่มเอฟเฟกต์ที่เกิดขึ้นเฉพาะเมื่อวางเมาส์ไว้หรือไม่?

Elementor และ Divi มาพร้อมกับเอฟเฟกต์โฮเวอร์ในตัวที่คุณสามารถใช้เพื่อใช้เอฟเฟกต์โฮเวอร์กับส่วน คอลัมน์ และวิดเจ็ต/โมดูล ตัวอย่างเช่น คุณสามารถใช้ระดับความทึบต่างๆ กับรูปภาพในสถานะปกติและสถานะโฮเวอร์ได้ คุณยังสามารถเพิ่มเอฟเฟกต์โฮเวอร์ได้อย่างง่ายดาย เช่น การย่อขนาด การเต้นของชีพจร และอื่นๆ

นอกจากนี้ Elementor และ Divi ยังมาพร้อมกับ CSS Transform ซึ่งคุณสามารถใช้กับทั้งสองสถานะ (ปกติและโฮเวอร์)

– ทางเข้าและออกแอนิเมชั่น

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

– พารัลแลกซ์

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

Divi เสนอเอฟเฟกต์พารัลแลกซ์เพียงรายการเดียว ในขณะที่ Elementor เสนอเอฟเฟกต์พารัลแลกซ์หกรายการดังนี้:

• เลื่อนแนวตั้ง
• เลื่อนแนวนอน
• ความโปร่งใส
• เบลอ
• หมุน
• มาตราส่วน

– เอฟเฟกต์ติดหนึบ

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

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

บรรทัดล่าง

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

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

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