هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما پیوستید متشکریم. جایی که هر هفته یک بسته طرح‌بندی Divi کاملاً جدید و رایگان از تیم طراحی خود به شما می‌دهیم.

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

این بسته چیدمان شامل:

– 8 صفحه آرایی آماده که به صورت استراتژیک برای هر وب سایت آژانس املاک طراحی شده اند (از جمله طراحی پاورقی)
– عکس ها و گرافیک های اصلی و رایگان + فایل منبع سفارشی (به زیر مراجعه کنید)
– به‌علاوه، مجموعه‌ای بزرگ از عناصر وب‌سایت از پیش طراحی‌شده که می‌توان آن‌ها را سفارشی کرد و در هر مکانی دوباره استفاده کرد.

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

طراحی صفحه فرود

دمو طرح زنده را ببینید

طراحی صفحه اصلی

دمو طرح زنده را ببینید

طراحی صفحه خدمات

دمو طرح زنده را ببینید

طراحی صفحه املاک

دمو طرح زنده را ببینید

طراحی صفحه لیست

دمو طرح زنده را ببینید

درباره طراحی صفحه

دمو طرح زنده را ببینید

طراحی صفحه وبلاگ

دمو طرح زنده را ببینید

طراحی صفحه تماس

دمو طرح زنده را ببینید

توابع اساسی

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

تظاهرات زنده

برای مشاهده نسخه نمایشی زنده از هر یک از طرح‌بندی‌های موجود در بسته، روی پیوندهای زیر کلیک کنید.

1. صفحه فرود نماینده املاک (نمایشی زنده)
2. صفحه اصلی نماینده املاک (نمایشگر زنده)
3. صفحه خدمات آژانس املاک (دمو زنده)
4. صفحه املاک نماینده املاک (دموی زنده)
5. صفحه فهرست نمایندگی املاک (دمو زنده)
6. صفحه اطلاعات نماینده املاک (نمایشگر زنده)
7. صفحه وبلاگ نماینده املاک (نمایشی زنده)
8. صفحه تماس با نماینده املاک (دمو زنده)

همین الان به این طرح دسترسی داشته باشید
مستقیماً از Divi Builder شما

از نسخه 3.0.99 Divi، می‌توانید هر یک از طرح‌بندی‌های موجود در این بسته (به همراه تمام بسته‌های طرح‌بندی آماده Divi) را مستقیماً از Divi Builder پیدا و وارد کنید. آنها از قبل منتظر شما هستند.

برای دسترسی به طرح‌بندی جدید، کافی است هنگام ویرایش یک صفحه، Visual Builder را فعال کنید و نماد «بارگیری از کتابخانه» را در نوار تنظیمات صفحه جستجو کنید (به نظر می‌رسد یک علامت مثبت است). روی این نماد کلیک کنید تا پنجره بازشو Load from Library باز شود. در تب Premade Layouts، با پیمایش در لیست بسته های طرح بندی، می توانید به راحتی طرح بندی جدید را پیدا کنید. پس از یافتن بسته طرح‌بندی نماینده املاک، روی آن کلیک کنید. تمام طرح‌بندی‌های جداگانه موجود در بسته را خواهید دید. طرح مورد نظر برای استفاده را انتخاب کنید و سپس روی دکمه “استفاده از این طرح” کلیک کنید.

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

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

احراز هویت لازم است

قبل از اینکه بتوانید طرح‌بندی‌های Premade را از کتابخانه Divi دانلود کنید، باید اشتراک Elegant Themes خود را احراز هویت کنید. شما می توانید این کار را با رفتن به Divi > گزینه های تم > به روز رسانی ها. در آنجا می توانید نام کاربری و کلید API خود را وارد کرده و تغییرات را ذخیره کنید.

می توانید کلید API خود را در قسمت اعضای سایت Elegant Themes پیدا کنید. هنگامی که نام کاربری و کلید API خود را وارد کردید، به کتابخانه ما از صدها طرح‌بندی رایگان (از جمله این یکی) دسترسی فوری خواهید داشت. اگر این کار را انجام نداده‌اید، وقتی برای وارد کردن طرح‌بندی صفحه خود کلیک می‌کنید، از شما خواسته می‌شود نام کاربری عضویت Elegant Themes و کلید API خود را وارد کنید.

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

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

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

بسته طرح بندی جدید هر هفته!

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

یکی از مشکل‌سازترین خطاهایی که بازدیدکنندگان سایت شما می‌توانند با آن مواجه شوند، هشدار امنیتی است. با وجود تمام حملات brute force، بدافزارها و حملات انکار سرویس، گشت و گذار و خرید ایمن برای کاربران اینترنت بسیار مهم است. اگر سایت شما اخطار ERR_SSL_OBSOLETE_VERSION را نمایش دهد، بازدیدکنندگان نمی توانند بدون کلیک روی پیوندی که در خطا وجود دارد، به سایت شما دسترسی پیدا کنند، که اساساً به آنها می گوید که برنگردند.

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

هشدار ERR_SSL_OBSOLETE_VERSION چیست؟

هشدار ERR_SSL_OBSOLETE_VERSION یک پیام خطایی است که بازدیدکنندگان سایت شما می بینند که آیا گواهی امنیتی شما از نسخه قدیمی مانند TLS 1.0 یا 1.1 استفاده می کند. با شروع انتشار کروم 72، این نسخه ها دیگر پشتیبانی نمی شدند.

TLS در مقابل SSL چیست؟

امنیت لایه حمل و نقل (TLS) یک پروتکل امنیتی اینترنتی است که احراز هویت و تحویل امن محتوا را در اینترنت امکان پذیر می کند. به عنوان مثال، مواردی مانند استفاده از کارت اعتباری برای خرید یا پر کردن برنامه های کاربردی کارکنان با اطلاعات حساس در وب سایت ها را ایمن می کند.

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

اگر SSL دارید چرا باید به TLS اهمیت دهید؟

همانطور که قبلا ذکر شد، سایت شما از نظر فنی دیگر از SSL استفاده نمی کند. به طور کلی، همه گواهینامه های SSL هستند در حقیقت گواهینامه های TLS این روزها. اکثر ارائه دهندگان میزبانی هنوز از اصطلاح گواهی SSL به دلیل بدنامی که به ارمغان می آورد استفاده می کنند، اما از TLS برای امنیت و مزایای سرعت آن استفاده می کنند.

چگونه به‌روزرسانی نسخه TLS سرور شما می‌تواند ERR_SSL_OBSOLETE_VERSION را برطرف کند

در سال 2019، گوگل اعلام کرد که TLS 1.0 و 1.1 را در کروم به دلیل آسیب‌پذیری‌های امنیتی بازنشسته می‌کند. از زمان انتشار TLS 1.3 در سال 2018، Chrome حداقل به نسخه 1.2 نیاز دارد تا وب‌سایت‌ها را بدون هشدار نمایش دهد. در نتیجه، همه وب‌سایت‌هایی که از نسخه‌های قبلی TLS استفاده می‌کنند، با یک پیام ناخوشایند ERR_SSL_OBSOLETE_VERSION گیر کرده‌اند. استفاده از نسخه های پشتیبانی نشده TLS خطرناک است – نه تنها برای وب سایت شما، بلکه برای بازدیدکنندگان شما.

اکثر مرورگرهای اصلی اکنون از TLS 1.3 (به جز IE) پشتیبانی می کنند، و این استاندارد امنیت حمل و نقل پیش فرض برای Google، Youtube و Netflix از سال 2020 و غیره است. TLS 1.3 نه تنها سطوح بالاتری از امنیت را ارائه می دهد، بلکه داده ها را بسیار سریعتر منتقل می کند. به عنوان مثال، TLS 1.3 برای انتقال داده ها از مرورگر بازدیدکننده شما به سرور شما نیمی از زمان TLS 1.2 را صرف می کند. علاوه بر این، دیگر پروتکل‌های اینترنتی مانند HTTPS، SMTP و POP3 (که برای ایمیل استفاده می‌شوند) اکنون از نسخه‌های جدیدتر TLS استفاده می‌کنند. حتی اگر در سایت خود هشداری دریافت نکردید، باید مطمئن شوید که سایت شما حداقل نسخه 1.2 TLS را اجرا می کند. امنیت وب سایت شما به آن بستگی دارد.

نحوه رفع ERR_SSL_OBSOLETE_VERSION در کروم

اگر در حال حاضر هنگام تلاش برای دسترسی به وب‌سایت خود، این خطا را در Chrome می‌بینید، احتمالاً سایت شما نسخه قدیمی TLS را اجرا می‌کند. اصلاح این مشکل به روش های مختلفی نیاز دارد که در نهایت به ارائه دهنده هاست خاص شما بستگی دارد. با این حال، یک مکان عالی برای شروع این است که بررسی کنید سایت شما چه نسخه ای از TLS را اجرا می کند.

چگونه بفهمیم سایت شما چه نسخه ای از TLS را اجرا می کند

می‌توانید با استفاده از ابزارهای برنامه‌نویس و میانبر صفحه‌کلید به این اطلاعات در Chrome دسترسی پیدا کنید. مطبوعات Command+Option+C کلیدها (در مک) یا Control+Shift+C (در ویندوز و لینوکس). سپس بر روی کلیک کنید امنیت بخش. صفحه ای ظاهر می شود و نسخه TLS در حال اجرا در سایت شما را نشان می دهد.

چگونه بفهمیم میزبان/سرور وب سایت شما چه نسخه ای از TLS را اجرا می کند

قبل از اتصال به هاست یا ایجاد هر گونه تغییر در فایل های میزبان وب، بهتر است بررسی کنید که آیا سرور میزبان شما از TLS 1.2 یا 1.3 پشتیبانی می کند. با مراجعه به Geekflare’s TLS Checker می توانید به این هدف دست یابید. آدرس هاست خود را وارد کنید و روی ارسال کلیک کنید. وقتی نتایج ظاهر شد، به پایین بروید تا پروتکل های نصب شده را ببینید. به دنبال TLS 1.2 و 1.3 باشید. اگر پشتیبانی شوند، در کنار هرکدام بله را خواهید دید.

با ارائه دهنده هاست خود تماس بگیرید یا به روز کنید

هنگامی که تأیید کردید که سایت و/یا سرور شما نسخه قدیمی TLS را اجرا می کند، ساده ترین راه حل برای خطای ERR_SSL_OBSOLETE_VERSION این است که با ارائه دهنده میزبان خود تماس بگیرید تا تعیین کنید آیا نسخه TLS شما قابل ارتقا است یا خیر. انتقال از TLS 1.0 یا 1.1 به TLS 1.2+ مشکل شما را حل می کند. اگر این یک گزینه نیست، وقت آن رسیده است که به دنبال یک میزبان جدید برای سایت خود باشید.

ما آزمایش‌هایی را روی چندین ارائه‌دهنده میزبانی پیشرو انجام دادیم تا توانایی سرور آنها را برای مدیریت TLS 1.3 آزمایش کنیم. Siteground، WP Engine، Pressable، Flywheel، Bluehost و Cloudways از آن پشتیبانی می کنند. بنابراین اگر با یکی از این ارائه دهندگان میزبانی می کنید، به احتمال زیاد خطای ERR_SSL_OBSOLETE_VERSION را نخواهید دید. با این حال، باید توجه داشته باشیم که فقط به این دلیل که یک ارائه دهنده میزبانی ممکن است از جدیدترین نسخه TLS پشتیبانی کند، به این معنی نیست که آنها واقعاً از آن استفاده می کنند. برخی از هاست های وب هنوز به طور پیش فرض از 1.1 استفاده می کنند که عالی نیست. به همین دلیل مهم است که بررسی کنید کدام نسخه در حال حاضر در سایت شما نصب شده است.

آزمایش رفع خطای ERR_SSL_OBSOLETE_VERSION در سرور محلی

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

اگر از وردپرس استفاده می کنید، ارائه دهنده هاست شما به احتمال زیاد از وب سرورهای Apache یا NGINX استفاده می کند. برای هدف این آموزش، ما از یک سرور محلی و MAMP Pro برای ویرایش فایل‌های Apache و NGINX SSLProtocol خود برای غیرفعال کردن TLS 1.0 و 1.1 استفاده می‌کنیم. در مرحله بعد، پشتیبانی از TLS 1.2 و 1.3 را فعال می کنیم. اگر از یک دستگاه ویندوز استفاده می کنید، می توانید با استفاده از WAMP با ما همراه باشید تا همین کار را انجام دهید.

ما می خواهیم مجدداً تأکید کنیم که با میزبان خود بررسی کنید تا تأیید کنید که TLS 1.2 یا 1.3 را پشتیبانی می کند. ایجاد تغییرات در پروتکل های SSL بدون پشتیبانی مناسب، گواهی SSL شما را از بین می برد.

نحوه به روز رسانی نسخه TSL در آپاچی با استفاده از Mamp Pro

