صفحه اصلی / عمومی / آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

۰۴ اسفند ۱۳۹۸

۲۶ بازدید

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge

قالب bridge یکی از بهترین قالب های چند منظوره وردپرس است. بخصوص در نسخه ۲۰۲۰ ویژگی های جذابی به کاربران می دهد؛ به طوریکه لقب . از امکانات خاص آن، می توان به موارد زیر اشاره کرد:

  • ۵۰۰ وب سایت آماده (دمو) به صورت درون ریز در اختیار شما قرار می گیرد. به طوریکه برای تمامی کسب و کارها می توان وب سایت ساخت.
  • افزونه های پرمیوم که به صورت رایگان در قالب قرار گرفته است. افزونه Yoast seo پرمیوم و افزونه ویژوال کامپوزر پرمیوم
  • سازگاری همزمان با صفحه ساز المنتور و ویژوال کامپوزر
  • پشتیبانی نسخه php به ۷٫۲ یعنی لود سریع تر سایت
  • و بسیار موارد دیگر…

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

با این اوصاف هیجان انگیز از قالب پل، به سراغ آموزش قالب bridge برویم.

شروع کار با قالب Bridge

آموزش کار با قالب Bridge

ساخت صفحات در آموزش قالب Bridge

تنظیمات مربوط به وبلاگ قالب bidge

این آموزش در حال تکمیل است…


شروع کار با قالب Bridge

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

پیش نیازهای نصب

برای اجرای بدون مشکل این قالب، نوع خاصی از PHP و تنظیمات وردپرس را پیشنهاد می‌دهیم.

  • PHP 6 X یا بالاتر

درصورتی که سرورتان از PHP پایین‌تر از X 5.6 استفاده می‌کند، با ارائه‌دهنده سرور تماس گرفته و از آن‌ها بخواهید آن را ارتقا دهند.

نصب قالب Bridge

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

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

  • به آدرس مقابل در پنل مدیریت بروید: پنل مدیریت وردپرس » نمایش » پوسته ها
  • روی افزودن پوسته تازه کلیک کنید.
  • روی بارگذاری پوسته کلیک کنید.
  • روی Choose File کلیک کنید.
  • فایل zip را در پوشه‌ای که اکسترکت کردید بیابید و آن را آپلود کنید.
  • روی گزینه “هم اکنون نصب کن” کلیک کنید و منتظر نصب قالب بمانید.
  • بعد از این که قالب را نصب کردید، باید آن را فعال کنید تا به صفحه مدیریت اضافه شود.

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

آموزش کار با قالب Bridge

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

با مراجعه به آدرس زیر، می‌توانید لوگوی سایت را برای صفحات مختلف تغییر دهید:

WP Admin-> Qode Options-> Logo

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

    • اندازه لوگو در صفحات عمودی

برای تنظیم لوگو در منوهایی که طرف چپ قرار می گیرند، باید در CSS تغییرات ایجاد کنید. کد زیر را در مسیر WP Admin -> Qode options -> General -> Custom CSS کپی کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

برای تغییر فاصله لوگو با موارد منو، از کد زیر می‌توانید استفاده کنید:

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

سربرگ

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

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

اگر به WP Admin -> Qode options -> Header بروید، می توانید تمامی تنظیمات مربوط به سربرگ را تغییر دهید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

تنظیمات اولیه

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

یادتان باشد که به طور همزمان فقط می‌توانید از یکی از این جایگیری ها استفاده کنید.

اکنون بگذارید به متاباکس سربرگ بپردازیم. برای این کار به WP Admin -> Qode Options -> Header -> Header بروید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

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

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

ثابت مینیمال: این حالت تقریبا مانند حالت قبلی است اما تفاوت آن در جایگیری لوگو در وسط، منو در سمت چپ و آیکون جست وجو در سمت راست، است.

توجه: وقتی از این نوع سربرگ استفاده می کنید بهتر است که از منوی تمام صفحه و آیکون جست‌وجو استفاده کنید.

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

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

به Qode options -> Header -> Header Height بروید و عدد را برای ارتفاع سربرگ تغییر دهید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

چگونه رنگ پس‌زمینه سربرگ را تغییر دهیم؟

