איך לשלב קוד עם אלמנטור?

שילוב קוד עם Elementor היא דרך רבת עוצמה להרחיב את הפונקציונליות של התוסף הפופולרי לבניית אתרים. אלמנטור מספקת ממשק גרירה ושחרור פשוט ואינטואיטיבי לעיצוב אתרים יפים, אך לפעמים ייתכן שיהיה עליכם לחרוג מהתכונות המובנות כדי להשיג את העיצוב או הפונקציונליות הרצויים לכם. כאן נכנס לתמונה שילוב הקוד.

‏Elementor מאפשר לכם להוסיף קוד HTML, CSS ו-JavaScript מותאם אישית משלכם לדפים, למקטעים ולווידג'טים. זה נותן לכם את הגמישות להוסיף פונקציונליות מותאמת אישית ואלמנטים עיצוביים שאינם זמינים בממשק Elementor. במאמר זה, נסקור כיצד תוכל לשלב קוד משלכם עם Elementor.

שלב 1: צרו דף Elementor חדש

השלב הראשון בשילוב קוד עם Elementor הוא יצירת דף חדש. כדי לעשות זאת, היכנסו ללוח המחוונים של וורדפרס ונווטו אל דפים > הוסף חדש. תנו לדף שלכם כותרת ולחצו על כפתור "ערוך עם אלמנטור" כדי לפתוח את ממשק אלמנטור.

שלב 2: הוסיפו איזור חדש

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

שלב 3: הוסיפו ווידג'ט קוד/HTML

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

שלב 4: הוסיפו את הקוד שלכם

לאחר שהוספתם את ווידג'ט הקוד למדור שלכם, תוכלו להתחיל להוסיף את קוד HTML, CSS ו-JavaScript המותאמים אישית שלכם. פשוט לחצו על יישומון הקוד כדי לפתוח את עורך הקוד ולהתחיל להקליד את הקוד שלכם. (אתם יכולים להשתמש בלחצן התצוגה המקדימה כדי לראות איך הקוד שלכם ייראה בדף).

שלב 5: שמרו ופרסמו את הדף שלכם

לאחר שהוספתם את הקוד שלכם, תוכלו לשמור ולפרסם את הדף שלכם. Elementor תשלב אוטומטית את הקוד עם שאר העמוד ותהפוך אותו לזמין עבור המבקרים.

הוספת קוד CSS על אלמנט קיים

באפשרותכם להוסיף קוד עיצוב (CSS) על אלמנט קיים באלמנטור. כל מה שצריך לעשות זה ללחוץ על הווידג'ט אותו תרצו לעצב ב-CSS לעבור ללשונית הגדרות >> מתקדם >> CSS מותאם >> הדבקת הקוד הרצוי. דוגמה:

לסיכום:

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