בוגרים טיפים לשידרוג אתר הקארגו שלכם

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

קארגו קולקטיב (Cargo Collective) היא פלטפורמה מצויינת ליצירת פורטפוליו אישי למעצבים גרפיים ואנחנו אוהבים להמליץ עליה בכל פעם שאנחנו נתקלים במעצב שמתלבט איך לבנות לעצמו אתר שיציג את העבודות שלו בדרך הטובה והמשתלמת ביותר. במהלך השנים אספנו מגוון טיפים מועילים ושורות קוד שימושיות שיעזרו לכם לשפר ולשדרג את אתר הקארגו שלכם. במידה ונתקלתם בטיפים משלכם כתבו לנו בתגובות ונשמח להוסיף לכתבה.


הטמעת סרטון ישירות מוימאו

רמת קושי: 1 (מתוך 3)

הקוד:

<iframe src="http://player.vimeo.com/video/54626679?title=0&byline=0&portrait=0&loop=0&autoplay=0&color=ffff00" width="670" height="420" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

  • החליפו את קוד הסרטון (54626679) לקוד הסרטון שלכם.
  • שנו את הגובה והרוחב בהתאם לגודל הסרטון והתבנית שבחרתם.
  • פרמטר ה־loop מנגן את הסרטון בלופ (1=חיובי, 0=שלילי).
  • פרמטר ה־autoplay מנגן את הסרטון אוטומטית.
  • פרמטר ה־color הוא עבור צבע הכפתור (hex color).

 


הטמעת סרטון ישירות מיוטוב

רמת קושי: 1 (מתוך 3)

הקוד:

<iframe src="http://www.youtube.com/embed/bhMz7x1ZaGM? hd=1&rel=0&showinfo=0&autoplay=0&autohide=1&start=0" width="670" height="420" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  • החליפו את קוד הסרטון (bhMz7x1ZaGM) לקוד הסרטון שלכם.
  • שנו את הגובה והרוחב בהתאם לגודל הסרטון והתבנית שבחרתם.
  • פרמטר ה־autohide מחביא את הקונטרולר (1=חיובי, 0=שלילי).
  • פרמטר ה־autoplay מנגן את הסרטון אוטומטית.
  • פרמטר ה־start מתחיל לנגן משניה מסויימת (מספר בשניות).

 


הטמעת פונטים של אאא

רמת קושי: 2 (מתוך 3)

 

  • לצורך ההסבר נשתמש בפונט אסימון במשקל רגיל.
  • התחברו לחשבון הקארגו שלכם דרך SFTP. (כאן יש מדריך).
  • אחרי שהצלחת להתחבר - העלו את קובץ הפונט בעל הסיומת woff לתוך התיקיה assets.
  • הוסיפו לתחילת הקובץ design.css את הקוד הבא:
    @font-face{
    font-family:"asimon";
    font-weight:400;
    font-style: normal;
    src: url("{{#asset}}asimon-aaa-400.woff{{/asset}}") format("woff");
    }
  • הוסיפו את השורה:
    font-family: "asimon", sans-serif;

    ל־body או לאלמנטים נבחרים באתר שלכם.

 


הטמעת פונטים מגוגל וובפונטס

רמת קושי: 2 (מתוך 3)

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

  • הוסיפו לראש ה־css את השורה הבאה:
    @import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);
    
  • הוסיפו את השורה:
    font-family: "Alef Hebrew", sans-serif;

    ל־body או לאלמנטים נבחרים באתר שלכם.

 


עיברוּת האתר (ימין-לשמאל)

רמת קושי: 2 (מתוך 3)

 

  • בקוד ה־CSS מוסיפים ל־BODY את השורה:
    direction:rtl;
  • ואז עוברים על כל מסמך ה־CSS מלמעלה ללמטה לאט-לאט שורה-שורה:
    א - בכל מקום שכתוב right כותבים left ולהיפך.
    ב - בכל מקום שיש margin או padding עם 4 מספרים מחליפים בין המספר השני לרביעי.
    (חשוב לבצע את התיקונים האלה פעם אחת בצורה יסודית כי אם פיספסתם שורה תצטרכו לאפס את התבנית ולעשות את זה מהתחלה.)

 


כיצד להחביא את הטָעָן (loader)

רמת קושי: 1 (מתוך 3)

 

מוסיפים לסוף מסמך ה־CSS את השורה:

.loader_holder, #nav_loadspin{display :none !important;}

 


רכישת דומיין זול דרך GoDaddy

רמת קושי: 1 (מתוך 3)

 

מחפשים "domain" בגוגל.
נכנסים למודעה הראשונה המסומנת של GoDaddy המציעה דומיין במחיר מוזל (בין 1.99 ל5.99 דולר).
(במידה ואתם לא רואים את המודעה כנראה שמותקן לכם על הדפדפן חוסם פרסומות. נסו להיכנס דרך דפדפן פיירפוקס או ספארי.)


כמה אתרי קארגו להשראה

manassehlangtimm.com
www.malikafavre.com
cargocollective.com/kerryedward
alwayswithhonor.com
shindokho.kr
chasematt.com
samuelburgessjohnson.com


Ù הוספת תגובה

7 תגובות על טיפים לשידרוג אתר הקארגו שלכם

י. ג.

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

    הכי פשוט יהיה להציג כמה פריימים מתוכו ולצרף לינק לקובץ ה־pdf שייפתח בחלון חדש. את הקובץ את יכולה לאכסן בתיקית public של הדרופבוקס או גוגל־דרייב שלך.

תגובות פייסבוק