به Qode options -> Header -> Header Background Color بروید و رنگ مورد نظر خود را انتخاب کنید. تنظیماتی که اینجا تغییر می دهید بر تمامی صفحات سایت اعمال می‌شود. برای تغییر رنگ هر صفحه بطور جداگانه، به متاباکس بروید و رنگ و شفافیت را به دلخواه برای هر صفحه تغییر دهید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

نوار ساید بار

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

برای فعال کردن نوار ساید بار، به مسیر Qode Options -> Header -> Side Area -> Enable Side Area بروید. برای فعال کردن آن می توانید روی دکمه Yes کلیک کنید و برای غیر فعال کردن آن، روی No.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

برای انتخاب واکنش‌های نوار ساید بار به مسیر Qode options -> Header -> Side Area بروید.

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

تنظیمات دیگری که می‌توانید آن‌ها را تغییر دهید به شرح زیر هستند:

  • پک آیکن ساید بار
  • انتخاب آیکن ساید بار
  • عنوان منوی ساید بار
  • رنگ زمینه
  • حاشیه دور منو
  • جهت منوی ساید بار
  • متن
  • عنوان
  • انتخاب طراحی آیکن

اسلایدر Qode

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

نکات مهمی که باید در استفاده از این اسلایدر به آن‌ها توجه کنید به شرح زیر هستند:

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

در ادامه مقاله به آموزش این بخش از قالبBridge  می‌پردازیم.

ساخت Qode Slider

برای ساخت اسلایدر به پنل مدیریت وردپرس »  Qode Slider »  Sliderبروید. عنوان و اسلاگ را وارد کرده و روی Add New Slider کلیک کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

ساخت اسلاید با عکس پس‌زمینه

به پنل مدیریت وردپرس » Qode Slider »  Slidesبروید و روی دکمه Add New slide کلیک کنید. عنوان اسلاید را انتخاب کنید و برای نوع پس‌زمینه، روی گزینه Image کلیک کنید. در سمت راست تمام اسلایدرهایی که دارید را می بینید. با انتخاب یکی از آن‌ها، اسلاید را به اسلایدر مورد نظر اضافه کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

حالا باید عکسی را که می‌خواهیم در اسلایدر قرار دهیم به اسلاید وارد کنیم. در بخش Qode Slide Image روی دکمه Upload کنار دکمه Slide Image  کلیک کنید. یک عکس را انتخاب یا آپلود کنید  و روی Select image کلیک کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

ساخت اسلاید ویدیویی

به پنل مدیریت وردپرس » Qode Slider »  Slidesبروید و روی دکمه Add New Slide کلیک کنید. مراحل بالا را تکرار کنید، فقط نوع اسلاید را روی ویدئو قرار دهید.

توجه کنید که بعضی از مرورگرها ویدئوهایی با فرمت های خاص را پشتیبانی نمی‌کنند. از سایت Online-convert.com برای تبدیل فرمت ویدیئوهایتان به فرمت‌هایی که تمام مرورگرها پشتیبانی می‌کنند، استفاده کنید. برای اضافه کردن ویدیوهایتان به بخش مدیا، به پنل مدیریت وردپرس » رسانه بروید و روی افزودن کلیک کنید و فایل مورد نظرتان را انتخاب کنید. با زدن روی ویدیو در بخش مدیا، URL را می‌بینید. آن را کپی کنید و در بخش Qode Slide Video الحاق کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

تنظیمات پایه اسلاید

  • محتوای اسلاید

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

  • جاگیری محتوای اسلاید

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

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

حرکت بین اسلایدها دو حالت ثابت و پویا دارد. می‌توانید با تغییر تنظیمات show_navigation_arrows به no، آن‌ها را غیرفعال کنید.

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

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

برای تغییر حالت از ثابت به پویا، به مسیر Dashboard -> Qode Options -> Qode Slider رفته و گزینه روبه‌روی Enable Custom Curser for Navigation را به Yes تغییر دهید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

استفاده از اسلاید

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

  • جاگیری اسلایدر

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

با استفاده از کد auto-start، به اسلایدر دستور می دهیم که بصورت اتوماتیک اسلاید را عوض کند و یا ویدئو را پخش کند.

  • استفاده ساده از اسلایدر

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

    • اسلایدر موردنظر خود را در مسیر پنل مدیریت وردپرس » Qode Slider » Slidersبیابید.
    • میانبر کنار اسم اسلایدر را کپی کنید.
    • اکنون به صفحه‌ای بروید که می‌خواهید اسلایدر را در آن قرار دهید. برای پیدا کردن صفحه‌تان به مسیر پنل مدیریت وردپرس » برگه ها بروید و روی صفحه موردنظر کلیک کنید تا صفحه ویرایش آن باز شود.
    • میانبری را که کپی کردید، را در بخش Qode general – Qode Slider or Layer slider الحاق کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

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

  • زمان نمایش هر اسلاید

زمان نمایش هر استایل با استفاده از کد slide_animation می‌توانید تغییر دهید. زمان پیشفرض ۶۰۰۰ میلی ثانیه است.

پاورقی در آموزش قالب Bridge

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

  • تنظیمات پاورقی

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

  • پس‌زمینه پاورقی

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

  • ساختمان و طراحی پاورقی

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

پاورقی هم می‌تواند در یک جعبه قرار بگیرد هم تمام عرض صفحه را بپوشاند.

در Qode Options -> Footer می‌توانید تعداد ستون‌هایتان را برای ساختن ساختمان پاورقی تان مشخص کنید. حداکثر تعداد ستونی که می توانید داشته باشید، ۴ ستون است. تنظیمات رنگ و عکس پس‌زمینه را هم می توانید در این بخش تغییر دهید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • اضافه‌کردن ویجت به پاورقی

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

  • آیکن های شبکه های اجتماعی

براس اضافه کردن آیکن های شبکه‌های اجتماعی برای به اشتراک‌گذاری محتوایتان، مراحل زیر را اجرا کنید:

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

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

درصورتی که تمایل ندارید عکسی در پاورقی باشد، به Qode Options -> General -> Custom code -> Custom CSS بروید و در کد، قسمت زیر را پاک کنید:

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

عضویت در خبرنامه

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

برای این کار، طبق روشی که قبلا گفتیم باید افزونه Contact Fporm 7 را نصب کرده و فرم ثبت‌نام با فیلدهای اسم، ایمیل و دکمه ثبت‌نام بسازید. سپس کد آن را در فرمت زیر، در صفحه پاورقی تان وارد کنید:

[contact-form-7 id=”۱۵۲۷۹”

Html-class=”cf7-custom-style-1”]

Html-class استایلی را که در پنل مدیریت وردپرس »  Contact Form 7روی این فرم اعمال می‌کند.

  • قراردادن گواهینامه در پاورقی

برای قراردادن گواهینامه‌ها در پاورقی، باید مراحل زیر را دنبال کنید:

  • به پنل مدیریت وردپرس » برگه ها بروید و یک صفحه تست باز کنید.
  • کدهای لازم برای مجوز را وارد کنید و تغییرات را ذخیره کنید.
  • صفحه را به حالت کلاسیک برگردانید و کد را کپی کنید.
  • به پنل مدیریت وردپرس » نمایش » ابزارک ها بروید و کد را در بخش ویجت متنی (Text widget) الحاق کنید.
  • اضافه‌کردن دکمه

دکمه از المان های مهم سایت هستند که هم می توان بصورت ساده و هم با متن برای دکمه‌های CTA استفاده کرد. برای ساختن دکمه، مراحل زیر را باید طی کنید:

  • کد را در یک صفحه تست بنویسید.
  • به حالت کلاسیک برگردید و کد را کپی کنید.
  • به پنل مدیریت وردپرس -> نمایش -> ابزارک ها بروید و کد را در بخش ویجت متنی (Text widget) الحاق کنید.

ساخت صفحات در آموزش قالب Bridge

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

سپس در بخش ویژگی های برگه، یکی از الگوها را انتخاب کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

زیر تنظیمات محتوا، تنظیمات دیگری وجود دارند که تنظیمات کلی را که قبلا انجام داده‌اید را برای هر صفحه بطور جداگانه تغییر می‌دهد.

برای اضافه کردن المان‌های مختلف باید به ویرایشگر بکند (Backend Editor) بروید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

در بالا، سمت چپ صفحه، دکمه‌ای با عبارت ویرایشگر پیشرفته وجود دارد. وقتی روی آن کلیک می‌کنید، تبدیل به دکمه ای با عبارت Classic Mode می‌شود که ویرایشگر را به حالت عادی برمی‌گرداند.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

تنظیمات پایه ساخت صفحه

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

تنظیمات مربوط به زیبایی صفحه
  • تغییر رنگ پس زمینه: این گزینه، رنگ پس زمینه را تغییر می دهد.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • برداشتن و ویرایش کدهای اسلایدرها: اسلایدرها را می توانید در بخش Layer Slider ویرایش کنید.
تنظیمات مربوط به سربرگ

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

  1. پیشفرض: تنظیماتی که در Qode -> Options قرار داده‌اید، استفاده می‌شود. ولی گزینه‌های بیشتری برای تغییر دادن خواهید داشت.
  2. استفاده از عکس به عنوان تصویر زمینه: عکسی که در این بخش استفاده می کنید، نقش پس‌زمینه را برای عنوان بازی می کند.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

۳٫ No: در صورتی که این گزینه را انتخاب کنید، مقادیر فضای عنوان، مانند صفحه اصلی تنظیم می‌شوند و پنهان نمی‌شود.

۴٫ Yes: فضای عناون را به کلی پنهان می کند

  • انیمیشن: تعیین کنید که عنوان دارای جلوه گرافیکی خاصی باشد یا نه. انیمیشن را می‌توانید روی دو حالت راست به چپ و بالا به پایین تنظیم کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • رنگ پس‌زمینه(background): می توانید برای فضای عنوان رنگ مشخصی بگذارید.
  • ارتفاع عنوان(title height): مقدار دلخواه برای ارتفاع عنوان را تعیین کنید. عددی که وارد می کنید باید عدد صحیح باشد.
  • فضای عنوان زاویه دار(enable angel title): با فعال کردن این گزینه، ضلع پایینی فضای عنوان کج می شود و جلوه زیبایی به فضای عنوان می دهد.
  • نمایش مسیر سایت در فضای عنوان: با فعال کردن این گزینه، می‌توانید ببینید که چگونه از صفحه اصلی به صفحه ای که الان درونش هستید، رسیده اید. رنگ این گزینه را می توانید تغییر دهید.
  • نمایش مسیر سایت در فضای عنوان(enable breadcrumbs): با فعال کردن این گزینه، می‌توانید ببینید که چگونه از صفحه اصلی به صفحه ای که الان درونش هستید، رسیده اید. رنگ این گزینه را می توانید تغییر دهید.
  • زیرنویس: این متنی است که به صورت کوچکتر زیر عنوان قرار می گیرد است که می توانید رنگ آن را نیز تغییر دهید.
  • فضای موجود بعد از عنوان اصلی: دو فیلد برای تعیین میزان فاصله بعد از عنوان اصلی وجود دارد. اولی برای همه دستگاه ها است و دومی برای فضای اضافه ای است که روی مرورگرها تلفن همراه وجود دارد.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

تنظیمات مربوط به وبلاگ قالب bidge

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

  • دسته‌بندی بلاگ

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

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

  • نشان دادن نظرها

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

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

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

انواع نمایش تصاویر و محتوا در وبلاگ قالب Bridge

 

  • نمایش عکس عنوان محتوا، بزرگ

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش عکس عنوان محتوا، بزرگ، ساده

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش عکس عنوان و محتوا، بزرگ

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش عکس عنوان محتوا، بزرگ، با جدا‌کننده

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش آجری، با تاریخ روی عکس

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش آجری گسترده

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

 

  • نمایش آجری گسترده، با تاریخ روی عکس

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • نمایش عکس عنوان محتوا، کوچک

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

بلاگ‌های تک پستی

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

تنظیمات اولیه پست در وبلاگ

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

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

در این به بررسی و آموزش تنظیمات کلی مربوط به بلاگ می‌پردازیم:

رنگی که در این بخش انتخاب می کنید، زیر محتوایتان قرار می‌گیرد.

  • جلوه‌های حرکتی صفحه

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • پنهان کردن عکس عنوان پست

در صورتی که نمی خواهید برای بعضی از پست‌ها عکسِ عنوان داشته باشید، مقار این بخش را به Yes تغییر دهید. در غیر این صورت، روی No آن را نگه دارید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • کد اسلایدر Layer و یا اسلایدر Qode

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

