آموزش ساخت سایت در گوگل

با گوگل sites ، متفاوت باشید !

آیا به دنبال راه اندازی سایت خود هستید؟ به این موضوع فکر کرده‌اید که چطور باید سایت خود را طراحی کنید؟

به هزار و یک دلیل ممکن است شما تصمیم داشته باشید سایتی راه اندازی کنید؛ خواه یک سایت شخصی خواه سایتی برای کسب و کار خود. گوگل sites ابزاری از مجموعه ابزارهای گوگل است که می‌تواند برای شما بسیار کارساز باشد.

گوگل سایت، پلتفرمی رایگان است که ویژگی‌های ارزشمند و کاربردی خوبی در اختیار شما قرار می‌دهد. با استفاده از این ابزار می‌توانید خیلی سریع سایت خود را ایجاد و شخصی سازی کنید.

اگر دوست دارید همین حالا و خیلی سریع و رایگان سایتی حرفه‌ای طراحی کنید؛ پس این مطلب دقیقا مناسب شماست! تا انتها همراه ما باشید…

  • این پست دائما آپدیت و بروز می‌شود…

ایجاد سایت

ابتدا برای ایجاد یک وب سایت لازم است که حساب گوگل داشته باشید (که آموزش این قسمت در محتوای به اشتراک گذاری فایل در گـوگل درایو موجود است) و سپس به گوگـل sites  بروید. این صفحه مشابه صفحه‌ی اصلی گوگل فرم است. با کلیک کردن بر روی + یک سایت خالی ایجاد کنید.

چندین نمونه و تمپلیت در صفحه اصلی قرار دارد که اگر مایل باشید و متناسب سایت شما باشند، می‌توانید خیلی راحت از آنها استفاده کنید.

پس از آن سایتی به صورت پیش فرض در اختیار شما قرار می‌گیرد که می‌توانید اجزای موجود در صفحه را بگیرید و به هرجا که دوست دارید بکشید تا جابجا شوند. عملیات drag and drop از ویژگی‌های خوب گوگل sites در نسخه‌ی جدیدش، به شمار می‌رود.

مدیریت صفحات

همانطور که می‌دانید هر سایت متشکل از چندین صفحه است مثلا در سایت ما شما می‌توانید صفحاتی همچون بلاگ، درباره ما، تماس با ما و البته صفحه اصلی را مشاهده کنید. هر کدام از صفحات کاربردها و البته تم خاص خود را دارد. در ابزار گوگل sites نیز چنین امکانی به کاربران ارائه شده است.

ایجاد صفحه ی جدید

برای مدیریت و تغییر در صفحات لازم است از نوار ابزار سمت راست اقدام کنید و بر روی pages در بالای آن کلیک کنید. سپس در ستون مربوط به صفحات، بر روی + کلیک کنید. پس از آن کادر کوچکی نمایش داده می‌شود که نام صفحه‌ی جدید را باید در آن وارد کنید. همچنین اگر آدرس خاصی برای آن صفحه در نظر دارید می‌توانید با کلیک کردن روی قسمت advanced ، آن را وارد کنید.

افزودن یک صفحه به سایت

اضافه کردن فهرست مطالب

می‌توانید جهت سهولت در دسترسی کاربران در ابتدای صفحه‌ی سایتتان، فهرست تمام عناوین موجود در صفحه را به صورت اتوماتیک قرار دهید.

برای این کار در ستون سمت راست بر روی گزینه‌ی insert کلیک کنید و سپس Table of contents را انتخاب کنید. سپس هر عنوان، تیتر و زیرتیتری در صفحه وارد کنید در این جدول نمایش داده می‌شود.

تنظیمات صفحات

در ستون مربوط به pages ، لیست صفحات سایت قرار دارند و در کنار هر کدام یک عملات سه نقطه قرار دارد که اگر روی آن کلیک کنید، امکاناتی در اختیارتان خواهد بود. این امکانات به شرح زیر هستند:

تنظیمات صفحات سایت در گوگل

  • Make homepage : آن صفحه را به عنوان صفحه اصلی سایت ثبت می‌کند.
  • Duplicate page : یک نسخه‌ی کپی از صفحه ای که انتخاب کرده‌اید ایجاد می‌شود.
  • Properties : در این قسمت می‌توانید نام و آدرس صفحه را تغییر دهید.
  • Sub page : می‌توانید یک صفحه به صورت زیرمجموعه‌ی صفحه‌ی جاری داشته باشید.
  • Hide from navigation : این صفحه را مخفی می‌کند و نام آن را در نوار ابزار بالای سایت نمایش نمی‌دهد.
  • Delete : صفحه را حذف می‌کند.

