آموزش چگونه وب‌سایت‌های حرفه‌ای در Oxygen Builder بسازیم - آخرین آپدیت

دانلود How To Create Professional Websites In Oxygen Builder

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

آموزش جامع ساخت وب‌سایت با Oxygen Builder

یاد بگیرید چگونه هر نوع وب‌سایتی را با Oxygen Builder بسازید و وب‌سایت‌های حرفه‌ای طراحی کنید.

چرا Oxygen Builder را انتخاب کنید؟

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

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

آنچه در این دوره خواهید آموخت

  • ساخت هر نوع وب‌سایت با Oxygen Builder
  • چگونه وب‌سایت‌های حرفه‌ای بسازیم
  • ایجاد وب‌سایت برای شرکت‌ها
  • ساخت بلاگ‌های حرفه‌ای
  • طراحی وب‌سایت‌های نمونه کار (Portfolio)
  • ایجاد وب‌سایت‌های واکنش‌گرا (Responsive)

محتوای دوره

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

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

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

پیش‌نیازها

  • دانستن حداقل اصول اولیه وردپرس
  • داشتن وردپرس و Oxygen Builder نصب شده روی کامپیوتر (توصیه می‌شود، اما ضروری نیست)

آیا شما یک طراح هستید؟

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

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

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

همین حالا ثبت نام کنید و شما را در دوره می‌بینیم!


سرفصل ها و درس ها

مقدمه Introduction

  • مقدمه Introduction

2.مرور کلی Oxygen Builder 2.Oxygen builder overview

  • 2.1Oxygen Builder چیست 2.1What is Oxygen Builder

  • 2.2آن را نخرید - امتحانش کنید 2.2Don't buy it - try it

  • 2.3آپلود Oxygen در سایت ما 2.3Uploading Oxygen to our site

  • 2.4فعال کردن Oxygen 2.4Activating Oxygen

3.ایجاد هدر 3.Creating the header

  • 3.1افزودن صفحات 3.1Add the pages

  • 3.2افزودن اولین الگو 3.2Add the first template

  • 3.3رابط کاربری Oxygen 3.3Oxygen's interface

  • 3.4رنگ‌ها و فونت‌های سراسری 3.4Global colors and fonts

  • 3.5شروع ساخت هدر 3.5Start building the header

  • 3.6افزودن فاصله داخلی و خارجی به لوگو 3.6Add padding and marging to the logo

  • 3.7توجه به ریسپانسیو بودن 3.7Taking care of the responsiveness

  • 3.8افزودن منوی دسکتاپ 3.8Add the desktop menu

  • 3.9بزرگ کردن منو 3.9Make the menu bigger

  • 3.10تنظیم منوی ریسپانسیو 3.10Set up the responsive menu

  • 3.11منوی خارج از بوم (Off canvas) 3.11Off canvas menu

  • 3.12پیش‌تنظیمات منو 3.12Menu presets

  • 3.13محتوای داخلی 3.13Inner content

  • 3.14هدر چسبان و روی هم افتاده (Sticky and overlay) 3.14Sticky and overlay header

  • 3.15مرتب کردن منو 3.15Tidying up the menu.mp4

4.ایجاد بخش قهرمان (Hero section) 4.Creating the hero section

  • 4.1مرکز کردن محتوا در یک بخش 4.1Centering the content in a section

  • 4.2مرکز کردن تصویر پس‌زمینه 4.2Centering the background image

  • 4.3تنظیم محتوای هیرو 4.3Adjusting the hero content

  • 4.4افزودن فاصله خارجی به محتوا 4.4Add the margin to the content

  • 4.5استفاده از پنل تاریخچه 4.5Using the History pane

  • 4.6.سفارشی‌سازی دکمه‌ها 4.6.Customizing buttons

  • 4.7افزودن اسلایدر 4.7Add the slider

  • 4.8تبدیل اسلایدر به عرض و ارتفاع کامل 4.8Make the slider full width and height

5.افزودن بخش خدمات 5.Add the services section

  • 5.1ابتدا ستون‌ها را اضافه کنید 5.1First add the columns

  • 5.2ایجاد اولین آیکون 5.2Create the first icon

  • 5.3کلاس‌ها و شناسه ها (Classes and ids) 5.3Classes and id's

  • 5.4ویرایش کلاس‌ها و شناسه ها 5.4Editing classes and id's

  • 5.5ماژول جعبه آیکون (Icon Box) 5.5The Icon Box module

  • 5.6ریسپانسیو کردن خدمات 5.6Make the services responsive

6.افزودن گالری نمونه کارها 6.Add the portfolio gallery

  • 6.1ایجاد بخش گالری 6.1Create the gallery section

  • 6.2افزودن عنوان‌ها (Captions) 6.2Add the captions

  • 6.3گالری ریسپانسیو 6.3Responsive gallery

7.افزودن بخش درباره ما 7.Add the About us section

  • 7.1ایجاد یک بخش تمام عرض 7.1Create a full width section

  • 7.2افزودن ویدئو 7.2Add the video

  • 7.3افزودن متن و رفع مشکل ریسپانسیو بودن 7.3Adding the text and fixing the responsiveness

8ایجاد بخش قیمت‌گذاری 8Create thePricing section

  • 8.1افزودن اولین جعبه قیمت‌گذاری 8.1Add the first pricing box

  • 8.2افزودن کلاس 8.2Add the class

  • 8.3افزودن تصاویر به جعبه‌های قیمت‌گذاری 8.3Add the images to pricing boxes

  • 8.4افزودن نظرات مشتریان (Testimonials) 8.4Add the testimonials

  • 8.5قرار دادن نظرات مشتریان در یک اسلایدر 8.5Put the testimonials in a slider

9ایجاد فوتر 9Create the footer

  • 9.1قرار دادن فوتر در الگو 9.1Put the footer in the template

  • 9.2افزودن اطلاعات کپی رایت 9.2Add the copyright info

10افزودن صفحه بلاگ 10Add the blog page

  • 10.1افزودن پست‌های بلاگ 10.1Add the blog posts

  • 10.2ایجاد الگوی بلاگ 10.2Create the blog template

  • 10.3افزودن هدر و فوتر به صفحه پست‌های بلاگ ما 10.3Add the header and a footer to our blog posts page

  • 10.4افزودن پست‌های بلاگ 10.4Add the blog posts

  • 10.5سبک‌دهی به پست‌های بلاگ 10.5Style the blog posts

  • 10.6افزودن الگوی پست تکی (Single post) 10.6Add the single post template

  • 10.7افزودن عناصر اصلی پست 10.7Add the post main elements

  • 10.8افزودن محتوای پست 10.8Add the Post content

  • 10.9ایجاد اطلاعات نویسنده 10.9Create the author info

  • 10.10افزودن آیکون‌های شبکه‌های اجتماعی 10.10Add the social media icons

  • 10.11افزودن آخرین پست‌ها 10.11Add the latest posts

  • 10.12تغییر کوئری برای تنظیم آخرین پست‌ها 10.12Change the query to adjust the latest posts

  • 10.13افزودن ماژول دسته‌بندی‌ها 10.13Add the categories module

  • 10.14سبک‌دهی به دسته‌بندی‌ها 10.14Style the categories

  • 10.15افزودن ترنزیشن‌های هاور (Hover transitions) 10.15Add the hover transitions

  • 10.16افزودن نظرات (Comments) 10.16Add the comments

