วิธีสร้างกล่องฟีเจอร์ที่มีสไตล์ด้วย Elementor Page Builder (2 วิธีง่ายๆ)

เผยแพร่แล้ว: 2022-09-07

เมื่อพูดถึงการสร้างเลย์เอาต์ที่มีสไตล์บนเว็บไซต์ กล่องฟีเจอร์เป็นสิ่งที่ต้องมี

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

ต้องการสร้างกล่องคุณลักษณะที่มีสไตล์ด้วยตัวสร้างหน้า Elementor หรือไม่?

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

ในบทความนี้ ฉันจะอธิบายว่ากล่องคุณลักษณะคืออะไรและวิธีใช้ตัวสร้างหน้า Elementor เพื่อสร้างองค์ประกอบกล่องคุณลักษณะ

ไปดำน้ำกันเลย!

สารบัญ
  1. กล่องคุณสมบัติคืออะไร? ทำไมจึงจำเป็น?
    • ตัวอย่างกล่องคุณลักษณะ
  2. วิธีที่ 1: ไทล์เดี่ยวและคำกระตุ้นการตัดสินใจ (3 ขั้นตอนง่ายๆ)
    • ขั้นตอนที่ 1: สร้างหน้าใหม่และแก้ไขด้วย Elementor
    • ขั้นตอนที่ 2: สร้างโครงสร้างเค้าโครงสองคอลัมน์
    • ขั้นตอนที่ 3: เพิ่มตัวแบ่งรูปร่าง
  3. วิธีที่ 2: ไทล์หลายรายการและการเรียกร้องให้ดำเนินการ
    • ขั้นตอนที่ 1: สร้างโครงสร้างเค้าโครงสามคอลัมน์
    • ขั้นตอนที่ 2: เพิ่มเนื้อหาและภาพพื้นหลัง
    • ขั้นตอนที่ 3: ทำซ้ำกระบวนการ
  4. คุณได้สร้างกล่องฟีเจอร์ที่มีสไตล์แล้วหรือยัง?

กล่องคุณสมบัติคืออะไร? ทำไมจึงจำเป็น?

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

การมีกล่องคุณลักษณะช่วยดึงดูดความสนใจของผู้เยี่ยมชมได้ วิธีนี้ใช้งานได้ดีอย่างเหลือเชื่อเมื่อคุณมีหน้าเว็บที่มีข้อความจำนวนมาก

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

กล่องคุณสมบัติสามารถใช้สำหรับการสร้างลูกค้าเป้าหมาย การแสดงผลิตภัณฑ์และบริการของร้านค้า ข้อมูลราคา และการแสดงข้อมูลเพิ่มเติมเกี่ยวกับแบรนด์ของคุณ

คุณยังสามารถใส่คำกระตุ้นการตัดสินใจในกล่องคุณลักษณะของคุณเพื่อนำผู้ใช้ไปยังหน้าผลิตภัณฑ์หรือบริการของคุณ

ตัวอย่างกล่องคุณลักษณะ

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

ต่อไปนี้คือตัวอย่างกล่องคุณลักษณะบางส่วนที่คุณสามารถแสวงหาแรงบันดาลใจได้

หากคุณดำเนินธุรกิจเกี่ยวกับการผจญภัย คุณสามารถแสดงผลิตภัณฑ์ที่ดีที่สุดของคุณในกล่องคุณลักษณะดังที่แสดงด้านล่าง

กล่องคุณสมบัติสำหรับเว็บไซต์ที่เกี่ยวข้องกับการผจญภัย

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

คุณเปิดร้านค้าออนไลน์ที่จำหน่ายผลิตภัณฑ์สำหรับเด็กหรือไม่

กล่องคุณสมบัติสำหรับเว็บไซต์ที่เกี่ยวข้องกับผลิตภัณฑ์สำหรับเด็ก