اگر برای یک صفحه، sub page ایجاد کرده باشید، ابتدا باید تک تک sub page ها را حذف کنید؛ سپس قادر خواهید بود صفحه را حذف کنید.

تغییر هدر و فوتر صفحه

مهم ترین بخش یک صفحه در سایت همین هدر و فوتر هستند، مهم است که چه تصویری و چه متنی بالا و پایین صفحات شما نمایش داده شود. پس لازم است با دقت خاصی این بخش های سایت را ویرایش کنید.

تنظیمات هدر سایت

اشاره گر موس را بر روی هدر صفحه ببرید و سپس چند گزینه نمایان می‌شوند؛

تغییر هدر سایت در گوگل sites

  • در کنار هدر و سمت چپ آیکون سطل آشغال نمایش داده می‌شود که با کلیک کردن بر روی آن، هدر صفحه حذف می‌شود.
  • بالا سمت چپ هدر، می‌توانید نامی برای سایت خود وارد کنید و یا تصویر لوگوی سایتتان را بارگذاری کنید.
  • زیر هدر گزینه‌ای برای تغییر تصویر change image قرار دارد. با کلیک کردن بر روی آن می‌توانید تصویر مدنظر را از کامپیوتر و یا گوگل درایو و … بارگذاری کنید.
  • گزینه‌ی header type به شما اجازه می‌دهد که نوع هدر سایت را تغییر دهید. گاهی بنابر نیاز، لازم است صرفا عنوان صفحه در بالای صفحه نمایش داده شود و یا حالاتی دیگر.
تنظیمات فوتر سایت

برای ایجاد و یا تغییر فوتر باید به پایین ترین قسمت صفحه بروید و اگر سایت فوتر نداشته باشد، دکمه‌ی add footer نشان داده می‌شود. بر روی آن کلیک کنید.

فوتر صفحه در گوگل sites

سپس کادری نمایان می‌شود که می‌توانید متن، لینک، عکس و سایر موارد دلخواهتان را وارد کنید. همچنین می‌توانید سایز کادر را تغییر دهید و آن را جابجا کنید.

تنظمات فوتر صفحه سـایت

در سمت چپ فوتر، چند آیکون نمایش داده می‌شوند که یکی از آنها پالت رنگ است و تم فوتر را تغییر می‌دهد و از طریق آن می‌توانید حتی یک عکس در پس زمینه فوتر قرار دهید.

آیکون سطل آشغال امکان حذف کردن فوتر را به شما می‌دهد و آیکون میانی اجازه می‌دهد که این قسمت (همان فوتر) را تکثیر کنید.

به عنوان مثال ما در این مرحله بر روی select image کلیک کردیم و سپس تصویری را از گالری گوگل انتخاب کردیم. شما هم می‌توانید تصاویر دلخواه خود را در سایتتان قرار دهید.

  • . برای مشاهده‌ی نمای سایت، کافی است بر روی آیکون preview کلیک کنید تا بتوانید نسخه‌ی سایتتان را در دسکتاپ، تبلت و موبایل مشاهده کنید. (برای خارج شدن از این حالت بر روی علامت ضربدر که در تصویر زیر مشخص است کلیک کنید.)
نمایش سایت در گـوگل سایت
نمایش سایـت در ابزار گوگل سایت

تغییر تم

 

 

با استفاده از تم ها و یا قالب های آماده می‌توانید خیلی راحت و حرفه‌ای شِمای کلی سایتتان را تغییر دهید، فونت ها، چینش صفحات و لایه ها را به صورت مشخص داشته باشید.

برای تغییر قالب یا همان تم، در ستون سمت راست بر روی themes کلیک کنید. سپس لیست تم ها نمایش داده می‌شود که می‌توانید با کلیک کردن بر روی هرکدام، آن را انتخاب کنید و رنگ و فونت را مطابق سلیقه‌ی خودتان عوض کنید.

قالب سایت

اضافه کردن عناصر

