วิธีใช้ชุดเค้าโครง Cyber ​​Monday Bakery สุดพิเศษเพื่อสร้างหน้าสถานที่สำหรับธุรกิจของคุณ

ในปีนี้ การได้รับข้อเสนอ Cyber ​​​​Monday ให้ตัวเองหมายถึงการได้รับของฟรีมากมายเช่นกัน! นอกจากจะได้รับส่วนลด 25% แล้ว ทุกคนที่ซื้อสมาชิก Elegant Themes ใหม่หรืออัปเกรดบัญชีที่มีอยู่ (หรือผู้ที่เป็นสมาชิกตลอดชีพอยู่แล้ว) จะได้รับ 6 แพ็กเลย์เอาต์สุดพิเศษฟรีซึ่งมีให้ดาวน์โหลดในช่วงลดราคา Cyber ​​Monday เท่านั้น

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

ดูภายในชุดเค้าโครงเบเกอรี่ Cyber ​​​​Monday สุดพิเศษ

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

การออกแบบหน้า Landing Page

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

การออกแบบหน้าสูตร

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

การออกแบบหน้าเมนู

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

เกี่ยวกับการออกแบบเพจ

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

ออกแบบหน้าติดต่อ

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

รับแพ็กเลย์เอาต์ Cyber ​​Monday Bakery สุดพิเศษ

ก่อนเข้าสู่กรณีการใช้งานนี้ คุณจะต้องใช้ Exclusive Cyber ​​Monday Bakery Layout Pack ซึ่งคุณจะได้รับจากการเป็นสมาชิก Elegant Themes ใหม่ อัปเกรดบัญชีที่มีอยู่ของคุณ หรือโดยเป็นสมาชิกตลอดชีพกับเราอยู่แล้ว หากคุณเป็นสมาชิกตลอดชีพอยู่แล้ว คุณสามารถเข้าสู่ระบบพื้นที่สมาชิกของเราและดาวน์โหลดชุดเค้าโครงพิเศษทั้งหมดของเราได้ที่นี่ คนอื่นๆ จะต้องใช้ปุ่มด้านล่างเพื่อซื้อหรืออัปเกรดก่อนจึงจะสามารถทำตามบทแนะนำที่เหลือได้

ดาวน์โหลดเค้าโครงพิเศษก่อนที่มันจะหายไป!

เป็นสมาชิกตลอดชีพอยู่แล้ว? คุณสามารถดาวน์โหลดแพ็คได้ทันที ไม่จำเป็นต้องเข้าร่วมการลดราคา Cyber ​​Monday ของเรา!

วิธีใช้ชุดเค้าโครง Cyber ​​Monday Bakery สุดพิเศษเพื่อสร้างหน้าสถานที่สำหรับธุรกิจของคุณ

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

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

ทีนี้มาดูกรณีการใช้งานกัน

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

ในกรณีการใช้งานนี้ ฉันจะแสดงให้คุณเห็นว่าการสร้างหน้าสถานที่แบบมืออาชีพสำหรับธุรกิจของคุณโดยใช้ Bakery Layout Pack นั้นง่ายมากเพียงใด

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

มาเริ่มกันเลย.

เริ่มต้นด้วยการใช้เค้าโครงการติดต่อเพื่อสร้างหน้าสถานที่ของคุณ

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

สร้างเพจใหม่

ขั้นแรก คุณจะต้องสร้างหน้าใหม่และตั้งชื่อ (เช่น "ตำแหน่งของเรา") แล้วคลิกเพื่อใช้ตัวสร้าง Divi จากนั้นจึงสร้างภาพ

โหลดเค้าโครงหน้าติดต่อเบเกอรี่

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

เผยแพร่

การเพิ่มส่วนสำหรับข้อมูลตำแหน่งเฉพาะของคุณ

เราไม่มีเนื้อหามากในหน้าติดต่อที่จะใช้สำหรับสร้างเนื้อหาเพิ่มเติมสำหรับสถานที่เฉพาะของเรา ไปที่หน้า Landing Page ของเบเกอรี่และเลือกแถวจากส่วนที่สองของหน้าและบันทึกลงในห้องสมุด

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