اگر از MAMP Pro برای این آموزش استفاده می کنید، فرض می کنیم از قبل با نحوه ایجاد یک سایت وردپرس و نصب SSL آشنا هستید. اگر در مورد نحوه انجام این کار به راهنمایی نیاز دارید، راهنمای نهایی ما برای MAMP Pro برای کاربران وردپرس را بررسی کنید.

نحوه غیرفعال کردن TLS 1.0 و 1.1 در آپاچی

برای غیرفعال کردن TLS 1.0 و 1.1 در آپاچی، باید فایل پیکربندی حاوی پروتکل SSL را برای وب سرور خود ویرایش کنید. بسته به پلتفرمی که از آن استفاده می کنید، این فایل ممکن است در مکان های مختلفی قرار داشته باشد.

در مکان پیش فرض آپاچی، احتمالاً اینجاست:
/usr/local/apache2/conf/extra/httpd-ssl.conf

اگر از سرور اوبونتو/دبیان استفاده می‌کنید، فایل احتمالاً در اینجا پیدا می‌شود:
/etc/apache2/mods-enabled/ssl.conf

در نهایت، اگر یک سرور محلی macOS را از طریق MAMP Pro اجرا می کنید (مانند ما)، فایل را در اینجا پیدا خواهید کرد:
/mamp/conf/apache/extra/httpd-ssl.conf

سپس جستجو کنید بخش پشتیبانی از پروتکل SSL، که از چندین خط کد تشکیل شده است. این تنظیمات پیش فرض فایل httpd-ssl.conf شما است:

برای تعیین اینکه چه پروتکل هایی فعال هستند، به دو خط آخر کد نگاه کنید.

ما باید به آپاچی بگوییم که فقط نسخه های TLS 1.2 یا بالاتر را اجرا کند. تمام نسخه ها در حال حاضر فعال هستند. برای تغییر این، شما تغییر خواهید کرد SSLProtocol all -SSLv3 SSLProxyProtocol all -SSLv3 به موارد زیر:

 SSLProtocol TLSv1.1 TLSv1.2

اکنون فایل باید به شکل زیر باشد:

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

نحوه به روز رسانی نسخه TLS در NGINX با استفاده از Mamp Pro

برای به روز رسانی پروتکل SSL در وب سرور NGINX، باید فایل های پیکربندی سایت خود را پیدا کنید. همچنین می تواند مانند MAMP Pro در فایل پیکربندی اصلی NGINX قرار گیرد. برای ویرایش فایل با استفاده از MAMP، آن را باز کنید map/conf/nginx/nginx.conf. فایل را با ویرایشگر HTML/متن خود باز کنید. برای این آموزش، ما از BBedit استفاده می کنیم، اما هر ویرایشگر کار می کند. اگر از MAMP Pro استفاده نمی کنید، فایل nginx.conf معمولاً در آن قرار دارد /etc/nginx/nginx.conf.

به پایین اسکرول کنید تا زمانی که خط شروع شده را ببینید ssl_protocols. اگر تمام نسخه‌های TLS را فعال کرده باشید، فایل شما به شکل زیر خواهد بود:

همانطور که می بینید، TLS 1.0، 1.1 و 1.2 فعال هستند، اما پشتیبانی از 1.3 وجود ندارد. برای تغییر این، شما می خواهید تغییر دهید ssl_protocols TLSv1 TLSv1.1 TLSv1.2; به موارد زیر:

ssl_protocols TLSv1.2 TLSv1.3;

اکنون فایل باید به شکل زیر باشد:

اکنون سرور شما فقط باید از نسخه های 1.2 و 1.3 TLS استفاده کند. برای تأیید، سرور خود را مجدداً راه اندازی کنید و سایت خود را در Chrome بارگیری کنید. تنظیمات خود را با استفاده از ابزار Developer Inspector بررسی کنید. همانطور که قبلا ذکر شد، می توانید این کار را با فشار دادن انجام دهید Command+Option+C کلیدها (در مک) یا Control+Shift+C (در ویندوز و لینوکس)، سپس کلیک کنید امنیت بخش.

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

بسته بندی وسایل

با توجه به رشد سریع نگرانی های امنیتی، مهم است که سایت خود را با آخرین نسخه های TLS به روز نگه دارید. ما می دانیم که خطاهای مرورگر می تواند یک تجربه خسته کننده باشد، به خصوص اگر ندانید برای رفع آنها چه کاری انجام دهید. با استفاده از ابزارهایی مانند Chrome Dev Tools و Geekflare’s TLS checker می‌توانید مشکل را تأیید کنید. اما متاسفانه راه حل مشکل به روز رسانی نسخه TLS است که فقط در سطح سرور قابل انجام است. بنابراین بهترین کار این است که با میزبان خود تماس بگیرید یا در صورت لزوم، ارائه دهنده هاست خود را ارتقا دهید تا مطمئن شوید که از نسخه های جدید TLS پشتیبانی می کند. همچنین ممکن است آزمایش نسخه های جدیدتر TLS در سایت خود به صورت محلی در وب سرورهای Apache و NGINX مفید باشد. این کمک می کند تا اطمینان حاصل شود که بازدیدکنندگان شما هنگام ایجاد این تغییرات به صورت زنده با هشدار ناخوشایند ERR_SSL_OBSOLETE_VERSION مواجه نخواهند شد.

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

تصویر ویژه valeriya kozoriz، Funtap / shutterstock.com

ساختن بخش قهرمان وب سایت از ابتدا یا استفاده از ماژول Divi Fullwidth Header هر دو روشی است که می توانید یک طراحی جذاب برای سایت خود ایجاد کنید. در این پست، ما به مزایا و معایب استفاده از ماژول هدر تمام عرض در مقابل ساخت بخش کاراکتر خود با Divi خواهیم پرداخت.

بیا مشغول شویم!

اهمیت بخش قهرمان وب سایت

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

ساخت بخش قهرمان از ابتدا

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

مزایای این رویکرد

ابتدا، بیایید به مزایای ایجاد بخش قهرمان وب سایت از ابتدا با استفاده از Divi نگاه کنیم.

1. کنترل کامل طراحی

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

2. از هر ماژول Divi استفاده کنید

از آنجایی که بخش را از ابتدا می سازید، می توانید هر ماژول Divi را به هدر اضافه کنید. این بدان معنی است که می توانید یک گزینه ایمیل، فرم تماس، دکمه، ماژول متن، گالری و غیره اضافه کنید. گزینه های سفارشی سازی بی پایان هستند!

معایب این رویکرد

حال بیایید به معایب ساخت یک بخش کاراکتر از ابتدا نگاه کنیم.

1. شما باید از ابتدا بسازید

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

2. به چندین ماژول نیاز دارد

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

ساخت بخش قهرمان با ماژول هدر Divi Fullwidth

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

مزایای این رویکرد

بیایید به مزایای ساخت بخش قهرمان با ماژول Divi Fullwidth Header نگاه کنیم.

1. تمام مطالب خود را در یک ماژول

ماژول Divi Fullwidth Header همه چیز را دارد – تصاویر، نماد، متن سرصفحه، متن زیرنویس، متن بدنه و دو دکمه، همه در ماژول. این بدان معناست که برای انجام کار به چندین ماژول نیاز نخواهید داشت، و تمام محتوای شما در یک ماژول قرار دارد و به راحتی می توانید هر جنبه از بخش کاراکتر خود را در یک مکان سفارشی کنید.

2. اکنون طرح بهینه شده است

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

معایب این رویکرد

حال اجازه دهید معایب ساخت بخش قهرمان با ماژول Divi Fullwidth Header را ارزیابی کنیم.

1. انعطاف کمتر با طراحی

ماژول Divi Fullwidth Header با گزینه های محتوای از پیش تعریف شده ارائه می شود، اگرچه اگر بخواهید محتوایی را که در ماژول موجود نیست اضافه کنید، بسیاری از آنها می توانند محدود کننده باشند. این بدان معناست که شما با طراحی کلی انعطاف کمتری خواهید داشت.

ساخت دو بخش قهرمان مرحله به مرحله

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

آنچه برای شروع نیاز دارید

برای شروع، باید موارد زیر را انجام دهید:

1. Divi را در وب سایت وردپرس خود نصب کنید.
2. یک صفحه اضافه کنید و به آن عنوان بدهید.
3. Visual Builder را فعال کنید

تب قهرمان خود را از ابتدا ایجاد کنید

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

Visual Builder را فعال کنید

برای استفاده از کشیدن و رها کردن سازنده Divi، باید Visual Builder را با کلیک بر روی دکمه “Use Divi Builder” فعال کنیم. این صفحه را با استفاده از Divi Visual Builder دوباره بارگیری می کند.

انتخاب کنید: از ابتدا بسازید

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

ردیف اضافه کنید و ستون ها را تنظیم کنید

یک ردیف اضافه کنید و سه ستون را انتخاب کنید.

اضافه کردن ماژول ها

حال بیایید ماژول های محتوای مورد نیاز خود را اضافه کنیم.

• ستون سمت چپ: 2 ماژول متن، جداکننده، یک دکمه
• ستون وسط: تصویر
• ستون سمت راست: تصویر

بخش سبک

حالا بیایید تنظیمات بخش را تنظیم کنیم.

یک بخش اضافه کنید و سپس تنظیمات زیر را پیکربندی کنید:

1. رنگ پس زمینه: #1d1d25

سبک متن سرصفحه

متن سرصفحه را قالب بندی کنید:

1. وزن قلم عنوان: نیمه پررنگ
2. رنگ متن عنوان: #ffffff
3. اندازه متن عنوان: 90 پیکسل
4. ارتفاع هدر: 1.1 em

جداکننده سبک

تنظیمات جداکننده را پیکربندی کنید:

1. رنگ: rgba (255,255,255,0.3)
2. وزن جداکننده: 10 پیکسل
3. حداکثر عرض: 260 پیکسل

متن بدنه سبک

سبک متن بدنه:

1. رنگ متن بدنه: rgba (255,255,255,0.7)
2. اندازه متن: 13 پیکسل
3. ارتفاع خط متن: 1.8 میلی متر

دکمه سبک

حالا بیایید دکمه را استایل کنیم.

در تب دکمه ها:

1. استفاده از سبک های سفارشی برای دکمه: بله
2. اندازه متن دکمه: 14 پیکسل
3. رنگ متن دکمه: #ffffff
4. پس زمینه دکمه:
5. عرض قاب دکمه: 0 پیکسل
6. شعاع حاشیه دکمه: 0 پیکسل

در تب فاصله:

• بالا و پایین: 40 پیکسل
• چپ و راست: 20 پیکسل

تصاویر را اضافه کنید

تصاویر را به ماژول های تصویر اضافه کنید.

تنظیمات ردیف را تنظیم کنید

در تنظیمات سفارش:

• 15vw را به فیلد سمت چپ اضافه کنید.

ستون 2 را تصحیح کنید

در ستون دوم، این تنظیمات را پیکربندی کنید:

CSS سفارشی

کد زیر را در قسمت کد عنصر اصلی قرار دهید:

margin-right: -15vw!important;
z-index: 100!important;

فاصله

یک پد بالای 100 پیکسل اضافه کنید.

اینجا! اکنون یک بخش کاراکتر سفارشی کاملاً طراحی شده دارید.

ایجاد بخش قهرمان خود با ماژول هدر تمام عرض Divi

حالا بیایید نحوه بازسازی این بخش قهرمان را با استفاده از ماژول Fullwidth Header بررسی کنیم.

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

یک صفحه جدید اضافه کنید، به آن عنوان بدهید و سپس روی «Use Divi Builder» کلیک کنید و سپس Build From Scratch را انتخاب کنید.

یک بخش با عرض کامل و یک هدر با عرض کامل اضافه کنید

یک بخش با عرض کامل اضافه کنید و سپس Full-Width Header را از کتابخانه ماژول انتخاب کنید.

محتوا اضافه کنید

محتوای متن را به ماژول در تب Text اضافه کنید.

تصاویر را اضافه کنید

تصاویر را در قسمت تصاویر اضافه کنید.

رنگ پس زمینه را تغییر دهید

در تب پس زمینه، تنظیمات زیر را پیکربندی کنید:

1. رنگ پس زمینه: #1D1D25

سبک متن سرصفحه

تنظیمات متن سرصفحه را پیکربندی کنید:

1. وزن قلم عنوان: پررنگ
2. اندازه متن عنوان: 90 پیکسل

متن بدنه سبک

تنظیمات متن بدنه را پیکربندی کنید:

1. رنگ متن: rgba (255,255,255,0.55)

سبک متن زیرنویس

تنظیمات متن زیرنویس را پیکربندی کنید:

1. وزن قلم زیرنویس: پررنگ
2. رنگ متن زیرنویس: #4C594C
3. فاصله بین حروف زیرنویس: 3 پیکسل

دکمه های سبک

حالا بیایید دو دکمه را استایل کنیم.

