افزونهvisual composer-بخش پنجم
#1
 افزودن گوگل مپ به صفحه
برای افزودن گوگل مپ به صفحه مد نظر خود باید ابتدا بر روی کلید “Add Element” کلیک کنید و سپس المان محتوای “Google Maps” را انتخاب کنید. سپس باید تنظیماتی که در زیر برای شما نام برده شده‌اند را در صفحه مربوط به المان محتوای گوگل مپ انجام دهید:
Map Embed iframe: در این بخش شما می‌توانید مپ خود را در گوگل مپ بیابید و درون صفحه جایگذاری کنید. برای این کار شما باید ابتدا بر روی انکر تکست “Google Maps” در زیر کادر کلیک کنید تا به صفحه گوگل مپ هدایت شوید و سپس در این صفحه مراحل زیر را گام به گام انجام دهید:
ابتدا لوکیشن خود را بیابید.
بر روی نماد چرخ دنده کلیک کنید (این گزینه در بخش میانی پایین صفحه قرار دارد) و سپس گزینه “Share or   Embed Map”  را انتخاب کنید.
در پنجره گشوده شده گزینه “Embed Map” را انتخاب کنید.
در مرحله آخر باید کد Iframe مربوطه را کپی نمایید و در کادر زیر “Map embed iframe” آن را جایگذاری کنید.
Map Height: شما می‌توانید اندازه نقشه مورد نظر خود را در این بخش تعیین نمایید. این گزینه به صورت پیش فرض بر روی “Standard” تنظیم شده است. شما می‌توانید در صورت نیاز آن را تغییر دهید.
اگر شما پس از انجام تنظیمات مد نظر خود در این صفحه بر روی کلید “Save Changes” کلیک نمایید خواهید توانست نتایج این تغییرات را در صفحه مد نظر خود ببینید.
ایجاد گالری تصاویر
اگر تمایل به ایجاد گالری تصاویر درون صفحات وب سایت خود دارید می‌توانید با استفاده از ویژوال کامپوزر این کار را به سادگی انجام دهید. برای ایجاد گالری تصاویر در صفحات وب سایت با استفاده از ویژوال کامپوزر باید از المان محتوای “Image Gallery” استفاده نمایید. چگونگی استفاده از این المان و ایجاد گالری تصاویر درون صفحات را در یک بخش مجزا برای شما آورده‌ایم. برای کسب اطلاعات بیشتر در زمینه ایجاد گالری تصاویر به بخش نام برده مراجعه نمایید.
ویدیو پلیر (Video Player)
شما می‌توانید با استفاده از المان محتوای “Video Player” ویژوال کامپوزر ویدیوهای یوتیوب را درون صفحات وب سایت خود قرار دهید. برای استفاده از ویدیو پلیر باید ابتدا بر روی آپشن “Add Element” کلیک نمایید و سپس المان “Video Player” را انتخاب نمایید و تنظیماتی که در زیر اشاره شده است را در آن اعمال نمایید:
Widget title: این بخش برای تعیین نام ویجت ایجاد شده توسط شما مورد استفاده قرار می‌گیرد و پر کردن یا پر نکردن کادر مربوط به نام ویجت اختیاری است و هیچ الزامی وجود ندارد که شما حتما نام آن را تعیین نمایید.
Video Link: در این بخش شما باید لینک ویدیوی یوتیوبی که می‌خواهید درون صفحه قرار دهید را وارد کنید.
Extra Class Name: در این بخش شما می‌توانید در صورت نیاز به کلاس‌های اضافه‌ای برای ایجاد تغییرات در ویدیوی مد نظر خود ، نام آن‌ها را وارد نمایید تا بتوانید از آن‌ها برای ایجاد فرم دهی‌های مجزا در ویدیوهای خود استفاده نمایید.
مثل همیشه شما باید پیش از آن که از این صفحه خارج شوید تغییرات ایجاد شده را به نوعی ذخیره‌سازی نمایید. برای این کار باید بر روی کلید “Save Changes” کلیک نمایید.
پراگرس بار یا نوار پیشرفت (Progress bar)
اگر تمایل به ایجاد پراگرس بار در صفحات وب سایت خود دارید، می‌توانید برای این کار از ویژوال کامپوزر استفاده نمایید. برای افزودن پراگرس بار به صفحات خود باید بر روی گزینه “Add Element” کلیک کنید و سپس المان “Progress Bar” را از میان المان‌های محتوای موجود در کتابخانه المان‌های ویژوال کامپوزر انتخاب نمایید. پس از باز شدن صفحه مربوط به پراگرس بار باید تغییرات نام برده شده در زیر را درون این صفحه اعمال نمایید:
Style: در این بخش شما باید نوع و شکل پراگرس باری که می‌خواهید درون صفحه شما قرار گیرد را انتخاب نمایید. در این آپشن انواع مختلفی از پراگرس بارها وجود دارد که شما می‌توانید بر حسب سلیقه خود پراگرس بار مد نظر خود را انتخاب نمایید. پس از آن در صفحه‌ای که ظاهر می‌شود باید گزینه “Bar” را انتخاب نمایید.
Progress Bar Title: این گزینه به شما امکان انتخاب عنوانی برای پراگرس بار مد نظرتان را می‌دهد.
Percentage: برای تعیین درصدی مد نظر شما است. شما هر عددی که در کادر زیر این گزینه بنویسید به صورت درصد در پراگرس بار برای شما نمایش داده خواهد شد.
Color: در این بخش شما می‌توانید رنگ پراگرس بار مدنظرتان را تعیین نمایید.
در این بخش تنظیمات متعددی وجود داردکه شما می‌توانید با استفاده از آن‌ها پراگرس بار خود را به هر شکل و فرمی که می خواهید در آورید. به خاطر داشته باشید که پیش از خروج از صفحه بر روی دکمه “Save Changes” کلیک نمایید.
ایمیج کاروسل
کاروسل ابزارهای مفیدی برای نمایش اطلاعیه‌ها ، سر تیترهای خبری یا اخبار داغ، ویدیو‌ها و یا تصاویر به صورت گردشی است. در المان محتوای “Image Carousel” شما می‌توانید با ایجاد اسلات‌های تصویری ، تصاویر را به صورت گردشی در قسمتی از سایت خود به نمایش بگذارید .ایمیج کاروسل به شما امکان تنظیمات متعددی را می‌دهد که برخی از آن ها به شرح زیر است:
Image: در این بخش شما می‌توانید تصاویری را که می‌خواهید در لیست گردشی شما قرار داده شوند اضافه نمایید.
Carousel Size: شما می‌توانید در این بخش سایز تصاویر را در لیست گردان خود تعیین نمایید. برای این کار می‌توانید به دو شیوه مختلف عمل کنید، شیوه اول انتخاب سایز به صورت Thumbnail، Medium، Large       و … و شیوه دوم تعیین سایز تصاویر به صورت تعداد پیکسل، برای مثال شما می‌توانید اندازه تصاویر را به شکل ۲۰۰*۱۰۰ پیکسل (طول و عرض) انتخاب نمایید.
On Click Action: با استفاده از این آپشن شما می‌توانید تعیین کنید که اگر کاربر بر روی یکی از عکس‌ها کلیک نمود چه فید بکی دریافت کند. مثلا شما می‌توانید تعیین کنید که زمانی که کاربر بر روی یک تصویر کلیک نمود، تصویر بزرگ شده و در یک صفحه مجزا نمایش داده شود و یا در همان صفحه نمایش داده شود. اگر نمی‌خواهید در هنگام کلیک کردن کاربر اتفاقی بیفتد می‌توانید گزینه “No Action” را انتخاب نمایید.
Slider Orientation: همان طور که از نام این آپشن پیداست شما می‌توانید با استفاده از این آپشن جهت گردش تصاویر در لیست گردان را تعیین نمایید.
Slider Speed: سرعت جا به جایی و یا سرعت انتقال اسلایدها با استفاده از این گزینه تعیین می‌شود. شما می‌توانید زمانی را در کادر زیر این گزینه تعیین کنید (به صورت میلی ثانیه)، این زمان فاصله زمانی از شروع حرکت اسلاید اول تا جایگزین شدن اسلاید بعدی را تعیین می‌نماید.
Slide Per View: این گزینه تعداد اسلاید‌هایی را که در هر لحظه به صورت همزمان نشان داده می‌شوند را تعیین می‌کند. برای مثال اگر شما ۱۲ تصویر در لیست گردان خود داشته باشید می‌توانید تعیین کنید که در هر گردش ۳ تا از آن‌ها به صورت همزمان نمایش داده شوند.
Enable Autoplay: اگر شما چک باکس این گزینه را تیک بزنید، کاروسل شما به حالت نمایش خودکار در خواهد آمد. یعنی زمانی که کاربر صفحه‌ای که در آن کاروسل قرار دارد را باز کند بدون آن که گزینه نمایش را کلیک کند کاروسل به صورت اتوماتیک شروع به گردش می‌نماید.
Hide Pagination Control: اگر کاربر چک باکس مربوط به این آپشن را تیک بزن، شمارنده اسلاید که معمولا به شکل دایره‌های ریز در پایین تصاویر نمایش داده می‌شود، از پایین تصاویر حذف می‌گردد و کاربر برای جلو و یا عقب بردن اسلاید‌ها باید از گزینه‌های Next/Prev استفاده نماید.
Hide next/Prev Buttons: با استفاده از این گزینه شما می‌توانید کلید‌های Next و Previous را از سمت چپ و راست کاروسل خود حذف نمایید و در این صورت کاربر برای جا به جا کردن اسلاید‌ها باید از شمارنده‌های پایین صفحه استفاده نماید.
Partial view: اگر چک باکس مربوط به این گزینه را تیک بزنید بخشی از اسلاید بعدی در هنگام نمایش هر اسلاید، در کنار آن نمایش داده می‌شود.
Slider Loop: اگر چک باکس این گزینه را تیک بزنید کاروسل شما در یک چرخه قرار می‌گیرد که نمایش آن دائما به صورت تکرار شونده انجام می‌شود و هیچ گاه متوقف نمی‌گردد.
این تغییرات و بسیاری تغییرات دیگر در رابطه با کاروسل‌ها در المان محتوای “Image Carousel” برای شما امکان پذیر است و می‌توانید با استفاده از این گزینه‌ها یک لیست تصاویر گردشی کاملا مطابق با سلیقه خود ایجاد نمایید. به خاطر داشته باشید که حتما پس از اتمام پروسه ایجاد تنظیمات در صفحه باید بر روی گزینه   “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده‌اید ذخیره سازی گردد، اگر فراموش کنید که پیش از خروج از صفحه این کار را انجام دهید، تمامی زحمات شما برای ایجاد کاروسل به هدر خواهد رفت.
 

 منبع


فایل‌های پیوست
.zip   visual-composer-v5.2.1-nulled(scriptbaran.com).zip (اندازه 4.92 MB / تعداد دانلود: 0)
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  افزونهvisual composer-بخش چهارم fatemeh-roshangar 0 88 31-Aug-2017, 11:30 AM
آخرین ارسال: fatemeh-roshangar
  افزونهvisual composer-بخش سوم fatemeh-roshangar 0 91 31-Aug-2017, 11:25 AM
آخرین ارسال: fatemeh-roshangar
  افزونهvisual composer-بخش اول fatemeh-roshangar 0 137 26-Aug-2017, 10:22 PM
آخرین ارسال: fatemeh-roshangar

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان