افزونهvisual composer-بخش سوم
#1
 استفاده از کلید “Add New Element”
همان طور که گفته شد شما می‌توانید با استفاده از کلید “Add New Element” المان های محتوای جدیدی را به صفحات خود اضافه نمایید. برای مثال شما می‌توانید بر روی کلید “Add New Element” کلیک نموده و در صفحه جدید باز شده المان “Row” را انتخاب کنید تا یک سطر جدید به صفحه شما اضافه شود. سطر مهم‌ترین المان یک صفحه است، زیرا سایر المان‌ها مثل ستون‌ها، تصاویر، متن‌ها و … همه و همه درون سطر‌ها قرار می‌گیرند.
پس از آن که شما در صفحه خود یک سطر جدید اضافه نمایید، می‌توانید درون آن با استفاده از آپشن “Choose Column” یکی از چیدمان ستون‌های از پیش آماده در ویژوال کامپوزر را انتخاب نمایید، یا اگر نمی‌خواهید هیچ یک از چدیمان‌های پیش فرض را انتخاب کنید می‌توانید با استفاده از گزینه “Add Column” ستون‌های جدیدی در سطر ایجاد شده خود اضافه کنید.
پس از اضافه کردن سطرها و ستون‌ها نوبت به افزودن محتوا به ستون های ایجاد شده است. اگر بخواهید در یکی از ستون‌ها تصویری قرار دهید باید از المان محتوای “Single Image” استفاده نمایید. برای این کار کافیست بر روی “Add Element” کلیک کنید و “Single Image” را انتخاب نمایید سپس تصویری را انتخاب نموده و سایز آن را تعیین نمایید. معمولا سایز “Medium” برای تصاویر درون وب سایت مناسب است )پس از انتخاب تصویر و تعیین سایز آن بر روی گزینه “Prepend To Column” کلیک کنید تا تصویر شما درون ستون مورد نظرتان واقع گردد.)
حال اگر بخواهید متنی را در ادامه تصویر قرار دهید باید از المان محتوای “Text Block” استفاده کنید و سپس درون این المان یک محتوا را برای قرار گرفتن در محل مورد نظرتان تعیین نمایید.
اگر شما بخواهید تصویر مشترکی را در چند ستون استفاده نمایید باید از گزینه “Clone” یا نسخه برداری استفاده کنید. برای این کار کافیست بر روی “Clone Image” کلیک کنید و سپس تصویر کپی شده را در ستون‌های دیگر دراپ کنید. شما می‌توانید همین کار را برای متن‌ها نیز انجام دهید، یعنی اگر بخواهید متن مشترکی را در زیر تصاویر یا در هر جای دیگری از صفحه خود قرار دهید باید از گزینه “Clone Text Block” استفاده کنید و پس از آن که متن مورد نظر را نسخه برداری نمودید، آن را در ستون‌های دیگر دراپ کنید.
برای اضافه نمودن هر المانی شما باید از طریق گزینه “Add Element” اقدام کنید و با استفاده از آن تک تک المان‌هایی که می‌خواهید درون صفحه مورد نظر خود قرار دهید را انتخاب کنید و هر یک را به صورت مجزا درون صفحه قرار دهید.
تنظیمات سطرها
شما می‌توانید به سادگی سطرهایی که درون صفحه مد نظر خود ایجاد نموده‌اید را تنظیم کنید و در آن‌ها تغییراتی به دلخواه خود ایجاد نمایید. برای اعمال تغییرات در سطرها باید بر روی گزینه “Edit This Row” کلیک نمایید و وارد صفحه “Row Setting” یا تنظیمات سطر، شوید. در این صفحه شما با گزینه‌ها و تنظیمات متعددی مواجه خواهید شد که در ادامه این مقاله من برای شما لیست آن‌ها و توضیحات مختصری در رابطه با هر یک از آن‌ها آورده‌ام.
Row Stretch: با استفاده از این گزینه شما می‌توانید طولی را که مد نظر دارید برای سطر مورد نظرتان تعیین کنید. به خاطر داشته باشید که طول سطر باید با المانهای موجود در آن متناسب باشد و اگر طول سطر کمتر از حدی باشد که المان‌ها برای جای گرفتن به آن نیاز دارند، ممکن است سرریز شدن یا Overflow در سطر شما اتفاق بیفتد.
Columns Gap: با استفاده از این گزینه شما می‌توانید فاصله میان ستون‌ها در یک سطر مشخص را تعیین نمایید.
Full height row: اگر چک باکس مربوط به Full Height Row را تیک بزنید، سطر مورد نظر شما تمام صفحه خواهد شد و هیچ سطر دیگری در صفحه شما جای نخواهد گرفت.
Equal Height: اگر چک باکس مربوط به این گزینه را تیک بزنید تمامی ستون‌های موجود در یک سطر طول برابری خواهند داشت.
Content position: با استفاده از این گزینه شما می‌توانید محل مورد نظر خود را برای محتوا درون یک ستون تعیین نمایید.
Parallax: این آپشن به شما امکان انتخاب یک تصویر زمینه پارالاکس را برای سطرها می‌دهد.
نسخه برداری از سطر‌ها
شما می‌توانید سطرها را نیز مانند تصاویر، متن‌ها و ستون‌ها عینا نسخه برداری یا Clone نمایید و یک سطر دیگر کاملا مشابه با سطر قبلی درون صفحه خود ایجاد نمایید. برای این کار باید با استفاده از نوار ابزار بالای سطر و آپشن “Clone This Row” سطر را نسخه برداری نموده و در محل دیگری دراپ کنید. علاوه بر این شما می‌توانید کارهای دیگری همچون حذف سطر‌ها، ادغام سطرها و … را نیز با استفاده از نوار ابزار سطر انجام دهید.
پس از آنکه کار شما در صفحه به پایان رسید باید بر روی گزینه Update کلیک کنید تا تغییراتی که ایجاد نموده‌اید کاملا در صفحه شما اعمال گردند و پس از آن می توانید با استفاده از گزینه “Preview” صفحه ایجاد شده را مشاهده نمایید.
اضافه کردن تصاویر به صفحه
حال که شما سطرها و ستون‌های مورد نظر خود را ایجاد کرده و به نوعی صفحه خود را بخش بندی نمودید می‌توانید شروع به اضافه نمودن محتواها در صفحه نمایید. برای اضافه نمودن یک تصویر به صفحه ابتدا باید بر روی کلید “+” یا “Add Element” کلیک کنید و پس از وارد شدن به کتابخانه المان‌های ویژوال کامپوزر المان “Single Image” را انتخاب نمایید. در این بخش شما می‌توانید یک تصویر را انتخاب نمایید که درون ستون مورد نظر از سطر ایجاد شده خود آن را جای دهید، علاوه بر این شما می‌توانید در این بخش تصویری را که انتخاب می‌نمایید ویرایش کنید و سایز آن را به سایز دلخواه خود تغییر دهید.
پس از انجام تنظیمات و قرار دادن تصویر درون صفحه شما می‌توانید از تصویر کپی برداری یا نسخه برداری نمایید و همان تصویر را در صورت نیاز در دیگر ستون‌های صفحه خود نیز قرار دهید. در بخش‌های بعدی چندین عنوان آورده ایم که اختصاصا مربوط به عکس ها، چگونگی استفاده از عکس‌ها و ایجاد گالری عکس‌ها در یک صفحه از وب سایت است، در این بخش‌ها شما خواهید توانست آموزش‌های دقیق تری درباره اضافه کردن عکس‌ها به صفحات وب سایت با استفاده از ویژوال کامپوزر مطالعه نمایید.
افزودن بلوک متنی
برای آن که درست در زیر تصویری که به صفحه اضافه نمودهاید یک بلوک متنی قرار دهید و یک محتوای نوشتاری را به آن محل اضافه نمایید ابتدا باید از میان گزینه‌های موجود در کنار تصویری که در صفحه قرار داده‌اید بر روی گزینه “Prepend To Column” کلیک نمایید و سپس المان محتوای “Text Block” را انتخاب کنید تا بتوانید با استفاده از آن محتوای متنی را در آن قسمت اضافه نمایید.
کلون کردن یا نسخه برداری از تصاویر
اگر شما نیاز داشته باشید که تصویری را که درون صفحه قرار داده‌اید نسخه برداری کنید یا به عبارتی کپی برداری کنید و همان تصویر را در دیگر بخش‌های صفحه نیز استفاده نمایید باید از میان گزینه‌های موجود در کنار تصویر بر روی گزینه “Clone Single Image” کلیک کنید تا تصویر شما کپی برداری شود و یک کپی از آن در زیر تصویر اصلی ظاهر گردد سپس می‌توانید به روش درگ اند دراپ کردن، تصویر ثانویه ایجاد شده را به محل مورد نظر خود انتقال دهید.
شما می‌توانید مشابه همین کار را برای کپی برداری از بلوک‌های متنی نیز انجام دهید و یک بلوک متنی را کپی برداری نموده و در جای دیگری درگ کنید. البته پس از درگ کردن امکان ایجاد تغییرات ویرایش هم در تصاویر و هم در بلوک‌های متنی وجود دارد.
ایجاد زبانه‌ها و منوهای آکاردئونی و تورها
ویژوال کامپوزر به شما امکان ایجاد زبانه‌ها و منوهای آبشاری و آکاردئونی و تورها را نیز می‌دهد و شما می‌توانید با استفاده از این امکان محتوا و گزینه‌هایی ایجاد کنید که تنها در صورتی که کاربر نشان گر موس را بر روی آن‌ها قرار داد نمایش داده شوند نه در هیچ صورت دیگری.
برای افزودن یک زبانه شما باید ابتدا بر روی گزینه “Add Element” کلیک کنید و از داخل کتابخانه المان‌ها، المان “Tabs” را انتخاب نمایید. به همین صورت برای ایجاد منوهای آکاردئونی و تورها نیز باید به ترتیب المان‌های “Accordion” و “Tour” را از داخل کتابخانه المان‌های محتوای درون ویژوال کامپوزر انتخاب نمایید.
ایجاد کلید Call To Action با استفاده از ویژوال کامپوزر
یکی از انواع صفحاتی که در اکثر وب سایت‌هایی که فعالیت‌های تجاری انجام می‌دهند کاربرد دارد، صفحات CTA  می‌باشد. صفحات CTA کاربران را در چرخه خرید و سفارش محصولات یک وب سایت قرار می‌دهد و در واقع صفحات CTA مهم‌ترین گام در چرخه ترغیب مشتری به خرید تا خرید محصول، است. در ویژوال کامپوزر یک المان محتوای مجزا برای ایجاد صفحات CTA برای محصولات وجود دارد. برای ایجاد یک صفحه CTA شما باید ابتدا بر روی کلید “Add Element” کلیک کنید و سپس المان محتوای “Call To Action” را انتخاب نمایید.
پس از آن که صفحه جدید برای شما نمایش داده شد تغییرات زیر را در صفحه نام برده اعمال نمایید. زمانی که صفحه مربوط به المان محتوای “Call To Action” برای شما نمایش داده می‌شود، زبانه “General” در حال نمایش بوده و آپشن‌های زیر در آن قابل رویت است:
Heading: در این بخش شما می‌توانید یک عنوان مناسب و جذاب برای صفحه CTA خود انتخاب نمایید و آن را در کادری که در زیر عبارت “Heading” قرار دارد تایپ کنید.
Subheading: در این بخش شما می‌توانید یک زیر عنوان برای بخش مجزایی از صفحه CTA خود انتخاب نمایید و آن را در کادری که در زیر عبارت “Subheading “ قرار دارد تایپ کنید.
Text Alignment: با استفاده از این گزینه می‌توانید چینش متن‌ها درون بلوک CTA را تعیین کنید، مثلا می‌توانید متن‌ها را چپ چین، راست چین و یا وسط چین نمایید.
Shape: با استفاده از این آپشن شما می‌توانید شکل بلوک CTA را درون صفحه خود تعیین نمایید، این گزینه به صورت پیش فرض به شکل دایره تنظیم شده است اما شما می‌توانید هر شکل هندسی که تمایل دارید برای بلوک CTA خود انتخاب کنید.
Style: با استفاده از این گزینه می‌توانید فرم نمایش بلوک CTA خود را تعیین نمایید.
Color: همان طور که از نام این گزینه پیداست با استفاده از این گزینه شما می‌توانید رنگ‌های مربوط به بلوک CTA  خود را تعیین کنید.
Text: در این بخش شما می‌توانید متنی را که می‌خواهید در صفحه CTA خود قرار دهید تایپ کنید. می‌توانید در این بخش ویژگی‌های برجسته و آن چه موجب متمایز شدن محصول و یا خدمات شما از دیگر شرکت‌های عرضه کننده آن محصول یا خدمات می‌شود را ذکر نمایید، یا هر مطلب دیگری که از دید شما می‌تواند کاربر را مجاب کند که خرید از شما بهترین گزینه پیش روی او است. به خاطر داشته باشید که توضیحاتی که در این بخش می‌آورید باید کاملا مختصر و مفید باشد.
Width: با استفاده از این گزینه شما می‌تواند پهنای بلوک CTA خود را تعیین نمایید. تنظیمات این بخش معمولا به صورت درصد و به صورت پیش فرض ۱۰۰% است. استفاده از پهنای ۱۰۰% موجب می‌گردد که بلوک CTA شما ماکزیمم کارایی را داشته باشد.
Add Button: ممکن است شما بخواهید در بلوک CTA خود دکمه‌های اضافه‌ای ایجاد نمایید. برای این کار باید در چک باکس مربوط به “Button” گزینه “Yes” را تیک بزنید. در این صورت دو زبانه دیگر در کنار زبانه “General” در بالای صفحه به نام‌های “Button” و “Designing Options” برای شما نمایش داده می‌شوند که شما می‌توانید با استفاده از آن‌ها تنظیمات مربوط به کلید اضافه شده در صفحه CTA خود را انجام دهید. برخی از تنظیمات مربوط به زبانه “Button” در ادامه آورده شده است:
Text: با استفاده از این آپشن شما می‌توانید متن روی کلیدی که ایجاد می‌نمایید را تعیین کنید. مثلا شما می‌توانید کلیدی برای وارد شدن به پرسه پرداخت بانکی طراحی کنید و بر روی آن متنی به شکل “Bye now” و یا “Shop Now” حک کنید و یا مثلا اگر می‌خواهید یک فایل آموزشی را برای فروش بگذارید می‌توانید کلیدی طراحی کنید که عبارت “دانلود” بر روی آن حک شود و کاربران با کلیک کردن بر روی این کلید به مرحله پرداخت وجه هدایت گردند.
URL Link: شما می‌توانید در این بخش لینک صفحه فروش محصول خود را وارد نمایید. این لینک در واقع آدرس محلی است که کاربر پس از کلیک کردن بر روی دکمه به آن هدایت میشود.
Style: با استفاده از این گزینه می‌توانید فرم و شکل قرار گیری کلید CTA خود را تعیین نمایید. برای مثال تو خالی یا تو پر بودن و یا سایه دار یا بدون سایه بودن کلید را می‌توانید تعیین نمایید.
Shape: شما می‌توانید با استفاده از این آپشن شکل کلیدی که می خواهید در بلوک CTA خود قرار دهید را تعیین کنید. مثلا می‌توانید کلیدی به شکل دایره، بیضی و … ایجاد کنید.
Color: شما می‌توانید با استفاده از این آپشن رنگ کلیدی که در بلوک CTA خود ایجاد می نمایید را تعیین کنید و آن را به رنگ دلخواه خود تنظیم نمایید.
Alignment: شما می‌توانید با استفاده از این آپشن محل قرار گیری و یا چینش کلیدی که طراحی می‌کنید را تعیین کنید، مثلا می‌توانید کلید را چپ چین و یا راست چین نمایید یعنی تعیین کنید که کلید شما در منتها الیه سمت چپ یا راست قرار گیرد.
موارد نام برده در این لیست تنها تعدادی از تنظیمات متنوعی است که شما می‌توانید با استفاده از ویژوال کامپوزر در بلوک CTA خود ایجاد نمایید. در این بخش تنظیمات متعدد دیگر وجود دارد که این امکان را برای شما فراهم می‌کند که تمامی جزییات مربوط به بلوک و کلید های CTA را شخصی سازی نمایید.

منبع
پاسخ


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

پرش به انجمن:


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