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

[דוד זקס]

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

מרפרוף מהיר ראיתי שהאתר הזה https://apricom.biz/ שעוצב ע"י @חיים בניסטי האלוף הוא מקור לשאלות ולרעיונות על אלמנטור אז אני גם ישאל עליו.

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

ואם כבר אז הנה עוד שאלה: איך עושים את המילים המתחלפות בראש האתר?

ואיך מוסיפים תשלומים?

תודה רבה

 

[#ה_מ_ע_צ_ב_ת]

אוקיי, אחד אחד...

1. ה׳שירותים׳ זה לא גלרייה אלא וויג׳ט בשם ׳תיבת אייקון׳+כפתור
(באתר הספציפי הנ״ל נעשה שימוש באייקון מונפש ולא בברירת המחדל)

2. הכותרת נעשתה באמצעות וויג׳ט ״כותרת אנימציה״

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

בהצלחה!
נ.ב. רק אני לא רואה את הכוכבים שהיו ברקע מסך הפתיחה אצל אפריקום?

 

[דוד זקס]

1. ה׳שירותים׳ זה לא גלרייה אלא וויג׳ט בשם ׳תיבת אייקון׳+כפתור

תודה רבה על העזרה.
ואיך מסדרים חמש בשורה? דהיינו, אלו חמש ווידג'טים נפרדים שניתן לסדר אותם לגובה אחד (איך?) ?

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

 

[#ה_מ_ע_צ_ב_ת]

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

1. סידור מספר וויג׳טים אחד לצד השני.
כמו כאן:

איך עושים את זה?
עריכת וויג׳ט>מתקדם>מיקום> רוחב=מותאם
ושם לשחק עם ההגדרות באחוזים (למשל, אם זה 4 אלמנטים אז 25% לכל אחד. אבל לא מחייב...)


2. סידור עמודות אחת ליד השניה.
כמו שאני בדיוק עכשיו באמצע לעצב כאן:
(זה ממש באמצע עבודה!)
מה יש לנו כאן?
1. וויגט כותרת אנימציה
2. וויגט אזור פנימי (באדום)
3. מס׳ עמודות רצוי (בתכלת)
4. וויגט תיבת אייקון/וויגט אנימציה+טקסט (בצהוב)

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



בהצלחה!

 

[דוד זקס]

וואו! כל הכבוד על תשובה כל כך מפורטת ומדויקת!

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

 

[דוד זקס]

3. מס׳ עמודות רצוי

איפה מגדירים כמה עמודות יהיו בווידג'ט אזור פנימי?

 

[#ה_מ_ע_צ_ב_ת]

איפה מגדירים כמה עמודות יהיו בווידג'ט אזור פנימי?

בלי הגדרה. כמו שמוסיפים עמודה רגילה:
מקש ימני > הוספת עמודה

 

[שמעון יוסף]

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

1. סידור מספר וויג׳טים אחד לצד השני.
כמו כאן:
צפה בקובץ המצורף 683159
איך עושים את זה?
עריכת וויג׳ט>מתקדם>מיקום> רוחב=מותאם
ושם לשחק עם ההגדרות באחוזים (למשל, אם זה 4 אלמנטים אז 25% לכל אחד. אבל לא מחייב...)


2. סידור עמודות אחת ליד השניה.
כמו שאני בדיוק עכשיו באמצע לעצב כאן:
(זה ממש באמצע עבודה!)
מה יש לנו כאן?
1. וויגט כותרת אנימציה
2. וויגט אזור פנימי (באדום)
3. מס׳ עמודות רצוי (בתכלת)
4. וויגט תיבת אייקון/וויגט אנימציה+טקסט (בצהוב)
צפה בקובץ המצורף 683164
עם הכפתוריפ הייתה לי קצת בעיה כי הם הגיעו מיד אחרי הטקסט.
מכיוון שהטקסטים לא באותו אורך הכפתורים לא היו שווים.
כדי שהכפתורים יהיו באותו גובה הוספתי עוד אזור פנימי+עמודות עם אותן הגדרות כמו למעלה והוספתי שם את הכפתורים.

צפה בקובץ המצורף 683169

בהצלחה!

עדיף להצמיד בצורה כזו.

הצמדת אלמנט לתחתית קונטיינר באמצעות flex-grow | סאבי בלוג

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

savvy.co.il

 

[#ה_מ_ע_צ_ב_ת]

עדיף להצמיד בצורה כזו.

הצמדת אלמנט לתחתית קונטיינר באמצעות flex-grow | סאבי בלוג

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

savvy.co.il

גם אופציה!

זה עם התערבות קוד.
יש הרבה שמעדיפים להימנע מזה...

 

[דוד זקס]

עדיף להצמיד בצורה כזו.

הצמדת אלמנט לתחתית קונטיינר באמצעות flex-grow | סאבי בלוג

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

savvy.co.il

יכול להיות שזו גם דרך טובה, אבל הדרך של @*שרי* יותר אינטואיטיבית.

 

[שמעון יוסף]

גם אופציה!

זה עם התערבות קוד.
יש הרבה שמעדיפים להימנע מזה...

זה css קטן

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

 

[דוד זקס]

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

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

זה css קטן

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

 

[שמעון יוסף]

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

באלמנטור אין את ההגדרה הזאת
בשביל זה צריך את הקוד שיתן לו את הפקודה הזאת

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

יש פה רבים וטובים ממני שיוכלו לעזור לך בנושא זה

 

[דוד זקס]

יש פה רבים וטובים ממני שיוכלו לעזור לך בנושא זה

אין נחתום מעיד על עיסתו.

הכוונתי להמלצה על מדריך כתוב.
לא העליתי על דעתי להטריח ח"ו מאן דהו לכתוב מדריך במיוחד בשבילי.

 

[#ה_מ_ע_צ_ב_ת]

אני יודע שאפשר לפתוח על זה אשכול נפרד, אבל אם כבר, אז מה זה css ?

css זו שפת קוד.
ישנם אתרים שלמים שנבנים בעזרת השפה הזו.
במאמר מוסגר: משתמשי אלמנטור כותבים (בלא יודעים) ג״כ קוד ע״י השימוש באלמנטור. אבל זה לא חשוב...
באלמנטור ישנה אפשרות להוסיף קוד css חיצוני.
(כמו מה שהעלה שמעון יוסף (שזה ׳קוד קטן׳, כאמור) ועוד הרבההה דברים טובים ומגניבים)

זה מריח לי כמו אקשנים בפוטושופ וסקריפטים באינדי' (ממש מגרה). זה נכון?

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

איך אפשר לקבל הדרכה מתומצתת ומדויקת לנושא הזה?

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

 

[שמעון יוסף]

הכוונתי להמלצה על מדריך כתוב.
לא העליתי על דעתי להטריח ח"ו מאן דהו לכתוב מדריך במיוחד בשבילי.

יש פה קורס html ו css שמסביר טוב על כל העניין הזה בחינם - פתוח בנטפרי

https://www.taasuka.gov.il/he/Applicants/pages/onlinecourses.aspx

 

[חגית קרמר]

באלמנטור אין את ההגדרה הזאת
בשביל זה צריך את הקוד שיתן לו את הפקודה הזאת

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

 

[שמעון יוסף]

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

השאלה אם זה פותר את הבעיה הזאת

2. סידור עמודות אחת ליד השניה.
כמו שאני בדיוק עכשיו באמצע לעצב כאן:
(זה ממש באמצע עבודה!)
מה יש לנו כאן?
1. וויגט כותרת אנימציה
2. וויגט אזור פנימי (באדום)
3. מס׳ עמודות רצוי (בתכלת)
4. וויגט תיבת אייקון/וויגט אנימציה+טקסט (בצהוב)
צפה בקובץ המצורף 683164
עם הכפתוריפ הייתה לי קצת בעיה כי הם הגיעו מיד אחרי הטקסט.
מכיוון שהטקסטים לא באותו אורך הכפתורים לא היו שווים.
כדי שהכפתורים יהיו באותו גובה הוספתי עוד אזור פנימי+עמודות עם אותן הגדרות כמו למעלה והוספתי שם את הכפתורים.

צפה בקובץ המצורף 683169

בהצלחה!

 

[חגית קרמר]

השאלה אם זה פותר את הבעיה הזאת

למה לא?
עריכה: אפשר ליצור גובה מינימלי לאזור + מתיחת עמודות.

 

[שמעון יוסף]

למה לא?

מעניין לנסות לראות אייך הוא מייצר את הרווחים בים האלמנטים

במקום שעמודה שהטקסט קצר הוא יתחיל באותו מקום שהוא מתחיל בעמודה שהטקסט ארוך או שהוא יתן יותר רווח מעל הטקסט? מקווה שהסברתי את עצמי טוב