دکمه یک

در تب Button One، تنظیمات زیر را پیکربندی کنید:

1. از سبک های سفارشی برای دکمه یک استفاده کنید: بله
2. پس زمینه دکمه یک: #4c594c
3. عرض حاشیه تک دکمه: 0 پیکسل
4. شعاع حاشیه یک دکمه: 0 پیکسل
5. نمایش نماد دکمه یک: بله
6. نمایش نماد فقط در حالت شناور برای دکمه اول: خیر
7. دکمه ONE Padding: 25px بالا و پایین. 25 پیکسل سمت چپ، 50 پیکسل سمت راست.

دکمه دو

در تب Button Two، تنظیمات زیر را پیکربندی کنید:

1. از سبک های سفارشی برای دکمه دو استفاده کنید: بله
2. عرض هر دو حاشیه دکمه: 0 پیکسل
3. شعاع هر دو حاشیه دکمه: 0 پیکسل
4. دکمه دو لایه: 25px بالا و پایین. 25 پیکسل چپ و راست.
5. Button Box Shadow: گزینه 4 را انتخاب کنید
6. موقعیت افقی سایه جعبه: 0px
7. موقعیت عمودی سایه جعبه: 2 پیکسل
8. رنگ سایه: #ffffff

اینجا! اکنون یک بخش کاراکتر کاملاً طراحی شده با استفاده از ماژول Divi Fullwidth Header دارید.

افکار نهایی

ساخت بخش قهرمان با Divi آسان است، چه از ابتدا بسازید یا از ماژول Fullwidth Header استفاده کنید. هر دو گزینه به شما این امکان را می‌دهند که طرح‌های هدر خیره‌کننده‌ای ایجاد کنید که علاقه بازدیدکنندگان شما را جلب کند. بسته به نیازهای منحصر به فرد شما، هر یک از گزینه ها گزینه بسیار خوبی برای طراحی بخش شخصیت خود است. پس از خواندن جوانب مثبت و منفی هر دو، بخش شخصیت خود را چگونه طراحی می کنید؟

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

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

یک نگاه یواشکی

در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است

آنچه برای شروع نیاز دارید

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

حالا شما آماده رفتن هستید!

چگونه پس از علامت زدن کادری در فرم تماس Divi، یک منوی کشویی گزینه ها را آشکار کنیم

یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید

بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی ما از صفحه فرود Home Baker از بسته طرح بندی Home Baker استفاده خواهیم کرد.

یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.

برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.

در مرحله بعد، طرح بندی صفحه فرود Home Baker را جستجو و انتخاب کنید.

گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.

اکنون ما آماده ساختن طرح خود هستیم.

فرم تماس را اضافه کنید

به بخش «پذیرش سفارش‌های سفارشی» در طرح‌بندی Home Baker بروید. ما یک فرم تماس به این بخش اضافه می کنیم. ابتدا دکمه تماس با من را که در زیر متن عنوان قرار دارد حذف کنید.

سپس یک ماژول فرم تماس را در زیر متن عنوان وارد کنید.

ما باید چیدمان خود را طوری تنظیم کنیم که تمام فیلدها کل عرض فرم را اشغال کنند. تنظیمات ماژول فرم تماس را باز کنید، سپس تنظیمات قسمت Name را باز کنید.

به تب Design رفته و تنظیمات layout را باز کنید. فیلد Name را با عرض کامل ایجاد کنید.

همین مراحل را برای فیلد آدرس ایمیل تکرار می کنیم. تنظیمات فیلد ایمیل را باز کنید، سپس تنظیمات طرح بندی را در تب Design باز کنید و فیلد را روی تمام عرض تنظیم کنید.

در مرحله بعد، بیایید تنظیمات ضد هرزنامه خود را در تب Content تنظیمات فرم تماس تنظیم کنیم. برای این فرم از سرویس امنیتی ReCaptcha استفاده خواهم کرد.

• استفاده از سرویس حفاظت از هرزنامه: بله
• ارائه دهنده خدمات: ReCaptcha

یک کشویی با گزینه های افشا به فرم اضافه کنید

اکنون می‌توانیم فهرست کشویی خود را با گزینه‌های آشکار اضافه کنیم. برای این مثال، یک چک باکس به فرم اضافه می‌کنیم که از کاربران می‌پرسد آیا به سفارش کالاهای پخته شده سفارشی علاقه دارند یا خیر. اگر این کادر را علامت بزنید، یک کادر کشویی ظاهر می شود که در آن کاربر نوع پخته شده ای را که می خواهد سفارش دهد انتخاب می کند. بیا شروع کنیم.

ابتدا یک فیلد جدید به فرم اضافه کنید.

تنظیمات فیلد جدید را باز کنید و محتوای زیر را زیر تنظیمات متن اضافه کنید.

• شناسه فیلد: من علاقه مند هستم
• عنوان: به سفارش سفارشی علاقه دارید؟

سپس در قسمت گزینه های فیلد موارد زیر را تنظیم کنید:

• نوع: چک باکس ها
• گزینه ها: بله
• فیلد اجباری: خیر

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

گزینه های فیلد جدید را باز کنید و شناسه و عنوان فیلد زیر را اضافه کنید:

• شناسه فیلد: چه نوع
• عنوان: چه نوع شیرینی؟

سپس Field Options را باز کرده و نوع فیلد را روی گزینه Dropdown Selection قرار دهید. سپس گزینه ها را اضافه کنید.

• نوع: منوی کشویی را انتخاب کنید
• تنظیمات:
  • نان ها
  • کیک ها
  • کلوچه
  • شیرینی
  • دیگران
• فیلد اجباری: خیر

حالا به تب Conditional Logic رفته و تنظیمات Conditional Logic را فعال کنید. سپس قانون نمایش فیلد را بسته به چک باکس بالا تنظیم کنید.

• فعال سازی: بله
• قوانین: بهره برابر است با بله

این قانون فرم را طوری تنظیم می کند که اگر کادر “بله” انتخاب شود، قسمت “چه نوع کالاهای پخته شده” ظاهر می شود. اگر علامت چک باکس را بردارید، فیلد نوع پنهان می ماند.

طراحی فرم تماس را سفارشی کنید

هنگامی که فرم تماس و منطق شرطی ما تنظیم شد، می‌توانیم طراحی فرم را برای تناسب بهتر با طرح‌بندی صفحه سفارشی کنیم.

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

• رنگ پس زمینه فیلدها: #FFFFFF
• رنگ متن حاشیه: #906d5e

سپس padding فیلد را تنظیم کرده و تنظیمات فونت را سفارشی کنید.

• حاشیه‌ها در بالا: 16 پیکسل
• لایه بندی حاشیه های زیر: 16 پیکسل
• لایه‌بندی حاشیه‌های چپ: 20 پیکسل
• بالشتک حاشیه سمت راست: 20 پیکسل
• فونت Fields: Lato
• وزن قلم حاشیه: پررنگ
• سبک قلم حاشیه ها: تمام حروف (TT)
• فاصله حروف حاشیه: 0.1 em

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

• استفاده از سبک های سفارشی برای دکمه: بله
• رنگ متن دکمه: #3b261e
• پس زمینه دکمه: #dcc087

سپس کادر دکمه و تنظیمات فونت را سفارشی کنید.

• رنگ قاب دکمه: #dcc087
• شعاع حاشیه دکمه: 0 پیکسل
• فاصله حروف دکمه ها: 0.1 em
• فونت دکمه: Lato
• وزن قلم دکمه: سنگین
• سبک قلم دکمه: همه حروف (TT)

سپس فیلد دکمه و پد را به صورت زیر تغییر دهید:

• حاشیه دکمه بالایی: 10 پیکسل
• بالشتک برای دکمه ها در بالا: 16 پیکسل
• بالشتک دکمه زیر: 16 پیکسل
• صفحه دکمه سمت چپ: 32 پیکسل
• پد دکمه سمت راست: 32 پیکسل

در نهایت، تنظیمات حاشیه را برای اضافه کردن حاشیه‌ها در اطراف ورودی‌های فرم تغییر می‌دهیم.

• عرض حاشیه را وارد می کند: 1 پیکسل
• رنگ قاب ورودی: #3b261e

نتیجه نهایی

این طرح کامل فرم تماس را تکمیل می کند. بیایید نگاهی به فرم در عمل با گزینه های بازشوی افشاگری بیندازیم.

افکار نهایی

پیاده سازی منطق شرطی در ماژول فرم تماس Divi آسان است و به شما امکان می دهد فرم های پویا ایجاد کنید که فیلدهای مرتبط را بر اساس پاسخ های قبلی کاربر ارائه می دهد. اگرچه مثال در این آموزش نسبتا ساده است، اما می توانید از منطق شرطی برای ایجاد فرم های پیچیده با چندین نمونه از منطق شرطی استفاده کنید. برای کسب اطلاعات بیشتر در مورد کارهایی که می توانید با فرم تماس Divi و منطق شرطی انجام دهید، این مقاله را در مورد نحوه ایجاد فرم تماس جهانی Divi با منطق شرطی بررسی کنید. آیا از گزینه های منطق شرطی در فرم تماس وب سایت خود استفاده کرده اید؟ ما دوست داریم از شما در نظرات بشنویم!

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما ملحق شدید متشکریم، جایی که ما هر هفته موارد جدید را به شما هدیه می دهیم. ما اخیراً یک بسته چیدمان کاملاً جدید Home Baker را به اشتراک گذاشتیم. برای کمک به شما در راه اندازی و راه اندازی وب سایت خود در اسرع وقت، ما یک الگوی سرصفحه و پاورقی جهانی را به اشتراک می گذاریم که کاملاً با این بسته طرح بندی نیز مطابقت دارد! امیدوارم ازش خوشتان بیاید.

طراحی سربرگ

طراحی پاورقی

الگوی سرصفحه و پاورقی جهانی بسته طرح‌بندی Home Baker را دانلود کنید

برای استفاده از قالب رایگان سرصفحه و پاورقی جهانی، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

نحوه آپلود قالب

به Divi Theme Builder بروید

برای آپلود قالب، به Divi Theme Builder در باطن وب سایت وردپرس خود بروید.

یک الگوی جهانی پیش فرض وب سایت بارگذاری کنید

سپس یک نماد با دو فلش در گوشه سمت راست بالا مشاهده خواهید کرد. روی نماد کلیک کنید.

به تب import بروید، فایل JSON را که توانستید در این پست دانلود کنید آپلود کنید و روی “Import Divi Theme Builder Templates” کلیک کنید.

تغییرات را در Divi Theme Builder ذخیره کنید

پس از آپلود فایل، یک سربرگ و فوتر جهانی جدید در قالب پیش فرض وب سایت خود مشاهده خواهید کرد. به محض اینکه می خواهید قالب فعال شود، تغییرات را در Divi Theme Builder ذخیره کنید.

نحوه تغییر قالب

عناصر قالب Divi Home Baker Header

قالب هدر Divi Home Baker دارای چندین ماژول Divi است. شما می توانید ماژول های ذکر شده را برای مطابقت با برند، کسب و کار و نیازهای وب سایت خود ویرایش کنید. در زیر به شش عنصری که یک الگوی سرصفحه را می‌سازند نگاه می‌کنیم:

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

ماژول های پارتیشن اولیه

1. لوگو (ماژول منو): لوگو از طریق ماژول منو پر می شود. می توانید از ویژگی فیلدهای پویا سازنده Divi برای دانلود لوگوی سایت خود استفاده کنید یا می توانید لوگوی خود را مستقیماً در منو آپلود کنید.
2. منو (ماژول منو): شما می توانید یک منو از سایت خود برای پر کردن در این ماژول انتخاب کنید.
3. دکمه (ماژول دکمه): ماژول دکمه به عنوان یک فراخوان عمل می کند

ماژول های بخش ثانویه

4. CTA شماره 1 (ماژول متنی): این ماژول متنی در حال حاضر دارای ساعات کاری است، اما می‌توانیم آن را به شکلی که می‌خواهیم ویرایش کنیم
5. پیوندهای رسانه های اجتماعی (ماژول ردیابی رسانه های اجتماعی): برای افزودن و اتصال شبکه های اجتماعی انتخابی خود، این ماژول را ویرایش کنید
6. CTA شماره 2 (ماژول متنی): ماژول متن دیگری که می توانیم از آن به عنوان مکانی برای قرار دادن شعار یا تبلیغات دیگر استفاده کنیم

قالب هدر را باز کنید

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

منوی خود را انتخاب کنید

منوی دلخواه خود را در ماژول منو انتخاب کنید.

یک لوگوی سفارشی بارگذاری کنید

در همان ماژول منو، لوگوی سفارشی خود را انتخاب یا آپلود کنید

مقصد دکمه به‌روزرسانی

این هدر یک دکمه در گوشه سمت راست بالای منوی اصلی دارد. تنظیمات دکمه را باز کنید و URL پیوند را به مقصد مورد نظر خود به روز کنید. همچنین می‌توانید از همان مدال تنظیمات برای ویرایش متن دکمه استفاده کنید.

فعال/غیرفعال کردن نمادهای جستجو و سبد خرید

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

اضافه کردن محتوا به CTA #1 و CTA #2

در سمت راست و چپ ناحیه هدر ثانویه، ماژول‌های متنی قرار دارند که می‌توان آن‌ها را با محتوا به دلخواه ویرایش کرد. در قالب از ماژول متن سمت چپ برای نمایش ساعات کاری نانوایی استفاده می کنیم. در سمت راست، ما از ماژول متن برای به اشتراک گذاشتن شعار شرکت با شکلک های زیبا استفاده می کنیم. با توجه به ارتفاع بخش هدر ثانویه، ممکن است ویرایش ماژول ها با استفاده از نمای Wireframe Divi Theme Builder با این بخش آسان تر باشد.

شبکه ها و پیوندهای رسانه های اجتماعی خود را اضافه کنید

ماژول Social Media Tracker را برای ویرایش، افزودن یا حذف شبکه های رسانه اجتماعی که می خواهید در هدر خود نمایش دهید باز کنید. فراموش نکنید که پیوندهای صحیح را به حساب های رسانه های اجتماعی مختلف خود نیز اضافه کنید!

قالب پاورقی را باز کنید

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

عناصر قالب پاورقی Divi Home Baker

برخلاف قالب هدر Divi Home Baker، قالب فوتر از چهار بخش تشکیل شده است. اما نترس! بخش اولیه دارای دو ستون است و سه بخش باقیمانده فقط یک ماژول در خود دارند. باز هم می‌توانیم از Wireframe View استفاده کنیم که به‌شدت توصیه می‌شود، مخصوصاً هنگام ویرایش سه بخش آخر.

تفکیک بخش ها و ماژول ها در فوتر

1. ماژول گزینه ایمیل: عنوان، متن متن را ویرایش کنید و مطمئن شوید که پلت فرم بازاریابی ایمیلی انتخابی خود را به ماژول مرتبط کرده اید
2. ماژول متن: عنوان را با توجه به نیاز خود تغییر دهید
3. ماژول های حاشیه نویسی: در اینجا ما سه ماژول تبلیغاتی داریم که برای نمایش اطلاعات تماس شما استفاده می شود.
4. ماژول زیر شبکه های اجتماعی: همانند ماژول هدر، می توان از این ماژول برای پیوند دادن به حساب های رسانه های اجتماعی خود استفاده کرد
5. ماژول منو: منوی خود را در پاورقی اینجا انتخاب کنید.
6. ماژول متن: در نهایت فراموش نکنید که متن زیر را در این ماژول متنی ویرایش کنید تا اطلاعات کپی رایت خود را وارد کنید

راه حل بازاریابی ایمیلی خود را وصل کنید

ابتدا راه حل بازاریابی ایمیلی انتخابی خود را به ماژول ایمیل متصل کنید.

اطلاعات تماس خود را اضافه کنید

در سه ماژول تبلیغاتی، می توانید نمادها و متن را ویرایش کنید. کتابخانه‌های نماد موجود در Divi را مرور کنید و محتوای خود را اضافه کنید.

حساب های رسانه های اجتماعی خود را متصل کنید

پیوندهایی را به حساب های رسانه های اجتماعی خود در ماژول ردیاب رسانه های اجتماعی اضافه کنید.

منوی خود را در فوتر انتخاب کنید

منوی خود را در فوتر انتخاب کنید.

تغییر محتوای نویسنده

برای ویرایش قسمت کپی رایت، به تابع فیلد پویا در ماژول متن می رویم.

روی چرخ دنده زیر عنوان بدنه کلیک کنید. در کادر مودال بازشو، باید محتوای موجود در کادر متنی After را ویرایش کنید.

رایگان های جدید هر هفته!

امیدواریم از بسته چیدمان Home Baker و Header & Footer رایگان همراه با آن لذت برده باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. حتماً هفته آینده برای رایگان بیشتر بررسی کنید!

ماژول Filtered Portfolio Divi دو گزینه طرح بندی را در اختیار شما قرار می دهد. هر دو گزینه مزایایی دارند و برای اهداف خاصی عالی عمل می کنند. در این پست، طرح‌بندی‌های تمام عرض و شبکه‌ای را در ماژول Divi’s Filtered Portfolio مقایسه می‌کنیم تا به شما کمک کنیم تصمیم بگیرید چه چیزی برای وب‌سایت خود نیاز دارید. ما همچنین به هر دو طرح بندی استایل می دهیم تا ببینیم چگونه در یک طرح بندی Divi کار می کنند.

بیا شروع کنیم!

پیش نمایشی از گزینه های طرح بندی ماژول نمونه کارها فیلتر شده

ابتدا، بیایید نگاهی به آنچه در این آموزش می‌سازیم بیاندازیم.

روی میز با آیتم نمونه کارها در شبکه

تلفن مورد نمونه کارها شبکه

دسکتاپ آیتم نمونه کارها طرح بندی عرض کامل

تلفن مورد نمونه کارها طرح بندی کامل عرض

نحوه تغییر طرح ماژول نمونه کارها فیلتر شده

به طور پیش فرض، ماژول Filtered Portfolio طرح را در عرض کامل نمایش می دهد. شما می توانید طرح بندی را تغییر دهید تا موارد نمونه کارها در یک شبکه نمایش داده شود. اول باز کن تنظیمات ماژول طبق معمول

سپس انتخاب کنید طرح بخش. گزینه اول این است طرح. یک منوی کشویی با چندین گزینه برای انتخاب وجود دارد. آن را برای انتخاب بین Fullwidth و Grid انتخاب کنید.

اگر گزینه ای را انتخاب کنید که در حال حاضر انتخاب نشده است، ماژول مجدداً بارگیری می شود و موارد نمونه کارها را در این طرح نمایش می دهد. مثال زیر طرح شبکه ای را نشان می دهد.

نحوه مقایسه طرح‌بندی‌های ماژول نمونه کارها فیلتر شده

این دو طرح بسیار متفاوت هستند، اما شباهت هایی با هم دارند. هر دو فیلتر را در بالای ماژول، عنوان و متا را در زیر تصاویر عنصر، و صفحه بندی را در پایین ماژول نمایش می دهند.

در اینجا نحوه تفاوت آنها آمده است.

طرح با عرض کامل

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

طرح شبکه

طرح شبکه حداکثر 4 مورد را در هر ردیف نشان می دهد. فضای بیشتری بین عناصر اضافه می کند. تصاویر برش داده می شوند تا تصاویر کوچکی با همان اندازه بدون توجه به اندازه و شکل تصویر ایجاد شوند.

برای این مورد، ماژول را به نمایش چهار پست برای نمایش صفحه بندی محدود کردم.

زمان استفاده از طرح بندی هر ماژول نمونه کارها فیلتر شده

هر دو چیدمان مزایای خود را دارند. در اینجا نکاتی در مورد زمان استفاده از هر طرح وجود دارد.

طرح با عرض کامل

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

طرح شبکه

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

نحوه استایل دادن به طرح‌بندی‌های ماژول نمونه کارها فیلتر

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

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

نحوه استایل دادن به عنصر طرح بندی ماژول نمونه کارها با قابلیت فیلتر شبکه

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

محتوا

بازش کن تنظیمات ماژول و 4 را برای وارد کنید تعداد انتشارات. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.

• تعداد انتشارات: 4
• دسته بندی شامل: هر دسته

طرح

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

تصویر

به پایین بروید تصویر و 4 را انتخاب کنید^هفتمسایه جعبه گزینه. تغییر دادن رنگ سایه به rgba(0,0,0,0,05).

• سایه جعبه: 4^هفتم گزینه
• رنگ سایه: rgba(0,0,0,0.05)

متن

سپس به پایین اسکرول کنید متن و تغییر دهید هم ترازی به مرکز. این فیلتر، عنوان، متا و صفحه‌بندی را در مرکز قرار می‌دهد.

متن عنوان

سپس به متن عنوان. تغییر دادن فونت به Merriweather و تغییر کرد رنگ به سیاه. تنظیمات دیگر را در حالت پیش فرض قرار دهید.

• فونت: Merriweather
• رنگ: #000000

تغییر دادن اندازه فونت حداکثر 26 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.

• اندازه: دسکتاپ 26 پیکسل، تبلت 20 پیکسل، گوشی 18 پیکسل

متن معیار را فیلتر کنید

سپس به پایین اسکرول کنید متن معیار. تغییر دادن فونت به مونتسرات نگرش وزن به غلیظ شدن و سبک به TT. تغییر دادن رنگ به #fd6927 و اندازه تا 12 پیکسل

• فونت: مونتسرات
• وزن: نیمه مشکی
• سبک: TT
• رنگ: #fd6927
• اندازه: 12 پیکسل

متا متن

سپس به پایین اسکرول کنید متا متن. تغییر دادن فونت به مونتسرات و رنگ به #fd6927.

• فونت: مونتسرات
• رنگ: #fd6927

نگرش اندازه تا 12 پیکسل، فاصله بین حروف به 2 پیکسل و ارتفاع خط تا 1.2em

• اندازه: 12 پیکسل
• فاصله بین حروف: 2 پیکسل
• ارتفاع خط: 1.2 em

متن صفحه بندی

در نهایت، به پایین بروید متن صفحه بندی و تغییر دهید فونت به مونتسرات و تنظیم رنگ فونت به سیاه. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• فونت: مونتسرات
• رنگ: #000000

نحوه استایل دادن به آیتم نمونه کارها با طرح بندی تمام عرض

حالا بیایید یک نمونه کار با یک طرح تمام عرض ایجاد کنیم. ما از دستورالعمل‌های طراحی مشابه طرح‌بندی شبکه استفاده می‌کنیم، اما برخی تنظیمات را انجام می‌دهیم که برای این طرح‌بندی به خوبی کار می‌کنند. ما از چند CSS ساده برای انجام برخی تنظیمات کوچک استفاده خواهیم کرد.

محتوا

بازش کن تنظیمات ماژول و تغییر دهید تعداد انتشارات به 2. این صفحه را کوچکتر نگه می دارد و مدیریت آن را با تصاویر بزرگ آسان تر می کند. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.

• تعداد انتشارات: 2
• دسته بندی شامل: هر دسته

عناصر

به پایین بروید عناصر و غیر فعال کنید نمایش دسته ها. بقیه را فعال بگذارید. دسته‌ها همچنان برای فیلتر فعال خواهند بود، اما با عنوان نمایش داده نمی‌شوند.

• عنوان نمایش: بله
• نمایش دسته ها: خیر
• نمایش صفحه بندی: بله

طرح

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

تصویر

سپس به پایین اسکرول کنید تصویر. 4 را انتخاب کنید^هفتمسایه جعبه گزینه و تغییر رنگ سایه به rgba(0,0,0,0,05).

• سایه جعبه: 4^هفتم گزینه
• رنگ سایه: rgba(0,0,0,0.05)

متن

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

متن عنوان

سپس به متن عنوان. تغییر دادن فونت به Merriweather و تغییر کرد رنگ به سیاه.

• فونت: Merriweather
• رنگ: #000000

تغییر دادن اندازه فونت حداکثر 40 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.

• اندازه: دسکتاپ 40 پیکسل، تبلت 20 پیکسل، گوشی 18 پیکسل

متن معیار را فیلتر کنید

سپس به پایین اسکرول کنید متن معیار. تغییر دادن فونت به مونتسرات، مجموعه وزن پررنگ کردن، و سبک به TT. تغییر دادن رنگ به #fd6927. ولش کن اندازه در تنظیمات پیش فرض 14 پیکسل.

• فونت: مونتسرات
• وزن: نیمه مشکی
• سبک: TT
• رنگ: #fd6927

متن صفحه بندی

سپس به پایین اسکرول کنید متن صفحه بندی. تغییر دادن فونت به مونتسرات، تغییر دهید وزن به نیمه پررنگ و تنظیم رنگ فونت به #fd6927. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• فونت: مونتسرات
• رنگ: #fd6927
• وزن: نیمه ضخیم

متن سرصفحه CSS

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

بازش کن منبسط و به پایین اسکرول کنید عنوان نمونه کارها. نماد دستگاه را انتخاب کنید. باشه CSS اضافه کنید برای پد بر اساس اندازه صفحه نمایش. ما 40px Bottom Padding را برای رایانه‌های رومیزی، 30px برای رایانه‌های لوحی و 20px برای تلفن‌ها اضافه می‌کنیم. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• عنوان نمونه کارها (رومیزی):

  padding-bottom:40px

• عنوان نمونه کارها (تبلت):

  padding-bottom:30px

• عنوان نمونه کار (تلفن):

  padding-bottom:20px

نتایج

روی میز با آیتم نمونه کارها در شبکه

