Duriza – ภาพรวม Divi Child Theme

เผยแพร่แล้ว: 2021-03-20

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

การติดตั้ง Duriza Divi Child Theme

การติดตั้ง Duriza Divi Child Theme

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

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

เอกสารประกอบให้ข้อมูลเกี่ยวกับการเพิ่มรูปภาพในตาราง การเพิ่มลูกศรลงในเมนูดรอปดาวน์และเมนูด้านข้าง การสร้างเมนูด้านข้าง การเปลี่ยนสี และการสร้างโพสต์บล็อกโดยใช้เค้าโครงไลบรารี

ทั้งหมดนี้ง่ายกว่าเสียงและคำแนะนำก็ง่ายต่อการปฏิบัติตาม แม้ว่าจะใช้เวลาเล็กน้อย

หน้าแรกของธีม Duriza Divi Child

หน้าแรกของธีม Duriza Divi Child

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

หมวดฮีโร่หน้าแรกของ Duriza

หมวดฮีโร่หน้าแรกของ Duriza

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

แผนกบริการหน้าแรกของ Duriza

แผนกบริการหน้าแรกของ Duriza

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

แผนกบริการหน้าแรกของ Duriza

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

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

หน้าแรก Duriza เกี่ยวกับมาตรา

หน้าแรก Duriza เกี่ยวกับมาตรา

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

ส่วนโครงการหน้าแรกของ Duriza

ส่วนโครงการหน้าแรกของ Duriza

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

Duriza หน้าแรก ข้อความรับรองมาตรา

Duriza หน้าแรก ข้อความรับรองมาตรา

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

ส่วนติดต่อหน้าแรก Duriza

ส่วนติดต่อหน้าแรก Duriza

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

Duriza Divi Child Theme เกี่ยวกับเรา Page

Duriza Divi Child Theme เกี่ยวกับเรา Page

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

หน้าบริการธีมเด็ก Duriza Divi

หน้าบริการธีมเด็ก Duriza Divi

หน้าบริการธีมลูก Duriza Divi แสดงบริการภายในประกาศในตาราง ปุ่มต่างๆ เชื่อมโยงไปยังหน้าบริการแต่ละหน้า หน้านี้ยังรวมถึงส่วนการติดต่อจากโฮมเพจ

Duriza Divi Child Theme หน้าบริการเดียว

Duriza Divi Child Theme หน้าบริการเดียว

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

หน้าคำรับรองธีมเด็ก Duriza Divi

หน้าคำรับรองธีมเด็ก Duriza Divi

หน้าคำรับรองธีมลูก Duriza Divi แสดงข้อความรับรองที่สร้างด้วยโมดูลข้อความในส่วนสามคอลัมน์ ดังที่เห็นในตัวอย่างนี้ ซึ่งรวมถึงการจัดระดับดาว ชื่อ รายละเอียด และชื่อ

หน้าโครงการธีมเด็ก Duriza Divi

หน้าโครงการธีมเด็ก Duriza Divi

หน้าโปรเจ็กต์ธีมย่อย Duriza Divi แสดงโปรเจ็กต์ในตารางสามคอลัมน์พร้อมโมดูลข้อความ รูปภาพจะมืดจนกว่าคุณจะวางเมาส์เหนือรูปภาพเหล่านั้น

หน้าโครงการเดี่ยวธีม Duriza Divi สำหรับเด็ก

หน้าโครงการเดี่ยวธีม Duriza Divi สำหรับเด็ก

หน้าโครงการเดี่ยวของธีมย่อย Duriza Divi จะแสดงชื่อโครงการเหนือคำอธิบายพร้อมวันที่ ลูกค้า ประเภท และข้อมูลผู้รับเหมาในรายการทางด้านขวา รูปภาพของโครงการจะปรากฏด้านล่างนี้

หน้าบล็อกธีมเด็ก Duriza Divi

หน้าบล็อกธีมเด็ก Duriza Divi

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

Duriza Divi Child Theme โพสต์เดียว

Duriza Divi Child Theme โพสต์เดียว

โพสต์ในบล็อกสร้างขึ้นด้วย Divi Builder และมีชื่อโพสต์แบบเต็มความกว้าง ข้อความ ความคิดเห็น และแถบด้านข้างทางขวา

Duriza Divi Child Theme โพสต์เดียว

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

หน้าติดต่อธีมเด็ก Duriza Divi

หน้าติดต่อธีมเด็ก Duriza Divi

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

เลย์เอาต์ตัวสร้างธีม Duriza

เลย์เอาต์ตัวสร้างธีม Duriza

เลย์เอาต์ตัวสร้างธีมสำหรับธีมย่อย Duriza Divi ประกอบด้วยส่วนหัวและส่วนท้ายส่วนกลางสำหรับเทมเพลตเริ่มต้น เลย์เอาต์แบบกำหนดเองสำหรับหน้าหมวดหมู่ทั้งหมด และเลย์เอาต์แบบกำหนดเองสำหรับเพจ 404

Duriza Header

Duriza Header

ส่วนหัวประกอบด้วยสองส่วนพร้อมโซเชียลมีเดียและปุ่มสองปุ่มที่ส่วนบนและเมนูที่ส่วนล่าง ส่วนบนสุดมีสองแถว: แถวหนึ่งสำหรับเดสก์ท็อปและอีกแถวสำหรับโทรศัพท์และแท็บเล็ต

Duriza Header

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

Duriza Footer

Duriza Footer

ส่วนท้ายของ Duriza ดูเหมือนวิดเจ็ต แต่สร้างด้วยโมดูลข้อความและตัวแบ่งแทน

Duriza Footer

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

Duriza หน้าหมวดหมู่ทั้งหมด

Duriza หน้าหมวดหมู่ทั้งหมด

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

Duriza 404 หน้า

Duriza 404 หน้า

ส่วนเนื้อหาของหน้า 404 ของ Duriza สร้างขึ้นด้วยโมดูลส่วนหัวแบบเต็มความกว้าง จะแสดงภาพพื้นหลังแบบเต็มหน้าจอพร้อมข้อความและปุ่มในโอเวอร์เลย์

หาซื้อธีม Duriza Divi Child ได้ที่ไหน

หาซื้อธีม Duriza Divi Child ได้ที่ไหน

ซื้อธีมเด็ก Duriza Divi ในตลาด Divi ในราคา $39 และเช่นเคย Duriza มีการใช้งานเว็บไซต์ไม่จำกัด อัปเดต และรองรับเป็นเวลา 1 ปี

จบความคิด

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

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

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