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

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราใหม่

พื้นหลังไล่โทนสี

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

• สี 1: #2e1b8f
• สี 2: #ffffff
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 53.3%
• ตำแหน่งสุดท้าย: 53.3%

ระยะห่าง

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

• ขอบบน: 100px
• ขอบล่าง: 100px
• Padding ซ้าย: 26vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 0vw (โทรศัพท์)
• Padding ขวา: 22.8vw (เดสก์ท็อป), 11.4vw (แท็บเล็ต), 0vw (โทรศัพท์)

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

คอลัมน์ 2 สีพื้นหลัง

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

• คอลัมน์ 2 สีพื้นหลัง: #f7f7f7

คอลัมน์ 3 สีพื้นหลัง

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

• คอลัมน์ 3 สีพื้นหลัง: #f7f7f7

ขนาด

ไปที่แท็บออกแบบถัดไปแล้วเปิดการตั้งค่าการปรับขนาด ที่นี่ เราจะลบช่องว่างเริ่มต้นทั้งหมดระหว่างคอลัมน์

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

แสดง

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

display: flex;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เลือกไอคอน

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เริ่มต้นด้วยโมดูล Blurb ในคอลัมน์ 1 แล้วเลือกไอคอนที่คุณต้องการ

พื้นหลังไล่โทนสี

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

• สี 1: #5000ff
• สี 2: rgba(41,196,169,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 28%
• ตำแหน่งสุดท้าย: 28%

การตั้งค่าไอคอน

ดำเนินการต่อโดยไปที่แท็บออกแบบและแก้ไขการตั้งค่าไอคอน

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้แบบอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 22px

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 10px

ชายแดน

และเพิ่มเส้นขอบด้านล่างที่ละเอียดอ่อนเพื่อสิ้นสุดการออกแบบโมดูล Blurb

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #ffffff
• รูปแบบเส้นขอบด้านล่าง: ประ

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความตามนั้น:

• แบบอักษรของข้อความ: Didact Gothic
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #ffffff

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

ต่อคอลัมน์ที่สอง! ที่นี่โมดูลเดียวที่เราต้องการคือโมดูลข้อความ ป้อนเนื้อหาที่คุณเลือก

สีพื้นหลัง

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

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

การตั้งค่าข้อความ

เรากำลังเปลี่ยนลักษณะที่ปรากฏของเนื้อหาของเราโดยแก้ไขการตั้งค่าข้อความในแท็บการออกแบบ

• แบบอักษรข้อความ: Source Serif Pro
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 13px
• การวางแนวข้อความ: ศูนย์

ขนาด

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

• ความกว้าง: 60%
• การจัดตำแหน่งโมดูล: ซ้าย

ระยะห่าง

ต่อไปเราจะเพิ่มค่าการเติมที่กำหนดเอง

• ช่องว่างภายในด้านบน: 57px
• ช่องว่างภายในด้านล่าง: 57px
• ช่องว่างภายในด้านซ้าย: 20px
• ช่องว่างภายในด้านขวา: 20px

กล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.23)

เพิ่มโมดูลข้อความในคอลัมน์ 3

เพิ่มเนื้อหา

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

การตั้งค่าข้อความ

ไปที่แท็บออกแบบของโมดูลข้อความและแก้ไขการตั้งค่าข้อความ

• แบบอักษรข้อความ: Source Serif Pro
• สีข้อความ: #a8a8a8
• ขนาดตัวอักษร: 12px

การตั้งค่าข้อความ H3

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าข้อความ H3 ด้วย

• หัวข้อ 3 แบบอักษร: Didact Gothic
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 ขนาดข้อความ: 17px

ระยะห่าง

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

• ขอบบน: 35px
• ระยะขอบซ้าย: -80px (เดสก์ท็อป), -50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 20px

โคลนแถวสองครั้ง

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

เปลี่ยนไอคอน

เปลี่ยนไอคอนของแต่ละรายการที่ซ้ำกัน

แก้ไขเนื้อหาและลิงก์

พร้อมเนื้อหาและลิงค์ที่เกี่ยวข้อง เสร็จแล้ว!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กัน

ความคิดสุดท้าย

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