تلفن مورد نمونه کارها شبکه

دسکتاپ آیتم نمونه کارها طرح بندی عرض کامل

تلفن مورد نمونه کارها طرح بندی کامل عرض

پایان تفکر در مورد گزینه های طرح بندی ماژول نمونه کارها فیلتر شده Divi

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

ما می خواهیم از تو بشنویم. از کدام یک بین طرح‌بندی عرض کامل و شبکه در ماژول Divi Filtered Portfolio استفاده می‌کنید؟ در نظرات به ما اطلاع دهید.

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

طراحی سربرگ

طراحی پاورقی

الگوی سربرگ و پاورقی جهانی بسته چیدمان یوگا را به صورت آنلاین دانلود کنید

برای استفاده از قالب رایگان سرصفحه و پاورقی جهانی، ابتدا باید آن را از طریق دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

نحوه آپلود قالب

به Divi Theme Builder بروید

برای آپلود قالب، به Divi Theme Builder در باطن وب سایت وردپرس خود بروید.

یک الگوی جهانی پیش فرض وب سایت بارگذاری کنید

سپس یک نماد با دو فلش در گوشه سمت راست بالا مشاهده خواهید کرد. روی نماد کلیک کنید.

به تب import بروید، فایل JSON را که توانستید در این پست دانلود کنید آپلود کنید و روی “Import Divi Theme Builder Templates” کلیک کنید.

تغییرات را در Divi Theme Builder ذخیره کنید

پس از آپلود فایل، یک سربرگ و فوتر جهانی جدید در قالب پیش فرض وب سایت خود مشاهده خواهید کرد. به محض اینکه می خواهید قالب فعال شود، تغییرات را در Divi Theme Builder ذخیره کنید.

نحوه تغییر قالب

قالب هدر را باز کنید

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

منوی سفارشی را انتخاب کنید

منوی دلخواه خود را در ماژول منو انتخاب کنید.

URL های پیوند را به CTA اضافه کنید

این هدر یک دکمه در بالا سمت راست دارد. تنظیمات هر کدام را باز کنید تا URL پیوند را به مقصد مورد نظر خود به روز کنید.

قالب پاورقی را باز کنید

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

محتوای پاورقی را به روز کنید

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

رایگان های جدید هر هفته!

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

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

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

بیا شروع کنیم!

یک نگاه یواشکی

در اینجا یک تصویر سریع از این است که انیمیشن اسکرول پس‌زمینه از این آموزش چگونه خواهد بود.

مفهوم

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

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

سپس می توانیم یک ماسک پس زمینه به ستون اضافه کنیم.

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

وقتی سرریز بخش را پنهان می کنیم، تنها چیزی که می بینیم انیمیشن موجود در بخش است.

طرح بندی را به صورت رایگان دانلود کنید

برای لمس طراحی چیدمان از این آموزش، ابتدا باید آن را با استفاده از دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

برای وارد کردن طرح بندی برگه به ​​کتابخانه Divi خود، موارد زیر را انجام دهید:

1. به کتابخانه Divi بروید.
2. روی دکمه Import در بالای صفحه کلیک کنید.
3. در پنجره قابل حمل، تب import را انتخاب کنید
4. فایل مورد نظر را برای دانلود از رایانه خود انتخاب کنید (مطمئن شوید که ابتدا فایل را از حالت فشرده خارج کرده و از فایل JSON استفاده کنید).
5. سپس روی دکمه import کلیک کنید.

پس از انجام، طرح برگه در Divi Builder در دسترس خواهد بود.

بریم سراغ آموزش، درسته؟

آنچه برای شروع نیاز دارید

برای شروع، باید موارد زیر را انجام دهید:

1. اگر قبلا این کار را نکرده اید، تم Divi را نصب و فعال کنید.
2. یک صفحه وردپرس جدید ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلو (سازنده بصری) استفاده کنید.
3. گزینه «ساخت از ابتدا» را انتخاب کنید.
4. حالا شما یک بوم خالی برای شروع طراحی در Divi دارید!

نحوه متحرک سازی ماسک های پس زمینه و الگوهای اسکرول با Divi

طراحی پس زمینه بخش

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

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

• حداقل ارتفاع: 50vw
• بالشتک: 0px بالا، 0px پایین

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

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

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

• توقف گرادیان شماره 1: #4158d0 (در 0٪)
• توقف گرادیان شماره 2: #c850c0 (در 50٪)
• توقف گرادیان شماره 3: #ffcc70 (در 100٪)

سپس جهت گرادیان خطی را تغییر دهید:

• جهت گرادیان: 270 درجه

سطرها را به بخش اضافه کنید

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

سپس ردیفی را که ایجاد کرده اید کپی کنید. این خط دوم (تکراری) برای محتوای ما درست مانند شما استفاده خواهد شد. اکنون باید یک ردیف بالا برای انیمیشن اسکرول پس‌زمینه و یک ردیف برای محتوای ساده داشته باشید.

سفارش را سفارشی کنید

اکنون که گرادیان پس‌زمینه بخش ما آماده است، می‌توانیم توجه خود را به ترتیبی که برای انیمیشن اسکرول پس‌زمینه استفاده می‌کنیم معطوف کنیم. تنظیمات صف را باز کنید. در تب Advanced موارد زیر را به روز کنید:

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

در تب طراحی، گزینه های اندازه را به صورت زیر به روز کنید:

• تراز ارتفاع ستون: بله
• عرض: 100%
• حداکثر عرض: 100٪
• قد: 100%
• بالشتک: 0px بالا، 0px پایین

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

یک الگوی پس زمینه برای ردیف ایجاد کنید

در این مثال، الگوی Confetti را به عنوان پس‌زمینه ردیف اضافه می‌کنیم.

تنظیمات صف را باز کنید. در زیر گزینه پس زمینه، تب templates را انتخاب کرده و موارد زیر را به روز کنید:

• الگوی پس زمینه: کانفتی
• رنگ قالب: #f6bef7
• اندازه مدل: اندازه سفارشی
• عرض مدل: 35vw
• مبدا تکرار الگو: مرکز

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

افکت های اسکرول را به ردیف اضافه کنید

اکنون که مدل پس‌زمینه ما در جای خود قرار دارد، می‌توانیم افکت‌های اسکرول را به ردیف اضافه کنیم.

به تب Advanced بروید. در زیر گزینه های جلوه های اسکرول، موارد زیر را به روز کنید:

تب Horizontal Motion را انتخاب کرده و موارد زیر را به روز کنید:

• اجازه حرکت افقی: بله
• آفست اولیه: 0.5 (در 0٪)
• میانگین افست: 0 (از 40% تا 60%)
• پایان افست: -0.5 (در 100٪)

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

تب Scale up and down را انتخاب کنید و موارد زیر را به روز کنید:

• اجازه افزایش و کاهش مقیاس: بله
• مقیاس شروع: 150% (در 0%)
• مقیاس متوسط: 100٪ (از 40٪ تا 60٪)
• مقیاس نهایی: 150% (در 100%)

با این کار، الگوی پس‌زمینه ردیف در اسکرول از 150% به 100% تا 150% مقیاس می‌شود.

تب Rotation را انتخاب کرده و موارد زیر را به روز کنید:

• فعال کردن چرخش: بله
• چرخش اولیه: 10 درجه (در 0٪)
• چرخش متوسط: 0 درجه (از 40٪ تا 60٪)
• چرخش نهایی: -10 درجه (در 100٪)

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

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

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

برای انجام این کار، تنظیمات ستون را باز کنید. در تب ماسک ها موارد زیر را به روز کنید:

• ماسک: وبلاگ لایه ها
• رنگ ماسک: #ffffff
• تبدیل ماسک: تلنگر افقی، تلنگر

افکت های اسکرول را به ستون اضافه کنید

اکنون که ماسک پس زمینه ما در جای خود قرار دارد، می توانیم افکت های اسکرول را به ستون اضافه کنیم. توجه داشته باشید که ستون قبلاً دارای افکت‌های اسکرول است که از ردیف والد به ارث رسیده است. تمام کاری که ما انجام می دهیم این است که ستون را در جهت مخالف ردیف بچرخانیم تا در طول انیمیشن اسکرول، ماسک و مدل بیشتر از هم جدا شوند.

به تب Advanced بروید. در زیر گزینه‌های جلوه‌های اسکرول، تب Rotation را انتخاب کرده و موارد زیر را به‌روزرسانی کنید:

• فعال کردن چرخش: بله
• چرخش اولیه: -15 درجه (در 0٪)
• چرخش متوسط: 0 درجه (از 40٪ تا 60٪)
• چرخش نهایی: 15 درجه (در 100٪)

پنهان کردن سرریز بخش

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

برای رفع این مشکل، باید سرریز بخش را پنهان کنیم. برای این کار تنظیمات بخش را باز کنید. در تب Advanced، گزینه های مشاهده را به صورت زیر به روز کنید:

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

الان بهتر به نظر می رسد.

محتوا را به ردیف محتوا اضافه کنید

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

برای این مثال، من یک عنوان ساختگی اضافه کرده‌ام تا بتوانیم ببینیم انیمیشن پس‌زمینه با مقداری متن ثابت چگونه خواهد بود.

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

نتیجه نهایی

بیایید نگاهی به نتیجه نهایی طراحی خود بیندازیم.

تغییر دهید!

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

Gradient Builder به راحتی می‌تواند پس‌زمینه‌های گرادیان شگفت‌انگیزی را نیز برای بخش ایجاد کند. برای گزینه های طراحی پس زمینه گرادیان بیشتر، می توانید دموهای زنده ما را بررسی کنید.

افکار نهایی

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

برای اطلاعات بیشتر، می‌توانید آموزش مشابه ما را در مورد نحوه افزودن دو لایه طرح‌های پس‌زمینه بررسی کنید.

همچنین، پست‌های انتشار ویژگی ما را در ماسک‌ها و قالب‌های گرادیان و پس‌زمینه بررسی کنید.

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

مشتاقانه منتظر شنیدن نظرات شما هستم.

به سلامتی!

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

در این پست به بحث SEO و SEM می پردازیم. پس از توضیح تفاوت های اصلی بین SEM و SEO، ما برخی از بهترین روش ها را برای استفاده از آنها در استراتژی بازاریابی شما بیان می کنیم. بیایید بپریم!

بررسی اجمالی SEO در مقابل SEM

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

سئو چیست؟

سئو فرآیند بهبود دید و رتبه یک وب سایت در صفحات نتایج موتورهای جستجو (SERPs) است. شما می‌توانید با بهینه‌سازی محتوای وب‌سایت، داده‌های ساختاریافته و عناصر صفحه مانند عناوین صفحه، متا تگ‌ها و متن لنگر، سئو را انجام دهید.

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

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

عوامل زیادی می توانند روی سئو تاثیر بگذارند، از سرعت سایت گرفته تا تجربه کاربری (UX). گوگل مجموعه ای از سیگنال ها را دارد که الگوریتم آن برای فهرست و رتبه بندی سایت ها استفاده می کند.

SEM چیست؟

SEM فرآیند بازاریابی یک وب سایت یا صفحه وب با استفاده از روش های پولی است. هدف SEM بهبود دید سایت در SERP از طریق فضای تبلیغاتی است. برای انجام این کار، بازاریابان معمولاً از Google Ads برای پیشنهاد کلمات کلیدی تبلیغاتی پرداخت به ازای کلیک (PPC) استفاده می کنند. این تضمین می کند که وقتی کاربر کلمه کلیدی خاص خود را جستجو می کند، تبلیغ آنها در بالای نتایج SERP ظاهر می شود.

یک استراتژی SEM همچنین می تواند شامل خرید تبلیغات در سیستم عامل های اجتماعی مانند فیس بوک باشد.

چندین تفاوت کلیدی بین SEO و SEM وجود دارد. بدیهی است که سئو ارزان تر از SEM است. استفاده از SEM نیز راه سریع‌تری برای به دست آوردن نتایج نسبت به سئو است که ممکن است ماه‌ها یا حتی سال‌ها طول بکشد تا نتیجه‌بخش باشد. با این حال، سئو معمولاً بازده سرمایه گذاری (ROI) بالاتری نسبت به SEM دارد زیرا ترافیک ارگانیکی ایجاد می کند که نیازی به پرداخت هزینه ندارید.

آیا باید از SEO و SEM استفاده کنم؟

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

اگر تکنیک‌های سئو را برای شروع رشد ارگانیک با موفقیت پیاده‌سازی نکرده‌اید، پیاده‌سازی SEM با تبلیغات PPC ممکن است بهترین حرکت نباشد. یک راه حل بهتر ممکن است این باشد که در استراتژی سئو فعلی خود غوطه ور شوید و قبل از شروع به غواصی عمیق در جیب خود برای SEM پولی شروع به رشد ارگانیک رتبه کنید.

