دانستن چگونگی افزودن عنوان سایت و شعار پویا به یک عنوان جهانی Divi هنگام ایجاد وب سایت های Divi مفید خواهد بود. و چند دلیل خوب برای انجام این کار وجود دارد. از یک طرف ، همه سایت ها آرم ندارند. عنوان سایت جایگزین آرم خوبی است. دلیل دیگر این است که نام تجاری خود را با قرار دادن اطلاعات حیاتی در سایت خود ، جایی که همه افراد آن را مشاهده می کنند ، تقویت کنید.
در این آموزش ، ما به شما نشان خواهیم داد که چگونه عنوان و شعار سایت پویا را به یک عنوان جهانی Divi اضافه کنید. این راه حل عنوان سایت و عنوان را به صورت پویا از صفحه وردپرس استخراج می کند. به علاوه ، شما تمام گزینه های طراحی قدرتمند Divi را برای سفارشی کردن عنوان و شعار به هر صورتی که بخواهید خواهید داشت!
نتیجه احتمالی
در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.
به عنوان سایت و برچسب در وسط بالای هدر که به صورت پویا نمایش داده می شود توجه کنید.
دانلود رایگان
به Divi Newsletter بپیوندید و ما یک نسخه از بسته طرح‌بندی صفحه فرود Divi Ultimate، به علاوه هزاران تن دیگر را برای شما ایمیل می‌کنیم. ressources، نکات و ترفندهای رایگان و شگفت انگیز Divi. آن را دنبال کنید و در کمترین زمان یک استاد Divi خواهید شد. اگر قبلاً مشترک شده اید ، کافیست آدرس ایمیل خود را در زیر وارد کنید و برای دسترسی به بسته بندی طرح ، روی بارگیری کلیک کنید.دانلود
برای وارد کردن الگو ، به Divi> Theme generator بروید.
روی نماد قابل حمل در سمت راست بالای صفحه کلیک کنید.
در پنجره بازشو قابلیت حمل ، برگه import را انتخاب کرده و فایل بارگیری را از رایانه خود انتخاب کنید.
سپس بر روی دکمه واردات کلیک کنید.
پس از تکمیل ، الگوی کلی سرصفحه در Divi Theme Builder در دسترس خواهد بود.
در ادامه می خواهیم به طرح بپردازیم.
عنوان سایت و شعار در وردپرس
هر سایت وردپرسی دارای عنوان سایت و یک عنوان می باشد. عنوان سایت در اصل نام سایت است و tagline یک عبارت کوتاه است که معمولاً توضیح می دهد که چیست.
اضافه کردن عنوان سایت هنگام نصب وردپرس و فراموش کردن آن غیر معمول نیست.
و، برخی از مردم حتی متوجه وجود این شعار نیستند، چه رسد به اینکه وقت بگذارند و آن را به روز کنند. علاوه بر این، هنگام استفاده از تم دیوی، عنوان و برچسب سایت به طور پیش فرض در سایت شما قابل مشاهده نخواهد بود، بنابراین نادیده گرفتن آنها آسان است. با این حال، عنوان سایت و برچسب از عناصر ضروری وب سایت هستند و توسط موتورهای جستجو شناسایی می شوند.
با رفتن به داشبورد وردپرس و رفتن به تنظیمات> عمومی می توانید هر زمان بخواهید عنوان سایت و برچسب را در وردپرس پیدا و به روز کنید.
یا می توانید مسیر دیگری را با استفاده از تنظیم کننده تم برای به روزرسانی عنوان سایت تحت تنظیمات کلی طی کنید.
اکنون که می دانیم عنوان و شعار سایت در باطن WordPress کجاست ، بیایید کشف کنیم که چگونه می توانیم آنها را به یک هدر Divi اضافه کنیم!
چگونه می توان عنوان و شعار سایت پویا را به عنوان جهانی در Divi اضافه کرد
وارد کردن الگوی سرآیند جهانی از قبل طراحی شده
برای این آموزش ، ما در مورد چگونگی افزودن عنوان سایت پویا و برچسب گذاری به عنوان موجود به جای ایجاد یک هدر کامل از ابتدا ، تمرکز خواهیم کرد. این باعث صرفه جویی در وقت شما و بهبود وضوح می شود. بنابراین ، برای شروع این طراحی هدر ، ما قصد داریم یک الگوی سرآیند جهانی از پیش تعریف شده را از خود وارد کنیم بسته تولید کننده تم چهارم .
هنگامی که شما بسته را بارگیری کردم ایجاد موضوع ، فایل را از حالت فشرده خارج کرده و فایل JSON را پیدا کنید قالب وب سایت به طور پیش فرض
سپس به بخش Divi> Theme Builder بروید.
روی نماد قابل حمل در بالا سمت راست کلیک کنید. در پنجره پاپ آپ قابل حمل، فایل JSON را انتخاب کنید قالب وب سایت به طور پیش فرض روی دکمه Import کلیک کنید.
پس از افزودن الگو به طرح ساز ، قالب پاورقی را حذف کرده و کلیک کنید تا سرصفحه کلی ویرایش شود.
افزودن عنوان سایت و عنوان به صورت پویا به عنوان
در داخل ویرایشگر الگو ، سرصفحه premade را که قبلاً طراحی شده است مشاهده خواهید کرد. ما می توانیم فوراً سفارشی سازی خود را شروع کنیم.
انتقال آرم
برای شروع ، ماژول تصویری را که آرم (به صورت پویا) از ستون وسط ردیف بالا به ستون سمت چپ ردیف بالا نشان می دهد ، بکشید.
برای نمایش عنوان سایت و عنوان سایت ، یک ماژول تماس به عمل اضافه کنید
سپس یک ماژول Call to Action جدید به ستون وسط ردیف بالا (جایی که آرم بود) اضافه کنید.
ما از ماژول Call to Action برای نمایش عنوان سایت و عنوان استفاده خواهیم کرد.
اما قبل از شروع افزودن محتوا ، ابتدا NO را انتخاب کنید تا از رنگ زمینه استفاده کنید.
عنوان سایت پویا را اضافه کنید
در بخش تنظیمات محتوا ، بر روی جعبه عنوان کلیک کنید و بر روی نماد "استفاده از محتوای پویا" کلیک کنید. سپس "عنوان سایت" را از لیست انتخاب کنید.
یک شعار سایت پویا اضافه کنید
سپس ، موس را روی قسمت بدن قرار دهید و نماد "استفاده از محتوای پویا" را انتخاب کنید. سپس "Site Tagline" را از لیست انتخاب کنید.
پیوند صفحه اصلی پویا اضافه کنید
معمول است که عنوان سایت با کلیک به صفحه اصلی هدایت می شود ، به خصوص اگر آرم را جایگزین می کنید. برای هدایت کل دوره به صفحه اصلی ، پیوند صفحه اصلی را به عنوان محتوای پویا به URL پیوند دوره اضافه کنید.
طراحی متن متن و شعار سایت
اکنون عنوان سایت و برچسب سایت به صورت پویا روی سربرگ نمایش داده می شود. تنها کاری که اکنون باید انجام دهیم این است که یک ظاهر طراحی شده اضافه کنیم. به یاد داشته باشید برای طراحی عنوان سایت باید متن عنوان را سفارشی کنیم.
به برگه طراحی بروید و موارد زیر را به روز کنید:
- قلم عنوان: Heebo
- عنوان وزن قلم: پررنگ
- عنوان سبک قلم: TT
- اندازه متن متن: 32px (دسک تاپ) ، 24 پیکسل (رایانه لوحی و تلفن)
- فاصله نامه نامه: 0.3em
- قلم بدنه: Roboto
- سبک قلم بدنه: italic
- رنگ متن بدن:
- اندازه متن بدن: 13px
- فاصله نامه نامه بدن: 0.1em
- ارتفاع خط بدنه: 1em
برای کمک به مرکز سازی ، با افزودن CSS سفارشی زیر به توضیحات تبلیغاتی ، قسمت زیرین پیش فرض را در زیر متن بدست آورید:
padding-bottom: 0px
تنظیمات اضافی طراحی
برای این قسمت آخر آموزش ، ما می خواهیم تنظیمات اضافی طراحی را بر روی هدر انجام دهیم تا مطمئن شویم که موارد در هر ستون به صورت عمودی باقی می مانند و به دکمه ای طراحی منحصر به فرد می دهیم. ما همچنین خط قبل و بعد از آن را به برچسب اضافه خواهیم کرد (فقط برای ضربات).
به طور عمودی ستونها / محتوا را محور کنید
در حال حاضر ردیف بالا فعال "ارتفاعات ستون برابر" است که از ویژگی فلکس استفاده می کند. ما می توانیم با اضافه کردن یک قطعه CSS کوچک ، از این امر سرمایه گذاری کنیم تا مطمئن شویم که تمام ستون ها به صورت عمودی درون ردیف قرار دارند. برای انجام این کار ، تنظیمات مربوط به ردیف بالا را باز کرده و CSS زیر را به قسمت اصلی اضافه کنید:
تراز وسایل: مرکز؛
ستون را با دکمه به روز کنید
در مرحله بعد ، تنظیمات ستون 3 را در ردیف بالا باز کرده و رنگ پس زمینه و بالشتک را بگیرید.
پس زمینه دکمه را به روز می کنید
سپس تنظیمات ماژول دکمه را باز کرده و پس زمینه را با یک شیب زمینه جدید به شرح زیر به روز کنید:
- پس زمینه شیب رنگ سمت چپ: #ffffff
- رنگ شیب پس زمینه سمت راست: # 1dbf73
- جهت گرادیان: 135deg
- موقعیت شروع: 10٪
- موقعیت نهایی: 0٪
اضافه کردن شخصیت های قبل و بعد از آن به شعار
هر عنصر محتوای پویا را می توان با کلیک بر روی نماد چرخ دنده تغییر داد. برای افزودن نویسه های قبل و بعد به شعار ، تنظیمات ماژول تماس برای اقدام حاوی شعار را باز کرده و روی نماد ویرایش بر روی محتوای پویای شعار سایت کلیک کنید. سپس نویسه ها را به ورودی های قبل و بعد اضافه کنید.
نتیجه نهایی
برای دیدن نتیجه ، هر صفحه ای را در سایت خود باز کنید. شما باید عنوان سایت و برچسب ها را به زیبایی نمایش دهید!
آخرین افکار
واقعاً خوب است که می توانید یک عنوان کلی با عنوان سایت و برچسب تبلیغاتی پویا تنظیم کنید. به نظر می رسد این چیزی است که برای بسیاری از سایت ها مفید خواهد بود. من همچنین ایده این را دارم که عنوان سایت و برچسب را علاوه بر آرم ، برای نمایشی حتی بیشتر از نام تجاری در آن قرار دهم.
منبع: تم زیبا
