ชุดเทมเพลตรายเดือน #2: สร้างเว็บไซต์ฟิตเนสที่สวยงาม

เผยแพร่แล้ว: 2019-09-03

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

Introducing-Elementor

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

ชุดนี้ฟรี 100% สำหรับผู้ใช้ Elementor Pro ทุกคน และรวมถึง:

  • 7 หน้าเนื้อหา
  • เทมเพลตส่วนหัวและส่วนท้าย
  • เทมเพลตป๊อปอัป
  • เทมเพลต 404
  • เทมเพลตเดียวและเก็บถาวร
  • ~60 ภาพ CC0 ใช้งานฟรี
  • 9 ไอคอนดั้งเดิม
  • 2 แบบฟอร์มการติดต่อที่ออกแบบมาอย่างดี
  • แอนิเมชั่นและเอฟเฟกต์การเคลื่อนไหวที่หลากหลาย

ทำไมต้องใช้ชุดนี้

Why-Use-This-Kit

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

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

ชุดเทมเพลตยิม: การออกแบบที่โดดเด่นและมีชีวิตชีวา

ด้วยชุดแม่แบบรายเดือนของเรา เราต้องการให้แน่ใจว่าเรานำเสนอการออกแบบที่หลากหลายแก่ผู้ใช้ของเรา นี่คือเหตุผลที่เราตัดสินใจเปิดตัวชุดเทมเพลต Gym ซึ่งค่อนข้างแตกต่างจากชุด Digital Agency ก่อนหน้านี้

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

สีนีออนสีฟ้าและสีเหลืองสดใสช่วยในการออกแบบที่โดดเด่น พวกเขายังสอดคล้องกับสีที่นักกีฬามักสวมใส่ในโรงยิมทั่วโลก
การออกแบบตัวอักษรยังเหมาะสมกับการออกแบบของเรา และมีคุณลักษณะ 'Racing Sans One'
การออกแบบที่โดดเด่นและสดใสของชุดอุปกรณ์อาจทำให้ยากต่อการปรับแต่งสำหรับฟิลด์อื่นๆ อย่างไรก็ตาม อาจเหมาะกับหัวข้อต่างๆ เช่น การฝึกสอน โยคะ และพื้นที่อื่นๆ ที่เกี่ยวข้องกับกิจกรรม

เรามาดูสินทรัพย์และดูว่ามีอะไรบ้าง

เทมเพลตโฮมเพจของ The Gym: เอฟเฟกต์พารัลแลกซ์สุดเจ๋ง

Home-page

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

เมื่อคุณเลื่อน รูปภาพจะเคลื่อนที่ในลักษณะที่จำลองการเคลื่อนไหวจริงของเครื่องออกกำลังกาย

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

เพจเกี่ยวกับและผู้ฝึกสอน: สปอตไลท์เกี่ยวกับทีมยิม

gym-about-trainer

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

โรงยิมที่เหมาะสมทุกแห่งควรเน้นย้ำถึงการครอบครองที่มีค่าที่สุด - ผู้ฝึกสอน ในเทมเพลตนี้ เราเน้นที่ Maria Morales ผู้ฝึกสอน TRX ของเรา หน้านี้แสดงทักษะของ Maria โดยใช้แถบความคืบหน้าและรวมตัวเลือกการเรียกร้องให้ดำเนินการอื่นไว้ที่ด้านล่าง

หน้าชั้นเรียนและฟิตเนส: วิธีที่สร้างสรรค์ในการแสดงข้อมูล

Classes

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

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

หน้าราคา ข่าว และการติดต่อ: กรอกหน้า Kit

Blog+Post+contact+pricing

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

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

ก่อนดูแลร่างกาย ดูแลสิ่งที่อยู่ข้างใน (ขออภัยในคำหยาบคาย)

หน้า 404: รูปภาพทำหน้าที่เป็น '0'

หน้านี้แสดงการใช้ภาพหมุนอย่างสร้างสรรค์ ซึ่งวางอย่างสร้างสรรค์ระหว่าง '4' และ '4' ที่ประกอบกันเป็นหน้า 404

ส่วนหัวและส่วนท้าย: คุณไม่ควรพลาดสีนีออนเหล่านั้น

Header+Footer

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

ป๊อปอัป: กล่องเคลื่อนไหวสุดเจ๋ง

หากคุณคลิกลิงก์ เข้าร่วมกับเรา ในส่วนหัว ป๊อปอัปจะปรากฏขึ้น สำหรับชุดนี้ เราออกจากป๊อปอัปแบบปกติแล้วสร้างเลย์เอาต์ที่น่าสนใจยิ่งขึ้นสำหรับการลดราคาช่วงฤดูร้อนของ Gym

วิธีรับชุดอุปกรณ์

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

เทมเพลตใดที่คุณอยากเห็นต่อไป แจ้งให้เราทราบในความคิดเห็นด้านล่าง