WordPress Shape Divider: เชี่ยวชาญศิลปะการแยกส่วน

เผยแพร่แล้ว: 2023-07-26

คุณกำลังพยายามสร้างหน้าเว็บที่ดีขึ้นเพื่อโฆษณาหรือแสดงเนื้อหา บริการ และผลิตภัณฑ์ของคุณหรือไม่ สิ่งหนึ่งที่อาจสะดวกคือองค์ประกอบที่นำเสนอโดย PostX – Shape Divider

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

แต่จะแยกส่วนโดยใช้ตัวแบ่งรูปร่างได้อย่างไร

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

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

วิธีการใช้ตัวแบ่งรูปร่าง WordPress?

ตอนนี้ได้เวลาอธิบายคำแนะนำทีละขั้นตอนเกี่ยวกับการใช้ Shape Divider PostX มีตัวแบ่งส่วนเว็บไซต์แบบมัลติฟังก์ชั่น ดังนั้น หากคุณไม่ได้ใช้ PostX ให้ติดตั้งและเปิดใช้งาน PostX

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

ขั้นตอนที่ 1: เข้าสู่ระบบและสร้างโพสต์/เพจ

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

add new page
เพิ่มหน้าใหม่

ขั้นตอนที่ 2: เพิ่มบล็อกแถว-คอลัมน์

ตอนนี้คลิกปุ่ม "+" แล้วช่องค้นหาจะปรากฏขึ้นเพื่อเพิ่มบล็อก จากนั้นในช่องค้นหา ให้พิมพ์ "แถว" แล้วคุณจะเห็นไอคอนบล็อกแถว-คอลัมน์ พิจารณาภาพต่อไปนี้หากคุณต้องการคำชี้แจง

add row column block
เพิ่มบล็อกแถวคอลัมน์

ขั้นตอนที่ 3: เลือกเทมเพลตใดก็ได้

ตอนนี้คุณจะถูกขอให้เลือกเลย์เอาต์ใดๆ มีรูปแบบที่ตั้งไว้ล่วงหน้า 10 แบบ เลือกรายการใดรายการหนึ่งตามที่คุณต้องการ ฉันจะไปกับเค้าโครง 70:30

choose any layout
เลือกรูปแบบใดก็ได้

ขั้นตอนที่ 4: เลือกการตั้งค่าตัวแบ่งรูปร่าง

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

open shape divider option
ตัวเลือกตัวแบ่งรูปร่างเปิด

ขั้นตอนที่ 5: สำรวจการตั้งค่าตัวแบ่งรูปร่าง

ตอนนี้เรากำลังเข้าสู่ส่วนหลัก หลังจากเลือกปุ่ม “ตัวแบ่งรูปร่าง” คุณจะพบตัวเลือกการตั้งค่าต่างๆ ข้างใต้

explore shape divider setting
สำรวจการตั้งค่าตัวแบ่งรูปร่าง

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

1. ตำแหน่งและประเภท

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

types of shape dividers
ประเภทของเส้นแบ่งรูปร่าง

คุณสามารถเลือกหนึ่งในนั้นเพื่อออกแบบเพจของคุณ ลองสำรวจบางส่วนของพวกเขา

หากคุณเลือกค่าที่ตั้งไว้ล่วงหน้าที่ 1 มันจะปรากฏเป็น:

1st preset
ตั้งค่าล่วงหน้าที่ 1

หากคุณเลือกค่าที่ตั้งไว้ล่วงหน้าที่ 3 ค่านั้นจะปรากฏเป็น:

3rd preset
การตั้งค่าล่วงหน้าครั้งที่ 3

และหากคุณเลือกค่าที่ตั้งไว้ล่วงหน้าล่าสุด จะปรากฏเป็น:

last preset
ที่ตั้งไว้ล่วงหน้า

2. สี

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

คุณจะพบตัวเลือกสีทึบต่างๆ เมื่อคุณเลือกการตั้งค่าสี "ทึบ" เลือกหนึ่งในนั้น หรือคุณสามารถคลิกตัวเลือกสี (ไอคอนแปรง) เพื่อเปิดจานสีและเลือกสีที่คุณต้องการ ไปกับสีฟ้าและดูว่าเป็นอย่างไร:

choose desired color
เลือกสีที่ต้องการ

ตอนนี้ เรามาตั้งค่าการไล่ระดับสีกัน และเช่นเดียวกับก่อนหน้านี้ คุณจะพบสีแบบไล่ระดับสี ฉันได้เลือกสี "Juicy Cake" แล้ว และนี่คือลักษณะที่ปรากฏ:

gradient color
สีไล่ระดับสี

3. ความกว้างและความสูง

ตัวเลือกถัดไปที่คุณจะพบคือความกว้างและความสูง คุณสามารถเปลี่ยนความกว้างและความสูงได้ตามความต้องการของคุณ ตัวอย่างเช่น ลองใช้ “ความกว้าง 100 และความสูง 500” แล้วดูว่ารูปร่างเป็นอย่างไร –

adjust width and height
ปรับความกว้างและความสูง

4. พลิก นำไปด้านหน้า และชดเชย

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

มีตัวเลือกที่เรียกว่า "พลิก" โดยค่าเริ่มต้น จะปิดใช้งาน หากคุณเปิดใช้งาน รูปร่างจะพลิกตำแหน่ง นี่คือลักษณะที่ปรากฏ

flip the shape divider
พลิกตัวแบ่งรูปร่าง

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

disable bring to front option
ปิดใช้งานตัวเลือกนำไปด้านหน้า

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

enable bring to front option
เปิดใช้งานตัวเลือกนำไปด้านหน้า

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

การใช้ตัวแบ่งรูปร่างในทางปฏิบัติ

เมื่อคุณเข้าใจกระบวนการใช้ Shape Divider แล้ว คราวนี้เราจะอธิบายอย่างตรงไปตรงมาและแนะนำคุณในการสร้างโปรเจ็กต์ใดๆ โดยใช้ Shape Divider ที่ขับเคลื่อนโดย PostX

ขั้นตอนที่ 1: สร้าง Row Blok และเพิ่มเลือกเค้าโครง 70:30

ในหัวข้อที่แล้วเกี่ยวกับ “วิธีใช้ตัวแบ่งรูปร่าง” เราได้แสดงวิธีเพิ่มบล็อกแถวของ PostX และเลือกเค้าโครง เพียงทำตามขั้นตอนที่ 1, 2 และ 3 ของ “วิธีใช้ตัวแบ่งรูปร่าง” ส่วนและขั้นตอนนี้จะทำ

ขั้นตอนที่ 2: เลือกปุ่มหัวข้อ

ตอนนี้คลิกที่บล็อกแรกและเพิ่มบล็อก "ส่วนหัว" ของ PostX ในหัวเรื่อง เราจะเพิ่มสิ่งที่เกี่ยวข้องกับโรงยิมในไมอามี

add heading block
เพิ่มบล็อกหัวเรื่อง

ขั้นตอนที่ 3: เพิ่มย่อหน้าและปุ่มใต้หัวข้อ

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

add paragraph block
เพิ่มบล็อกย่อหน้า

ตอนนี้เพิ่มปุ่มใต้หัวข้อ เพื่อสิ่งนั้น ให้ค้นหาปุ่มและเพิ่มเข้าไป

add button block
เพิ่มบล็อกปุ่ม

ตอนนี้ ออกแบบด้วยสีและข้อความเฉพาะ ตรวจสอบสิ่งที่เราทำ

ขั้นตอนที่ 4: เพิ่มรูปภาพ

ตอนนี้ในบล็อกว่างทางด้านขวา เราจะเพิ่มภาพโรงยิมที่เตะตาเพื่อให้ดูเป็นมืออาชีพ

add image
ใส่รูปภาพ

ขั้นตอนที่ 5: เพิ่มตัวแบ่งรูปร่างและออกแบบ

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

final output
ผลลัพธ์สุดท้าย

คำสุดท้าย

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

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

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

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

ชอบบทความนี้หรือไม่? กระจายคำ
  • Optimize for Featured Snippets

    วิธีเพิ่มประสิทธิภาพสำหรับตัวอย่างข้อมูลแนะนำ

  • WordPress Pagination

    วิธีเพิ่มการแบ่งหน้า WordPress ในทุกธีม

  • WordPress Menu Customization in 2022 WordPress Theme

    การปรับแต่งเมนู WordPress ในธีม Twenty Twenty-two

  • Food Layout 2

    Exclusive Food Layout 2 – Starter Pack วันจันทร์