สร้างกล่องฟีเจอร์ที่มีสไตล์เพื่อโปรโมตผลิตภัณฑ์ที่ดีที่สุดและข้อเสนอล่าสุดของคุณ แต่ละคนเชื่อมโยงไปยังหน้า Landing Page ที่เกี่ยวข้อง

ต่อไปนี้คือตัวอย่างบางส่วนของผู้ดำเนินการเอเจนซีด้านการตลาดดิจิทัล

กล่องฟีเจอร์สำหรับเอเจนซี่การตลาดดิจิทัล

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

ปุ่มคำกระตุ้นการตัดสินใจสามารถนำไปยังแบบฟอร์มการเลือกใช้หรือแอปพลิเคชัน เช่น Calendly เพื่อจองการนัดหมายกับคุณ

คุณยังสามารถสร้างกล่องคุณลักษณะที่มีไอคอนเพื่อโปรโมตบริการต่างๆ ของคุณ

กล่องคุณสมบัติส่งเสริมบริการการตลาดดิจิทัลต่างๆ

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

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

กล่องคุณสมบัติส่งเสริมข้อเสนอและข้อเสนอที่ดีที่สุด

ด้วยฟีเจอร์บ็อกซ์ คุณก็ทำได้

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

ต้องการสร้างกล่องฟีเจอร์ที่มีสไตล์ด้วย Elementor หรือไม่? มาเริ่มกันเลย!

วิธีที่ 1: ไทล์เดี่ยวและคำกระตุ้นการตัดสินใจ (3 ขั้นตอนง่ายๆ)

ขั้นแรก ให้ตั้งเป้าที่จะสร้างกล่องคุณลักษณะด้วย Elementor ซึ่งคล้ายกับด้านล่าง

สร้างกล่องฟีเจอร์ที่มีสไตล์ด้วยตัวสร้างหน้า Elementor

ขั้นตอนที่ 1: สร้างหน้าใหม่และแก้ไขด้วย Elementor

ไปที่ เพจ > เพิ่มใหม่ และตั้งชื่อเพจของคุณ

สร้างหน้าใหม่และแก้ไขด้วย Elementor

จากนั้นคลิกที่ แก้ไขด้วย Elementor

ขั้นตอนที่ 2: สร้างโครงสร้างเค้าโครงสองคอลัมน์

คลิกที่ไอคอน เพิ่มส่วนใหม่ จากนั้นเลือกโครงสร้างเค้าโครงสองคอลัมน์

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

เพิ่มข้อความและอาจเป็นปุ่มเรียกร้องให้ดำเนินการในคอลัมน์ใดคอลัมน์หนึ่ง

ตัวอย่างเช่น ฉันได้ใส่หัวเรื่อง ข้อความ และปุ่ม

รวมองค์ประกอบต่างๆ เช่น หัวเรื่อง ข้อความ และปุ่มในกล่องคุณลักษณะของคุณ

ถัดไป เพิ่มองค์ประกอบรูปภาพในคอลัมน์อื่นและแทรกรูปภาพ

ใส่รูปภาพ

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

Elementor ทำให้ง่ายต่อการเพิ่มตัวแบ่งรูปร่างต่างๆ ในส่วนของคุณ ไม่ต้องพูดถึง มันช่วยปรับปรุงด้านการออกแบบของกล่องคุณสมบัติของคุณ

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

แก้ไขส่วน

คุณจะพบการตั้งค่าที่เกี่ยวข้องกับส่วนทางด้านซ้ายมือ

เลือกแท็บ สไตล์ จากนั้นเลื่อนลงไปที่แท็บตัว แบ่งรูปร่าง

แท็บลักษณะภายใต้ส่วนแก้ไข

ขณะนี้คุณสามารถเลือกตัวแบ่งรูปร่างที่คุณต้องการสำหรับส่วนบนหรือด้านล่างของส่วนของคุณ

ลองใช้ตัวเลือกต่างๆ เช่น สี ความกว้าง และความสูง แล้วสร้างตัวแบ่งรูปร่าง

