طراحی وب

  • ۰
  • ۰

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

 

 

مرحله 01: یک صفحه جدید ایجاد کنید


به داشبورد وردپرس خود > صفحات > افزودن جدید بروید
صفحه جدید ایجاد کنید
به این صفحه یک نام بدهید در اینجا من نام آن را صفحه اصلی گذاشتم.
همانطور که می خواهیم کل صفحه را با Elementor بسازیم، الگوی پیش فرض را روی "Elementor Canvas" قرار دهید. شما می توانید Elementor Full Width را انتخاب کنید، که به شما امکان می دهد کل صفحه را بدون منو سفارشی کنید.
پس از آن، صفحه را از نوار کناری سمت راست منتشر کنید. همچنین می توانید آن را به عنوان پیش نویس نگه دارید.
روی “Edit with Elementor” کلیک کنید و به صفحه ساز Elementor هدایت خواهید شد.
با elementor ویرایش کنید


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

روی دکمه Add Template کلیک کنید.
اضافه کردن الگو
شما یک دسته از الگوهای از پیش ساخته شده را دریافت خواهید کرد که از آنجا می توانید هر یک از قالب ها را انتخاب کرده و آنها را بر اساس نیاز خود سفارشی کنید.
پس از انتخاب موردی که می خواهید استفاده کنید، روی گزینه Insert کلیک کنید.
درج الگو
مرحله 03: یک هدر به صفحه اصلی خود اضافه کنید
پس از درج قالب ها صفحه آماده می شود و می توانید آن را برای استفاده در وب سایت مسافرتی خود سفارشی کنید.

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

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

می‌توانید هر تصویری را از فضای ذخیره‌سازی محلی خود آپلود کنید، یا می‌توانید تصویر موجود را با تصاویری که قبلاً آپلود شده‌اند از بخش رسانه جایگزین کنید. برای این کار فایل gif زیر را دنبال کنید.
می‌توانید ارتفاع، عرض، کدورت، حاشیه، بالشتک و همه چیز را از گزینه‌های ویرایش تنظیم کنید.
افزودن دکمه، متن، توضیحات همه چیز از گزینه ویرایش امکان پذیر است.
توضیحات هتل را اضافه کنید
مرحله 05: یک ویدیو و گواهی اضافه کنید
می‌توانید ویدیویی اضافه کنید تا نشان دهید که محیط اطراف شما چگونه است و مردم وقتی اینجا هستند چگونه از استراحتگاه شما لذت می‌برند.
افزودن گواهینامه تصمیم عاقلانه ای است تا مردم بدانند نظر مشتریان شما در مورد شما چیست.
یک ویدیو اضافه کنید
مرحله 06: یک فرم تماس اضافه کنید
یک فرم تماس اضافه کنید تا بازدیدکننده شما بتواند با شما تماس بگیرد. شماره تماس خود را مانند شماره تلفن، ایمیل یا شماره واتساپ در صفحه تماس تنظیم کنید تا به بازدیدکننده شما کمک کند در صورت داشتن هرگونه سوال با شما تماس بگیرد.
همچنین می توانید یک نقشه گوگل اضافه کنید تا افراد بتوانند شما را از کجا پیدا کنند.
یک فرم تماس اضافه کنید
مرحله 07: آن را در همه پلتفرم‌ها پاسخگو کنید
اطمینان حاصل کنید که صفحه شما کاملاً واکنش گرا است و در همه دستگاه ها به درستی به نظر می رسد. برای انجام این کار روی گزینه Responsive Mode کلیک کنید.
پس از انجام سفارشی سازی، روی دکمه Update کلیک کنید.
گزینه های پاسخگو
نمای کلی از صفحه اصلی ما
در اینجا نمای نهایی صفحه اصلی ما است که ما به تازگی ایجاد کرده ایم. و به این صورت است که می توانید از صفحه ساز Elementor برای ساخت هر صفحه ای از جمله صفحه اصلی، صفحه تماس، صفحه ویژگی یا هر صفحه دیگری بلافاصله استفاده کنید.

 

نحوه استفاده از Elementor Theme Builder


ویژگی های برتر Elementor که اکنون باید نگاهی بیندازید

 


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

در این بخش، ما به شما نشان می دهیم که چگونه می توانید هدرهای زیبایی با سازنده تم Elementor بسازید.

توجه: سازنده تم Elementor برای نسخه حرفه ای آن موجود است. نسخه رایگان دارای ویژگی بسیار محدودی است.

مرحله 01: نوع قالب را انتخاب کنید


به داشبورد وردپرس خود > Templates > Theme Builder بروید.
سپس بر روی دکمه افزودن جدید کلیک کنید، یا اگر از قبل هدری را دیدید که ظاهر آن را دوست داشتید، می توانید آن را برای استفاده به عنوان نقطه شروع وارد کنید.
یک الگو اضافه کنید
پس از کلیک بر روی دکمه افزودن جدید، یک صفحه پاپ آپ در مقابل شما ظاهر می شود. در آنجا یک منوی کشویی برای انتخاب از بین یک نوع قالب مشاهده خواهید کرد.
یک نوع معبد را انتخاب کنید، در اینجا ما Header را انتخاب می کنیم.
بعد اسمشو بذار


و در نهایت گزینه Create Template را بزنید.
یک نوع الگو را انتخاب کنید


توجه: Elementor Free فقط شامل قالب‌های بخش و صفحه می‌شود. نسخه Pro شامل چندین دسته قالب اضافی، از جمله ویجت جهانی، سرصفحه، پاورقی، تک و بایگانی است.

مرحله 02: هدر خود را در Elementor سفارشی کنید


شما می توانید انتخاب کنید که سربرگ خود را طراحی کنید یا می توانید یکی از پیش ساخته های O را انتخاب کنید

nes از کتابخانه الگوی Elementor.

 

روی گزینه Add Template کلیک کنید تا یک هدر از پیش ساخته شده در ویرایشگر شما بارگذاری شود.
ویرایشگر تم ساز Elementor


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

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

توجه: برای ایجاد فوتر برای وب سایت خود نیز می توانید همین مراحل را دنبال کنید. هنگامی که در حال طراحی پاورقی با استفاده از Elementor Theme Builder هستید، فقط مطمئن شوید که "Footer" را به عنوان نوع قالب خود انتخاب کنید.

  • ۰۲/۰۳/۲۲
  • اسماعیل احمدی

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی