قسمت 6 : آموزش صفحه ساز یو ایکس بیلدر UX Builder

آموزش صفحه ساز یو ایکس بیلدر UX Builder

با توجه به نیاز کاربران ما در این بخش از آموزش ویدئویی طراحی سایت خود به نحوه ساخت صفحه ساز یو ایکس بیلدر( فلت سام) خواهیم پرداخت. این فیلم آموزشی به زبان فارسی است که مدت زمان تماشای آن 20 دقیقه است که به صورت جزء به جزء نحوه ساخت صفحه ساز جدید در فلت سام را به شما آموزش می دهد.

این ویدئو شامل دو بخش اساسی است:

  1. صفحه ساز یو ایکس بیلدر
  2. تنظیمات قالب فلت سام

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

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

مراحل ساخت صفحه جدید در صفحه ساز یو ایکس بیلدر به قرار زیر است

نحوه ایجاد برگه جدید و بنر در صفحه ساز یو ایکس بیلدر

نحوه ایجاد برگه جدید و بنر در صفحه ساز یو ایکس بیلدر

برای ساخت صفحه جدید در یو ایکس بیلدر ابتدا بر روی برگه جدید که در بالای صفحه قرار دارد کلیک کنید، همانطورکه در ویدئو و تصویر نیز مشاهده می کنید این برگ کاملاً خالی است و شما باید آن را به شیوه دلخواه خود پر کنید. برای انجام تنظیمات در قسمت بالایی صفحه دکمه edit with ux builder را بزنید تا کار اصلی با صفحه ساز شروع شود. پنلی با قالب های پیش فرض برای شما نمایش داده می شود که می توانید از آنها در ساختار خود استفاده کنید و یا اینکه خودتان قالب مد نظر خود را درست کنید که ما در این بخش خودمان دست به کار می شویم تا قالب مد نظر را درست کنیم، برای ساخت قالب دلخواه بر روی دکمه +add elemnts  کلیک کنید، برای این منظور لازم است ابتدا بنری را اضافه کنید که پس از اضافه نمودن بنر صفحه ای در قسمت سمت چپ باز می شود که می توانید در آن حالت های مختلف بنر را مشاهده و سپس یکی را انتخاب کنید. توجه داشته باشید که هر یک از بنرها حالتهای مختلفی را شامل می شوند که با کلیک بر روی هر بخش می توانید نحوه قرارگیری بنر را مشاهده کنید که ما در این بخش ساده ترین نوع بنر را انتخاب می کنیم.

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

انتخاب متن بنر و تنظیمات مربوط به آن

یکی از نکات اساسی در این بخش انتخاب سایز بنر است که حتماً باید اورجینال باشد تا بهترین کیفیت تصویر را داشته باشد. همانطور که در ویدئو بالا نیز مشاهده می کنید یک متنی در مرکز تصویر قرار دارد که ما قصد داریم آن را ویرایش کنیم و متن دلخواه خود را وارد کنیم برای این منظور با کلیک بر روی متن و فشردن دکمه open text editor می توانید متن نوشته خودتان را اضافه کنید که پس از اضافه نمودن متن دلخواه می توانید از دکمه های بالایی برای قرار گرفتن نوع متن استفاده کنید که متن شما به صورت چپ چین، راست چین، وسط باشد و یا حتی نوع قلم خود و … را نیز انتخاب کنید.

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

توجه داشته باشید دکمه ای که ما در متن اضافه نموده ایم در سلسله مراتب نیز قابل رویت است که برای نوشتن متن در آن کافی است روی آن ادیت را بزنید و متن مورد نظر خود را وارد کنید. دیگر تنظیمات را نیز می توانید به ترتیب دلخواه خود انجام دهید.

اضافه نمودن ستون و ردیف در صفحه سایز یو ایکس بیلدر

اضافه نمودن ستون و ردیف در صفحه سایز یو ایکس بیلدر

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

نحوه اضافه نمودن متن در ستون