با استفاده از نوار ابزار سمت راست که در تصویر مشخص است، می‌توانید متن، لایه، عکس، ویدیو و هرچیزی که خواستید را در صفحات سایت خود وارد کنید. کافی است به سربرگ insert بروید.

  • با انتخاب کردن گزینه‌ی text box ، جعبه‌ای خواهید داشت که می‌توانید در آن متن و یا عنوان وارد کنید.
  • برای افزودن لینک کافی‌ست قسمتی از متن را که مایل هستید لینک شود، انتخاب کنید سپس آیکون مربوط به لینک یا پیوند را انتخاب کنید و آدرس url را وارد کنید.
  • گزینه‌ی images برای وارد کردن تصویر در صفحه است.
  • گزینه‌ی embed برای جایگذاری کاربرد دارد. با وارد کردن url یک سایت در این بخش می‌توانید ظاهر یک سایت دیگر را در سایت خود داشته باشید و همچنین در قسمت embed code می‌توانید کدهای html را وارد کنید.
  • گزینه‌ی drive برای وارد کردن انواع فایل از گوگل درایو شما مناسب است.
  • در قسمت layouts می‌توانید حالات مختلفی از قرار گیری اشیاء در سایت خود داشته باشید. با کلیک کردن بر روی مورد دلخواهتان، در صفحات خود می‌توانید از آن استفاده کنید.
  • می‌توانید مواردی که ایجاد کرده‌اید را مشابه سایر قسمت ها با استفاده از آیکون سطل زباله، حذف کنید.
  • ویژگی هایی که برای فوتر در نظر گرفتیم همچون تغییر رنگ و عکس و … برای لایه ها نیز قابل اجراست.
آموزش طـراحی سایت با گـوگل سایت
  • Collapsible text برای حالتی مناسب است که یک متن به صورت زیرمجموعه‌ی متنی دیگر باشد. کاربر باید بر روی فلش کلیک کنید تا متن کوچکتر نمایش داده شود.
متن کشویی در سایت - آموزش طراحی سایت
  • با انتخاب کردن گزینه‌ی image carousel می‌توانید مجموعه‌ی چند عکس را به صورت اسلایدر نمایش دهید و جلوه‌ای ویژه به سایت خود ببخشید. در ادامه‌ی متن این گزینه را به خوبی بررسی خواهیم کرد.
  • Button برای اضافه کردن یک دکمه در هرکجای صفحه کاربرد دارد. می‌توانید به دکمه آدرس صفحات سایت خود و یا سایت‌های دیگران را پیوند کنید تا کاربر با کلیک بر روی دکمه به صفحه ی هدف منتقل شود.
  • Devider یک خط است که می‌توانید برای جدا کردن بخش ها از یکدیگر از آن استفاده کنید.
  • سایر گزینه‌های موجود برای وارد کردن ویدیو از یوتیوب، فایل از گوگل داکیومنت، جدول از گوگل شیت و … کاربرد دارند که می‌توانید متناسب با نیازتان، فایل‌ها را به راحتی در صفحات سایت خود قرار دهید.

گروه بندی عناصر

برای ایجاد گروه بین چند عنصر، مثلا بین دکمه و تصویر، دکمه را بگیرید بکشید تا لبه ی تصویر و وقتی یک خط جدید نمایان شد رها کنید سپس اینها به صورت گروه خواهند بود و همگی با هم قابلیت جابجایی دارند یعنی به صورت یک قطعه ی مستقل.

گروه بندی عناصر در سـایـت
  • جابجایی عناصر در گروه: برای این کار ابتدا گروه عناصر را انتخاب کنید و سپس بر روی عنصر مدنظر خود کلیک کنید و با دکمه‌های جهت در صفحه کلید، عنصر انتخابی را جابجا کنید.

مدیریت تصاویر در گوگل site

تصاویر نقش مهمی در دنیای امروزه ایفا می‌کنند. حتما سعی کنید از تصاویر و اینفوگرافیک در میان مطالب و در سایت خود استفاده کنید تا علاوه بر افزایش جذابیت ظاهری، مفهوم را به درستی به کاربر منتقل کنید.

افزودن تصویر

برای افزودن تصویر از طریق ستون سمت راست و سربرگ Insert اقدام کنید و سپس images را انتخاب کنید. سپس دو گزینه‌ی Upload و  select نشان داده می‌شود که آپلود برای بارگذاری تصویر از کامپیوتر است و select برای انتخاب تصویر از جستجوی گوگل، سایتی دیگر و یا گوگل درایو کاربرد دارد.

تنظیمات تصاویر

اگر بر روی تصویری که آپلود و جایگذاری کرده‌اید، کلیک کنید؛ چند آیکون مربوط به تنظیمات تصویر را در بالای عکس می‌توانید ببینید. در تصویر زیر مشخص است.