اگر استراتژی سئوی موفقی دارید و پایه و اساس موفقیت بلندمدت سئو را پایه گذاری کرده اید، SEM با تبلیغات PPC می تواند افزودنی عالی برای استراتژی بازاریابی شما باشد. این نه تنها ترافیک شما را افزایش می دهد، بلکه به شما امکان می دهد داده های تجزیه و تحلیل ارزشمندی را از طریق کمپین های SEM خود جمع آوری کنید، که می تواند به شما در بهبود بیشتر استراتژی سئو کمک کند.

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

4 بهترین روش برای استفاده از SEM و SEO با هم

چندین روش برتر برای استفاده از SEO و SEM در یک استراتژی بازاریابی وجود دارد. بیایید نگاهی به برخی از رایج ترین رویکردها برای کمپین های شما بیندازیم!

1. عوامل کلیدی را در نظر بگیرید

بسیاری از بازاریابان تعجب می کنند که آیا از سئو استفاده می کنند یا خیر و SEM حرکت هوشمندانه است. به جرات می توان گفت که هر دو نقش مهمی در هر استراتژی بازاریابی آنلاین دارند. با این حال، هیچ پاسخ صریحی وجود ندارد. هنگام تصمیم گیری در مورد نحوه تبلیغ محصولات یا خدمات خود به صورت آنلاین، عوامل مختلفی وجود دارد که باید در نظر بگیرید، از جمله موارد زیر:

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

بنابراین اگر بودجه کمی دارید، سئو بهترین گزینه است زیرا به هزینه زیادی (در صورت وجود) نیاز ندارد. با این حال، اگر بودجه بیشتری دارید و می خواهید دید خود را در نتایج جستجوی ارگانیک و پولی بهبود ببخشید، SEM استراتژی بهتری است.

همچنین، اگر بودجه بیشتری داشته باشید، SEM می‌تواند سریع‌تر نتیجه دهد. لازم نیست منتظر بمانید تا گوگل (یا سایر موتورهای جستجو) محتوای شما را ایندکس کند و آن را رتبه بندی کند. در عوض، در نتایج جستجوی پولی ظاهر خواهید شد. اگر برنامه بازاریابی کوتاه تری داشته باشید، عالی است.

2. همان کلمات کلیدی را هدف قرار دهید

بهترین روش دیگر برای استفاده از SEO و SEM، هدف قرار دادن کلمات کلیدی مشابه است. این رویکرد به شما کمک می کند تا بر SERP ها تسلط داشته باشید و بیشترین دید را برای وب سایت خود داشته باشید.

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

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

همچنین بسیار مهم است که کلمات کلیدی خود را به طور کامل بررسی کنید تا اطمینان حاصل کنید که آنها با تجارت شما مرتبط هستند. برای انجام تحقیقات خود می توانید از چندین ابزار ردیابی کلمات کلیدی مانند Google Keyword Planner استفاده کنید:

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

3. از PPC برای تکمیل تلاش های سئو استفاده کنید

همانطور که قبلا ذکر شد، استفاده از تبلیغات پرداخت به ازای کلیک (PPC) برای تکمیل تلاش های سئوی شما رایج است. این رویکرد می تواند به شما کمک کند تا زمانی که منتظر نتیجه دادن تلاش های سئو هستید، برای کلمات کلیدی خاصی نتایج فوری دریافت کنید.

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

یکی دیگر از راه‌های عالی برای استفاده از PPC برای تکمیل تلاش‌های سئوی شما، پیشنهاد قیمت کلمات کلیدی برند است. این استراتژی می تواند به شما کمک کند تا بازدیدکنندگانی را جذب کنید که از قبل با برند شما آشنا هستند. هدف قرار دادن کلمات کلیدی برند نیز می تواند آگاهی از برند شما را افزایش دهد و به مشتریان بالقوه ای که ممکن است هنوز با کسب و کار شما آشنا نباشند دسترسی پیدا کند. و بسته به محبوبیت کلمه کلیدی، هزینه هر کلیک متفاوت است. به همین دلیل مهم است که بودجه کلمه کلیدی را تعیین کنید و مطمئن شوید که لینک تبلیغ شما به صفحه ای که برای تبدیل ساخته شده است هدایت می شود. شما نمی خواهید این کلیک ها را هدر دهید.

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

در نهایت، می‌توانید از افزونه‌های تبلیغاتی استفاده کنید، که اطلاعات بیشتری هستند که می‌توانید در تبلیغات خود وارد کنید، مانند شماره تلفن، آدرس یا تماس برای اقدام (CTA). این عناصر می توانند به مشتریان بالقوه اطلاعات بیشتری در مورد کسب و کار شما و آنچه ارائه می دهید ارائه دهند.

4. به طور مداوم نتایج خود را پیگیری کنید

هنگام استفاده از استراتژی های SEO و SEM با هم، مهم است که کمپین های خود را به طور مداوم آزمایش و بهینه کنید. این فرآیند شامل آزمایش کپی تبلیغات مختلف، کلمات کلیدی و گزینه های هدف است. سپس باید تبدیل ها و تجزیه و تحلیل ها را از طریق پلتفرمی مانند Google Analytics دنبال کنید:

ردیابی نتایج به شما امکان می دهد ببینید چه چیزی کار می کند و چه چیزی نیست. سپس می‌توانید استراتژی خود را در صورت نیاز تنظیم کنید تا به طور مداوم دیده شدن و رتبه‌بندی وب‌سایت خود را بهبود بخشید.

نتیجه

SEO و SEM هر دو مزایا و معایب خود را دارند. به همین دلیل مهم است که قبل از شروع به سرمایه گذاری زمان و پول در نظر بگیرید که کدام رویکرد بازاریابی برای کسب و کار شما مناسب است.

یکی از مهم ترین تفاوت های بین SEM و SEO این است که اولی ارزان تر از تبلیغات پولی است. با این حال، همانطور که در این پست توضیح داده شد، می توانید از SEO و SEM برای ایجاد یک استراتژی بازاریابی جامع و دستیابی به اهداف مورد نظر خود استفاده کنید. با استفاده از هر دو تکنیک، شما قادر خواهید بود به مخاطبان بیشتری دسترسی داشته باشید و شانس موفقیت خود را افزایش دهید.

سوالی در مورد SEO در مقابل SEM دارید؟ در بخش نظرات زیر به ما اطلاع دهید!

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما پیوستید متشکریم. جایی که هر هفته یک بسته طرح‌بندی Divi کاملاً جدید و رایگان از تیم طراحی خود به شما می‌دهیم.

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

این بسته چیدمان شامل:

– 7 صفحه آرایی آماده که به صورت استراتژیک برای هر وب سایت کالاهای چرمی طراحی شده اند (از جمله طراحی پاورقی)
– عکس ها و گرافیک های اصلی و رایگان + فایل منبع سفارشی (به زیر مراجعه کنید)
– به‌علاوه، مجموعه‌ای بزرگ از عناصر وب‌سایت از پیش طراحی‌شده که می‌توان آن‌ها را سفارشی کرد و در هر مکانی مجدداً استفاده کرد.

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

طراحی صفحه فرود

دمو طرح زنده را ببینید

طراحی صفحه اصلی

دمو طرح زنده را ببینید

درباره طراحی صفحه

دمو طرح زنده را ببینید

طراحی صفحه وبلاگ

دمو طرح زنده را ببینید

طراحی صفحه تماس

دمو طرح زنده را ببینید

طراحی صفحه فروشگاه

دمو طرح زنده را ببینید

طراحی صفحه محصول

دمو طرح زنده را ببینید

توابع اساسی

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

تظاهرات زنده

برای مشاهده دموی زنده از هر یک از طرح‌بندی‌های موجود در بسته، روی پیوندهای زیر کلیک کنید.

1. صفحه فرود محصولات چرمی (نمایشی زنده)
2. صفحه اصلی کالاهای چرمی (نمونه نمایشی زنده)
3. صفحه محصولات چرمی (نمایشی زنده)
4. صفحه وبلاگ کالاهای چرمی (نمایشی زنده)
5. صفحه تماس با محصولات چرمی (نمایشی زنده)
6. صفحه فروشگاه چرم (نمایشی زنده)
7. صفحه محصول کالاهای چرمی (نمایشی زنده)

همین حالا به این طرح دسترسی داشته باشید
مستقیماً از Divi Builder شما

از نسخه 3.0.99 Divi، می‌توانید هر یک از طرح‌بندی‌های موجود در این بسته (همراه با همه بسته‌های پیش‌آرایشی Divi) را مستقیماً از Divi Builder پیدا و وارد کنید. آنها از قبل منتظر شما هستند.

برای دسترسی به طرح‌بندی جدید، کافی است هنگام ویرایش صفحه، Visual Builder را فعال کنید و نماد «بارگیری از کتابخانه» را در نوار تنظیمات صفحه جستجو کنید (به نظر می‌رسد علامت مثبت است). روی این نماد کلیک کنید تا پنجره بازشو Load from Library باز شود. در تب Premade Layouts، با پیمایش در لیست بسته های طرح بندی، می توانید به راحتی طرح بندی جدید را پیدا کنید. هنگامی که بسته طرح بندی کالاهای چرمی را پیدا کردید، روی آن کلیک کنید. تمام طرح‌بندی‌های جداگانه موجود در بسته را خواهید دید. طرح مورد نظر برای استفاده را انتخاب کنید و سپس روی دکمه “استفاده از این طرح” کلیک کنید.

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

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

احراز هویت لازم است

قبل از اینکه بتوانید طرح‌بندی‌های Premade را از کتابخانه Divi دانلود کنید، باید اشتراک Elegant Themes خود را احراز هویت کنید. شما می توانید این کار را با رفتن به Divi > گزینه های تم > به روز رسانی ها. در آنجا می توانید نام کاربری و کلید API خود را وارد کرده و تغییرات را ذخیره کنید.

می توانید کلید API خود را در قسمت اعضای سایت Elegant Themes پیدا کنید. هنگامی که نام کاربری و کلید API خود را وارد کردید، به کتابخانه ما از صدها طرح‌بندی رایگان (از جمله این یکی) دسترسی فوری خواهید داشت. اگر این کار را انجام نداده‌اید، وقتی برای وارد کردن طرح‌بندی صفحه خود کلیک می‌کنید، از شما خواسته می‌شود که نام کاربری عضویت Elegant Themes و کلید API خود را وارد کنید.

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

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

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

بسته طرح بندی جدید هر هفته!

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

استفاده از paywalls و عضویت یکی از بهترین راه های کسب درآمد از سایت وردپرسی شماست. می‌توانید در ازای اشتراک‌های مداوم یا پرداخت‌های یک‌باره، محتوای انحصاری ارائه دهید. خوشبختانه، وردپرس دارای چند پلاگین عالی برای کمک به شما در ایجاد دیوار پرداخت است که محتوای پولی (یا عضویت) را در سایت شما محدود می کند.

در این راهنما، نگاهی دقیق‌تر به دیوارهای پرداخت و اینکه چرا ممکن است از آنها استفاده کنید، خواهیم داشت. در ادامه، شش مورد از بهترین افزونه های paywall وردپرس را بررسی خواهیم کرد. بیا شروع کنیم!

مروری بر Paywalls (و چرا ممکن است بخواهید از یکی استفاده کنید)

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

احتمالاً قبلاً paywalls را دیده اید. این موارد در وب سایت های روزنامه هایی مانند واشنگتن پست رایج است:

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

همچنین دیوارهای پرداخت را در سایت های پخش ویدیو خواهید دید. این وب سایت ها ممکن است رویدادهای پخش انحصاری یا محتوای ضبط شده را ارائه دهند. به طور معمول، ویدیوها بر اساس «پرداخت به ازای بازدید» در دسترس هستند، به این معنی که کاربران هر بار که بخواهند محتوا را ببینند، هزینه پرداخت می‌کنند.

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

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

افزونه های Paywall وردپرس چیست؟

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

همچنین، پلاگین paywall معمولا دارای پردازنده های پرداخت یکپارچه است. این پلتفرم ها به شما این امکان را می دهند که پرداخت ها را مستقیماً از وب سایت خود بپذیرید. بنابراین می توانید تراکنش های راحت و ایمن را به مشترکین خود ارائه دهید.

6 بهترین افزونه Paywall وردپرس

بسیاری از افزونه های رایگان و پریمیوم دیوار پرداخت وردپرس وجود دارد. ما فهرستی از گزینه‌های مورد علاقه خود را گردآوری کرده‌ایم که انتخاب‌های خود را بر اساس ویژگی‌ها و انعطاف‌پذیری این ابزارها ارائه می‌کند.

1. عضویت حرفه ای پولی

Paid Memberships Pro یک راه حل کامل برای تنظیم عضویت و اشتراک وردپرس است. این افزونه برای سایت هایی طراحی شده است که محتوای ممتاز، دوره های آنلاین، تخفیف فقط برای اعضا و غیره ارائه می دهند.

ویژگی های کلیدی برای عضویت حرفه ای پولی:

• انواع پست های سفارشی، از جمله رویدادها و دوره ها، و همچنین پست ها، دسته ها و صفحات را محدود کنید.
• سطوح عضویت نامحدود را با مدل‌های قیمت‌گذاری مختلف، از جمله پرداخت‌های تکراری و یک‌باره ایجاد کنید.
• منطقه فقط اعضای خود را با Stripe، Paypal و سایر درگاه های پرداخت ادغام کنید.
• دسترسی به گزارش های ثبت نام، لغو، انقضا و موارد دیگر.
• با Divi ادغام می شود تا به راحتی عضویت در Divi Builder را محدود کند.

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

عضویت Paid Pro برای شما مناسب است اگر…

• شما می خواهید روش های پرداخت انعطاف پذیری را برای اعضا ارائه دهید.
• شما دوره هایی ارائه می دهید، رویدادها را سازماندهی می کنید یا می خواهید محتوای پولی برای وبلاگ خود ایجاد کنید.
• شما از Divi استفاده می کنید و به دنبال یک راه حل یکپارچه با Divi هستید.

قیمت عضویت حرفه ای پولی: رایگان، با برنامه های ممتاز که از 247 دلار در سال شروع می شود. | درباره عضویت های حرفه ای پولی بیشتر بیاموزید.

2. Paywall روان

Leaky Paywall یک ابزار رایگان و یکی از بهترین افزونه های paywall وردپرس است. این به شما امکان می دهد دیوارهای پرداختی ایجاد کنید که محتوا را بر اساس انواع پست، دسته بندی ها، برچسب ها و موارد دیگر محدود می کند. همچنین می‌توانید طرح‌های مختلفی از جمله اشتراک، عضویت ممتاز، طرح‌های بدون آگهی و خریدهای یک‌باره را بفروشید.

ویژگی های کلیدی لیکی پی وال:

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

Leaky Paywall به طور خاص برای وب سایت های خبری و مجلات طراحی شده است. با این حال، برای همه انواع مدل های محدودیت محتوا، از جمله اشتراک های انبوه و کمک های مالی، مناسب است.

لیکی پیوال برای شما مناسب است اگر…

• شما یک وب سایت یا مجله خبری را اداره می کنید.
• شما می خواهید چندین مدل اشتراک را ارائه دهید.
• شما می خواهید به تجزیه و تحلیل دقیق دسترسی داشته باشید.

قیمت گذاری پی وال لو رفتن: رایگان، با نسخه های پریمیوم که از 149 دلار در ماه شروع می شود. | درباره Leaky Paywall بیشتر بدانید.

3. اشتراک های عضویت پولی

Paid Member Subscriptions یک افزونه با کاربری آسان است که به شما امکان می دهد برنامه های اشتراک را تنظیم کنید و دسترسی به محتوای ممتاز را محدود کنید. همچنین با WooCommerce ادغام می شود. این بدان معنی است که شما همچنین می توانید دسترسی به محصول را فقط برای اعضا محدود کنید یا قیمت های تخفیفی را به مشترکین ارائه دهید.

ویژگی های کلیدی برای اشتراک اعضای پولی:

• نمایش محتوای جزئی به افراد غیرعضو.
• برنامه های عضویت نامحدود ایجاد کنید.
• اعضا را فعال کنید تا اشتراک های خود را مدیریت کنند.
• یک آزمایش رایگان ارائه دهید و هزینه ثبت نام را دریافت کنید.

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

اشتراک اعضای پولی برای شما مناسب است اگر…

• شما می خواهید به کاربران مزه محتوای ممتاز خود را بدهید.
• شما یک فروشگاه WooCommerce راه اندازی می کنید و می خواهید مرور و خرید محصول را محدود کنید.

قیمت اشتراک پولی برای اعضا: رایگان، با نسخه پریمیوم که از 149 یورو شروع می شود (یعنی حدود 159 دلار) | درباره اشتراک اعضای پولی بیشتر بیاموزید.

4. MemberPress

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

ویژگی های کلیدی MemberPress:

• عضویت ها، دیوارهای پرداخت، دوره های آنلاین و جوامع ایجاد کنید.
• صورتحساب و ارتقاء خودکار را به اعضای خود ارائه دهید.
• محتوایی را با زمان انتشار و تاریخ انقضا چک کنید.
• برای مشتریان خود کوپن ایجاد کنید.
• یکپارچه سازی قدرتمند با ماژول های Divi و Divi را ارائه می دهد.

اگر به دنبال سیاست های دسترسی قدرتمند و در عین حال قابل تنظیم هستید، MemberPress ممکن است بهترین گزینه برای شما باشد. این افزونه به شما امکان می دهد محتوا را به صفحات، صفحات فرزند، انواع پست سفارشی و موارد دیگر محدود کنید. همچنین جدول‌های قیمتی فراوانی را ارائه می‌کند تا به شما در جذب مشترکین جدید کمک کند.

MemberPress برای شما مناسب است اگر…

• شما از Divi استفاده می کنید و می خواهید گزینه های یکپارچه مناسبی برای ماژول های Divi داشته باشید.
• شما می خواهید دوره آنلاین خود را بفروشید.
• شما به دنبال راه حلی کاربر پسند هستید.
• ممکن است بخواهید برای ایجاد انگیزه در کاربران، عضویت‌های «استعدادی»، کوپن‌ها و آزمایش‌های رایگان ارائه دهید.

قیمت برای Memberpress: از 179 دلار در سال. | درباره MemberPress بیشتر بدانید.

5. برای ارسال با ووکامرس هزینه کنید

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

ویژگی های کلیدی پرداخت برای پست با ووکامرس:

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

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

پرداخت برای پست با ووکامرس برای شما مناسب است اگر…

• شما یک فروشگاه WooCommerce راه اندازی می کنید و می خواهید یک راه حل ساده برای پرداخت پرداخت کنید.
• شما می خواهید دسترسی به مقالات خود را بفروشید.

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

6. Content Pro را محدود کنید

در نهایت، اگر به دنبال یک عضویت ممتاز و افزونه paywall هستید، Restrict Content Pro ممکن است عالی باشد. می‌توانید سطوح اشتراک سفارشی، خط‌مشی‌های محدودیت محتوا و کدهای تخفیف ایجاد کنید تا به کاربران نسخه‌های آزمایشی رایگان مقالات پولی خود را ارائه دهید. همچنین می توانید مستقیماً از طریق افزونه پرداخت ها را دریافت کنید و اشتراک ها را در داشبورد وردپرس خود نظارت کنید.

ویژگی های کلیدی Restrict Content Pro:

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

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

توصیه می کنیم راهنمای بررسی کامل Restrict Content Pro ما را بررسی کنید. در این پست به بررسی ویژگی های اصلی این افزونه می پردازیم.

Restrict Content Pro برای شما مناسب است اگر…

• شما خوشحال هستید که در یک افزونه دیوار پرداختی وردپرس ممتاز سرمایه گذاری می کنید.
• به دنبال راه حلی برای دیوار پرداخت با تنظیمات محدودیت محتوای پیشرفته هستید.

محدود کردن قیمت Content Pro: از 59.40 دلار در سال. | درباره Restrict Content Pro بیشتر بیاموزید.

نظرات نهایی در مورد افزونه های Paywall وردپرس

Paywall به شما این امکان را می دهد که محتوای خود را محدود کرده و از وب سایت خود کسب درآمد کنید. می‌توانید از خوانندگان درخواست پرداخت یک‌باره، اشتراک یا حتی عضویت کامل کنید که به کاربران امکان دسترسی به پورتال عضو را می‌دهد.

اگر به دنبال راه‌حل پیشرفته‌ای برای paywall هستید، Leaky Paywall ممکن است مناسب باشد. این افزونه فریمیوم به شما کمک می‌کند تا مدل‌های اشتراک مختلف، از جمله پرداخت‌های ترکیبی، یک‌باره، عضویت و اشتراک‌های گروهی را ایجاد کنید. متناوبا، MemberPress یک راه حل مناسب برای دیوارهای پرداخت، عضویت و دوره های آنلاین است.

برای کاربران Divi، Paid Memberships Pro و MemberPress ادغام های راحت Divi را ارائه می دهند تا کارها را بسیار آسان تر کنند.

آیا در مورد افزونه های paywall وردپرس که در این پست مورد بحث قرار گرفته اند سؤالی دارید؟ در بخش نظرات زیر به ما اطلاع دهید!

تصویر ویژه از طریق baifun / shutterstock.com

تولید سرنخ یک مؤلفه کلیدی است که باید هنگام ساخت یک وب سایت وردپرس برای تجارت خود در نظر بگیرید. علاوه بر طراحی عالی و سئو، باید در نظر داشته باشید که بازدیدکننده پس از ورود چه کاری انجام خواهد داد. جذب بازدیدکنندگان به وب سایت شما به اندازه تبدیل آن بازدیدکنندگان به سرنخ های واجد شرایط ارزشمند نیست. اگر قبلاً از Salesforce به عنوان نرم‌افزار مدیریت ارتباط با مشتری (CRM) خود استفاده می‌کنید و ایده استفاده از فرم‌ها برای تولید سرنخ را دوست دارید، باید افزونه Salesforce Web-to-Lead را برای وردپرس بررسی کنید. استفاده از آن آسان تر نیست و بی عیب و نقص کار می کند.

Salesforce و Web-to-Lead توضیح داده شده است

Salesforce یک سرویس CRM (مدیریت ارتباط با مشتری) است که از نرم افزار مبتنی بر ابر برای کمک به کسب و کارها برای یافتن و تبدیل سرنخ ها و ارائه خدمات به مشتریان استفاده می کند. کل مجموعه محصولات Salesforce، Customer 360 نامیده می شود که ابزارهایی برای تجارت، فناوری اطلاعات، بازاریابی، فروش و خدمات دارد. بررسی دقیق Salesforce ما را اینجا بخوانید.

Web-to-Lead استراتژی Salesforce برای تبدیل کاربران بازدیدکننده به سرنخ (یعنی مشتریان، مشترکین و غیره) است. برای انجام این کار، Salesforce به شما کمک می کند تا فرم هایی ایجاد کنید که در آن بازدیدکنندگان اطلاعاتی مانند اطلاعات جمعیتی و علایق خود را پر کنند. در اینجا نحوه تعریف آن در وب سایت آنها آمده است:

Web-to-Lead: فرآیند استفاده از فرم وب سایت برای جمع آوری اطلاعات بازدیدکنندگان و ذخیره آن اطلاعات به عنوان سرنخ جدید در Salesforce.

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

افزونه خاصی نیز وجود دارد تا بتوانید از این استراتژی در وب سایت وردپرسی خود استفاده کنید. افزونه Brilliant Web-to-Lead برای Salesforce Salesforce را با وردپرس ادغام می کند. هنگامی که شخصی فرمی را در سایت وردپرس شما پر می کند، اطلاعات در حساب Salesforce CRM شما ذخیره می شود.

نحوه استفاده از افزونه Salesforce Web-to-Lead WordPress

بیایید نگاهی به نحوه راه اندازی افزونه Web-to-Lead، ایجاد فرم ها، اضافه کردن آنها به وب سایت و همگام سازی سوابق با CRM خود بیاندازیم.

افزونه Web-to-Lead را نصب کنید

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

تنظیمات افزونه Web-to-Lead

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

شناسه سازمان در Salesforce

برای شروع کار با این افزونه، باید ID سازمان Salesforce خود را اضافه کنید. با کلیک کردن شروع کنید تنظیمات بخشی که در آن شناسه را وارد خواهید کرد (دستورالعمل های زیر را ببینید).

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

در سمت چپ، به پایین بروید تنظیمات بخش. انتخاب کنید تنظیمات شرکت > اطلاعات مربوط به شرکت. مال شما شناسه سازمان Salesforce.com در ستون سمت راست خواهد بود.

آن را کپی کرده و در محل تعیین شده در وردپرس قرار دهید، سپس به پایین صفحه وردپرس بروید و کلیک کنید تنظیمات WordPress-to-Lead را ذخیره کنید.

تشکیل می دهد

روی تب اول کلیک کنید، تشکیل می دهد. یک فرم به صورت خودکار برای شما ایجاد می شود یا می توانید انتخاب کنید یک فرم جدید اضافه کنید.

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

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

تنظیمات بیشتر

دو بخش دیگر وجود دارد: طراحی ظاهر و واردات. را طراحی ظاهر تب به شما اجازه می دهد تا CSS را برای تغییر سبک فرم پیش فرض اضافه کنید. را واردات جایی است که می توانید کد HTML یک فرم سرنخ را که با Salesforce تولید کرده اید به جای افزونه وردپرس کپی و جایگذاری کنید.

یک فرم Web-to-Lead به وب سایت خود اضافه کنید

اکنون که یک فرم ایجاد کرده اید، زمان آن رسیده که آن را به وب سایت خود اضافه کنید. دو راه برای انجام این کار وجود دارد. می توانید کد کوتاه را به یک پست یا صفحه اضافه کنید یا می توانید فرم را در یک ویجت جاسازی کنید. بیایید هر دو گزینه را بررسی کنیم.

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

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

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

فرم را از طریق ویجت اضافه کنید

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

شروع به تایپ “Salesforce” کنید و ویجت مربوطه را انتخاب کنید. سپس می توانید عنوان و ارائه فرم خود را به روز کنید و فرم مورد نظر خود را برای جاسازی از منوی کشویی انتخاب کنید.

فرم ارسالی را با Salesforce همگام کنید

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

نظرات نهایی در مورد افزونه Salesforce Web-to-Lead WordPress

تعداد کمی از افزونه ها به آسانی استفاده از Web-to-Lead هستند، و ما همچنین تحت تأثیر قرار گرفتیم که سوابق بلافاصله و یکپارچه با حساب Salesforce ما همگام می شوند. به ندرت هر نوع به روز رسانی وب سایتی اینقدر ساده است. با برخی از افزونه ها، حتی تغییرات به ظاهر ساده می تواند چندین مرحله غیرمنتظره را نیاز داشته باشد.

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

از آنجایی که این ادغام زمان بسیار کمی از شما می گیرد، چگونه می توان این ایده ها و انگیزه های آهنربای سرب را برای رشد لیست ایمیل خود بررسی کرد.

و برای شما کاربران Divi، افزونه قدرتمند انتخاب ایمیل، Bloom را فراموش نکنید، که همچنین به طور یکپارچه با Salesforce ادغام می شود.

ماژول Divi Filtered Portfolio شامل عناصر بسیاری است و هر کدام را می توان به صورت جداگانه استایل کرد. فیلتر یکی از مفیدترین عناصر است، اما گاهی اوقات نادیده گرفته می شود. در این پست، نحوه استایل دادن به فیلتر دسته در ماژول Divi’s Filtered Portfolio را خواهیم دید. ما خواهیم دید که با تنظیمات پیش‌فرض چه کاری می‌توان انجام داد و در CSS جستجو می‌کنیم تا ببینیم چگونه می‌توان به آن استایل بیشتری داد.

بیا شروع کنیم!

مرور

ابتدا، بیایید ببینیم که در این آموزش قرار است چه چیزی بسازیم.

اولین مثال از فیلتر دسته بر روی دسکتاپ

اولین مثال از فیلتر دسته گوشی

نمونه دوم فیلتر دسته روی دسکتاپ

فیلتر رده تلفن مثال دوم

سومین مثال از فیلتر دسته روی دسکتاپ

نمونه سوم فیلتر دسته گوشی

تقسیم پروژه ها به دسته ها

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

در اینجا فیلدهایی برای اضافه کردن نام، راب، دسته والد و توضیحات را مشاهده خواهید کرد. همچنین لیست دسته بندی های خود را در لیستی مشاهده خواهید کرد که می توانید آنها را ویرایش کنید.

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

برای مثال هایم، پروژه هایی را برای یک شرکت بهبود خانه ایجاد کرده ام. این شرکت بر بازسازی خانه‌ها تمرکز خواهد کرد، اما کارهای مشابهی را برای شرکت‌ها نیز در بر خواهد گرفت و آنها می‌توانند از ابتدا بسازند. برای خانه ها از دسته بندی داخلی و خارجی استفاده می کنم. برای همه کارهای دیگر، شرکت و ساخت و ساز را اضافه کردم.

تنظیمات ماژول نمونه کارها قابل فیلتر

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

در اینجا صفحه پس از افزودن ماژول نمونه کارها فیلتر شده به جای تصاویر است.

ابتدا ماژول را استایل می کنیم. ما از این تنظیمات یکسان برای هر سه مثال استفاده خواهیم کرد.

محتوا

در تب Content، تنظیم کنید تعداد انتشارات را به 8 و انتخاب کنید دسته بندی ها از لیست دسته بندی های موجود

• تعداد انتشارات: 8
• دسته بندی شامل: انتخاب شما

عناصر

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

طرح

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

متن

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

متن عنوان

سپس به متن عنوان. تغییر دادن فونت به کانیت و تنظیم وزن به نیمه ضخیم نگرش رنگ به سیاه.

• فونت: Kanit
• وزن: نیمه ضخیم
• رنگ: #000000

تغییر دادن اندازه فونت حداکثر 20 پیکسل برای رایانه های رومیزی، 18 پیکسل برای رایانه های لوحی و 16 پیکسل برای تلفن ها. نگرش فاصله خطوط به 1 پیکسل و ارتفاع خط تا ساعت 1.3

• اندازه: رومیزی 20 پیکسل، تبلت 18 پیکسلی، گوشی 16 پیکسلی
• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

متن صفحه بندی

سپس به پایین اسکرول کنید متن صفحه بندی و تغییر دهید فونت به Canit. تغییر دادن رنگ به سیاه.

• فونت: Kanit
• رنگ: #000000

تغییر دادن فاصله خطوط تا 1 پیکسل شغلت را حفظ کن اکنون می‌توانیم فیلتر دسته‌بندی را برای مثال‌هایمان استایل دهید.

نمونه هایی از فیلتر کردن دسته ها

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

اولین مثال از فیلتر دسته

اولین مثال ما ساده ترین نمونه از این سه است. از تنظیمات اولیه استفاده می کند و هیچ کار جالبی انجام نمی دهد. با طراحی چیدمان به خوبی کار می کند.

متن معیار را فیلتر کنید

که در طرح برگه، به پایین بروید متن معیار. تغییر دادن فونت به Canit. تغییر دادن سبک به TT و رنگ به سیاه.

• فونت: Kanit
• سبک: TT
• رنگ: #000000

نگرش فاصله خطوط در 1px و تنظیم کنید ارتفاع خط تا ساعت 1.3 برای اولی همین. اکنون تنظیمات خود را ذخیره کرده و ماژول را ببندید.

• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

نمونه فیلتر دسته دوم

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

متن معیار را فیلتر کنید

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

• فونت: Kanit
• رنگ: #000000
• اندازه: 16 پیکسل
• ارتفاع خط: 1.5 em

ماژول CSS

سپس برو به منبسط بخش. به پایین بروید فیلتر نمونه کارها فعال و اضافه کنید CSS برای رنگ پس زمینه و ماژول را ببندید. این رنگ پس زمینه فیلتر فعال را تغییر می دهد. هر فیلتری که کاربر روی آن کلیک می‌کند به این رنگ پس‌زمینه تغییر می‌کند و فیلتر قبلی به رنگ ساده باز می‌گردد.

تنظیمات صفحه CSS

سپس باز کنید تنظیمات صفحه در منوی صفحه در حالت صفحه تنظیمات، را انتخاب کنید منبسط برگه و چسباندن CSS سفارشی در زمینه این CSS مرز را از عناصر فیلتر حذف می کند، یک مرز شعاع 25 پیکسلی ایجاد می کند و یک حاشیه 5 پیکسلی بین عناصر اضافه می کند. همچنین یک سایه کوچک به پایین عناصر اضافه می کند و رنگ سایه را تغییر می دهد. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• CSS سفارشی:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

سومین مثال از فیلتر دسته

مثال سوم ما از ایده های طراحی CSS مشابه از مثال قبلی پیروی می کند. گوشه های گرد را شامل نمی شود و فونت و رنگ پس زمینه را در حالت انتظار تغییر می دهد. همچنین از CSS هم برای ماژول و هم برای صفحه استفاده می کند.

متن معیار را فیلتر کنید

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

• فونت: Kanit
• سبک: TT
• رنگ: #ffffff

سپس انتخاب کنید گزینه شناور برای رنگ متن و تغییر دهید رنگ به سیاه. این کار از فونت های در انتظار مراقبت می کند. پس زمینه را با CSS مدیریت می کنیم. تغییر دادن فاصله بین حروف به 1 پیکسل و ارتفاع خط تا ساعت 1.3

• رنگ مکان نما: #000000
• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

ماژول CSS

سپس برو به منبسط و به پایین اسکرول کنید فیلتر نمونه کارها فعال. موارد زیر را اضافه کنید CSS برای تغییر پس زمینه فیلتر فعال. ماژول را ببندید.

• فیلتر نمونه کارها CSS فعال:

  background-color:#ffd000

تنظیمات صفحه CSS

در نهایت باز کنید تنظیمات صفحه. قابل اعتماد و متخصص منبسط و زیر را تایپ کنید CSS سفارشی. ماژول را ببندید و تنظیمات خود را ذخیره کنید. این کار پس‌زمینه را به سیاه تغییر می‌دهد، یک پد 15 پیکسلی به بالا و پایین و یک پد 30 پیکسلی به چپ و راست اضافه می‌کند. این کار اندازه عناصر فیلتر را طوری تغییر می دهد که دقیقاً با دکمه های موجود در طرح مطابقت داشته باشد و به ایجاد تغییر رنگ برای جلوه نگه داشتن کمک می کند. پس‌زمینه در حالت انتظار به سفید تغییر می‌کند.

نتایج

اولین مثال از فیلتر دسته بر روی دسکتاپ

اولین مثال از فیلتر دسته گوشی

نمونه دوم فیلتر دسته روی دسکتاپ

فیلتر رده تلفن مثال دوم

سومین مثال از فیلتر دسته روی دسکتاپ

نمونه سوم فیلتر دسته گوشی

پایان افکار

این برداشت ما از نحوه استایل دادن به فیلتر دسته در ماژول نمونه کارها فیلتر شده Divi است. فیلتر دسته شامل همان ابزارهای یک ظاهر طراحی شده است که عناصر دیگر را شامل می شود، بنابراین به راحتی می توان آن را برای کار با هر طرح بندی Divi استایل کرد. با افزودن CSS هم به ماژول و هم به صفحه، می‌توانیم فیلتر دسته‌بندی را به روش‌های منحصربه‌فردی استایل دهی کنیم تا از بقیه متمایز شود.

ما می خواهیم از تو بشنویم. آیا فیلتر دسته بندی خود را در ماژول نمونه کارها فیلتر شده Divi استایل داده اید؟ در نظرات به ما اطلاع دهید.

هی دیوی ملت! از اینکه برای قسمت بعدی طرح هفتگی Divi Design Initiative به ما ملحق شدید متشکریم، جایی که ما هر هفته موارد جدید را به شما هدیه می دهیم. این بار ما بسته طرح‌بندی خدمات الکتریکی را با یک قالب پست وبلاگ کاملاً جدید که کاملاً با بقیه بسته مطابقت دارد، ارتقا می‌دهیم. امیدوارم ازش خوشتان بیاید!

قالب پست وبلاگ را برای بسته طرح بندی خدمات برق دانلود کنید

برای ارتباط با قالب پست وبلاگ خدمات برق رایگان، ابتدا باید آن را با استفاده از دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

نحوه آپلود قالب

به Divi Theme Builder بروید

برای آپلود قالب، به Divi Theme Builder در باطن وب سایت وردپرس خود بروید.

یک قالب وب سایت بارگذاری کنید

سپس یک نماد با دو فلش در گوشه سمت راست بالا مشاهده خواهید کرد. روی نماد کلیک کنید.

به تب import بروید، فایل JSON را که می‌توانید در این پست دانلود کنید آپلود کنید و روی «Import Divi Theme Builder Templates» کلیک کنید.

تغییرات را در Divi Theme Builder ذخیره کنید

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

نحوه تغییر قالب

قالب پست را باز کنید

برای تغییر عناصر قالب، با باز کردن قالب شروع کنید.

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

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

درباره چیدمان

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

سایر عناصر پویا شامل موارد زیر است:

• ماژول(های) پست های مرتبط – جدیدترین پست هایی را که دسته بندی مشابهی دارند را نشان می دهد. گاهی اوقات چندین ماژول با افست برای چیدمان های منحصر به فرد استفاده می شود.
• Bio نویسنده پست – اطلاعات نمایه (عکس، نام، بیو) کاربر/نویسنده پست را نمایش می دهد.
• ماژول محتوای پست – محتوای پست اضافه شده در هنگام ویرایش پست در باطن وردپرس را نمایش می دهد.
• نظرات – یک منطقه کاربردی برای نظرات در مورد پست.
• Post Navigation – دکمه هایی را برای پست قبلی و بعدی ارائه می دهد.

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

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

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

برای اینکه اجازه دهید ماژول Email Optin در طراحی شما ظاهر شود، باید یک حساب ایمیل را به هر یک از ماژول های موجود در قالب پیوند دهید.

رایگان های جدید هر هفته!

امیدواریم از بسته طرح‌بندی خدمات برق و الگوی پست وبلاگ رایگان که همراه با آن است لذت برده باشید. ما مشتاقانه منتظر شنیدن نظرات شما در بخش نظرات زیر هستیم. حتماً هفته آینده برای رایگان بیشتر بررسی کنید!