วิธีสร้างหน้าแกลลอรี่งานแต่งงานด้วย Divi

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

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

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

เราจะแสดงให้คุณเห็นทีละขั้นตอนในการสร้างเค้าโครงต่อไปนี้ด้วยเครื่องมือสร้างภาพของ Divi:

เลย์เอาต์นี้ประกอบด้วย 6 ส่วนที่ช่วยให้คุณสร้างหน้าแกลเลอรีแบบโต้ตอบและสวยงามได้

หมวดฮีโร่

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

สร้างเพจ

เริ่มต้นด้วยการสร้างเพจ โดยใช้ตัวสร้าง Divi และสลับไปยัง Visual Builder

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

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

โมดูลข้อความ

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

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

การวางแนวข้อความ: ศูนย์
แบบอักษรของข้อความ: ส้มเขียวหวาน
ขนาดตัวอักษรของข้อความ: 90p (เดสก์ท็อป), 80 (แท็บเล็ต), 66 (โทรศัพท์)
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1.7em

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

คลิกบันทึกและออก

เจ้าสาวและเจ้าบ่าว

ต่อจากนี้ไป คุณจะต้องสร้างส่วนที่มีภาพเจ้าสาวและเจ้าบ่าวสองภาพ

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

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

เป็นอีกครั้งที่คุณสามารถเลือกวิธีง่ายๆ และเขียน 'Custom Width' ลงในแถบค้นหา

รูปเจ้าสาว

เพิ่ม Image Module ในคอลัมน์แรกของแถว อัปโหลดรูปภาพของเจ้าสาวในแท็บเนื้อหาภายใต้หมวดหมู่ย่อยของรูปภาพและไปที่แท็บขั้นสูง คลิกที่หมวดหมู่ย่อย CSS ที่กำหนดเองและเพิ่มบรรทัดโค้ดต่อไปนี้ลงในฟิลด์องค์ประกอบหลัก:

border: 10px double #9b857b;

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

กดบันทึกและออก

รูปเจ้าบ่าว

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

ขอบคุณหมายเหตุ

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

ในการเริ่มต้น ให้เพิ่มส่วนมาตรฐานใหม่ให้กับเลย์เอาต์ของคุณ ภายในส่วน ให้ใช้แถวเต็มความกว้าง

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

โมดูลข้อความแรก

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

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

การวางแนวข้อความ: ศูนย์
แบบอักษรของข้อความ : ส้มเขียวหวาน
ขนาดตัวอักษรของข้อความ: 70 (เดสก์ท็อปและแท็บเล็ต), 50 (โทรศัพท์)
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1em

ตอนนี้ เลือกหมวดหมู่ย่อยการเว้นวรรคในแท็บเดียวกันและเปลี่ยนระยะขอบด้านล่างเป็น '5%'

คลิกที่บันทึกและออก

โมดูลข้อความที่สอง

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

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

การวางแนวข้อความ: Justified
แบบอักษรของข้อความ: Raleway Light
รูปแบบข้อความ: ตัวหนา
ขนาดตัวอักษรของข้อความ: 14
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1.6em

คลิกที่บันทึกและออกและคุณก็พร้อมแล้ว นี่คือสิ่งที่หน้าแกลเลอรีของคุณควรมีลักษณะดังนี้:

ส่วนรูปภาพโปรด

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

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐาน ภายในส่วนมาตรฐานนั้น คุณจะต้องมีแถวเต็มความกว้าง เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลังเป็น '#9b857b' ในหมวดหมู่ย่อยพื้นหลังของแท็บเนื้อหา

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

การวางแนวข้อความ: ศูนย์
แบบอักษรของข้อความ: ส้มเขียวหวาน
ขนาดตัวอักษรของข้อความ: 100 (เดสก์ท็อปและแท็บเล็ต), 68 (โทรศัพท์)
สีข้อความ: #fffaf6
ความสูงของบรรทัดข้อความ: 1.6em

คลิกบันทึกและออก

รูปภาพโพลารอยด์ (เดสก์ท็อป)

