با توجه به پیشرفت وردپرس و المنتور، تعداد زیادی از سایت ها به صفحه ساز المنتور روی آورده اند. این صفحه ساز طراحی آن را بسیار آسان می کند و حتی کسانی که توانایی کدنویسی ندارند می توانند از المنتور استفاده کنند. در این آموزش، تنظیمات اولیه Elementor را توضیح خواهیم داد تا طراحی و کار با Elementor را شروع کنید.
هر سایتی از استانداردها و الگوهای یکسانی پیروی می کند، به عنوان مثال یک سایت استاندارد از یک پالت رنگ خاص، یک فونت خاص، اندازه و ضخامت قلم برای عنوان ها و غیره استفاده می کند. اگر این موارد را تنظیم نکنید و بخواهید این کارها را به صورت دستی برای هر عنصر و فایل اجرایی انجام دهید، با دو مشکل بزرگ روبرو خواهید شد:
- سرعت کار طراحی شما بسیار کاهش می یابد.
- حجم کدهای شما زیاد می شود: درست است که هیچ کدی نمی نویسید، اما هر قسمتی که جداگانه استایل می کنید، یک کد جداگانه به صورت خودکار در css برای آن توسط Elementor نوشته می شود.
تنظیمات اولیه Elementor با استفاده از مجموعه پیش فرض
به طور پیش فرض، برای تنظیمات اولیه Elementor، مجموعه پیش فرض در قسمت templates قرار دارد، جایی که تنظیمات اولیه و تنظیمات پیش فرض قرار دارند. با ویرایش این قسمت می توانید تنظیمات مورد نظر خود را جایگزین کنید. این کیت شامل موارد تنظیم زیر است:
- رنگ های رایج
- فونت های رایج
- تایپوگرافی
- دکمه ها
- تصاویر
- فیلدهای فرم
- سربرگ
- پاورقی
- هویت سایت
- پس زمینه
- طرح بندی
- لایت باکس
- انتقال صفحه
- css سفارشی
- تنظیمات اضافی
با توجه به موارد فوق می توان گفت که هر آنچه برای اجرای تنظیمات یکپارچه سایت نیاز است در این قسمت گنجانده شده است، حال با هم می رویم و قسمت های مختلف را بررسی می کنیم.
تنظیمات رنگ عمومی در المنتور
با کلیک بر روی گزینه مشترک رنگ ها می توانید مطابق تصویر زیر سایت خود را به Elementor کد رنگ دهید تا از این پس در تمامی طرح های پیش فرض قرار گیرد.
تنظیمات جهانی فونت
در این بخش، می‌توانید هر تعداد فونتی را که قبلاً در Elementor بارگذاری کرده‌اید انتخاب کنید و ظاهر آنها را تنظیم کنید تا زمانی که نیاز به استفاده از آن دارید، نخواهید به آن استایل بدهید.
تنظیمات تایپوگرافی Elementor
این بخش برای ما بسیار مهم است زیرا بخش زیادی از کار ما و ظاهر سایت ما به این بخش بستگی دارد، تمام تنظیمات مربوط به فونت، شکل، رنگ و تمام سبک های دیگر عناوین، اتصالات، پاراگراف ها همچنین تنظیماتی که در این بخش تنظیم کرده اید وجود دارد به طور پیش فرض برای همه بخش ها اعمال می شود.
به عنوان مثال اگر رنگ متن لینک ها را به قرمز تغییر دهید، از این پس در هر جایی که از لینک در المنتور استفاده کنید، با رنگ قرمز نمایش داده می شود. این تنظیمات اولیه Elementor به ما در بهینه سازی کد کمک زیادی می کند.
تنظیمات دکمه
در این قسمت از تنظیمات اولیه Elementor می خواهیم به شکل و ظاهر دکمه ها نگاهی بیاندازیم تا از این به بعد هرجا که از دکمه در طراحی های خود استفاده می کنیم آن شکل و ظاهر را به خود بگیرد.
در این بخش، مطابق تصویر زیر، بخش تایپوگرافی را داریم که می توانیم نوع فونت، اندازه فونت، وزن فونت و سایر موارد مرتبط با فونت را تعیین کنیم. در قسمت text shadow می توانید برای نوشته های خود سایه یا حاشیه تعیین کنید، مطمئن شوید که این سایه و حاشیه درست در اطراف خود متن قرار می گیرد نه در اطراف کل دکمه. دو دکمه معمولی و دکمه نگه داشتن برای این است که تنظیمات دکمه را در حالت پیش فرض و زمانی که ماوس روی دکمه قرار دارد مشخص کنید.
اگر حالت عادی را انتخاب کنید، نام تنظیمات زیر آن برای حالت نمایش دکمه معمولی تنظیم می‌شود و اگر حالت نگه‌داشتن را انتخاب کنید، همه تنظیمات زیر آن برای حالت ماوس اضافه می‌شود. در قسمت رنگ متن می توانید رنگ خود متن را تنظیم کنید. بخش نوع پس‌زمینه به شما این امکان را می‌دهد که یک رنگ ثابت یا گرادیان برای دکمه خود انتخاب کنید. هر گزینه ای را انتخاب کنید و تنظیمات آن نمایش داده می شود.
گزینه box-shadow بر خلاف گزینه text-shadow که برای کل دکمه اعمال می شود، کادر و سایه ها را برای کل دکمه تنظیم می کند. در تب نوع قاب، می توانید یک حاشیه یا خط برای دکمه خود انتخاب کنید که می تواند یک خط، یک خط چین یا یک حالت دیگر باشد. با انتخاب هر عنصر، تنظیمات رنگ و ضخامت قاب نیز نمایش داده می شود.
در قسمت منحنی حاشیه می توانید گوشه های حاشیه ای که در قسمت قبل داده اید را گرد یا تیز کنید. در نهایت، با استفاده از فاصله داخلی می توانید فاصله بین متن دکمه و دیواره دکمه را کم یا زیاد کنید.
تو کمک کن شرط بندی روی المنتور شما می توانید دکمه های پویا ایجاد کنید که کارهای مختلفی را برای حالت های مختلف انجام می دهند.
تنظیمات تصویر
در این قسمت می توانید تنظیمات ظاهری تصاویر خود را ویرایش کنید. از این پس، این تنظیمات برای هر عکسی که در Elementor فراخوانی می کنید اعمال می شود. می توانید یک قاب به تصاویر خود اضافه کنید یا گوشه های عکس های خود را تیز یا خم کنید، حتی یک حالت رنگی برای تصاویر خود ایجاد کنید. تمام تنظیمات اولیه Elementor برای تصاویر در تصویر زیر توضیح داده شده است.
تنظیمات فرم
هر فرم از فیلدهای زیادی تشکیل شده است، در این قسمت از تنظیمات اولیه Elementor می توانید رنگ فیلدها، مرز فیلد، تایپوگرافی فیلدها و پس زمینه فیلد را مشخص کنید، اگر در این بین از قسمت مربوطه مشکل دارید. صفحه خطاهای المنتور کمک بگیرید
مقاله آموزشی یک منو در Elementor ایجاد کنید می تواند به شما ایده خوبی در مورد نحوه استفاده از اقلام بدهد.
تنظیمات هویت سایت
این قسمت برای سئو سایت مهم است. در این قسمت از تنظیمات اولیه Elementor مواردی مانند نام سایت که در هدر مرورگر و Google serp ظاهر می شود و توضیحات سایت که در توضیحات متا گوگل ظاهر می شود نیز می تواند در بخشی باشد. در سایت بر اساس نوع قالب شما
در تصویر زیر عناصر را توضیح داده ایم، علاوه بر این در این قسمت می توانید لوگوی سایت و آیکونی که در تب های مرورگر برای هر سایت نمایش داده می شود را تعریف کنید.
سئو برای دیده شدن سایت شما بسیار مهم است و اگر از آن اطلاعی ندارید می توانید خدمات سئو وردپرس از مجموعه ما استفاده کنید
تنظیمات پس زمینه
شما می توانید یک پس زمینه برای صفحه وب سایت خود انتخاب کنید این پس زمینه می تواند یک رنگ ثابت یا گرادیان یا حتی یک تصویر به انتخاب شما باشد. مطابق تصویر زیر به استفاده از بخش پس‌زمینه تنظیمات اصلی Elementor ادامه دهید.
سایر برگه‌های تنظیمات Elementor
5 بخش دیگر از تنظیمات اولیه Elementor وجود دارد که تقریباً تخصصی تر از بخش های قبلی و اگر از آن هستند Elementor pro شما استفاده نمی کنید، به برخی از آنها دسترسی ندارید.
بخش چیدمان در میان تنظیمات اصلی المنتور، تنظیمات مربوط به ابعاد صفحه سایت شما هستند که به طور پیش فرض با استانداردهای Bootstrap و Responsive طراحی شده اند. پس ترجیحا آن را دستکاری نکنید.
بخش لایت باکس تنظیمات مربوط به کلیک کردن روی تصاویر را به شما می دهد. به این ترتیب وقتی روی یک تصویر کلیک می کنید، آن تصویر در اندازه کامل به همراه توضیحات متنی آن نمایش داده می شود. این تنظیمات به طور پیش فرض استاندارد هستند.
انتقال صفحه از میان تنظیمات اولیه Elementor، شما آن را فقط در Elementor Pro دارید و عملکرد آن فعال کردن بارگذاری اولیه صفحه در هر بار تازه‌سازی است. حتما در برخی از سایت ها دیده اید که وقتی سایت در شرف بارگذاری است، یک تصویر متحرک مانند لوگوی سایت نمایش داده می شود و سپس کل سایت بارگذاری می شود که به آن بارگذاری نیز می گویند.
css سفارشی از تنظیمات اولیه Elementor در Elementor Pro فعال است و به شما این امکان را می دهد که کدهای css را در قالب خود درج کنید که نیاز به دانش کدنویسی دارد، اگر می خواهید یک سایت کامل و بدون درز داشته باشید می توانید از آن استفاده کنید. خدمات طراحی سایت وردپرس از SEO Master استفاده کنید.
و در نهایت بخش تنظیمات اضافی این شما را به صفحه تنظیمات Elementor می برد. اگر در قسمتی از تنظیمات اولیه المنتور مشکل داشتید می توانید از تیم پشتیبانی استاد سئو کمک بگیرید.
