Figma to WordPress: آموزش طراحی و ساخت وب سایت

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

معرفی Introduction

• معرفی Introduction

Figma Basic Figma Basic

• مزایا و معایب ابزار طراحی Figma Pros and cons of Figma design tool

• یک حساب کاربری Figma و راهنما ایجاد کنید Create a Figma account and walkthrough

• قاب و شبکه فیگما Figma frame and grid

طراحی اول First Design

• بخش قهرمان نمونه ایجاد کنید Create sample hero section

• رنگ ها و تصویر پس زمینه را اضافه کنید Add colors and background image

• بخش های مختلف قهرمان ایجاد کنید Create different hero sections

پروژه اول First Project

• محدوده پروژه را درک کنید Understand the project scope

• طرح های الهام بخش را برای ایجاد تابلوی خلق و خو پیدا کنید Find designs inspirations to create mood board

• تابلوی خلق و خو را ایجاد کنید Create the mood board

• طرح‌های انتخاب‌شده تابلوی خلق و خو را در یک فریم بچینید Arrange selected mood board designs to single frame

• یک تابلوی خلق و خوی برای مشتری طراحی وب ایجاد کنید: ویدیوی جایزه Create a mood board for web design client : bonus video

• تایپوگرافی و رنگ ها را انتخاب کنید Select typography and colors

• ایجاد کتابخانه Figma Create Figma library

طراحی سایت Design Website

• طراحی منوی اصلی Design main menu

• طراحی بخش قهرمان Design the hero section

• بخش دستاورد را ایجاد کنید Create the achievement section

• بخش about را طراحی کنید Design the about section

• بخش تجربه را ایجاد کنید Create the experience section

• اضافه کردن بخش خدمات Add service section

• بخش توصیفات را ایجاد کنید Create the testimonials section

• افزونه Font Awesome icons را اضافه کنید Add Font Awesome icons plugin

• افزودن بخش تماس Add contact section

• ایجاد بخش فوتر Create footer section

• طرح بندی وب سایت را تنظیم کنید Adjust layouts of website

راه اندازی وب سایت وردپرس Setup WordPress website

• هاست رایگان دریافت کنید و وردپرس را نصب کنید Get Free Hosting and Install WordPress

• پاکسازی وب سایت وردپرس Cleanup wordpress website

• تم و افزونه ها را نصب کنید Install theme and plugins

تبدیل طرح Figma به وب سایت وردپرس Convert Figma design to WordPress website

• طراحی بخش figma hero با استفاده از المنتور Design figma hero section using elementor

• اضافه کردن محتوا به بخش قهرمان Add Content to Hero Section

• موقعیت ها را تنظیم کنید Adjust the Positions

وب سایت نمونه کارها را بسازید Build the Portfolio Website

• منو را طراحی کنید Design the Menu

• بخش صفحه اصلی را پیکربندی کنید Configure the Home Page Section

• Build the Hero Section Part 01 Build the Hero Section Part 01

• Build the Hero Section Part 02 Build the Hero Section Part 02

• رفع مشکل تصویر قهرمان Fix Hero Image Issue

• بخش اطلاعات من را ایجاد کنید Create My Info Section

• ایجاد بخش درباره من Create About Me Section

• طراحی بخش تجربه من Design My Experience Section

• بخش خدمات طراحی Design Services Section

• بخش گواهی طراحی Design Testimonial Section

• ساخت بخش تماس Build Contact Section

• بخش پاورقی طراحی Design Footer Section