11تنظیم نمونه کارها 11Setting up the portfolio

  • 11.1ابتدا به برخی آماده‌سازی‌ها نیاز داریم 11.1We need some preparations first

  • 11.2ایجاد الگوی صفحه اصلی 11.2Create the front page template

  • 11.3افزودن عناصر هدر 11.3Add the header elements

  • 11.4تغییر چینش و طرح‌بندی 11.4Change the alignment and layout

  • 11.5رفع ریسپانسیو بودن هدر 11.5Fix the responsivenes of the header

  • 11.6قرار دادن اسلایدر زیر هدر 11.6Put the slider beneath the header

  • 11.7افزودن افزونه نمونه کارها (Portfolio plugin) 11.7Add the Portfolio plugin

  • 11.8افزودن نمونه کارها 11.8Add the Portfolio

  • 11.9رفع ریسپانسیو بودن 11.9Fix the responsiveness

  • 11.10افزودن الگوی نمونه کار تکی 11.10Add the single portfolio template

  • 11.11افزودن داده‌های پویا نمونه کارها 11.11Add the dynamic portfolio data

  • 11.12افزودن پروژه‌ها به نمونه کارها 11.12Add projects to the portfolio

12افزودن صفحه تماس با ما 12Add the Contact page

  • 12.1افزودن افزونه‌های فرم تماس 12.1Add the contact form plugins

  • 12.2ساخت صفحه تماس با ما 12.2Build the contact page

  • 12.3افزودن اولین فرم تماس 12.3Add the first contact form

  • 12.4افزودن فرم تماس 7 12.4Add the contact form 7

  • 12.5سبک‌دهی به فرم تماس 12.5Style the contact form

13ایجاد یک وب سایت برای دفتر وکالت 13Create a site for a lawyer's office

  • 13.1بررسی طرح 13.1Explore the design

  • 13.2افزودن آیتم‌های منو 13.2Add the menu items

  • 13.3افزودن الگوی اصلی 13.3Add the main template

  • 13.4افزودن لوگو 13.4Add the logo

  • 13.5افزودن منو 13.5Add the menu

  • 13.6بررسی ریسپانسیو بودن 13.6Check the responsiveness

  • 13.7افزودن عناصر منو 13.7Add the menu elements

  • 13.8افزودن هدر چسبان 13.8Add the sticky header

  • 13.9افزودن اسلایدر 13.9Add the slider

  • 13.10افزودن اولین اسلاید 13.10Add the first slide

  • 13.11اتمام اسلایدر 13.11Finish the slider

  • 13.12افزودن بخش اطلاعات 13.12Add the info section

  • 13.13افزودن متن در ستون‌ها 13.13Add text in columns

  • 13.14افزودن بخش پارالاکس 13.14Add the parallax section

  • 13.15افزودن بخش حوزه‌های فعالیت 13.15Add the practice areas section

  • 13.16افزودن آیکون‌ها 13.16Add the icons

  • 13.17افزودن آیکون‌های باقی‌مانده 13.17Add the remaining icons

  • 13.18بررسی ریسپانسیو بودن 13.18 Check the responsiveness

  • 13.19بخش چرا ما را انتخاب کنید 13.19The why choose us section

  • 13.20متن در ستون‌ها 13.20Text in columns

  • 13.21اتمام بخش 13.21Finish the section

  • 13.22شروع بخش تیم 13.22Start the Team section

  • 13.23افزودن اسلایدها 13.23Add the slides

  • 13.24شروع بخش نظرات مشتریان 13.24Start the testimonials section

  • 13.25افزودن وضعیت قبلی 13.25Add the before state

  • 13.26اتمام نظرات مشتریان 13.26Finish the testimonials

  • 13.27بخش پست‌های بلاگ 13.27The Blog Posts section

  • 13.28سبک‌دهی به پست‌های بلاگ 13.28Styling the blog posts

  • 13.29سبک‌دهی به دسته‌بندی‌ها 13.29Styling the categories

  • 13.30شروع افزودن فوتر 13.30Start adding the footer

  • 13.31افزودن عناصر فوتر 13.31Add the footer elements

خلاصه Summary

  • خلاصه Summary

