Elementor: כיצד להוסיף CSS מותאם אישית לגרסה החינמית

לאחרונה, אחד הקוראים שלנו, שלא היה ברשותו גרסת ה-Pro של אלמנטור, שאל אותנו כיצד הוא יכול להוסיף CSS מותאם אישית לאתר שלו.

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

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

שלוש הדרכים להוסיף CSS מותאם אישית לדף Elementor או לאתר הן כדלקמן:

• הוסף קוד CSS באמצעות אלמנט ה- HTML.
• דרך התוסף קוד קטע.
• השתמש בהתאמה אישית של ערכת הנושא של אלמנטור

שיטה 1: הוספת קוד CSS מאלמנט ה-HTML של Elementor

השתמש בשיטה זו אם ברצונך להוסיף CSS לדף יחיד בלבד.

שלב 1: גרור ושחרר את אלמנט ה-HTML של Elementor

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

שלב 2: לחץ על סמל עריכת HTML

לחץ על הסמל ערוך את html מימין לאלמנט ה-HTML של Elementor. לחיצה עליו תפתח ארגז כלים לעריכת HTML בצד שמאל של המסך.

שלב 3: הוסף את קוד ה- CSS שלך

1. לחץ על הכרטיסייה תוכן ופתח את הרשימה הנפתחת קוד HTML.
2. מקם את קוד ה- CSS שלך ב משואות.

שיטה 2: CSS מותאם אישית עבור Elementor באמצעות תוסף קטעי קוד

יתרונות השימוש בתוסף קטעי הקוד:

• אם ברצונך לשנות או לעדכן את ערכת הנושא של וורדפרס שלך, ה- CSS יחול תמיד.
• זוהי הדרך הנוחה והיעילה ביותר להוסיף קוד CSS מכיוון שתוכל להפעיל או להשבית קוד CSS כמו תוספים.

שלב 1: פתח את תפריט ההרחבות בלוח המחוונים שלך

שלב 2: הוסף תוסף חדש

לחץ על כפתור "להוסיף ב" כדי לגשת לדף להוספת תוספים חדשים.

1. חפש את התוסף "קטעי קוד" .
2. התקן אותו על ידי לחיצה על הכפתור להתקין עכשיו ברגע שתוצאות המחקר חיוביות.

שלב 3: הפעל את התוסף

לחץ על כפתור "להפעיל"לאחר השלמת ההתקנה כדי להפעיל את התוסף" קטעי קוד.

שלב 4: פתח את דף התוסף והוסף קטע קוד

1. פתח תפריט תמציות ממרכז השליטה שלך
2. לחץ על הכפתור נובו להוסיף קטע קוד חדש

שלב 5: צור קטע והפעל אותו

1. תן שם לקטע הקוד שלך.
2. בתוך התג, כתוב את הקוד שלך. קוד זה זמין להעתקה למטה.
3. לחץ על כפתור "שמור שינויים"כדי לשמור את קטע הקוד."
4. לאחר שמירת קובץ ה-CSS, לחצו על "להפעיל" כדי להפעיל את קוד ה-CSS.

העתק קוד

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

שיטה 3: השתמש בהתאמה אישית של נושא Elementor

הערה: היזהר לפני השימוש בשיטה זו מכיוון שאם תשנה את ערכת הנושא תאבד CSS מותאם אישית זה.

שלב 1: פתח את התאמה אישית של ערכת הנושא

עבור לאתר שלך ולחץ על אפשרות ההתאמה האישית בסרגל הניווט העליון. פעולה זו תפתח חלון התאמה אישית של ערכת הנושא.

שלב 2: לחץ על הכרטיסייה הנוספת CSS

פעולה זו תפתח את דף הכניסה של CSS.

שלב 3: הוסף את קוד ה- CSS שלך

טוב! עכשיו אתה יודע להוסיף בקלות CSS מותאם אישית לדף Elementor או לאתר. זה יקל על עיצוב דפי אינטרנט ייחודיים ב- Elementor Free.

קבל את Elementor Pro עכשיו!

גלה גם כמה תוספי וורדפרס מובחרים  

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

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

1. FileBird

האם אי פעם התקשיתם לנהל אלפי קבצי תמונות, וידאו או מסמכים שהעליתם ל-FTP של וורדפרס? כן או לא, זה לא משנה; חשוב לדעת שתוסף וורדפרס FileBird יעזור לכם לנהל את קבצי המדיה שלכם בקלות ולהוסיף יותר עוצמה לספרייה שלכם.

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

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

כדי ללמוד עוד, בקר כיצד לנהל קבצים וורדפרס תיקיות

אז אם אתה רוצה לתת דחיפה ל ניהול ספריית המדיה שלך, התוסף FileBird של וורדפרס יכול להיות הנשק הסודי שלך.

הורד | הדגים | אירוח אתרים

2. קטגוריות הרחבה

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

התכונות העיקריות שלו הן: היכולת להפעיל אותו כך שיפעל באופן אוטומטי (אין צורך בהגדרות!), תמיכה ברמות מרובות של קטגוריות (קטגוריות, תת-קטגוריות וכו'), סימון הקטגוריה הפעילה, פתיחת כל קטגוריות האב אם הקטגוריה הנוכחית נמצאת בפנים, ותאימות עם כל... נושא WooCommerce, מגיב למשאלה, עדכונים בחינם ותמיכת לקוחות פעילה מאוד.

הורד | הדגים | אירוח אתרים

3. WavePlayer

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

ניתן להשתמש בו גם למטרות פודקאסטים והוא מציע תכונות נוספות כגון: תמיכה ב-HTML5, פריסה רספונסיבית, שילוב עם WooCommerce וכו'...

תוכל ליצור חזותית פלייליסט לפני שתפרסם אותו. מאפיין חיוני נוסף הוא המהירות והיעילות שלו.

הורד | הדגים | אירוח אתרים

משאבים מומלצים

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

• כיצד לדחוס את גודל התמונות על וורדפרס
• כיצד יש כתובת דוא"ל עם וורדפרס שלך אירוח
• כיצד לבצע שינוי שם תמונות על בלוג וורדפרס
• איך למצוא את הקישור לדף הכניסה WordPress

סיכום

זהו! בכך מסתיים המדריך הזה. אנו מקווים שהוא יעזור לכם להוסיף CSS מותאם אישית לאלמנטור בחינם. אתם מוזמנים להשתמש בו! שתף עם חבריך ברשתות החברתיות המועדפות עליך. 

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

אם יש לך הצעות או הערות, השאר אותן בקטע שלנו commentaires.

...