ดาวน์โหลดเค้าโครงหน้าแรกฟรีสำหรับมหาวิทยาลัยและวิทยาลัย

เผยแพร่แล้ว: 2017-05-08

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

เค้าโครงมหาวิทยาลัยและวิทยาลัย

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

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

เค้าโครงหน้าแรกฟรีที่คุณสามารถดาวน์โหลดได้ทันทีมีลักษณะดังนี้:

สมัครสมาชิกช่อง Youtube ของเรา

ดาวน์โหลดแผนผังมหาวิทยาลัยและวิทยาลัย

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

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


ดาวน์โหลด The Layout Pack

ภาพถ่ายทั้งหมดได้รับความอนุเคราะห์จากผู้เขียนที่ใจดีใน Unsplash.com ผ่าน Unsplash License Layout Packs เผยแพร่ภายใต้ GPL ซึ่งหมายความว่าคุณสามารถใช้ได้ฟรีสำหรับทั้งโครงการส่วนตัวและเชิงพาณิชย์! การใช้ ElegantThemes.com และผลิตภัณฑ์ของเราแสดงว่าคุณยอมรับข้อกำหนดในการให้บริการของเรา

ดาวน์โหลดฟรี

ดาวน์โหลดฟรี

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

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

มีอะไรอยู่ใน ZIP?

คุณจะได้รับไฟล์ต่อไปนี้เมื่อดาวน์โหลดเค้าโครงฟรี:

  • university-college-master-layout.json – การนำเข้าไฟล์นี้จะเพิ่มเลย์เอาต์แบบเต็มและทุกส่วนไปยังไลบรารี Divi ของคุณ
  • university-college-full-layout.json – นี่เป็นเพียงเลย์เอาต์ของมหาวิทยาลัยและวิทยาลัยแบบเต็ม
  • โฟลเดอร์ส่วน – โฟลเดอร์นี้ประกอบด้วยไฟล์ JSON ทั้งหมดสำหรับเจ็ดส่วนแต่ละส่วนของเค้าโครงมหาวิทยาลัยและวิทยาลัย

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

การตั้งค่าเค้าโครงมหาวิทยาลัยและวิทยาลัย

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

ไปที่ Divi > Divi Library > Import & Export > Import > Select the University & College master file

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

ห้องสมุด Divi (สัญลักษณ์ “+” ที่ส่วนหน้า) > เพิ่มจากห้องสมุด > มหาวิทยาลัยและวิทยาลัย

หลังจากเลือกเลย์เอาต์ของมหาวิทยาลัยและวิทยาลัยสำหรับเพจของคุณแล้ว คุณจะเห็นว่าเลย์เอาต์นั้นจะปรากฏขึ้นบนเพจใน Divi Builder

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

ไปที่ การตั้งค่า > การอ่าน > หน้าแรก > เลือกเพจที่คุณเพิ่งสร้างขึ้น

การใช้เค้าโครง

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

หมวดฮีโร่

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

แผนกนับจำนวน

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

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

บทนำ

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

สาขาวิชาภาคการศึกษา

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

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

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

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

ส่วนนักศึกษา

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

ส่วนแบบฟอร์มการติดต่อ

เราใช้รูปภาพทั่วทั้งเว็บไซต์มากพอ เราจึงตัดสินใจรักษาแบบฟอร์มการติดต่อให้สะอาดและเรียบง่าย

ส่วนท้าย

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

ห่อ

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

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

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