สำหรับส่วนนี้ คุณจะต้องใช้ส่วนมาตรฐานอื่น ภายในส่วนนั้น คุณจะต้องมีแถวที่มี 4 คอลัมน์ เปลี่ยนสีพื้นหลังของส่วนนี้เป็น '#fae4de' ในแท็บเนื้อหาภายใต้หมวดหมู่ย่อยพื้นหลัง

ดำเนินการเพิ่ม Image Module ในคอลัมน์แรกของแถว เปิดการตั้งค่าของรูปภาพและอัปโหลดหนึ่งในรูปภาพโปรดภายในหมวดหมู่ย่อยรูปภาพของแท็บเนื้อหา

ถัดไป ไปที่แท็บขั้นสูง คลิกที่หมวดหมู่ย่อย CSS ID & Classes แล้วพิมพ์ 'โพลารอยด์' ลงในฟิลด์ CSS Class ในฟิลด์องค์ประกอบหลัก เพิ่มรหัสต่อไปนี้:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

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

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

หลังจากนั้น คุณสามารถกลับไปที่ Visual Builder คุณจะต้องมีภาพโพลารอยด์มากกว่าหนึ่งภาพ นั่นคือเหตุผลที่คุณควรโคลนโมดูลภาพ 7 ครั้ง และตรวจสอบให้แน่ใจว่าคุณใส่ไว้ในคอลัมน์ต่างๆ ทุกคอลัมน์ควรมีโมดูลรูปภาพ 2 โมดูล

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

ขึ้นอยู่กับหมายเลขที่กำหนด เปลี่ยนรหัสในฟิลด์องค์ประกอบหลักตามลำดับ คุณสามารถค้นหาองค์ประกอบหลักในแท็บขั้นสูงภายใต้หมวดหมู่ย่อย CSS ที่กำหนดเอง เพิ่มค่าให้กับฟิลด์ Custom Margin ในหมวดย่อย Spacing ของแท็บ Design ด้วย:

รูปภาพ 1

นี่เป็นโมดูลรูปภาพแรกที่คุณสร้างขึ้น รักษาไว้อย่างนั้น

ภาพที่2

ระยะขอบที่กำหนดเอง:
ด้านบน: -10%
ซ้าย: -20%

องค์ประกอบหลัก:

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

ภาพที่ 3

ระยะขอบที่กำหนดเอง:
ซ้าย: -20%

องค์ประกอบหลัก:
ไม่มี

ภาพที่ 4

ระยะขอบที่กำหนดเอง:
ด้านบน: -10%
ซ้าย: -20%

องค์ประกอบหลัก:

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

ภาพที่ 5

ระยะขอบที่กำหนดเอง:
ไม่มี

องค์ประกอบหลัก:

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

ภาพที่ 6

ระยะขอบที่กำหนดเอง:
ด้านบน: -10%
ซ้าย: -20%

องค์ประกอบหลัก:

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

ภาพที่ 7

ระยะขอบที่กำหนดเอง:
ซ้าย: -20%

องค์ประกอบหลัก:

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

ภาพที่ 8

ระยะขอบที่กำหนดเอง:
ด้านบน: -10%
ซ้าย: -20%

องค์ประกอบหลัก:

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

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

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

รูปภาพโปรด (แท็บเล็ตและโทรศัพท์)

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

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

หลังจากทำการเปลี่ยนแปลงทั้งหมดแล้ว เลย์เอาต์ของคุณควรมีลักษณะดังนี้บนเดสก์ท็อป:

แกลลอรี่ตามนามสกุล (เดสก์ท็อป)

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

รายชื่อ

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

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

การวางแนวข้อความ: ศูนย์
แบบอักษรของข้อความ: ส้มเขียวหวาน
ขนาดตัวอักษรของข้อความ: 100 (เดสก์ท็อปและแท็บเล็ต), 68 (โทรศัพท์)
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1.6em

เลื่อนลงมาที่แท็บเดิมและเปลี่ยนระยะขอบด้านบนเป็น '2%' และระยะขอบด้านล่างเป็น '5%' ในหมวดย่อยการเว้นวรรค

