הרחבת איזור עריכה באמצעות אלמנטור (Edit with Elementor)

אחד השינויים המשמעותיים שנכנסו לאלמנטור החל מגרסא 3.0 היא האפשרות לבנות חלקים שחוזרים על עצמם בתבנית.

החל מ-header ו-footer שמוחלים על כל או חלק מהאתר, ועד פופאפים שחוזרים על עצמם בדפים שונים באתר ואיזורים שונים.

עבודה נכונה עם אלמנטור מתחילה בבניה נכונה של מבנה האתר עם בונה התבניות.

כשבונים תבנית, חשוב לתת שמות עם משמעות לכל תבנית על מנת שנוכל להבין בקלות באיזה איזור מדובר ומה התנאים שהחלנו עליו גם מבלי להכנס לעריכה עם אלמנטור לבדוק את התנאים.

אתן דוגמא, כשאני מגדיר header אני תמיד מציין האם חלים עליו תנאים מיוחדים או שהוא ה-header שמשמש כברירת מחדל.

ה-header הראשי באתר ייקרא Header – Default.

אם קיים header ספציפי לעמוד נחיתה, למשל עבור קורס ספציפי, הוא ייקרא Header – Dynamic Websites.

 

דוגמא נוספת יכולה להיות כאשר יוצרים Listing עם התוסף Jet Engine.

שם ה-Listing Grid יורכב אצלי ממילה קבועה שתאפשר לי לאתר את כל ה-Listings, לאחר מכן שם ה-Post Type או ה-Custom Post Type ולבסוף האם מדובר על Listing ברירת מחדל או Listing שמופיע בתנאים מיוחדים.

למשל:

ליסטים עבור Custom Post Type של מכונית ייקרא Listing – Car – Default

ליסטים עבור Custom Post Type של מכונית במצב Sale ייקרא Listing – Car – On Sale

 

כך, גם מבלי להכנס להגדרות ה-header אני מיד יודע שמדובר על header שמשמש את עמוד הקורס של אלמנטור למתקדמים – בניית אתרים דינאמיים.

הבעיה מתחילה כשהרבה פעמים אנחנו רוצים לתת שמות עם משמעות לתבניות שאנחנו בונים באלמנטור אבל אז השם שלהם נקטע ואי אפשר להבין באיזה תבנית מדובר כשאנחנו עורכים את העמוד מהחלק הקדמי של האתר (Frontend).

בדיוק לשם כך אני מצרף את הסניפט הבא.

המטרה שלו היא להרחיב את האיזור של Edit with Elementor על מנת שנוכל לראות בקלות את שמות התבניות.

אז איך עושים את זה?

את הרחבת האיזור נבצע בעזרת CSS.

  1. נלך לעורך של אלמנטור (לא משנה באיזה עמוד)
  2. לחיצה על ההמבורגר להגדרות
  3. נכנס להגדרות אתר
  4.  נכנס שם ל-CSS מותאם ונוסיף את ה-CSS המצורף.
				
					#wpadminbar .quicklinks .menupop ul li .ab-item,
#wpadminbar .quicklinks .menupop.hover ul li .ab-item {
	min-width: 340px;
}
				
			

כדי לבדוק שהכל עובד, נעבור לעמוד הבית ונעמוד על האיזור של עריכה באמצעות אלמנטור ונראה את התוצאה.

הרחבת איזור עריכה עם אלמנטור

רוצים לקבל טיפים נוספים של מתקדמים?