وردپرس

خلق گریدهای زیبا با افزونه ی Essential Grid

از زمانی که سایت پینترست با تصاویر گرید شده (شبکه ای) به محبوبیت رسید، استاندارد جدیدی در وب سایت ها تعریف شد. دیگر انگار سایتی که محتوایی را به صورت گرید در خودش جای نداده است، سایت نیست! امروزه نمایش دادن هر محتوایی به صورت گرید، از عکس گرفته تا متن و حتی ویدیو، کاری مدرن و خلاقانه محسوب می شود. و چرا که نه؟ گرید ها می توانند علاوه بر نمایش اطلاعات زیاد در فضای محدود، ظاهر سایت شما را زیبا تر کرده و با افزایش جذابیت بصری، کاربران را تشویق به بازدید از قسمت های مختلف سایت کنند.

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

اما چاره چیست؟ چطور می توان با دانش پایه وردپرس و امکاناتی محدود، از جذابیت گرید ها استفاده کرد؟ راه حل، استفاده از افزونه ی بسیار کاربردی Essential Grid است. این افزونه ویژگی هایی دارد که ساخت گرید ها را بیش از حد تصور، ساده و لذت بخش کرده است. در ادامه چندی از این ویژگی ها را بررسی می کنیم.

افزونه ای همه کاره

افزونه ی EG، طراحی شده تا کارایی همه جانبه ای داشته باشد. گرید های ساخته شده در این افزونه را می توان در پست های سایت، صفحه ی اصلی یا حتی به عنوان صفحه ی آغازین سایت قرار داد. در واقع، مدل استفاده از گرید ها، محدودیتی ندارد و به قدرت خلاقیت شما بستگی دارد.  این افزونه، از انواع و اقسام داده ها پشتیبانی می کند. داده های نوشتاری، تصویری، ویدیویی و حتی فروش محصولات (سازگار با افزونه ی WooCommerce).

سازگاری زیاد

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

تنوع بالا

گرید های موجود، در طرح بندی های بسیار متنوعی ارائه شده اند که به شما قدرت انتخاب طرح بندی مناسب را می دهند. علاوه بر این، همه ی این طرح بندی ها قابلیت ایجاد تغییر و هماهنگی هر چه بیشتر با قالب وبسایت شما را دارند. کار اینجا تمام نمی شود. به همراه EG، تعداد 30 عدد قالب آماده نیز ارائه می شود، تا محدودیتی در انتخاب ظاهر گرید ها نداشته باشید. همه ی این قالب ها هم قابلیت شخصی سازی دارند.

ساخت گرید با افزونه ی Essential Grid

برخی ویژگی های افزونه ی Essential grid را ذکر کردیم. اکنون می خواهیم روش استفاده از آن را نیز آموزش دهیم. نمی توانید تصور کنید که با وجود همه ی امکانات متنوعی که EG دارد، چقدر استفاده از آن ساده است. پس از نصب افزونه ، دو سربرگ به بخش افزونه ها اضافه می شوند. این دو سربرگ ESS.Grids و ESS.Grid هستند. سربرگ اول، به مدیریت همه ی گرید هایی که در سایت وجود دارند اختصاص دارد و سربرگ دوم مختص ساخت گرید است. در ادامه می خواهیم مراحل ساخت گرید و تنظیمات آن را بررسی کنیم.

به طور کلی، مراحل خلق گرید به شرح زیر است:

1- نام گذاری گرید

با کلیک بر روی ESS.Grid، به پنل ساخت گرید وارد می شوید. در این بخش، روی دکمه ی ایجاد (Create) کلیک کنید. صفحه ی باز شده، سازنده ی گرید است. همانطور که می بینید، دستورات بسیار ساده هستند. در سربرگ نام،  فقط کافیست عنوان و نام مستعار را وارد کنید.

2- انتخاب منبع برای محتویات متنی

3- انتخاب منبع برای محتویات نمایشی

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

اگر گزینه ی اول را انتخاب کرده باشید، قدم بعدی تعیین نوع و موضوع محتوایی است که خودکار از درون سایت استخراج شده و به گرید تبدیل می شود. امکان انتخاب چند موضوع و نوع محتوا به صورت همزمان وجود دارد.

در صورت انتخاب گزینه ی دوم، باید منبع مورد نظر را انتخاب کنید. سپس ویژگی های آن را تعیین می کنید. برای مثال اگر محتوای شما مجموعه ای از تصاویر هستند، می توانید سایز آنها را تعیین کنید.

4- تعیین طرح بندی گرید

در قسمت تنظیمات گرید، باید نوع گرید مورد نظر را انتخاب کنید. امتحان کنید! ببینید کدام مورد برای شما بهتر است.

5- تعیین مسیر و چینش گرید

6- انتخاب چینش هر محتوا

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

7- انتخاب پوسته (قالب) برای زیبا تر شدن گرید

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

آیا قالب های آماده را نمی پسندید؟ EG برای شما راهکاری دارد. بخش اختصاصی برای خلق قالب های شخصی! در این بخش می توانید خودتان قالب طراحی کرده، یا قالب های از پیش طراحی شده را ویرایش کنید و به ایده آلتان نزدیک شوید.

8- انتخاب انیمیشن و نوع حرکت

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

9- انتخاب شکل بالا آمدن (مدل لودینگ)

مدت ها قبل، صاحبان سایت فقط با نوشتن جمله ی در حال بارگیری (loading…) کاربرانشان رابه انتظار برای بالا آمدن سایت ها و محتویاتشان تشویق می کردند. اما امروزه این کار نیز به یک هنر بدل شده. در این قسمت می توانید شکل علامت بارگیری، رنگ و برخی ویژگی های آن را تنظیم کنید.

10 – ذخیره کردن گرید ساخته شده

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

ممکن است این 10 قدم زیاد به نظر برسد اما در واقع در بسیاری از این مراحل، کاربر به جز انجام چند کلیک ساده، کاری نمی کند. به علاوه، یکی از مزایای بزرگ کار با این افزونه، محیط بسیار کاربر پسند و ساده ی آن است. در این محیط می توانید پس از انجام هر تغییر، با فشردن دکمه ی «به روز رسانی نمایش» تغییرات اعمال شده را مشاهده کنید. پیش نمایش در همان صفحه تعبیه شده و لازم نیست برای دیدن تغییرات، مدام از این صفحه به آن صفحه بروید.

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

نمایش بیشتر

عیسی نیکومنش

یه عاشق وب و دنیای وب ، بیش از 10 سال تو این ضمینه فعالیت دارم و الان هم بعنوان وبمستر چندین پروژه رو دارم که سعی میکنم تجربیات و جدیدترین آموزشهای حوزه سئو و کارشناسی وبسایت رو به اشتراک بذارم

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن