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

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

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

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

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

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

Facebook crée un « Instant Article » quand un flux RSS correctement formaté est associé à une page Facebook approuvée en utilisant le gestionnaire d’entreprises de Facebook. Les éditeurs doivent demander à participer au programme et, une fois acceptés, ils pourront personnaliser l’apparence et le comportement des articles instantanés.

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

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

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

هنگام پیوستن به برنامه ، محتوا چه کاری انجام می دهد؟

ناشران محتوا که در این برنامه شرکت می کنند کنترل زیادی بر نحوه نمایش محتوای آنها در برنامه فیس بوک دارند. ناشران همچنین می توانند فضای آگهی را در مقالات فوری بفروشند و بسته به اینکه ناشر یا فیس بوک فضا را بفروشد ، 100٪ یا 70٪ از درآمد آگهی را حفظ کنند.

Un plus grand contrôle sur eux et l’augmentation des revenus sont les deux facteurs motivants, mais la plus grande raison pour laquelle vous devrez adhérer au programme est que l’expérience des utilisateurs de Facebook est meilleure avec les articles instantanés.

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

فیس‌بوک ادعا می‌کند که مقالات فوری ده برابر سریع‌تر از محتوای استاندارد وب موبایل بارگیری می‌شوند، ادعایی که به طور مستقل تأیید نشده است. Instant Articles همچنین با استفاده از کل پنجره موجود دستگاه تلفن همراه متحول می شود، که باعث می شود مقالات فوری بسیار فراگیرتر از محتوای مشاهده شده در مرورگر باشند.

چه کسی باید در برنامه فوری فیس بوک شرکت کند؟

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

چگونه برای مقالات فوری آماده شویم

بارگذاری مقالات خود در فیس بوک آیا Instant Article به آسانی نصب پلاگین است؟

بله و خیر.

پیوستن به برنامه فرایندی در مراحل 11 است.

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

در حال حاضر ، در اینجا مواردی که شما باید انجام دهید برای 3 آماده است تا وقتی برنامه برای همه ناشران (نویسندگان) راه اندازی می شود آماده باشید.

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

مرحله اول: اطمینان حاصل کنید که در فیس بوک حضوری موثر دارید

حضور سازمان شما در فیس بوک و آشنایی شما با این بستر باید مؤثر باشد.

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

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

اگر از آن استفاده نمی کنید ، می توانید برنامه Facebook Pages را بارگیری کنید. می توانید آن را پیدا کنید فروشگاه برنامه برای استفاده از آن در iPhone یا iPad یا بازی فروشگاه گوگل. برای پیش نمایش مقالات فوری به این برنامه نیاز دارید. می توانید این ویژگی را آزمایش کنید تا ببینید که چگونه کار می کند.

مرحله 2: خوراک RSS خود را برای مقالات فوری ایجاد کنید

Instant Articles est assemblé sur Facebook en utilisant le contenu HTML importé depuis le flux RSS formaté d’une manière spécifique. Afin d’intégrer votre site internet avec Instant Articles, vous avez besoin de générer un flux RSS formaté d’une façon spéciale, voici un plugin que vous pouvez utiliser pour cela.

افزونه ای که با همکاری با آن ایجاد شده است وردپرس et دكود، ممکن است به فهرست رسمی افزونه های WordPress اضافه شود. هم اکنون می توانید افزونه را بارگیری کنید به طور مستقیم از Github.

افزونه مقالات فوری fb در github

این افزونه در قالب ZIP بارگیری می شود و شما دو گزینه برای نصب افزونه دارید:

  1. می توانید افزونه را مستقیماً از داشبورد وردپرس با استفاده از فایل ZIP نصب کنید.
  2. شما می توانید پلاگین را از طریق سرویس دهنده FTP استخراج کنید و آن را مستقیماً به پوشه / wp-content / plugins / از نصب وردپرس خود بفرستید.

پس از فعال کردن افزونه ، می توانید با دنبال کردن مسیر زیر به فید RSS وبلاگ خود دسترسی پیدا کنید:

http://votresite.com/feed/instant-articles.

فوری اقلام خوراک

اگر شبکه چندرسانه ای دارید ، این افزونه برای هر وب سایت یک فید RSS ایجاد می کند  "به طور خودکار جادویی". می توانید با ایجاد یک شبکه چند سایته این را امتحان کنید و برای تأیید اینکه همه چیز به طور عادی کار می کند از URL بازدید کنید.

فوری اقلام چند خوراک

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

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

سپس می توانید پیش بروید و URL را تغییر دهید که می خواهید از طریق آن ویژگی Instant Article ایجاد شود. برای انجام این کار ، باید فایلی به نام "facebook-instant-articles.php" را باز کرده و ثابت "INSTANT_ARTICLES_SLUG" را پیدا کنید. در نسخه 0.1 این افزونه ، می توانید آن را در سطر 18 بیابید. سپس می توانید "مقالات فوری" را حذف کرده و حلقه حلزونی مورد نظر خود را وارد کنید.

ویرایش فید RSS - مقالات فوری

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

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

آدرس جریان تغییر یافته

مرحله 3: در برنامه مشترک شوید و مراحل را دنبال کنید

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

می توانید برای بررسی راهنمای شروع کار که فیس بوک در کنار هم قرار داده است ، وقت بگذارید. با این کار شما آماده می شوید تا در دسترس بودن برنامه آماده شوید.

مرحله 4: جریان مواردی را که قدیمی تر از ساعت 24 نیستند محدود کنید

این کار را فقط پس از پذیرش در برنامه انجام خواهید داد.

وقتی برای برنامه Instant Article ثبت نام می کنید ، فیس بوک می خواهد حداقل 50 مقاله را در خوراک RSS شما ببیند. با این حال ، هنگامی که خوراک RSS شما برای اولین بار وارد شد ، فیس بوک مقاله هایی را که در 24 ساعت گذشته به روز نشده اند ، نادیده می گیرد. به همین دلیل ، وقتی سازمان شما به برنامه اضافه شود و خوراک شما وارد شود ، شما قادر خواهید بود جریان را اصلاح کنید فقط مواردی را که طی 24 ساعت گذشته تغییر کرده اند در آن قرار دهید.

برای انجام این تغییر ، باید نسخه ای از پرونده "facebook-instant-articles.php" را بارگیری کنید که اگر چیزی به طور عادی کار نمی کند ، می توانید آن را بازیابی کنید. در این نسخه ، باید یک "INSTANT_ARTICLES_LIMIT_POSTS" ثابت برای "true" تعریف کنید. اگر این ثابت را دقیقاً قبل از شرط "اگر" اضافه کنید ، برای تعریف محدود بودن جریان یا عدم وجود آن منطقی تر خواهد بود. در نسخه 0.1 پلاگین ، این مورد را در خط 150 مشاهده خواهید کرد.

فید rss را به 24 ساعت محدود کنید - مقالات فوری فیس بوک

اکنون تنها کاری که باید انجام دهید این است تغییرات خود را ذخیره کنید، و به خوراک RSS خود دسترسی پیدا کنید. شما می توانید مقالات محدودی را که 24 ساعت قبل به روز شده اند مشاهده کنید.

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

آیا وب سایت شما به صفحه صفحه خدمات نیاز دارد؟ با خواندن این مقاله متوجه شوید.

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

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

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

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

1. ARPrice

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

افزونه جدول قیمت گذاری وردپرس پاسخگو ARPrice

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

همچنین ببینید نحوه شارژ یک سرویس را در وبلاگ خود؟

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

دانلود نسخه ی نمایشی | میزبانی وب

2. های PrivateContent

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

پلاگین محتوای چند سطحی PrivateContent

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

همچنین نگاهی بیندازید 5 برنامه تلفن هوشمند برای محافظت از تصاویر و فیلم های شما

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

دانلود | نسخه ی نمایشی | میزبانی وب

3. کشویی محصولات مرتبط با WooCommerce

پلاگین لو کشویی محصولات مرتبط با WooCommerce افزونه WordPress است که برای نمایش محصولات مرتبط با جلوه های زیبا استفاده می شود. محصولات مشابه از همان دسته یا همان برچسب تهیه می شوند.

لغزنده محصولات مرتبط WooCommerce - مقالات فوری

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

مقاله ما را نیز ببینید پلاگین های WordPress 5 برای ایجاد شبکه های قیمت

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

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

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

نتیجه

اینجا ! این برای این آموزش است ، امیدوارم به شما کمک کند وب سایت خود را برای مقالات Facebook Instants آماده کنید. دریغ نکنید با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید

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

اگر پیشنهادی یا اظهار نظر دارید ، آنها را در بخش ما بگذارید نظر.

... 

Elementor: چگونه یک انیمیشن در شناور ایجاد کنیم

Elementor: چگونه یک انیمیشن در شناور ایجاد کنیم

آیا می خواهید با Elementor یک انیمیشن شناور ایجاد کنید؟

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

از شما دعوت می‌کنیم ویدیوی زیر را تماشا کنید تا ایده‌ای را که می‌خواهیم به شما نشان دهیم به دست آورید.

ایجاد انیمیشن شناور در المنتور

یک بخش ستونی را وارد کنید سپس در نوار کناری انتخاب کنید حداقل ارتفاع سور ارتفاع

در باره حداقل ارتفاع کلیک کنید VH سپس نوار لغزنده را به سمت آن بکشید 100. همیشه در برگه چیدمان تعریف 650 comme عرض.

ایجاد انیمیشن شناور در المنتور

ستون و در نوار کناری فیلد را انتخاب کنید چیدمان عمودی انتخاب کنید محیط.

ایجاد انیمیشن شناور در المنتور

در برگه سبک، رنگ پس زمینه را با کلیک کردن روی انتخابگر رنگ تغییر دهید و تایپ کنید # D37636 سپس در بخش مرز، بگیریم 20 برای همه شعاع های محدود

ایجاد انیمیشن شناور در المنتور

در برگه پیشرفته، صحافی padding را خاموش کنید و تایپ کنید 75 برای حاشیه های داخلی بالا et حجاری و نقوش برجسته et 25 برای حاشیه های داخلی چپ دست et Droite.

ایجاد انیمیشن شناور در المنتور

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

ایجاد انیمیشن شناور در المنتور

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

همچنین راهنمای ما را در اینجا بخوانید: نحوه ایجاد یک کارت افکت از پورتفولیو در المنتور

سپس، در برگه سبک، به متن رنگ سفید بدهید و برای تایپوگرافی مقدار را تنظیم کنید اندازه سور 32از ارتفاع سطر سور 1.2, فاصله بین حروف سور 0.5.

زیر ویجت عنوان، یک را رها کنید ویجت ویرایشگر متن و متن را ویرایش کنید در برگه سبک، رنگ متن را به سفید تغییر دهید و اندازه تایپوگرافی روشن 16از ارتفاع سطر سور 1.5 وفاصله بین حروف سور 0.5.

در برگه پیشرفته حاشیه را تغییر دهید حجاری و نقوش برجسته سور -10.

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

ایجاد انیمیشن شناور در المنتور

در زیر پاراگراف الف را اضافه می کنیم ویجت دکمه با برای متن ادامه مطلب.

ایجاد انیمیشن شناور در المنتور

در برگه سبک به دکمه رنگ بدهید سفید و رنگ متن را روی آن تنظیم کنید خیر.

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

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

هنگامی که تصویر را وارد کردید، آن را پیکربندی کنید اندازه تصویر سور کل و هم ترازی بیایید کلیک کنیم مرکز.

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

به پایین تر بروید بخش تبدیل تعریف کردن تغییر اندازه سور 0.5.

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

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

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

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

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

در این زمان، انیمیشن شما به طور معمول در مرورگر اجرا می شود.

به نظر می رسد انیمیشن روی تبلت نیز عالی است

Mais sur smartphone, elle ne s’affiche pas normalement. Résolvons ce problème.

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

در مرورگر Section را انتخاب کنید (مطمئن شوید هنوز در حالت گوشی هوشمند هستید) و مقدار را پایین بیاورید عرض سور 320

سپس ستون اصلی و در تب آن را انتخاب کنید پیشرفته، تمام حاشیه های داخلی را روی 25

ایجاد انیمیشن شناور در المنتور

در مرورگر، تصویر را انتخاب کنید و در تب سبکروی کلیک کنید PX de عرض و آن را تنظیم کنید 180.

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

ایجاد انیمیشن شناور در المنتور

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

اکنون Elementor Pro را دریافت کنید!!!

نتیجه

بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه یک انیمیشن در شناور ایجاد کنید در المنتور اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، مایلیم از شما در این قسمت بشنویم نظر.

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

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...

وردپرس در مقابل HTML: وردپرس در مقابل. HTML: کدام یک همراه شما در هنگام راه اندازی یک وب سایت خواهد بود؟

وردپرس در مقابل HTML: وردپرس در مقابل. HTML: کدام یک همراه شما در هنگام راه اندازی یک وب سایت خواهد بود؟

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

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

راه اندازی یک وب سایت اصلی: بسترسازی

HTML (زبان نشانه گذاری فرامتن) برای ایجاد صفحات وب از ابتدا استفاده می شود. اگر تمایلی به صرف منابع برای ساخت یک سایت سفارشی از ابتدا با استفاده از HTML ندارید، می توانید از موارد زیر استفاده کنید:

  • پلتفرم های انتشار چندگانه؛
  • آسان برای استفاده سازندگان وب سایت؛
  • سیستم های مدیریت محتوا

مهمترین این گزینه ها سیستم مدیریت محتوا (CMS) است. به شما اجازه می دهد:

  • تغییر ظاهر سایت؛
  • رسانه ها را در پست های خود بگنجانید.
  • سازماندهی مطالب (با استفاده از برچسب ها و دسته ها)؛
  • مدیریت بسیاری از کاربران؛ 
  • کد منبع و سایر وظایف را به روز کنید

پروژه های آنلاین ایجاد شده با CMS بسیار ساده هستند. آنها به تجربه برنامه نویسی کمی یا بدون نیاز دارند و طیف گسترده ای از گزینه های کاربردی را ارائه می دهند. آنها یک جایگزین جذاب برای کسانی هستند که برای اولین بار تصمیم به ایجاد یک سایت دارند.

بنابراین، برخلاف HTML، وردپرس یک CMS (سیستم مدیریت محتوا) است. شما آزاد هستید که داده ها را آپلود کنید، مطالب لازم را منتشر کنید و رسانه ها را بدون نیاز به نوشتن کد نمایش دهید.

مقدمه ای بر وردپرس: مزایا و معایب

طبق آمار ارائه شده توسط W3Techsوردپرس 42,9 درصد از تمام وب سایت ها را در اختیار دارد. چرا این پلتفرم به طور گسترده در سراسر جهان استفاده می شود؟

  1. هر کسی می تواند وردپرس را کاملا رایگان دانلود کند. این یک پروژه منبع باز است که از سال 2003 وجود داشته است. این نشان می دهد که وردپرس توسط گروهی از مشارکت کنندگان ایجاد شده است. پروژه های متن باز معمولا رایگان هستند و دارای جوامع بزرگ هستند. کاربران اغلب به عنوان آزمایش کننده یا حامی در انجمن شرکت می کنند، اما اگر به شما مربوط نمی شود نیازی به شرکت نیست.
  2. مهمترین مزیت وردپرس این است که اجازه می دهد تا برنامه نویسی تقریباً به طور کامل از نگهداری منظم سایت حذف شود. علاوه بر این، اکثر عملیاتی که می خواهید انجام دهید را می توان با استفاده از یک رابط کاربری آسان انجام داد. از جمله کارهایی مانند ایجاد محتوای تازه و تغییر ظاهر وب سایت. امکان پیکربندی تنظیمات ضروری سئو و انجام یک سری کارهای حیاتی دیگر وجود دارد.
  3. گاه به گاه، مراجعه به آن ممکن است سودمند باشد بهترین تم های وردپرس. آنها در زمان صرفه جویی می کنند زیرا همه اجزا آماده استفاده هستند. تنها کاری که باید انجام دهید این است که روی دکمه کلیک کرده و فایل مورد نیاز را دانلود کنید. پس از آن می توانید با یک سبک سایت کاملا جدید شروع به کار کنید. به هر حال، همچنین لازم به ذکر است که اینترنت تم های رایگان وردپرس را ارائه می دهد. اینها برای آزمایش عملکرد مدل های آماده، آزمایش و بررسی عملکرد عملکردهای مختلف ایده آل هستند.
  4. وردپرس همچنین افزونه هایی را ارائه می دهد که به شما امکان می دهد قابلیت های سایت خود را افزایش دهید. آیا نیاز به افزودن فرم تماس، انجمن یا هر عنصر دیگری دارید؟ برای انجام این کار فقط باید افزونه انتخابی خود را نصب کنید.
  5. وردپرس از تعداد زیادی از انواع رسانه پشتیبانی می کند. اینها شامل تصاویر، ویدئوها، صدا و اسناد در فرمت های مختلف است.
  6. هیچ مانعی برای دسترسی به نرم افزار وجود ندارد. برعکس، کاربران مجموعه‌ای از منابع را ایجاد کرده‌اند که بخش‌های مختلف پلتفرم را پوشش می‌دهند. می توانید به کتاب های الکترونیکی، دوره ها، وبینارها، وبلاگ ها و موارد دیگر مراجعه کنید. علاوه بر این، می‌توانید در سایت‌های خبره مشترک شوید تا یک جریان مداوم مشاوره در صندوق پستی خود دریافت کنید.

با این حال، برخی از اشکالات جزئی وجود دارد.

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

مقدمه ای بر HTML: مزایا و معایب

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

  1. هنگام استفاده از تم ها (یا افزونه ها) وردپرس، به روز نگه داشتن آنها و اطمینان از عدم وجود مشکل سازگاری ضروری است. اگرچه این کار معمولاً به آسانی کلیک کردن روی یک دکمه است، اما کاری است که باید انجام دهید تا وب سایت خود را محافظت و راه اندازی کنید. با این حال، اگر HTML استاتیک مناسبی را توسعه داده اید، لازم نیست نگران تغییرات باشید.
  2. در حالی که وردپرس به شما امکان دسترسی به تمام کدهای سایت شما را می دهد، یک سایت HTML ایستا اضافه کردن انواع خاصی از نشانه گذاری را برای شما آسان تر می کند. 
  3. HTML از تعداد زیادی مرورگر مانند گوگل کروم، موزیلا فایرفاکس، اپرا و غیره پشتیبانی می کند.
  4. همچنین به توسعه دهندگان وب اجازه می دهد تا از چندین فرمت استفاده کنند. بنابراین، کار توسعه دهندگان وب را با کاهش زمان مورد نیاز برای ساخت کدهای طرح ساده بسیار ساده می کند. نیز وجود دارد  قالب های HTML5 کیفیت برتر به طور خلاصه، قالب های وب سایت HTML، قالب های وب سایت از پیش طراحی شده بر اساس کدنویسی HTML5 و CSS3 هستند. آنها شامل چندین صفحه از پیش طراحی شده، شیوه نامه ها و فایل های جاوا اسکریپت هستند. می توانید طرح را تغییر دهید و متن را با استفاده از ویرایشگر کد اضافه کنید. همچنین امکان پذیر است راه اندازی یک وب سایت به صورت رایگان. در این صورت باید از بین قالب های رایگان وب سایت چیزی را انتخاب کنید.
  5. همانطور که می دانید، HTML یک زبان پایه با ساختاری کاملاً تعریف شده و برچسب ها و ویژگی های از پیش تعریف شده است. بنابراین، اگر اغلب تمرین کنید، به ساختار ساده HTML عادت خواهید کرد.
  6. HTML را می توان به عنوان یک زبان نشانه گذاری سبک و ساده توصیف کرد. با کاهش زمان انباشتگی در زمان مشتریان صرفه جویی می کند. 

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

بیشتر این معایب فقط معکوس مزایای وردپرس است:

  • افزودن یا به روز رسانی اطلاعات دشوار است زیرا باید وارد کد شوید.
  • افزودن قابلیت های اضافی مستلزم نوشتن کد خود است.
  • تغییر ظاهر سایت شما مستلزم تغییر CSS است.
  • مگر اینکه HTML/CSS را بلد باشید، همه این ویژگی ها نیازمند استخدام یک توسعه دهنده هستند.

قالب های آماده رایگان یا ممتاز: هنگام راه اندازی یک وب سایت برای اولین بار کدام را باید انتخاب کنید؟

مزایایمعایب
رایگان1. رایگان به طور کلی چیز خوبی برای مبتدیان و برای کسانی که همیشه به دنبال چیز جدید هستند. گزینه های موجود در کاتالوگ رسمی در وردپرس طی یک فرآیند چند مرحله ای تایید می شوند.2. از آنجایی که دارای ویژگی‌ها و ویجت‌های اضافی زیادی نیستند، تم‌های رایگان معمولاً طراحی ساده‌ای دارند. اکثر تم های رایگان برای مبتدیان ایجاد می شوند. بنابراین، آنها پیچیده نیستند.1. یک تم رایگان دارای عملکرد محدود مورد نیاز وب سایت های پیشرفته تر است. بیش از 2 میلیون نفر چند تم رایگان دانلود کرده اند. به عبارت دیگر، تم های رایگان عملاً قابل تشخیص نیستند. اکثر آنها هرگز به روز نمی شوند.3. اگر مشکلی پیش بیاید، ممکن است هیچ کمکی دریافت نکنید.
حق بیمه 1. هنگامی که گزینه مناسب را پیدا می کنید، نه تنها یک تم کاملا کاربردی دریافت می کنید. شما پشتیبانی، به‌روزرسانی‌های مکرر، افزایش تطبیق پذیری (از نظر گزینه‌های سفارشی‌سازی) و محافظت دریافت خواهید کرد. تم های ممتاز به طور قابل توجهی منحصر به فرد تر از تم های رایگان هستند. آنها از آخرین نسخه های WordPress، PHP، CSS و HTML.2 استفاده می کنند. آنها به گونه ای طراحی شده اند که سازگار با موبایل باشند. این موضوع اهمیت فزاینده‌ای پیدا می‌کند زیرا Google پاسخگویی تلفن همراه را به عنوان یک عنصر رتبه‌بندی ضروری می‌بیند.1. با توجه به قابلیت های گسترده بسته، زمان بارگذاری ممکن است با تاخیر.2. توسعه دهنده سایت ممکن است گزینه های سفارشی سازی کافی را نداشته باشد.

نتیجه

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

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

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

به هر حال، کد تبلیغاتی ما "voirplus5" 5٪ تخفیف بر روی تمام محصولات دیجیتال TemplateMonster می دهد. عجله کنید تا راه حل کامل خود را در بین قالب های وردپرس و HTML دریافت کنید. با تشکر برای خواندن!

10 صفحه ساز وردپرس: چگونه یک مورد مناسب را برای نیازهای خود انتخاب کنید؟ (+ 7 بهترین تم وردپرس)

10 صفحه ساز وردپرس: چگونه یک مورد مناسب را برای نیازهای خود انتخاب کنید؟ (+ 7 بهترین تم وردپرس)

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

10 صفحه ساز برتر وردپرس: کدام یک ارزش توجه شما را دارد؟ (+7 تم شگفت انگیز وردپرس)

Elementor Page Builder

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

  1. رابط کاربری بسیار ساده است و اجزای زیادی را برای ایجاد صفحات وب سفارشی فراهم می کند. اگر شما یک توسعه دهنده وب هستید، می توانید سایت های استثنایی با طراحی های پیچیده برای مشتریان خود نیز بسازید.
  2. قابلیت های پیچیده Elementor به شما این امکان را می دهد که یک فروشگاه آنلاین طراحی کنید و کالاهای خاص را بدون زحمت به نمایش بگذارید. سازنده WooCommerce آن به شما امکان می دهد یک صفحه پرداخت، یک صفحه "حساب های من" و یک صفحه فروشگاه ایجاد کنید. همچنین ویژگی هایی را ارائه می دهد که به صفحات محصول منحصر به فرد با عناصر محتوای پویا اجازه می دهد.
  3. هزاران قالب و صفحه از پیش طراحی شده برای صنایع مختلف برای استفاده وجود دارد. کتابخانه‌ای را جستجو کنید که بلوک‌ها، صفحات یا حتی کل سایت‌های آماده برای وارد کردن را ارائه می‌دهد.
  4. ایجاد افکت های متحرک با استفاده از متن و گرافیک و همچنین افکت های ماوس دیگر دشوار نیست. 
  5. می توانید طرح های مختلفی را برای پلتفرم های موبایل، تبلت و دسکتاپ توسعه دهید. همچنین ممکن است انتخاب کنید که اجزای خاصی در یک دستگاه خاص نمایش داده نشود.
مزایایمعایب
Elementor یک صفحه ساز پویا است که با تجربه ویرایش بصری همراه است.نسخه رایگان Elementor دارای ابزار و ویژگی های طراحی کمتری است.
شامل بیش از 1000 بلوک آماده برای استفاده، طرح‌بندی، صفحات و وب‌سایت‌ها بر اساس صنایع و نیازهای مختلف. می‌توانید از میان هدرها، پاورقی‌ها، بلوک‌های CTA، پاپ‌آپ‌ها و سایر عناصر انتخاب کنید.ویژگی های زیادی دارد، اما شناخته شده است که چندان کاربرپسند نیست. بسیاری از ویژگی های آن نیاز به مدتی برای یادگیری و تمرین دارد.
جدا از نسخه دسکتاپ، Elementor به شما امکان می دهد طرح های خود را برای دستگاه های تلفن همراه و تبلت ها ویرایش کنید.

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

Poket – بهترین انتخاب تم های وردپرس برای کسب و کار و چند منظوره.

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

توابع دیگر:

  • واردات نسخه ی نمایشی با یک کلیک؛
  • طراحی کاملا واکنشگرا؛
  • ویجت های اضافی؛
  • 100+ گونه از دموهای مدرن؛
  • قابلیت WooCommerce

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

گوتنبرگ

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

  1. ویرایشگر گوتنبرگ رویکردی مبتنی بر بلوک را در پیش گرفته و هر عنصر از جمله متن و تصاویر را به عنوان بلوک در نظر می گیرد.
  2. گوتنبرگ صفحه را به بلوک‌ها تقسیم می‌کند و گزینه‌های اضافی را برای اصلاح سبک و عملکرد سایت ارائه می‌دهد. از جمله این موارد می توان به تغییر رنگ متون و افزودن عکس، فیلم و دکمه اشاره کرد. علاوه بر این، می‌توانید ستون‌ها، جاسازی‌ها، ویجت‌های درون پستی، تقسیم‌کننده‌ها و قالب‌های مختلف محتوای دیگر را در صورت نیاز به پست‌ها و صفحات خود اضافه کنید.
  3. این بلوک ها برای ساخت طرح های پیچیده تر استفاده می شوند. این می تواند یک طرح چند ستونی یا گروه بندی ستون ها برای تشکیل یک بخش یکپارچه باشد.
  4. پروژه گوتنبرگ به جای اینکه یک ویرایشگر متن ساده باشد، آرزو دارد که یک سایت ساز با امکانات کامل باشد.
  5. وردپرس گوتنبرگ نه تنها برای تولیدکنندگان محتوا، بلکه برای سازندگان افزونه نیز ابزاری مناسب است. دومی مجبور نیست به کدهای کوتاه تکیه کند (اگرچه امکان توسعه برخی از آنها وجود دارد). در عوض، آنها می توانند بلوک های خاصی را طراحی کنند که می توانند به مقالات اضافه شوند.
مزایایمعایب
استفاده از گوتنبرگ رایگان است و به عنوان یک جزء اصلی، هیچ مشکلی در سازگاری با آن نخواهید داشت.اگرچه گوتنبرگ ویرایش بصری بیشتری را نسبت به ویرایشگر کلاسیک ارائه می دهد، اما فاقد روان بودن یک صفحه ساز است.
همه توسعه دهندگان می توانند آن را در پلاگین های خود ادغام کنند که باعث افزایش سازگاری می شود.سایر سازندگان صفحه آزادی خلاقانه بیشتری نسبت به این ویرایشگر ارائه می دهند.
گوتنبرگ کد خواناتر و ناب تری ایجاد می کند. وقتی همه شرایط دیگر برابر باشند، طرح مبتنی بر گوتنبرگ اغلب سریع‌تر از سایرین بارگذاری می‌شود.

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

Techup - قالب وردپرس برای استارتاپ های اینترنت اشیا و هوش مصنوعی

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

توابع دیگر:

  • قابلیت وبلاگ
  • سازگار با Revolution Slider.
  • بلوک اعضای تیم؛
  • گالری؛
  • نقشه های گوگل

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

سازنده Divi

Divi Builder خود را به عنوان یکی از صفحه سازهای برتر وردپرس تثبیت کرده است. از زمان شکل‌گیری در سال 2015، تلاش کرده است تا ساخت وب‌سایت‌ها را تا حد امکان بصری کند. در ابتدا، فقط با "طرح وردپرس Divi" از Elegant Themes سازگار بود. خوشبختانه، همه اینها تغییر کرده است، و شما آزاد هستید که هر راه حل خارج از جعبه وردپرس را تغییر دهید. چرا بسیاری از مردم تصمیم می گیرند با Divi Builder همراه شوند؟

  1. این شامل یک کتابخانه گسترده از بیش از 1 طرح بندی آماده برای استفاده است. اینها طرح های شایسته ای هستند که برای برآوردن نیازهای صنایع مختلف ساخته شده اند.
  2. سفارشی سازی نیز گسترده و انعطاف پذیر است. شما می توانید هر یک از اجزای آن را تغییر دهید.
  3. به شما امکان می دهد تمام اجزای سایت را تغییر دهید. شما می توانید تمام اجزای سایت خود را کنترل کنید، از تقسیم کننده شکل و تایپوگرافی گرفته تا قالب بندی متن و افکت های انیمیشن.
  4. کاملاً با WooCommerce سازگار است. Divi به شما این امکان را می دهد که کسب و کار خود را کارآمد و مقرون به صرفه اداره کنید.
  5. دسترسی به بیش از 30 ماژول محتوای قابل تنظیم را فراهم می کند که می توانید آنها را در ردیف ها و ستون ها قرار دهید. همچنین می توانید متن، عکس، فیلم، شمارش معکوس، قیمت، نقشه و موارد دیگر را اضافه کنید.
مزایایمعایب
بسته‌ای که ارائه می‌دهد مجموعه‌ای از افزونه‌ها و ویژگی‌های اضافی را ارائه می‌دهد و ارزش بسیار خوبی برای پول دارد.هیچ جایگزین رایگانی وجود ندارد.
این افزونه به شما این امکان را می دهد که تقریباً تمام عناصر وب سایت خود را شخصی سازی کنید. طیف گسترده ای از طرح بندی های آماده برای استفاده خیره کننده را ارائه می دهد.اگر فقط می خواهید از آن استفاده کنید، نمی توانید صفحه ساز Divi را به صورت جداگانه خریداری کنید.
استفاده از آن ساده است و برای کاربران مبتدی و با تجربه مناسب است.

تم وردپرس رفاه اجتماعی – غیرانتفاعی Divi Charity

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

توابع دیگر:

  • صفحات گالری و رویدادها؛
  • وبلاگ یکپارچه؛
  • طراحی بهینه شده برای موبایل؛
  • منوی کشویی؛
  • فرم اشتراک خبرنامه

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

صفحه ساز WPBakery

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

  1. شما قادر خواهید بود از یک نسخه آنلاین عالی لذت ببرید، که به شما کمک می کند تا طرح بندی یک وب سایت را سریع و آسان تغییر دهید. با تشکر از شناخته‌شده‌ترین ویرایشگر WYSIWYG، می‌توانید تغییرات و تنظیماتی را که در طرح‌بندی انجام می‌دهید به سرعت مشاهده کنید.
  2. WPBakery یک صفحه ساز است که می تواند با هر نوع تم وردپرس کار کند. 
  3. طبیعتاً از پاسخگویی وب سایت شما مراقبت می کند، بنابراین لازم نیست نگران آن باشید.
  4. می توانید رنگ ها، پس زمینه ها، پر کردن و سایر عناصر را تغییر دهید. به عبارت دیگر، مجموعه کاملی از گزینه های دیگر برای شخصی سازی هویت سایت شما وجود دارد.
  5. WPBakery شامل بیش از 80 جزء است. اینها شامل جدول قیمت، عنوان متحرک، جعبه تاشو و سایر اجزای WooCommerce است.
مزایایمعایب
WPBakery هر دو صفحه ساز جلویی و بک‌اند را ارائه می‌دهد و گزینه‌های بیشتری برای طراحی وب‌سایت‌هایتان در اختیار شما قرار می‌دهد.WPBakery نسخه رایگان این افزونه را ندارد.
سازنده صفحه دارای کتابخانه گسترده ای از ماژول های محتوا با عناصر جداگانه برای اشتراک گذاری اجتماعی و قالب بندی پست است.ویرایشگر Backend مفید است، اما فاقد جذابیت زیبایی شناختی ویرایشگر frontend است. به خاطر سپردن اینها چه اجزایی هستند ممکن است دشوار باشد.
دارای یک شبکه ساز برای کمک به سازماندهی بهتر مواد خود.

Hazel – قالب وردپرس چند منظوره مینیمالیست و تمیز

Hazel نمونه دیگری از بهترین تم های چند منظوره وردپرس است که برای کارهای مختلف مناسب است. این بسته شامل 12+ دمو است که آماده نمایش محتوای شما در بهترین حالت است. سازگاری با WPBakery Page Builder ساخت صفحات و طرح‌بندی‌های جدید را آسان می‌کند. همچنین گزینه های مختلف هدر و منو، بیش از 60 عنصر ساختمانی و کد کوتاه، و هزاران صفحه از پیش طراحی شده را خواهید داشت.

توابع دیگر:

  • رنگ ها و سبک های نامحدود؛
  • چندین قالب وبلاگ و گزینه های وبلاگ نویسی پیشرفته؛
  • هفت ویجت سفارشی داخلی؛
  • گزینه های مختلف تایپوگرافی؛
  • 320+ لغزنده گنجانده شده است.

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

ویژوال آهنگساز

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

  1. این یک ابزار سازنده واقعی کشیدن و رها کردن دارد، که یادگیری نحوه ساخت یک وب سایت را برای هر کسی آسان می کند، به خصوص وقتی صحبت از قالب ها و بلوک های محتوا می شود.
  2. این یک نمایش واقعی از نحوه ظاهر وب سایت ارائه می دهد و تضمین می کند که هر گونه به روز رسانی در یک پیش نمایش ایجاد شده و درست جلوی چشمان شما نمایش داده می شود.
  3. Visual Composer Hub را ارائه می دهد، مکانی برای یافتن و کار با انواع اجزای طراحی در ویرایشگر.
  4. سازنده پاپ آپ یکی از ویژگی های منحصر به فرد ویژوال کامپوزر است، زیرا تعداد کمی از صفحه سازهای دیگر این سطح از قابلیت را دارند. پنجره های بازشو برای بازاریابی، هشدارها و فرم های ایمیل همگی امکان پذیر است.
  5. API به شما این امکان را می دهد که ویژوال کامپوزر را به روش های مختلفی ارتقا دهید. شما اسنادی برای کمک به درک نحوه استفاده از API و همچنین فضایی برای ایجاد افزونه‌های خود خواهید داشت.
مزایایمعایب
صفحه ساز جامع از قسمت جلو قابل دسترسی است و دارای عناصر ساده کشیدن و رها کردن است.پیش نمایش قالب ها و ماژول های محتوا قبل از ادغام آنها در طراحی شما امکان پذیر نیست.
توسعه دهندگان خبره همچنان می توانند از API برای دریافت گسترده ترین قابلیت های ویرایش استفاده کنند.عضویت مادام العمر وجود ندارد.
می توانید به برخی از محبوب ترین نرم افزارهای جایگزین نرم افزار شخص ثالث مانند MailChimp و FormNinja متصل شوید.

قالب وردپرس Yogalife – Yoga and Meditation

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

توابع دیگر:

  • اثر اختلاف منظر؛
  • مگا منو؛
  • ویدیو پس زمینه;
  • صفحه تقویم رویدادها؛
  • نقشه های گوگل

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

صفحه ساز نسیم

وب سایت ساز Breeze یک سیستم مدیریت محتوای کامل است که برای آژانس ها و مشاغل ایجاد شده است. گزینه های جامع توسعه برنامه وب را ارائه می دهد. منظور اون چیه ؟

  1. استفاده از آن ساده است، با تمام ابزارهای مورد نیاز برای ساخت و مدیریت وب سایت ها در یک ساختار منطقی.
  2. همه ابزارها بدون نیاز به استفاده از برنامه دیگری در دسترس هستند. فقط از مرورگر خود استفاده کنید.
  3. این سریع طراحی شده است که ساخت وب سایت را سریعتر و آسان تر می کند.
  4. توسعه دهندگان می توانند آن را به مشتریان خود تحویل دهند تا بتوانند سایت های خود را مدیریت کنند.
  5. این HTML تمیز و زیبا تولید می کند. لینک ها برای ربات های جستجوگر به راحتی قابل دسترسی هستند.
مزایایمعایب
Breeze به دلیل سهولت استفاده از آن متمایز است. دارای بخش‌های صفحه قابل استفاده مجدد، منوهای منظم و افزونه‌هایی است که می‌توانید در سریع‌ترین زمان ممکن پیکربندی کنید.این مجموعه کوچکی از الگوهای آماده برای استفاده را ارائه می دهد که ممکن است کمی قدیمی به نظر برسند.
سیستم های منو سازگار و ساده برای استفاده هستند. Breeze Website Builder دارای مجموعه ای از گزینه های سفارشی سازی است که نمی توان آنها را جامع نامید.
این شامل یک ویرایشگر ساده CSS است که به شما امکان می دهد عناصر سایت خود را با سلیقه و به راحتی و بدون هیچ گونه تجربه کدنویسی CSS سازماندهی کنید.

قالب وردپرس تجاری چند منظوره ساده شده

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

توابع دیگر:

  • فرم تماس ؛
  • سازگار با ووکامرس؛
  • منوی کشویی؛
  • نقشه های گوگل
  • عملکرد گالری

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

بیش از حد ساز

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

  1. تجربه ویرایش بصری جلویی به شما امکان می دهد صفحه را همانطور که در حین کار برای بینندگان شما نمایش داده می شود ببینید، که فوق العاده است.
  2. اگر نمی‌خواهید صفحات را از ابتدا بسازید، Beaver Builder دارای کتابخانه‌ای از قالب‌های از پیش ساخته شده قابل تنظیم است.
  3. می توانید هر صفحه ای را که تولید کرده اید ذخیره کنید و از طرح بندی آن برای اطلاعات دیگر و همچنین هر سطر، ستون یا ماژولی که اضافه می کنید استفاده کنید.
  4. عناصر طراحی که انتخاب می کنید و در وب سایت خود قرار می گیرند از بلوک ها (عناصر محتوا) تشکیل شده اند.
  5. همچنین می توانید مقالات و انواع پست سفارشی را ویرایش کنید. علاوه بر این، با اکثر مضامین وردپرس سازگار است و به خوبی با اکثر افزونه هایی که کد کوتاه و ابزارک ایجاد می کنند ترکیب می شود.
مزایایمعایب
Beaver Builder یک سازنده front-end کامل «کشیدن و رها کردن» ارائه می‌کند، نه فقط یک طراح بصری یا استوری‌بورد که در آن می‌توانید قطعات را به برخی اما نه همه مناطق بکشید.هزینه Beaver Builder ممکن است برخی از کاربران را ناامید کند (می‌دانید که گوتنبرگ رایگان است و به نظر می‌رسد راه‌حل‌های دیگر مانند Elementor عملکرد بیشتری را در نسخه‌های رایگان خود ارائه می‌دهند).
ماژول های محتوا گسترده هستند و هر یک از آنها تنظیمات پیچیده ای دارند.اگرچه افزونه Beaver Theme شامل قالب‌های تم زیبا و عناصر طرح‌بندی است، اما در اشتراک اصلی گنجانده نشده‌اند.
شما قطعات محتوای از پیش ساخته شده و قالب های صفحه فرود را دریافت می کنید تا به شما کمک کند تا در سریع ترین زمان ممکن یک وب سایت بسازید.

Getexcito – تم Woocommerce برای سایت های مد و مینی

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

توابع دیگر:

  • مگا منو؛
  • آماده ترجمه؛
  • اثر اختلاف منظر؛
  • سازگار با ووکامرس؛
  • واردات نسخه ی نمایشی با یک کلیک

ادامه مطلب | نسخه ی نمایشی | دانلود رایگان در MonsterONE

Themify ساز

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

  1. در بک‌اند، می‌توانید محتوا را با استفاده از ماژول‌های ساده‌تر و فضای کاری شلوغ‌تر ویرایش کنید. همچنین می توانید به پیش نمایش جلویی دسترسی داشته باشید و تغییرات را در زمان واقعی ایجاد کنید.
  2. همچنین گزینه ای برای ساخت کل وب سایت با استفاده از تم ها و قالب های محتوا از پیش ساخته شده را ارائه می دهد. از آنجایی که آنها مخلوطی از بلوک های مختلف هستند، این اجزا به طور قابل توجهی پیچیده تر از ماژول های محتوای معمولی هستند.
  3. یک ویژگی جداگانه، امکان انتخاب نحوه و زمان نمایش قالب های خاص در وب سایت شما است. این نوع عملکرد معمولاً با سایر صفحه سازها در دسترس نیست.
مزایایمعایب
می توانید شرایط نمایش را تغییر دهید و محتوای پویا را آزمایش کنید.ایمیل تنها روش مستقیم خدمات مشتری است.
با فشار دادن یک دکمه، می توانید آثار خود را وارد و صادر کنید. سپس می توانید آنها را به قسمت های مختلف سایت خود یا به یک سایت کاملاً متفاوت وردپرس منتقل کنید.Themify Builder شامل یک پاورقی یا ویرایشگر سرصفحه جداگانه نیست.
قالب های صفحه وردپرس را می توان برای مواردی مانند پاورقی، انواع پست های خاص و آرشیو پست اضافه کرد.

عضویت Builder Pro شامل Builder Pro و تمام 25 افزونه Builder است. 69 دلار برای شما هزینه خواهد داشت.

صفحه ساز WP

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

  1. ویژگی برجسته این افزونه، کشیدن و رها کردن سازنده است. این یک سازنده تمیز با برگه‌های منو برای مواردی مانند افزونه‌ها، بلوک‌ها و طرح‌بندی است.
  2. همچنین می‌توانید طرح‌های ذخیره‌شده قبلی را در کتابخانه نگه دارید تا در صورت تمایل از آنها در جای دیگری استفاده کنید.
  3. همچنین شامل بیش از 60 بلوک محتوا است. با استفاده از آن‌ها، می‌توانید مواردی مانند توصیفات، بخش‌های اعضای تیم و جداول قیمت‌گذاری را اضافه کنید.
  4. همچنین امکان استفاده از افزونه ها (یا بلوک ها) وجود دارد. اینها عناصر محتوای اساسی تری هستند که برای ایجاد دکمه ها، فرم ها و قاب های متنی در طرح خود وارد می کنید.
  5. WP Page Builder اجازه می دهد تا ردیف های جداگانه و همچنین کل طرح های صفحه اصلی را ذخیره کنید.
مزایایمعایب
افزونه‌ها و بلوک‌های محتوای زیادی از طریق منو قابل دسترسی هستند.هیچ سازنده سرصفحه یا پاورقی وجود ندارد.
به نظر می رسد که آنها همه بلوک های محتوای بالقوه مورد نیاز برای ایجاد یک وب سایت خیره کننده را در بر می گیرند. از شماره های بلوک و نوارهای پیشرفت گرفته تا دکمه ها و تصاویر، همه چیز در دسترس است.از نظر فنی، شما نمی توانید یک بلوک محتوا را در هر جایی از طراحی خود وارد کنید. برای معرفی عنصری مانند تصویر جدید یا چرخ فلک، باید یک خط یا فاصله از پیش تعریف شده بین محتوای موجود خود پیدا کنید.
ما خوشحالیم که می بینیم طرح بندی پیچیده تر است، منو ساده تر است و پانل های گزینه نیازی به دانش کدنویسی متخصص ندارند.

WP Page Builder یک افزونه رایگان وردپرس است.

صفحه ساز Brizy

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

  1. رابط کاربری ساده است و فقط چند دکمه برای انتخاب دارد. می‌توانید به سرعت عناصر محتوا را به یک صفحه اضافه کنید یا از میان مجموعه بزرگی از طرح‌بندی‌های آماده برای استفاده انتخاب کنید.
  2. Brizy دارای بیش از 4 آیکون برداری است که به شما کمک می کند تا پروژه های خود را جذاب کنید. همچنین دارای دکمه های زیبا و سازگار با موبایل و پیوندهایی به پنجره های بازشو است.
  3. مزیت دیگر امکان ویرایش و بررسی طرح خود در تبلت یا گوشی هوشمند است. به سادگی اندازه پیش نمایش را تغییر دهید تا ببینید سایت شما در تبلت یا گوشی هوشمند چگونه به نظر می رسد.
  4. آن را با ماژول های محتوای فرم تماس با گزینه های ویرایش به طور مستقیم از طریق سازنده frontend ارائه می شود.
  5. بلوک های کلی بریزی دلیل دیگری برای هیجان زده شدن در مورد او است. شما آزاد هستید که هر بلوکی را جهانی کنید یا آن را برای پروژه های آینده نگه دارید.
مزایایمعایب
ویژگی های متمایز تری نسبت به سایر صفحه سازها دارد. به عنوان مثال می توان به سازندگان پاپ آپ، سرویس های ابری و قالب های صفحه فرود اشاره کرد.برخی از مزایای متمایزتر، مانند سفارشی سازی هدر و پاورقی، در نسخه رایگان موجود نیستند.
شما به مجموعه بزرگی از طرح‌بندی‌های آماده دسترسی دارید.Brizy خدمات مشتری خاصی ندارد.
Brizy یک سازنده جلویی کامل کشیدن و رها کردن، با بخش هایی برای اصلاح اجزای مختلف ارائه می دهد.

چند کلمه در پایان

برای به خاطر سپردن تمامی اطلاعات ذکر شده در مقاله می توانید از جدول زیر استفاده کنید. تمام سازندگان وردپرس را به طور خلاصه شرح می دهد. به هر حال، یک کد تبلیغاتیseemore7” 7٪ تخفیف برای تمام محصولات دیجیتال TemplateMonster، از جمله بسیاری از تم های وردپرس (مانند مضامین WordPress Elementor  و دیگران).

Elementor Page Builderبیش از 50 ویجت حرفه ای بیش از 300 قالب حرفه ای 10 کیت کامل وب سایت. سازندگان تم و فرم. پاپ آپ و سازنده ووکامرس.
ویراستار گوتنبرگتجربه ویرایش عالی یک ویرایشگر سبک متوسط. گوتنبرگ به بلوک های ساختمانی اشاره دارد. املاک صفحه نمایش بیشتر برای یک ویرایشگر محتوا محور. یک سیستم سازگار با موبایل
سازنده Diviویرایش بصری و واکنشگرا. بیش از 40 ماژول طراحی. 800 کیت طرح بندی وب سایت از پیش ساخته شده. ویرایش متن در زمان واقعی. سبک ها و اجزای جهانی
صفحه ساز WPBakery WPBakery Page Builder تقریبا با تمام تم های وردپرس سازگار است.بیش از 50 جزء محتوا. پوسته ساز داخلی، استایل دادن به عناصر را آسان می کند. کتابخانه قالب جامد. WPBakery Page Builder API شبکه ساز پیشرفته امکان سفارشی سازی کامل را فراهم می کند.
ویژوال آهنگسازمتن و طرح‌بندی را می‌توان مستقیماً در صفحه ویرایش کرد. پس از یک دوره آموزشی کوتاه، می توان طرح های جذابی تولید کرد. Visual Composer Hub با تعداد زیادی افزونه. شما می توانید همه موارد را پنهان کرده و آنها را از حالت مخفی خارج کنید. تغییر CSS و جاوا اسکریپت پشتیبانی می شود.
Beaver Page Builder فرانت اند و ویرایش زنده. طرح هایی که واکنش گرا و سازگار با موبایل هستند. امکان استفاده از حالت ویرایشگر برای ارائه وب سایت به مشتریان. خدمات کامل به مشتریان بسیاری از قطعات با نصب آسان.
صفحه ساز نسیم رابط کاربری خوب ساختار یافته و بصری. نیازی به دانلود نرم افزار اضافی نیست. ویرایشگر CSS در دسترس است. استفاده مجدد از جعبه های صفحه امکان پذیر است. ساخت سریع وب سایت.
سازنده Themify بیش از 40 طرح از پیش طراحی شده طرح‌بندی‌های ردیف، ستون و شبکه همگی پشتیبانی می‌شوند. امکان ایجاد قطعات چیدمان. بیش از 60 افکت انیمیشن افزونه های مختلف.
صفحه ساز WP صفحات بهینه شده و پاسخگو برای موبایل. قالب ها و بلوک های از پیش ساخته شده. پشتیبانی از ویجت قابلیت‌های لغو یا انجام مجدد. می‌توانید فونت‌ها، سبک‌ها، رنگ‌ها و طرح‌بندی‌ها را تغییر دهید.
بریزی سازنده ویرایش آنلاین بلادرنگ رابط تم وردپرس با کشیدن و رها کردن بیش از 400 قالب. لغزنده با انیمیشن. سفارشی سازی حاشیه ها، گوشه ها، حاشیه ها و بالشتک ها. پشتیبانی از سبک جهانی

ممنون که ما را خواندید

Divi: نحوه نمایش گزیده مقاله در شناور

Divi: نحوه نمایش گزیده مقاله در شناور

آیا می خواهید بدانید چگونه گزیده های مقاله را در حالت شناور در Divi نمایش دهید؟

پیش‌نمایش قطعه‌های پست وبلاگ در حالت شناور می‌تواند راهی مؤثر برای حفظ یک طرح شبکه فشرده برای پست‌های وبلاگ شما بدون رها کردن کامل آن قطعه‌ها باشد. 

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

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

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

بررسی

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

نمایش گزیده مقالات در مورد شناور در Divi

ایجاد طرح بندی ماژول وبلاگ

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

یک خط ایجاد کنید

برای شروع، یک ردیف از یک ستون را به بخش وارد کنید

عرض خط

سپس به تنظیمات خط بروید. سپس، در تب Style، در زیر Sizing، عرض ها را به صورت زیر تغییر دهید:

  • حداکثر عرض: 90%
  • حداکثر عرض: 1200 پیکسل
نمایش گزیده مقالات در مورد شناور در Divi

یک ماژول وبلاگ اضافه کنید

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

تنظیمات ماژول وبلاگ

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

اکنون به تب Style بروید، در قسمت Template، الگوی Grid را به عنوان طرح‌بندی وبلاگ انتخاب کنید.

در نهایت به تب Advanced رفته و کلاس CSS زیر را اضافه کنید: 

کلاس CSS: toggle-blog-excerpt

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

CSS سفارشی را با ماژول Code اضافه کنید.

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

برای افزودن CSS از ماژول Code استفاده می کنیم. برای انجام این کار، یک ماژول کد زیر ماژول وبلاگ اضافه کنید.

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

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

نتیجه به دست آمده را تا اینجا ببینیم.

نتیجه

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

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

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

سبک عنوان مقاله

  • عنوان کم نور: متن پررنگ
  • رنگ متن عنوان: #6D6A7E
  • اندازه متن عنوان: 20 پیکسل
  • ارتفاع خط عنوان: 1.3 میلی متر
نمایش گزیده مقالات در مورد شناور در Divi

سبک متن "ادامه مطلب"

  • بیشتر بخوانید Dim Light: Bold Text
  • بیشتر بخوانید سبک کپی: TT
  • رنگ متن بیشتر بخوانید: #6D6A7E
  • فاصله حروف بیشتر بخوانید: 1px
  • ارتفاع خط بیشتر بخوانید: 3.5em

نمایش صفحه بندی متن را تغییر دهید

  • نمایش صفحه بندی کم نور: متن پررنگ
  • رنگ متن نمایش صفحه بندی: #6D6A7E
  • فاصله حروف نمایش صفحه: 1 پیکسل
  • نمایش صفحه بندی سبک کپی: TT
نمایش گزیده مقالات در مورد شناور در Divi

حاشیه را بردارید

  • عرض حاشیه طرح بندی شبکه: 0 پیکسل

Hover Shadow Box Style

  • کادر سایه: به اسکرین شات مراجعه کنید
  • موقعیت شروع: 0px
  • قدرت تاری سایه جعبه: 38 پیکسل
  • رنگ قلم زیرنویس: rgba (109,106,126,0.25)

نتیجه نهایی

نتیجه

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

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

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

Divi: چگونه یک هدر سراسری با موضوع Builder ایجاد کنیم

Divi: چگونه یک هدر سراسری با موضوع Builder ایجاد کنیم

آیا نیاز به ایجاد یک سربرگ جهانی برای وب سایت خود با Divi دارید؟

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

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

بررسی

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

منوی اصلی خود را پیکربندی کنید

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

به گزینه Theme Builder در زیر Divi دسترسی پیدا کنید

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

اضافه کردن و ایجاد یک سربرگ جهانی

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

تنظیمات بخش

اندازه

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

  • حداکثر عرض: 100%
  • حداکثر عرض: 1280 پیکسل (برای رایانه شخصی و تبلت)، 100٪ (برای موبایل)

فاصله

تمام حاشیه های داخلی بالا و پایین را بردارید

  • راس حاشیه داخلی: 0 پیکسل
  • حاشیه داخلی پایین: 0 پیکسل

مرز

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

  • پایین سمت چپ: 50 پیکسل
  • پایین سمت راست: 50 پیکسل

جعبه سایه

بیایید یک سایه جعبه ظریف نیز اضافه کنیم.

  • قدرت تاری سایه جعبه: 60 پیکسل
  • رنگ فونت زیرنویس: rgba(0,0,0,0.13)

دید

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

یک خط جدید به سربرگ اختصاص دهید

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

تنظیمات خط

تنظیمات پس زمینه

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

  • پس زمینه: #38383F

اندازه

سپس پارامترهای اندازه خط را تغییر دهید.

  • از عرض ناودان سفارشی استفاده کنید: بله
  • فاصله ستون ها: 1
  • حداکثر عرض: 100%
  • حداکثر عرض: 100%

مشاهده

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

01 display: flex;

ماژول تصویر را در ستون 1 اضافه کنید

لوگو را دانلود کنید

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

هم ترازی

به تب Style بروید و تصویر را در سمت چپ تراز کنید.

اندازه

همچنین عرض ماژول را تغییر دهید.

فاصله

همچنین مقادیر حاشیه سفارشی را اضافه کنید.

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

ماژول ردیابی رسانه های اجتماعی را در ستون 2 اضافه کنید

شبکه های اجتماعی را اضافه کنید

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

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

رنگ پس زمینه شبکه اجتماعی

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

  • رنگ پس زمینه: rgba (0,0,0,0)
یک هدر سراسری با موضوع Divi Builder ایجاد کنید

هم ترازی

به تنظیمات معمولی ماژول برگردید و سپس تراز کامل ماژول را تغییر دهید.

تصویر

تنظیمات آیکون را نیز تغییر دهید.

  • رنگ نماد: #FFFFFF
  • استفاده از اندازه نماد سفارشی: بله
  • اندازه فونت نماد: 16 پیکسل (کامپیوتر و تبلت)، 12 پیکسل (تلفن)

فاصله

یک حاشیه بالا اضافه کنید.

ماژول Button را در ستون 3 اضافه کنید

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

هم ترازی

تراز دکمه ها را در تب Style تغییر دهید.

تنظیمات دکمه

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

  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 12 پیکسل (رومیزی)، 10 پیکسل (تبلت)، 8 پیکسل (تلفن)
  • رنگ متن دکمه: #ffffff
  • دکمه پس زمینه: #ffae25
  • پهنای حاشیه دکمه: 0 پیکسل
  • دکمه Border Radius: 0 پیکسل
  • فاصله حروف دکمه ها: 5 پیکسل (رومیزی)، 3 پیکسل (تبلت و تلفن)
  • دکمه فونت: هیچکدام را باز کنید
  • دکمه Soft Light: متن پررنگ
  • سبک دکمه کپی: TT

فاصله

سفارشی کردن مقادیر حاشیه

یک خط جدید به نوار منو اختصاص دهید

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

تنظیمات خط

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را در تب Style تغییر دهید.

فاصله

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

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

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

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

وضع

به تب Style بروید و تنظیمات طرح بندی را به صورت زیر تغییر دهید:

اتصالات

همچنین رنگ لینک فعال را در تب Style تغییر دهید.

  • رنگ پیوند فعال: #ffae25
یک هدر سراسری با موضوع Divi Builder ایجاد کنید

منوی کشویی

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

  • رنگ ردیف کشویی: #ffae25

تصویر

  • رنگ نماد منوی همبرگر: #ffae25

متن منو

با تنظیمات متن منو.

  • فونت منو: Prata
  • رنگ متن منو: #000000

کاری کنید که هدر و نوار منو در بالا باقی بماند

تنظیمات بخش را باز کنید

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

CSS سفارشی را به عنصر اصلی اضافه کنید

در ادامه به تب advanced رفته و چند خط کد CSS را به عنصر اصلی قسمت اضافه می کنیم.

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

گزینه های هدر جهانی و سازنده تم را ذخیره کنید

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

بررسی

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

یک هدر سراسری با موضوع Divi Builder ایجاد کنید

نتیجه

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

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

اگر سوال یا پیشنهادی دارید، لطفاً در قسمت نظرات با ما در میان بگذارید بخش نظرات CI-dessous.

...