تنظیمات تصاویر گـوگل سایت
  • گزینه‌ی سمت چپ مربوط به بریدن تصویر یا crop کردن است که اگر آن را انتخاب کنید می‌توانید مشخص کنید که کدام قسمت از تصویر نمایش داده شود و پس از انجام تغییرات بر روی کلیک کنید و اگر منصرف شدید بر روی  کلیک کنید.
  • گزینه‌ی دوم از سمت چپ برای نمایش تصویر در سایز کامل است یعنی کاملا برعکس گزینه‌ی کراپ کردن.
  • سومین آیکون مربوط به ایجاد لینک یا پیوند است که می‌توانید به وسیله‌ی آن یک آدرس به تصویر خود الحاق کنید.
  • آیکون سطل زباله مشابه سایر موارد برای حذف کردن کاربرد دارد.
  • اگر بر روی علامت سه نقطه کلیک کنید، می‌توانید تصویر را از طریق گزینه‌ی Replace Image تغییر دهید. همچنین گزینه‌ی alt text برای اضافه کردن متن به تصویر کاربرد دارد.
  • برای تغییر سایز و اندازه‌ی تصویر، وقتی بر روی آن کلیک کردید چند نقطه دور و اطراف آن مشاهده می‌کنید که می‌تونید با کشیدن این نقاط سایز تصویر را بزرگ و کوچک کنید.

افزودن اسلایدر تصویر

اسلایدر تصویر یا همان image carousel که در بالاتر هم آن را معرفی کردیم یک ویژگی خوب و جذاب است که می‌توانید برای نشان دادن مجموعه‌ای از تصاویر در سایت، از آن استفاده کنید.

برای وارد کردن این اسلایدر باید به سربرگ insert در ستون سمت راست بروید و سپس بر روی image carousel کلیک کنید. در ادامه حداقل 2 تصویر را باید انتخاب کنید.

  • برای تغییر چینش تصاویر می‌توانید آنها را انتخاب کنید، بکشید و جابجا کنید.
  • برای حذف کردن و یا افزودن متن به تصویر نیز هنگامی که اشاره گر موس را روی آن تصویر قرار دهید، دو گزینه برای اضافه کردن متن و حذف تصویر مانند زیر نمایش داده می‌شود.
اسلایدر تصویر در سـایت

تنظیمات اسلایدر

اگر مایل هستید تنظیمات مربوط به اسلایدر را تغییر دهید بر روی آیکون تنظمیات کلیک کنید. برای دیدن این آیکون کافیست بر روی اسلایدری که ایجاد کرده اید کلیک کنید.

در این قسمت می‌توانید تمام تنظیمات تصاویر را دوباره انجام دهید.

با کلیک کردن بر روی علامت تنظیمات در بالا سمت راست کادر تصاویر اسلایدر، تنظیمات بیشتری در مورد اسلایدر مشاهده خواهید کرد.

تنظیمات اسلایدر تصویر در گـوگل sites
  • Show dots : گزینه‌ای است مربوط به دایره‌هایی که زیر اسلایدر نشان داده می‌شوند. اگر می‌خواهید این دایره ها نباشند، تیک این گزینه را بردارید.
  • Show captions : اگر این گزینه فعال باشد، متنی را که برای هر عکس وارد می‌کنید نمایش داده می‌شود.
  • Auto start: این گزینه اگر فعال باشد، اسلایدر به صورت خودکار شروع به نمایش دادن تصاویر می‌کند. اگر این گزینه را فعال کنید، تنظیمات مربوط به transition نیز فعال می‌شوند.
  • از طریق منوی کشویی transition می‌توانید سرعت حرکت تصاویر را مشخص کنید. طیف سرعت از خیلی کند (very slow) تا سریع (fast) قابل تغییر است.
  • . به یاد داشته باشید پس از انجام تغییرات حتما دکمه‌ی update را فشار دهید تا تنظیمات save (ذخیره) شوند.

افزودن لوگو به سایت

لوگو از مهم ترین عناصر هر برند و نام تجاری به شمار می‌رود. برای اضافه کردن لوگو باید بر روی آیکون تنظیمات در بالا سمت راست صفحه (سمت چپ علامت سه نقطه) کلیک کنید. سپس در پنجره‌ی setiing به بخش  Brand Images بروید. سپس در بخش Logo بر روی آپلود و یا  select کلیک کنید.

  • تصاویر باید حداقل 112 پیکسل ارتفاع داشته باشند.
  • فضای سفیدرنگ اطراف لوگو را حذف کنید.
  • تصاویر باید دارای پسوند jpg ، png یا gif باشند.

