# เนื้อหาป๊อปอัปบนเว็บ **เนื้อหาป๊อปอัปบนเว็บ (Web popup content)** คือเลย์เอาต์ภาพที่ผู้เข้าชมเห็นเมื่อป๊อปอัปบนเว็บปรากฏบนเว็บไซต์ของคุณ สร้างได้ในส่วน **เนื้อหา (Content)** จากนั้นแนบเข้ากับ [แคมเปญป๊อปอัปบนเว็บ (Web popup campaign)](/th/product/messaging-channels/web-popups/create-web-popups-campaigns/) ## สร้างเนื้อหาป๊อปอัปบนเว็บ 1. ไปที่ **เนื้อหา (Content)** → **เนื้อหาป๊อปอัปบนเว็บ (Web popup content)** 2. คลิก **สร้างเนื้อหาป๊อปอัปบนเว็บ (Create web popup content)** 3. เลือกเทมเพลตเริ่มต้นจากแกลเลอรี แกลเลอรีเทมเพลตป๊อปอัปบนเว็บที่แสดงเทมเพลตเริ่มต้นแบบโมดอล, รูปภาพ, แถบด้านล่าง และทัวร์ผลิตภัณฑ์หลายหน้า 4. เมื่อคุณเลือกเทมเพลตแล้ว ให้ปรับแต่งป๊อปอัปในเครื่องมือแก้ไข ### ตั้งชื่อป๊อปอัป คลิกที่ชื่อป๊อปอัปในแถบด้านบนเพื่อแก้ไข ชื่อนี้ใช้ระบุเนื้อหานี้ภายใน Pushwoosh ในรายการเนื้อหาและในตัวช่วยสร้างแคมเปญ ผู้เข้าชมเว็บไซต์จะไม่เห็นชื่อนี้ ### แก้ไขการตั้งค่าป๊อปอัป ปรับลักษณะที่ปรากฏและตำแหน่งของป๊อปอัปในแผงการตั้งค่าทางด้านซ้ายของ canvas: #### รูปภาพ หากเลย์เอาต์มีรูปภาพหนึ่งรูปขึ้นไป แต่ละรูปจะมีบล็อกของตัวเองที่ด้านบนของแผงพร้อมตัวอย่างและส่วนควบคุม คลิก **เปลี่ยนรูปภาพ (Change image)** เพื่อเลือกไฟล์จาก [คลังสื่อ (Media store)](/th/product/content/media-store/) ของโปรเจกต์ของคุณ ส่วนการตั้งค่าป๊อปอัปพร้อมตัวอย่างรูปภาพที่ว่างเปล่าและปุ่มเปลี่ยนรูปภาพในเครื่องมือแก้ไขป๊อปอัปบนเว็บ ด้านล่างตัวอย่าง: - **Fit:** วิธีที่รูปภาพจะเติมเต็มกรอบ: **Natural**, **Cover**, หรือ **Contain** จะไม่แสดงสำหรับรูปภาพพื้นหลังซึ่งจะครอบคลุมพื้นที่ของมันเสมอ - **Blur:** ทำให้ภาพนุ่มนวลขึ้น ตั้งแต่ 0 ถึง 20 px - **Dim:** สำหรับรูปภาพพื้นหลังเท่านั้น เพิ่มฟิล์มสีเข้มทับรูปภาพเพื่อให้ข้อความที่วางอยู่ด้านบนยังคงอ่านได้ ตั้งแต่ 0 ถึง 100% บางเลย์เอาต์ยังเพิ่มส่วน **Layout** พร้อมการตั้งค่าการวางตำแหน่งรูปภาพ: - **Image width:** ส่วนแบ่งความกว้างของป๊อปอัปเป็นเปอร์เซ็นต์ - **Image position:** **Left** หรือ **Right** สำหรับเลย์เอาต์ที่มีรูปภาพอยู่ข้างข้อความ ส่วน **Layout** จะปรากฏขึ้นเมื่อเลย์เอาต์ปัจจุบันมีการตั้งค่าเช่นนี้เท่านั้น ในเลย์เอาต์แบบแถบด้านล่าง จะมีตัวเลือก **Buttons width** แทนส่วนควบคุมรูปภาพ #### ขนาดและสไตล์ของป๊อปอัป ในส่วน **Popup**: - **Width, Height (ว่าง = อัตโนมัติ):** เว้นว่างทั้งสองช่องเพื่อให้ป๊อปอัปปรับขนาดตามเนื้อหา หรือตั้งค่าขนาดคงที่เป็นพิกเซล ในป๊อปอัปที่มีหลายหน้า แต่ละหน้าจะมีขนาดของตัวเอง - **Corner radius, Shadow:** การปัดมนมุมและเงาของป๊อปอัป - **Animation:** วิธีที่ป๊อปอัปจะปรากฏ: **None**, **Fade**, หรือ **Slide** ส่วน Popup ในแผงการตั้งค่าพร้อมส่วนควบคุมความกว้าง, ความสูง, รัศมีมุม, เงา และแอนิเมชัน #### สี คลิก **Colors** เพื่อขยายชุดสีของป๊อปอัป: - **Background, Accent (buttons):** พื้นหลังของป๊อปอัปและสีเน้นที่ใช้กับปุ่ม - **Text, Secondary text:** สีของเนื้อหาหลักและข้อความรอง เช่น คำบรรยายและข้อความนำ - **Text over image:** แสดงเฉพาะสำหรับเลย์เอาต์ที่มีข้อความทับรูปภาพพื้นหลัง ใช้ตั้งค่าสีสำหรับข้อความนั้น ส่วน Colors ที่ขยายออก แสดงตัวเลือกสีสำหรับ Background, Accent, Text, Secondary text และ Text over image #### การวางตำแหน่งและโอเวอร์เลย์ ในส่วน **PLACEMENT**: - **Position:** เลือกตำแหน่งที่ป๊อปอัปจะยึดบนหน้าโดยใช้ตาราง 3×3 - **Edge offset:** ตั้งค่าระยะห่างเป็นพิกเซลจากขอบที่เลือก ในส่วน **OVERLAY**: - **Dim the page behind:** เปิดเพื่อทำให้ส่วนที่เหลือของหน้ามืดลงขณะที่ป๊อปอัปแสดงอยู่ - **Color, Opacity:** ตั้งค่าสีและความทึบของโอเวอร์เลย์จาก 0 ถึง 1 แผงการตั้งค่าป๊อปอัปบนเว็บพร้อมส่วน POPUP, PLACEMENT และ OVERLAY รวมถึงตารางการวางตำแหน่งและส่วนควบคุมโอเวอร์เลย์ ### แก้ไขข้อความ คลิกที่บล็อกข้อความใดๆ บนป๊อปอัปเพื่อแก้ไขแบบอินไลน์ แถบเครื่องมือจะปรากฏขึ้นด้านบน: - ใช้การจัดรูปแบบ **ตัวหนา**, *ตัวเอียง* หรือขีดเส้นใต้ - เพิ่มหรือลบลิงก์ - ตั้งค่าการจัดตำแหน่งชิดซ้าย, กึ่งกลาง หรือชิดขวา - เลือกสไตล์ข้อความ: **Icon**, **Eyebrow**, **Heading 1–3**, **Body**, หรือ **Caption** ข้อความที่เลือกบน canvas ของป๊อปอัปบนเว็บพร้อมแถบเครื่องมือแก้ไขอินไลน์ที่แสดงการจัดรูปแบบ, การจัดตำแหน่ง, ลิงก์ และส่วนควบคุมสไตล์ ### แก้ไขปุ่ม คลิกที่ปุ่มเพื่อเปิดแถบเครื่องมือ: - เลือกสไตล์ของปุ่ม: **Primary** หรือ **Secondary** - เลือกการทำงานของปุ่ม: - **Open a link:** ป้อน URL เป้าหมาย - **Close the popup** - **Go to page:** เลือกหน้าอื่นของป๊อปอัปเพื่อสลับไป ตัวเลือกนี้จะปรากฏขึ้นเมื่อป๊อปอัปมีมากกว่าหนึ่งหน้า ดูที่ [ทำงานกับหลายหน้า](#work-with-multiple-pages) ปุ่มที่เลือกบน canvas ของป๊อปอัปบนเว็บพร้อมแถบเครื่องมือแก้ไขปุ่มที่เปิดอยู่ ## ทำงานกับหลายหน้า ป๊อปอัปบนเว็บสามารถมีได้มากกว่าหนึ่งหน้า เช่น เพื่อแนะนำผู้เข้าชมผ่านข้อเสนอหลายขั้นตอนสั้นๆ ### เพิ่มหน้า คลิก **+ Add page** เพื่อเปิดเมนูเพิ่มหน้า: - **Duplicate current page:** คัดลอกหน้าที่ใช้งานอยู่ รวมถึงการแก้ไขใดๆ ที่คุณทำไว้ เป็นหน้าใหม่ - เลือกหนึ่งในเลย์เอาต์หน้าเดียวเพื่อเพิ่มหน้าใหม่พร้อมเนื้อหาตัวอย่างของเลย์เอาต์นั้น หน้าใหม่นี้เป็นอิสระจากหน้าอื่นๆ ดังนั้นจึงสามารถใช้เลย์เอาต์ที่แตกต่างกันได้ แท็บหน้าของเครื่องมือแก้ไขป๊อปอัปบนเว็บที่มีหลายหน้า, เครื่องหมายหน้าเริ่มต้น และปุ่มเพิ่มหน้า แต่ละแท็บคือหนึ่งหน้า คลิกที่แท็บเพื่อสลับไป ### ตั้งค่าหน้าเริ่มต้น แท็บที่มีเครื่องหมาย ★ คือ **หน้าเริ่มต้น (start page)** ซึ่งเป็นหน้าที่ผู้เข้าชมจะเห็นเป็นหน้าแรก หากต้องการเปลี่ยน ให้เปิดแท็บอื่นแล้วคลิก ☆ บนแท็บนั้น แท็บหน้าที่แสดงเครื่องหมายดาวของหน้าเริ่มต้นบนแท็บหนึ่งและส่วนควบคุมการลบบนแท็บที่ใช้งานอยู่ ### ลบหน้า บนแท็บที่ใช้งานอยู่ คลิก **✕** กล่องโต้ตอบยืนยันจะเปิดขึ้น คลิก **Delete** เพื่อลบหน้า การกระทำนี้ไม่สามารถยกเลิกได้ ## บันทึกเนื้อหา ตรวจสอบเนื้อหา, รูปภาพ และการทำงานของปุ่ม เมื่อเสร็จแล้ว คลิก **Save** ที่แถบด้านบน ## ใช้เนื้อหาในแคมเปญ หลังจากที่คุณบันทึก เนื้อหาจะปรากฏใน **เนื้อหา (Content)** → **เนื้อหาป๊อปอัปบนเว็บ (Web popup content)** เปิดจากรายการเพื่อแก้ไขต่อ หากต้องการแสดงบนไซต์ ให้ไปที่ **แคมเปญ (Campaigns)** → **ป๊อปอัปบนเว็บ (Web popups)** สร้างหรือแก้ไขแคมเปญ และเลือกเนื้อหานี้ในขั้นตอน **เนื้อหา (Content)** จากนั้นกำหนดค่าผู้ชม, การตั้งค่าการแสดงผล, ความถี่ และตัวเลือกการเปิดตัว สำหรับขั้นตอนทั้งหมด ดูที่ [สร้างแคมเปญป๊อปอัปบนเว็บ (Create Web popup campaigns)](/th/product/messaging-channels/web-popups/create-web-popups-campaigns/)