คลิกบันทึกและออก ตอนนี้ เพิ่มแถวอื่น ในกรณีนี้คือสามคอลัมน์ ในแท็บออกแบบของการตั้งค่าแถว ให้เปลี่ยนระยะขอบด้านล่างเป็น '5%' ภายในหมวดหมู่ย่อยการเว้นวรรค

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

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

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

การวางแนวข้อความ: ขวา
แบบอักษรของข้อความ: Raleway Light
รูปแบบข้อความ: ตัวหนา
ขนาดตัวอักษรข้อความ: 20
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1.6em

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

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

แกลลอรี่ตามนามสกุล (แท็บเล็ตและโทรศัพท์)

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

ทำซ้ำแบบเดียวกับที่เราทำในแถวก่อนหน้าโดยคลิกที่ไอคอนลิงก์และเขียน '#' + ชื่อในช่อง URL

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

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

ส่วนแกลลอรี่ (เดสก์ท็อป)

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

ขั้นแรก เพิ่มส่วนมาตรฐาน เปลี่ยนสีพื้นหลังเป็น '#fae4de' ภายในหมวดหมู่ย่อยพื้นหลังของแท็บเนื้อหา

ต่อไป เพิ่มแถวแบบนี้:

ภายในส่วนของแถว ให้ใช้ Custom Width ไปที่แท็บ Design เลือกและเปลี่ยน Custom Width เป็น '60%' ภายในหมวดหมู่ย่อย Sizing

จากนั้นไปที่แท็บออกแบบและเปลี่ยนระยะขอบด้านบนและด้านล่างเป็น '5%'

โมดูลข้อความ

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

การจัดตำแหน่งข้อความ: กึ่งกลาง
แบบอักษรของข้อความ: ส้มเขียวหวาน
ขนาดตัวอักษรข้อความ: 60
สีข้อความ: #9b857b
ความสูงของบรรทัดข้อความ: 1.6em

เลื่อนลงไปที่แท็บเดิมและเปลี่ยนระยะขอบด้านบนเป็น '20%' ภายในหมวดหมู่ย่อยการเว้นวรรค

ไปที่แท็บขั้นสูง ในฟิลด์ CSS ID ของหมวดหมู่ย่อย CSS ID & Classes คุณจะต้องเชื่อมโยงลิงก์สมอที่คุณได้ทำไว้ด้านบนกับโมดูลข้อความ ดังนั้น หากลิงก์สมอแรกในรายการคือ '#adams' คุณจะต้องกรอก 'adams' ตรวจสอบให้แน่ใจว่า ID นั้นเหมือนกับที่คุณเชื่อมโยงกับชื่อในรายการที่คุณเคยทำมาก่อน

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

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

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

องค์ประกอบหลัก:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;

โอเวอร์เลย์:

-webkit-filter: brightness(0%);

คลิกที่บันทึกและออก

ตอนนี้ไปข้างหน้าและโคลนส่วน เปลี่ยนโครงสร้างคอลัมน์เป็นแบบต่อไปนี้และสลับตำแหน่งระหว่างโมดูลข้อความและโมดูลแกลเลอรี:

เปลี่ยนรูปภาพในแกลเลอรี นามสกุลที่กล่าวถึงในกล่องข้อความ และ Class ID ส่วนนี้มีสีพื้นหลังอื่นเช่นกัน '#fffaf6'.

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

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

ส่วนแกลลอรี่ (มือถือ)

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

จากนั้นเปิดตัวเลือกโมดูลข้อความ ไปที่แท็บออกแบบและเอาระยะขอบด้านบนออกในประเภทย่อยการเว้นวรรค ถัดไป ไปที่แท็บขั้นสูงแล้วเปลี่ยน CSS ID ในหมวดหมู่ย่อย CSS ID & Classes เป็น 'avery1' รหัสนี้เป็นรหัสเดียวกับในรายการที่ใช้กับแท็บเล็ตและโทรศัพท์

แค่นั้นแหละ. เลย์เอาต์ของคุณควรมีลักษณะเหมือนกับที่เราสร้างขึ้นและแสดงให้คุณเห็นในตอนต้นของบล็อกโพสต์นี้:

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!