در این سری از مقالات آموزشی وردپرس قصد داریم درباره ی کار با صفحه ساز یو ایکس بیلدر صحبت کنیم.
در مقاله ۳ تا از بهترین صفحه سازهای وردپرس، UX builder را معرفی کوتاهی کردیم.
حال در این مقاله به آموزش کار با صفحه ساز یو ایکس بیلدر می پردازیم.
معرفی UX BUILDER
یو ایکس بیلدر صفحه ساز اختصاصی قالب فلت سام است.
با صفحه ساز یو ایکس بیلدر می توانید تمامی صفحات، برگه ها، نوشته ها، محصولات فروشگاه و … هر سایت وردپرسی را به دلخواه خود طراحی و اجرا کنید.
صفحه ساز UX Builder بسیار سبک است و برای سرویس میزبانی و هاستی که سایت شما روی آن نصب است بسیار مناسب است.
این موضوع تاثیر زیادی در سرعت سایت و زمان بالا آمدن سایت شما برای کاربران دارد که در بهینه سازی سئو سایت نیز عملکرد مثبتی ایجاد می کند.
روش های ورود به صفحه ساز ux builder
ابتدا وارد حساب کاربری سایت خود شوید.
۱- ورود از پیشخوان سایت
در هر برگه یا نوشته ای از سایت که هستنید، در بالای آن صفحه یک نوار مدیریت مانند تصویر زیر مشاهده می کنید. روی ویرایش برگه کلیک کنید تا وارد صفحه ساز ux builder شوید.
۲- ورود از طریق برگه ها
به قسمت برگه ها در پیشخوان وردپرس بروید. برگه مورد نظر خود را انتخاب کنید.
بعد از کلیک روی ویرایش برگه، ux builder را انتخاب کنید تا وارد صفحه ساز شوید.
نحوه ایجاد برگه جدید یا بنر در صفحه ساز یو ایکس بیلدر
برای ساخت صفحه جدید در یو ایکس بیلدر باید ابتدا یک برگه جدید بسازید.
بعد از انتخاب دکمه add elements، ابتدا یک بنر از بخش محتوا اضافه کنید.
اضافه کردن المان به یک برگه یا نوشته در یو ایکس بیلدر
در قسمت سمت چپ صفحه روی add elements کلیک کنید و المان مورد نظر خود را انتخاب کنید.
اضافه کردن ستون و ردیف در صفحه ساز ux builder
برای اضافه کردن ستون به صفحه از بخش چیدمان سه ستون را انتخاب کنید. حالت های مختلفی به نمایش در می آیند.
مانند چهار ستون، سه ستون و یا دوستون و …
در تنظیمات با جزییات تر می توانید فاصله ستون ها، تنظیمات فاصله ردیف ها، نوع ردیف ها و .. را مشخص کنید.
نحوه اضافه کردن متن
از منوی سمت چپ در قسمت محتوا Text را انتخاب کنید و حالت های مختلف نوشتاری مد نظر خود را انتخاب کنید.
می توانید تصویر پس زمینه انتخاب کنید، دکمه ایجاد کنید و تنظیمات حرفه ای مربوط به هرکدام را با جزییات کامل انجام دهید.
در واقع کار با المان های یو ایکس بیلدر به صورت لایه ای است، به صورتی که می توانید هر المان دلخواهی را زیر المان اصلی خود اضافه کنید.
Add elements+
در ادامه قسمت های مختلف Elements را نام می بریم و مواردی که نیاز به توضیح دارند را به طور مختصر توضیح می دهیم.
چیدمان
شامل بخش های زیر است:
Row: ایجاد ردیف با چند ستون
Section:ساخت یک سکشن یا بخش که داخل آن شامل قسمت های زیادی است.
Slider: ساخت اسلایدر
Grid: حالت گرید بندی
Page Header: ایجاد هدر در صفحه
Widget Area: قرار دادن یک ابزارک در صفحه
Contenet
Button: المان دکمه
در مواقع لازم یک دکمه ایجاد کنید. رنگ و استایل آن را انتخاب کنید. سایز آن را تغییر دهید و انیمیشن دلخواه را انتخاب کنید.
در قسمت Depth، عمق دکمه در زمان عادی و زمانی که موس روی آن می رود انتخاب کنید
Navigation: جهت یابی
فهرست: ایجاد یک فهرست یا منو با قابلیت لینک دادن به یک نوشته یا برگه خاص
Shop
Products: نمایش محصولات
Products List: نمایش محصولات به صورت لیست
:Prouduct Categories دسته بندی محصولات
Paments Icons: آیکن های مختلف پرداخت
Products – Best selling: پر فروش ترین محصولات فروشگاه
Products-Custom: نمایش محصولات دلخواه به صورت دستی
Products- Featured: محصولات ویژه و شاخص
Products-On Sale: محصولات در حال تختفیف
Products- Recent: محصولات اخیر
Products- Top Rated: محصولاتی که بیشترین امتیاز را دارند
محتوا
Text: برای نوشتن متن های مختلف در المان های مد نظر استفاده می شود.
Banner: ساخت یک بنر که در حالت های مختلف وجود دارند و می توانید از آن ها استفاده کنید و یا یک بنر را از ابتدا خودتان بسازید.
در قسمت Admin labl می توانید یک لیبل برای بنر خود انتخاب کنید تا تشخیص آن برای شما راحت باشد وچیدمان ارتفاع آن را به دلخواهتان تغییر دهید.
در قسمت Slide Effect، نوع افکتی که موقع باز شدن اسلاید مد نظرتان است را انتخاب کنید.
حتی می توانید از بخش ویدیو در بک گراند بنر خود یک ویدیو قرار دهید.
در قسمت پس زمینه هم عکس بک گراند بنر خود را انتخاب کنید و تنظیمات مربوط به عکس مثل سایز، رنگ، موقعیت، افکت های مختلف و بقیه تنظیمات را در آن بخش با سلیقه خود به اتمام رسانید.
Accordion: ایجاد یک آکاردئون
به صورت نوار ابزاری است برای زمانی که کاربر روی آن کلیک می کند، باز می شود.
Blog posts: نوشته های وبلاگ را می توانید اضافه کنید
Countdown: شمارنده
Divider: جدا کننده
Follow Icons: آیکون شبکه های اجتماعی
Form(CF7): فرم ساز ۷
Gallery
Gap: ایجاد فاصله خالی
Icon Box
Image
ادامه بخش محتوا ux builder
Image Box: ایجاد یک باکس از عکس ها
Instagram feed: در بخش تنظیمات خود آدرس صفحه را تک یا یوزرنیم خود را وارد کنید.
Map
Message Box
Pages
Price Table: قرار دادن جدول قیمت
Scroll To: با ایجاد حالت اسکرول کاربر با کلیک بر روی آن ها به قسمتی از سایت هدایت می شود.
Search Box: ایجاد قابلیت جستجو
Share Icons: آیکون اشتراک گذاری
Tabs
Title: برای نوشتن عنوان استفاده می شود. بعد از نوشتن عنوان می توانید استایل، تگ، رنگ، آیکن طول و عرض، اندازه آن را تغییر دهید. قابلیت لینک دهی به آن نیز هست.
در بخش Advance قسمت Visibility، نوع نمایش در دکستاپ، موبایل یا تبلت را می توانید در حالت های مختلف انتخاب کنید.
Video
Video Button: دکمه play ویدیو
نشان: لوگو و برند در حالت های مختلف
نمونه کار: برای نمایش نمونه کارهایی که شما قبلا ساختید و حالا می خواهید در سایتتان نمایش دهید می توانید از این قسمت اضافه کنید.
LAYOUT
Block: ساختن یک بلاک با یو ایکس بیلدر در گذشته و انتخاب آن در این قسمت برای نمایش در آن صفحه
Stack: ایجاد یک ردیف و قرار دادن المان های مختلف کنارهم
تنظیمات مربوط به موبایل، تبلت و دکستاپ در یو ایکس بیلدر (Responsive)
صفحه ساز یو ایکس بیلدر قابلیت نمایش صفحه ساخته شده به صورت زنده و پیش نمایش در موبایل و تبلت را دارد.
در این بخش می توانید تنظیمات مربوط به هر دستگاه را با توجه به نوع نمایش آن ها به صورت دلخواه تغییر دهید.
شما با استفاده از صفحه ساز یو ایکس بیلدر می توانید بهترین صفحات را با سلیقه شخصی خود و به بهترین شکل طراحی کنید.
در انتها از قسمت بالای صفحه ای که ساختید آیکن چرخ دنده یا همان تنظیمات را انتخاب کنید تا وارد تنظیمات مربوطه شوید.
می توانید عنوان صفحه را انتخاب کنید و همچنین حالت های مادر فرزندی برای برگه تعیین کنید.
و دیگر تنظیمات مربوط را شخصی سازی کنید.
در پایان همه تنظیمات، زدن گزینه Update را فراموش نکنید.
امیدواریم مقاله، کار با صفحه ساز یو ایکس بیلدر برای شما مفید باشد.
لطفا نظرات خود را با ما در میان بگذارید.