افزودن favicon

وقتی وارد یک سایت می‌شوید اگر به نام آن در مرورگرتان دقت کنید، در کنار نام سایت آیکونی می بینید که این آیکون مختص همان سایت است. یکی از ملزومات سایت داری حرفه‌ای این است که شما هم این آیکون را برای سایت خود وارد کنید.

برای انجام اینکار باید بر روی آیکون تنظیمات در بالا سمت راست صفحه کلیک کنید. سپس در پنجره‌ی setiing به بخش  Brand Images بروید و سپس در قسمت Favicon یک تصویر را انتخاب و یا آپلود کنید.

  • تصویر آیکون باید دارای پسوند jpeg ، png، ICO، TIFF، BMP، WEBP یا gif باشد.

منتشر کردن سایت یا publish

با کلیک کردن بر روی این دکمه و وارد کردن یک URL جدید، سایتتان در بستر گوگل منتشر می‌شود. پس در انتهای کار باید بر روی این دکمه کلیک کنید. همچنین اگر یک دامنه از قبل دارید و می‌خواهید سایتتان را به آن متصل کنید در همینجا باید آن را وارد کنید.

به یاد داشته باشید هرگاه سایتتان را ویرایش کردید و یا تغییر دادید حتما بر روی publish کلیک کنید.

دقیقا مانند سایر اسناد گوگل، شما می‌توانید یک لینک برای به اشتراک گذاری سایتتان از گوگل دریافت کنید و برای دیگران بفرستید. برای اینکار بر روی آیکون کنار تنظیمات سایت کلیک کنید و لینک را برای هرکسی که مایلید بفرستید.

حذف کردن و تکثیر سایت

اگر می‌خواهید از سایتی که ایجاد کرده‌اید 2 نسخه داشته باشید، بر روی گزینه‌ی duplicate کلیک کنید. این گزینه در تصویر زیر مشخص است.

کپی کردن گوگـل سایت

اگر روزی روزگاری قصد داشتید سایتتان را حذف کنید کافیست به همان صفحه‌ی اول گوگل sites بروید و سپس بر روی سه نقطه‌ی کنار سایت مدنظرتان کلیک کنید و Remove را انتخاب نمایید.

حذف کردن سایـت از گـوگل سایت

چند کلام با چ یاب:

بالاخره طراحی سایت تمام شد! از این پس این شما هستید که با محتواها و البته تنظیمات فنی سایت مخاطب را جذب می‌کنید و البته آن را نگه می‌دارید. درست است که طراحی ظاهری سایت بسیار اهمیت دارد اما اگر محتوای خوبی نداشته باشید؛ سایت شما مانند یک پسته‌ی بی مغز خواهد بود!

اگر سوال و یا نکته‌ای داشتید در قسمت نظرات با ما در میان بگذارید. آیا تجربه‌ای در مورد طراحی سایت و یا مدیریت سایت دارید؟

راستی! تلگرام چ یاب رو برای با خبر شدن از آخرین دوره های آموزشی، محصولات و تخفیف های ویژه دنبال کنید.

منبع:

4 دیدگاه دربارهٔ «با گوگل sites ، متفاوت باشید !»

  1. مرسی از مطالب خوبتون.
    میشه در سایتمون که میخوایم بسازیم فیلم هم بزاریم ؟ اگه اره محدودیتی روی مدت زمانش هست یا خیر ؟ میشه در این موضوع هم اموزش بدید لطفا

    1. فروغ رحیمی

      سلام ممنون از توجه شما:)

      بله میشه. توی ستون سمت راست، یه گزینه تحت عنوان youtube هست که می‌‌تونید با استفاده از اون ویدیوهای توی کانال یوتیوب رو اضافه کنید.

      اما اگر میخواهید از سیستم، ویدیو بذارید، گزینه google drive در دسترس شماست.

      اول باید فایلتون رو توی گوگل درایو آپلود کنید و بعد توی سایتتون از طریق همین گزینه گوگل درایو، واردش کنید.

      اگر کار با گوگل درایو رو می‌خواهید یاد بگیرید، مقاله زیر رو مطالعه کنید:

      راهنمای گوگل درایو

      یه راه دیگه هم هست اونم اینه که ویدیوتون رو توی آپارات یا چنین جایی آپلود کنید و کدش رو به عنوان embed توی سایت وارد کنید.

      و اینکه من محدودیتی در این مورد ندیدم.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

سبد خرید
اسکرول به بالا