ในการสร้างเว็บเพจด้วย Elementor สิ่งสำคัญอย่างยิ่งคือการวางโครงสร้างพื้นฐานของเว็บเพจ นี่คือโครงสร้างพื้นฐานที่ทุกเว็บเพจจะมี บางครั้ง ความต้องการเฉพาะของคุณอาจทำให้คุณต้องการเทมเพลตเว็บเพจ 2-4 แบบ สำหรับแต่ละแบบ คุณจะต้องนั่งลงและวางแผนโครงสร้างพื้นฐานอย่างรอบคอบ ใช้เวลาให้คุ้มค่าและทำให้ถูกต้อง เพราะถ้าคุณวางรากฐานที่ถูกต้องตั้งแต่เริ่มต้น เว็บเพจของคุณจะไม่พังทลาย! มันจะช่วยลดปัญหาปวดหัวจากการแก้ไขปัญหาในภายหลังได้มาก
ดังนั้น การวางโครงสร้างให้ถูกต้องนั้น หมายถึงการวางแผนโครงสร้างของหน้าเว็บ จะมีชื่อหน้าเว็บหรือไม่ (โดยปกติจะมี)? แล้วจะมีหัวข้อย่อยหรือหมวดหมู่ย่อยหรือไม่? จะมีส่วนดาวน์โหลดหรือไม่? หัวข้อหลักของเนื้อหาจะเป็นอย่างไร? แล้วเนื้อหาหลักล่ะ?
เมื่อพิจารณาองค์ประกอบแต่ละอย่าง คุณต้องหาคำตอบให้ได้สามสิ่ง
- ตัวอักษรจะเป็นสีอะไร
- ตัวอักษรจะตั้งค่าอย่างไร (ขนาด น้ำหนัก ฯลฯ)
- และคุณจะต้องตั้งค่าเหล่านี้สำหรับทั้งเดสก์ท็อป แท็บเล็ต และโทรศัพท์มือถือ (มิฉะนั้นการตั้งค่าเดสก์ท็อปจะดูผิดเพี้ยนบนโทรศัพท์มือถือ) อย่าลืมว่าปัจจุบันคนส่วนใหญ่ใช้งานเว็บผ่านโทรศัพท์และแท็บเล็ต! ดังนั้น – คุณต้องทำสิ่งนี้ ใช่ มันเป็นงานที่ยาก แต่คุณต้องทำเพียงครั้งเดียวเท่านั้น
และ Elementor ช่วยให้คุณทำเช่นนี้ได้ง่ายขึ้นด้วยสิ่งที่เรียกว่า ฟอนต์สากล (GLOBAL FONTS) และสีสากล (GLOBAL COLOURS) โดยพื้นฐานแล้ว คุณสามารถตั้งค่าสีสากลสำหรับหัวเรื่องของทุกหน้าได้ จากนั้นคุณสามารถตั้งค่าฟอนต์สากลสำหรับหัวเรื่องของทุกหน้าได้ ซึ่งมีข้อดีสองประการ...
- คุณไม่จำเป็นต้องเสียเวลาตั้งค่าแบบอักษรและสีของแต่ละส่วน (เช่น หัวเรื่อง) ในหน้าเว็บ เพราะแบบอักษรและสีโดยรวมจะจัดการให้คุณเอง
- หากในอนาคตคุณต้องการเปลี่ยนสี เช่น สีของหัวเรื่องในทุกหน้าเว็บ คุณก็แค่เปลี่ยนการตั้งค่าในส่วน "สีโดยรวม" แทนที่จะต้องไปเปลี่ยนทีละหน้าในเว็บไซต์ของคุณ ลองนึกภาพเว็บไซต์อย่างเว็บไซต์ที่คุณกำลังอ่านอยู่นี้ดูสิ มีมากกว่า 300 หน้า ลองนึกภาพดูว่าคุณจะประหยัดเวลาได้มากแค่ไหนจากการเปลี่ยนสีทุกหน้าเพียงแค่ในส่วนเดียว!
นี่คือการตั้งค่าสำหรับเว็บไซต์นี้ของฉัน หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Global Fonts และ Global Colours ก่อน ให้พิมพ์ “Elementor Global Fonts Colours” ลงใน YouTube ฉันสร้างหน้านี้ไว้เป็นข้อมูลอ้างอิงสำหรับตัวฉันเองในอนาคต และคุณอาจต้องการทำสิ่งที่คล้ายกันสำหรับเว็บไซต์ของคุณ
DT = เดสก์ท็อป
TAB = ยาเม็ด
PH = โทรศัพท์
เช่น DT หมายถึงDesktop : 37, 400, LS -2.5, ขีดเส้นใต้ = ขนาดตัวอักษร 37, น้ำหนัก ตัวอักษร 400 , ระยะห่างระหว่างบรรทัด LS , ขีดเส้นใต้เป็นเพียงการตกแต่ง LH = ความสูงของบรรทัด WS = ระยะห่างระหว่างคำ
หมวดหมู่ เช่น จริยธรรม
สี #0097FD
แบบอักษร: Courier Prime
DT : 27, 400, LS -2.5, ขีดเส้นใต้
TAB: 27, 400, LS -2.5, ขีดเส้นใต้
PH: 17, 400, LS -2.5, ขีดเส้นใต้
หมวดหมู่ย่อย เช่น สุขภาพของโลก
สี #F94A00
ฟอนต์: โรโบโต
DT : 35,600
แท็บ: 35, 600
PH: 25, 600
ชื่อเรื่อง เช่น การปฐมนิเทศ
สี # F94A00
ฟอนต์: โรโบโต
DT : 35, 600, ขีดเส้นใต้
แท็บ: 35, 600, ขีดเส้นใต้
PH: 23, 600, ขีดเส้นใต้
คำบรรยายย่อย เช่น ทุกสิ่งที่คุณอยากรู้
สี #0097FD
แบบอักษร: Courier Prime
DT : 17, 400, LS -2.5
TAB: 17, 400, LS -2.5
PH: 14,400, LS -2.5
ดาวน์โหลด
สีกล่อง = #DDDDDD
ขอบ: ทึบ, ความกว้าง 1 1 1 1, รัศมีขอบ 5 5 5 5
สีตัวอักษร #35C3FF
แบบอักษร: Lato
DT : 35,600
แท็บ: 16, 500
PH: 16, 500
เว็บลิงค์
สี #24B72F
การตั้งค่าแบบอักษร DT, TAB, PH: เหมือนกับในส่วนดาวน์โหลดทางด้านซ้าย
แถบ Swimlane และข้อความ
กล่องสีม่วง รหัสสี #610071
สีตัวอักษร: #FFFFFF
แบบอักษร: Ubuntu Condensed
DT : 35,600
TAB: 27,600
PH: 20,600
เนื้อหาหลัก
สี #333333
แบบอักษร: Lato, 15, 400, LH 24
ข้อความจะปรากฏดังนี้…
Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.