برای گرفتن کد هر کدام از این اسلایدر ها مراحل زیر را انجام دهید:

برای اسلایدر Qode

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

ابتدا به Qode Slider-> Sliders بروید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

کد اسلایدر مورد نظرتان را کپی کنید. در فیلد Qode Slider and Layer Slider shortcode  آن را قرار دهید کنید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

 برای اسلایدر Layer

ابتدا به بخش layerslider wp بروید.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

کد اسلایدر مورد نظرتان را کپی کنید و در فیلد Qode Slider and Layer Slider shortcode آن را قرار دهید.

قرار دادن محتوا زیر سربرگ

در صورتی که برای سربرگ شفافیت تعیین کرده‌اید، احتمالا محتوای شما از زیر سربرگ نمایش داده می‌شود. اگر از ظاهر این مسئله خوشتان نمی‌آید، می‌توانید با تنظیم این بخش، محتوا و اسلایدر را همیشه بعد از سربرگ نمایش دهید. مقدار فیلد Always put content below header را روی Yes تنظیم کنید تا تمام محتوایتان بعد از سربرگنمایش داده شود.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

  • خلاصه و بخش منتخب پست

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

حالا وقت این است که محتوای خود را تولید کرده و در صفحه به اشتراک بگذارید. محتوا را با استفاده از دو روش کلاسیک و ویرایشگر WPBakery می‌توانید تولید و منتشر کنید. درصورتی که گزینه‌ای برای انتخاب میان این دو را نمی بینید، به مسیر ویژوال کامپوزر » تنظیمات عمومی بروید و گزینه Visual Composer برای پست‌ها را فعال کنید.

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

این فرمت پیشفرض بلاگ است.

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

آموزش قالب bridge | صفر تا صد آموزش کار با قالب bridge

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

می‌توانید ترتیب عکس‌ها را با نگه داشتن ماوس روی آ‌ها و کشیدن، عوض کنید و یا با علامت‌زدن گزینه Random Order ترتیب را تصادفی کنید.

روی ساخت گالری کلیک کنید و سپس ذخیره تغییرات را  بزنید.

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

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

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

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

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

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

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

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

شما می‌توانید از سه منبع، ویدئو آپلود کنید:

.. یوتیوب

برای این که ویدئو از یوتیب وارد کنید، کافی است ID ویدئوی یوتیوب را در فیلد Video ID وارد کنید و نیازی به آدرس کامل ویدئو ندارید.

.. ویمئو

برای این که ویدئو از یوتیب وارد کنید، کافی است ID ویدئوی یوتیوب را در فیلد Video ID وارد کنید و  نیازی به آدرس کامل ویدئو ندارید.

.. ویدئوهای روی سرور

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

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

برای اضافه کردن ویدئو به کتابخانه مدیا، باید مراحل زیر را دنبال کنید:

  • به رسانه » افزودن بروید.
  • فایل‌های موردنظر خود را انتخاب و آپلود کنید.
  • به کتابخانه مدیا خود بروید و روی ویدئو موردنظرتان بزنید.
  • روی ویدئو بزنید تا ویرایشگر ویدئو باز شود.
  • آدرس اینترنتی ویدئو را کپی کنید.
  • به صفحه پست خود برگردید و آدرس اینترنتی را در فیلد مخصوص الحاق کنید.
  • توجه داشته باشید که ویدئو را باید با سه فرمت webm، mp4 وogv آپلود کنید تا قابلیت پخش در همه مروگرهای مدرن را داشته باشد.
  • فایل صوتی

این نوع فایل برای نمایش دادن فایل های صوتی است.

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

برای آپلود کردن یک فایل صوتی، مراحل زیر را انجام دهید:

ابتدا به رسانه » افزودن بروید.

فایل های موردنظرتان را از کامپیوتر انتخاب کرده وآپلود کنید.

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

فایل صوتی موردنظرتان را پیدا کنید.

روی گزینه Edit link و یا روی نام فایل کلیک کنید.

لینک فایل صوتی را کپی کرده و در فیلد audio Link قرار دهید.

 


منبع مطلب

این مطالب را نیز ببینید!

تعمیر آیفون سوزوکی

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *