WordPress Beginner: การปรับแต่งระดับกลาง

เพื่อให้ได้ มากกว่าพื้นฐานง่ายๆ ในบล็อก WordPress Beginner ล่าสุดของฉัน ในช่วงสองสามสัปดาห์ที่ผ่านมา ฉันได้ทำงานเพื่อสร้างหน้าสาธิต ProteusThemes ขึ้นมาใหม่ การสาธิตของธีมอัตโนมัติมีความเฉพาะเจาะจง เช่นเดียวกับเมื่อก่อน เพื่อนร่วมงานของฉันตั้งงานทีละขั้นตอนให้ฉันได้เดินไปตามทาง นี่เป็นบทเรียนที่สำคัญที่สุดที่ฉันได้เรียนรู้มา

กล่องไอคอน

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

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

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

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

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

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

แถบเลื่อนหน้าแรก

การสร้างการสาธิตอัตโนมัติขึ้นใหม่จำเป็นต้องเพิ่ม ตัวเลื่อน เป็นคุณลักษณะในหน้าแรก ในการทำให้สิ่งนี้เกิดขึ้น เลือก Pages -> All Pages -> Home ; เมื่อคุณอยู่ในเครื่องมือแก้ไขสำหรับโฮมเพจของคุณแล้ว คุณจะต้องพบเมนูแบบเลื่อนลง ' Page Attribute s' ที่ด้านขวาของหน้าจอ ค้นหาสิ่งนั้นและเปลี่ยน ' เทมเพลต ' เป็น ' Front Page With Slider '

เมื่อคุณเปลี่ยนเป็น ' Front Page With Slider ' จะมี meta ใหม่ ที่ด้านล่างของหน้าจอชื่อ ' Front page slider ' คลิกที่นี่เพื่อเพิ่มรูปภาพและข้อความของคุณไปยังแถบเลื่อน:

รหัสย่อ

การสร้างแถบเลื่อนหน้าแรกใหม่จะนำเราไปสู่ รหัสย่อ ทำไม? เพราะในการสาธิตอัตโนมัติที่ฉันกำลังสร้างใหม่ มี ปุ่มอยู่ภายในตัวเลื่อน

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

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

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

ตัวสร้างเพจ

การทำความเข้าใจกับปลั๊กอิน Page Builder ของ SiteOrigin เป็น สิ่งสำคัญ อย่างยิ่งในการสร้างการสาธิตอัตโนมัติขึ้นใหม่ งานแรกที่ฉันต้องใช้คือสร้าง IconBox นี้ด้วยส่วน Popover ใต้ส่วนหัวของหน้าแรก:

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

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

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

คุณสามารถเพิ่มฟังก์ชันเพิ่มเติมให้กับคอลัมน์ได้ ทั้งนี้ขึ้นอยู่กับวิดเจ็ตที่คุณเลือก ตัวอย่างเช่น ใน ' เวลาเปิด ' IconBox Popover จำเป็นต้องเพิ่มวิดเจ็ต ProteusThemes Opening Time ภายใน IconBox Popover เพื่อให้ข้อมูลที่เกี่ยวข้องแสดงในป๊อปโอเวอร์หากคอลัมน์ถูกคลิก

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

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

ฉันใช้ Page Builder ในลักษณะเดียวกับการสร้างคอลัมน์ หน้าเด่น เหล่านี้:

ในการทำเช่นนี้ แทนที่จะเพิ่ม Iconbox พร้อมวิดเจ็ต Popover ลงในคอลัมน์ ฉันเลือก ProteusThemes: วิดเจ็ตเพจเด่น คุณควรลองใส่วิดเจ็ตต่างๆ ลงในคอลัมน์เพื่อทำความเข้าใจว่าเครื่องมือสร้างเพจมีประโยชน์กับคุณเพียงใด

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

สมัครสมาชิกตอนนี้