ویژگی‌های جدید Oxygen Builder Oxygen Builder New Features

  • نحوه استفاده از Css Grid در Oxygen Builder 3.7 How to use Css Grid in Oxygen Builder 3.7

  • نحوه استفاده از عناصر ترکیبی (composite elements) How to use composite elements

به‌روزرسانی Oxygen Builder 4.0 Oxygen Builder 4.0 Update

  • تغییرات رابط کاربری UI changes

  • JSON به جای شورت کدها JSON instead of shortcodes

  • بهبودهای کیفیت زندگی Quality of life improvements

بیایید برای یک هنرمند وب‌سایت بسازیم Let's Create a Website For an Artist

  • این پروژه درباره چیست What this project is about

  • تنظیم سایت Setting up the site

  • تنظیم صفحه اصلی و اولین div ها Set up the Home page and the first divs

  • فاصله دادن عمودی به محتوا Spacing the content vertically

  • افزودن کلاس‌های کاربردی Adding the utility classes

  • بیایید صفحات را اضافه کنیم و ساخت منو را شروع کنیم Let's add the pages and start building the menu

  • بیایید افکت‌ها را به منو اضافه کنیم Let's add the effects to the menu

  • بیایید قابلیت اسلاید شدن را به زیرمنو اضافه کنیم Let's add the sliding functionality to the submenu

  • بیایید لینک‌های اجتماعی را اضافه کنیم Let's Add the social links

  • بیایید ویدئو را اضافه کنیم Let's add the video

  • بیایید برخی از مشکلات فاصله را برطرف کنیم Let's Fix Some Spacing Issues

  • بیایید طرح‌بندی و ویدئو را تمیز کنیم Let's clean up the Layout and the Video

  • بیایید منوی موبایل را اضافه کنیم Let's Add the Mobile Menu

  • بیایید به ریسپانسیو بودن توجه کنیم Let's Take Care of the Responsiveness

  • بیایید الگوی اصلی را اضافه کنیم Let's Add the Main Template

  • بیایید منو را تغییر دهیم Let's Change the Menu

  • بیایید زیرمنو را تغییر دهیم Let's Change the Submenu

  • بیایید محتوای داخلی را اضافه کنیم Let's Add the Inner Content

  • بیایید منو را چسبان کنیم Let's Make the Menu Sticky

  • بیایید الگو را ریسپانسیو کنیم Let's Make the Template Responsive

  • بیایید الگو و صفحه اصلی را تنظیم کنیم Let's Set Up the Template and the Home Page

  • بیایید صفحه بیوگرافی را شروع کنیم Let's Start Doing the Bio Page

  • بیایید الگو را اصلاح کنیم و صفحه بیوگرافی را تمام کنیم Let's Fix the Template and FInish the Bio Page

  • بیایید نمونه کارها را بسازیم Let's Create the Portfolio

  • بیایید نمونه کارهای نمایشگاه‌ها را اضافه کنیم Let's Add the Exhibitions Portfolio

  • بیایید صفحه اخبار را اضافه کنیم Let's Add the News Page

  • بیایید پست‌ها را اضافه کنیم Let's Add the Posts

  • بیایید فرم تماس را اضافه کنیم Let's Add a Contact Form

  • نکات پایانی Final Thoughts

نمایش نظرات

آموزش چگونه وب‌سایت‌های حرفه‌ای در Oxygen Builder بسازیم
جزییات دوره
13.5 hours
146
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
904
4.4 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Dawid Tuminski Dawid Tuminski

طراح، کدنویس و کارآفرین آموزشی.
Adobe Certified Expert in Illustrator که دوره‌هایش در 10 دوره برتر Udemy فهرست شده است.

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

تدریس +30 هزار دانش‌آموز در 160 کشور در سراسر جهان.

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

شعار او: مربیان خسته کننده بدتر از موضوعات خسته کننده هستند!

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