برای اضافه کردم متن در داخل ستون به اضافه را فشار دهید و تکس را انتخاب و حالت های مختلف نوشتاری را که به صورت پیش فرض قرار دارند را انتخاب کنید و در بخش open text editor متن دلخواه خود را وارد کنید. می توانید از قسمت ایمیج(تصویر) تصویر پس زمینه دلخواه خود را نیز انتخاب کنید که پس از انتخاب تصویر تنظیمات مورد نظر آن را انجام دهید. برای اضافه کردن دکمه در زیر متن نیز بر روی آیکون به اضافه در زیر ستون که در مرکز قرار دارد کلیک کنید که صفحه ای در سمت چپ برای شما باز می شود که شما باید دکمه را انتخاب کنید و با کلیک بر روی دکمه می توانید تنظیمات مربوط به آن را انجام دهید.

اضافه نمودن المان ها و اسلاید

اضافه نمودن المان ها و اسلاید

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

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

تنظیمات صفحه یو ایکس بیلدر موبایل، تبلت و دستکاپ ویندوز

تنظیمات صفحه یو ایکس بیلدر موبایل، تبلت و دستکاپ ویندوز

توجه داشته باشید که شما در صفحه سایز یو ایکس بیلدر این قابلیت را دارید که همین صفحه درست شده را به صورت لاو و پیش فرض در موبایل و تبلت نیز مشاهده کنید، برای این منظور بر روی تصویر موبایل یا تبلت در قسمت سمت راست صفحه مورد نظر کلیک کنید تا به صورت پیش فرض موبایل در بیاید و می توانید در این بخش تنظیمات جزئی را نیز انجام دهید، مثلاً شخصی که تصویر اسلاید شما را در موبایل میبیند متفاوت تر از تصویری باشد که شخص تو کامپیوتر یا دسکاپ آن را می بیند که در این بخش شما می توانید این تنظیمات جزئی را انجام دهید و کیفیت کار خود را بر اساس نوع دستگاه مورد استفاده بالا ببرید. البته مواردی را می توانید تغییر بدهید که دایره در کنارشون قرار دارد و فقط این موارد قابل تغییر هستند. شما می توانید تنظیمات هر بخش از موبایل تبلت و دستکاپ را متفاوت انجام دهید.

تنظیمات عمومی

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

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

امتیاز شما
[تعداد: 3   میانگین: 4.7/5]
همیار توسعه یک پیج اینستاگرام قوی دارد که با دنبال کردن آن می‌توانید کلی محتوای عالی و جدید در مورد طراحی سایت و کسب و کارهای اینترنتی مشاهده کنید. پس معطل نکنید و پیج اینستاگرامی همیار توسعه رو دنبال کنید.

4 دیدگاه برای “قسمت 6 : آموزش صفحه ساز یو ایکس بیلدر UX Builder

  1. علی گفته:

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

    • عرفان سراج گفته:

      سلام ، خواهش میکنم.
      در مورد پاپ آپ مشاوره رایگان ما از دو افزونه استفاده کردیم
      افزونه اصلی popups هست که در لینک زیر میتونید دانلود کنید، فرم داخل پاپ آپ هم با گرویتی فرم ساخته شده
      https://wordpress.org/plugins/popups

    • عرفان سراج گفته:

      سلام و دروود

      برای باز کردن Flatsome Studio مراحل زیر را دنبال کنید:
      ۱ – روی “+Add Content” یا “+” در بالای محتوای موردنظر کلیک کنید.
      ۲ – رویدکمه Flatsome Studio کلیک کنید. اگر نمی توانید دکمه Flatsome Studio را ببینید، UX Builder را با CTRL + F5 رفرش کنید.

      شما هم اکنون می توانید Flatsome Studio را بارگذاری و طرح بندی را درون ریزی کنید.

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

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

برای مشاوره رایگان

شماره همراه خود را بصورت کامل وارد نمایید

مثال : 09120000000

× واتساپ