คุณสามารถทำเช่นเดียวกันกับส่วนล่างของส่วนของคุณด้วย

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

สร้างกล่องฟีเจอร์ที่มีสไตล์ด้วย Elementor

และนั่นก็เป็นเรื่องง่ายที่จะสร้างกล่องฟีเจอร์ที่มีสไตล์ด้วย Elementor!

วิธีที่ 2: ไทล์หลายรายการและการเรียกร้องให้ดำเนินการ

ต่อไป เรามามุ่งสร้างกล่องคุณลักษณะดังที่แสดงด้านล่าง ซึ่งแต่ละภาพจะวางข้อความและปุ่มคำกระตุ้นการตัดสินใจที่เกี่ยวข้อง

กล่องคุณสมบัติสำหรับร้านค้าออนไลน์

ขั้นตอนที่ 1: สร้างโครงสร้างเค้าโครงสามคอลัมน์

ฉันถือว่าคุณทำขั้นตอนแรกของการสร้างหน้าใหม่เสร็จแล้ว จากนั้นคลิกที่ปุ่ม แก้ไขด้วย Elementor

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

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

ขั้นตอนที่ 2: เพิ่มเนื้อหาและภาพพื้นหลัง

ในคอลัมน์ใดคอลัมน์หนึ่ง ให้เพิ่มหัวข้อ ข้อความ และปุ่มคำกระตุ้นการตัดสินใจ

เมื่อเสร็จแล้ว ให้คลิกที่การตั้งค่าคอลัมน์ที่ต้องการ แล้วเลือกแท็บ สไตล์

แท็บรูปแบบภายใต้การตั้งค่าแก้ไขคอลัมน์

ภายใต้ พื้นหลัง ให้เลือกรูปภาพ

คุณสามารถจัดตำแหน่งภาพพื้นหลังตามความต้องการของคุณโดยเลือกตัวเลือกจากเมนูดรอปดาวน์ ตำแหน่ง

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

ตรงไปที่แท็บการ ซ้อนทับพื้นหลัง

รวมภาพซ้อนทับพื้นหลัง

เลือกสีและเปลี่ยนความทึบตามความต้องการของคุณ

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

ขั้นตอนที่ 3: ทำซ้ำกระบวนการ

หากคุณพอใจกับการออกแบบคอลัมน์แรกของคุณ ให้ทำซ้ำขั้นตอนสำหรับอีกสองคอลัมน์

คุณยังสามารถคลิกขวาที่คอลัมน์และเลือกตัวเลือก ทำซ้ำ ได้

ทำซ้ำคอลัมน์

เพียงให้แน่ใจว่าคุณลบคอลัมน์ว่างหลังจากทำซ้ำคอลัมน์แรก

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

กล่องคุณสมบัติสำหรับร้านค้าออนไลน์

ต้องการระยะห่างระหว่างกล่องคุณลักษณะมากขึ้นหรือไม่?

ตรงไปที่การตั้งค่าส่วนและปรับการ เติม ใต้แท็บ ขั้นสูง

สิ่งนี้ควรให้ระยะห่างที่จำเป็นระหว่างกล่องคุณสมบัติ

ในทำนองเดียวกัน คุณสามารถสร้างกล่องฟีเจอร์ที่มีสไตล์ได้ทุกประเภทด้วยตัวสร้างเพจ Elementor

คุณได้สร้างกล่องฟีเจอร์ที่มีสไตล์แล้วหรือยัง?

กล่องคุณลักษณะช่วยเพิ่มประสิทธิภาพการออกแบบของหน้าเว็บใดๆ

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

ต้องการเพิ่มคำกระตุ้นการตัดสินใจหรือไม่? ไม่มีปัญหา. รวมปุ่มคำกระตุ้นการตัดสินใจในกล่องคุณลักษณะของคุณได้อย่างง่ายดาย เพื่อช่วยให้ผู้เยี่ยมชมนำทางไปยังเนื้อหาเด่นของคุณ

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

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