ถัดไป เปลี่ยนเค้าโครงคอลัมน์ของแถวเป็นเค้าโครงสองในสาม หนึ่งในสาม

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

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

สำนักงานใหญ่
เมืองนิวยอร์ก

ตอนนี้ อัปเดตโมดูลรูปภาพในคอลัมน์ด้านขวาเพื่อรวมรูปภาพของที่ตั้งบริษัทของคุณ

สิ่งนี้จะทำหน้าที่เป็นส่วนที่ดีสำหรับคำประกาศตำแหน่งเฉพาะของคุณ

ตอนนี้สิ่งที่คุณต้องทำคือทำซ้ำส่วนนี้เพื่อเพิ่มสถานที่เพิ่มเติม

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

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

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

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

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

คลิกถัดไปเพื่อแก้ไขการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ใต้แท็บเนื้อหา...

สีพื้นหลัง: #ffffff

ภายใต้แท็บออกแบบ...

ช่องว่างภายในที่กำหนดเอง: 5% บน, 5% ขวา, 5% ด้านล่าง, 5% ซ้าย

เงากล่อง: [เลือกเงากล่อง]

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

ยอดเยี่ยม! ตอนนี้ไปที่โมดูลแผนที่

เพิ่มคีย์ Google API ของคุณ

ณ จุดนี้ คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้สร้างคีย์ Google API แล้วเพิ่มลงในตัวเลือกธีม

อัปเดตโมดูลแผนที่ด้วยหมุดตำแหน่งใหม่

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

คลิกเพื่อแก้ไขโมดูลแผนที่และอัปเดตการตั้งค่าดังต่อไปนี้:

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

ชื่อเรื่อง: New York City Bakery
เนื้อหา: ข้อมูลเพิ่มเติม
แผนที่ Pin ที่อยู่: New York City

คลิกปุ่มค้นหา

จากนั้นเพิ่มพินใหม่และอัปเดตการตั้งค่าดังนี้:

ชื่อเรื่อง: San Francisco Bakery
เนื้อหา: ข้อมูลเพิ่มเติม
ที่อยู่พินแผนที่: San Francisco

คลิกปุ่มค้นหา

จากนั้นเพิ่มพินใหม่และอัปเดตการตั้งค่าดังนี้:

ชื่อเรื่อง: Houston Bakery
เนื้อหา: ข้อมูลเพิ่มเติม
แผนที่พินที่อยู่: Houston, TX

คลิกปุ่มค้นหา

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

เพิ่ม Anchor Links ไปยัง Pin Content Boxes

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

เปิดการตั้งค่าโมดูลแผนที่แล้วแก้ไขการตั้งค่าพินแรก เน้นข้อความในกล่องเนื้อหาที่อ่านว่า "ข้อมูลเพิ่มเติม" จากนั้นคลิกไอคอนลิงก์เพื่อสร้างเป็นลิงก์ สำหรับ URL ให้ป้อน “#newyork” แล้วคลิกตกลง

ทำสิ่งเดียวกันกับพินซานฟรานซิสโก (ใช้ url “#sanfran”) และพินฮูสตัน (ใช้ url “#houston”)

ตอนนี้ สิ่งที่คุณต้องทำคือเพิ่ม CSS ID ที่กำหนดเองให้กับแต่ละส่วนของคุณ ซึ่งจะสอดคล้องกับ URL ของลิงก์ที่คุณเพิ่งสร้างขึ้นในพิน

สำหรับส่วน "นิวยอร์กซิตี้" ให้อัปเดตการตั้งค่าส่วนในแท็บขั้นสูงด้วย CSS ID "newyork" และบันทึกการตั้งค่าของคุณ

ตอนนี้เมื่อผู้ใช้คลิกลิงก์ "ข้อมูลเพิ่มเติม" (ที่มี url #newyork) ในหมุด New York หน้าจะกระโดดลงไปที่ส่วนนั้น

ทำเช่นเดียวกันสำหรับส่วนซานฟรานซิสโก (ใช้ CSS ID “sanfran”) และส่วนฮูสตัน (ใช้ CSS ID “houston”)

แค่นั้นแหละ. คุณทำเสร็จแล้ว!