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

קארגו קולקטיב (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 מספרים מחליפים בין המספר השני לרביעי.
  (חשוב לבצע את התיקונים האלה פעם אחת בצורה יסודית, כי אם פספסתם שורה תצטרכו לאפס את התבנית ולעשות את זה מההתחלה.)

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

רמת קושי: 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