PSD to WordPress Website Design with Elementor - Urdu & Hindi Tutorial
ฝัง
- เผยแพร่เมื่อ 11 พ.ย. 2020
- Welcome to another in-depth tutorial of #Elementor Web Design with #WordPress #PSDtoWP. In this tutorial, we will create a website design from a PSD template.
I will explain everything you need to know for converting Photoshop designs into actual websites using the most powerful page builder for WordPress.
🛒 Get this ready-made template: buy.paddle.com/product/636615
📦 Download PSD File: wpacademy.pk/psd-to-wp-download/
-----------------------------------------------------------------------------
🛠 Tools & Resources Used in This Tutorial
-----------------------------------------------------------------------------
✅ Elementor ➡ wordpress.org/plugins/elementor/
✅ Header, Footer & Blocks ➡ wordpress.org/plugins/header-...
-----------------------------------------------------------------------------
🛠 Assets and CSS Code
-----------------------------------------------------------------------------
📄 CSS Code: git.io/JkLKs
📦 Images/Icons: drive.google.com/file/d/1LBkB...
-----------------------------------------------------------------------------
🙌 Support This Channel by Buying Stuff Below
-----------------------------------------------------------------------------
✅ Elementor Pro: bit.ly/2LQcfyD
✅ Best WordPress Hosting ➡ wpacademy.pk/go/cloudways
✅ Cheap Domain & Hosting ➡ wpacademy.pk/go/nc
✅ Super Fast Managed Cloud Hosting ➡ wpacademy.pk/go/cloudways/
✅ Best Elementor Addons ➡ wpacademy.pk/go/crocoblock
✅ Envato Elements ➡ wpacademy.pk/go/envato-elements
-------------------------------------------------------------
👨👩👦 JOIN OUR SOCIAL COMMUNITY:-
-------------------------------------------------------------
Facebook Page: / wpacademypk
Facebook Group: / wpacademy.pk
Forums: wpacademy.pk/forums
![เจอประจำ ตอน พักเที่ยง [EP.32]](http://i.ytimg.com/vi/jvqk6uJoVks/mqdefault.jpg)
![ตีสิบเดย์ [FULL] | คู่รักแซฟฟิก "หลิงหลิง - ออม" จากซีรีย์ "ใจซ่อนรัก"](http://i.ytimg.com/vi/zs8AfphGn2w/mqdefault.jpg)
I'm a Nigerian in West Africa, I have no idea of the language, but man, your tutorial was the best tutorial have ever seen. very easy to understand by just listening with my EYES. very good... I'm going to subscribe and click the like button its shows that even if i don't understand the language, i can still learn with my eyes. thanx WP academy. I might have to start teaching web design in my language with my people instead of English, i think they will understand and learn better. every time u say OK, i know you've done with that part.
I am really glad to hear that I am being helpful to the people who speaks other languages.
@@WPAcademyPK Thanks, keep them coming, it's very insightful.
@@WPAcademyPKTime stamp please 🥺
So clean and pure tutorial in desi language. And finally find the way to convert psd. Cdr. Ai. Figma, xdfiles in webpage manually. May Allah bless you brother. Love from Mumbai India.
I normally prefer to watch English lessons but hats off to you sir. So much valuable knowledge was in this video plus the native Urdu language. No words for you brother!
Can you make a separate detailed video on Additional CSS in elementor?
Best Tutorial Ever Sir!
Jazak-Allah-Khair.
From Mianwali (Punjab Pakistan) So much valuable knowledge was in this video plus the native Urdu language. No words for you brother.
one of the best WordPress-elementor tutorial. Thank you:)
Thank you sir for creating this awesome information video on elementor, I get to know lots of things how to make accurate design from PSD to Wordpress. Full describe from start to core end.
Glad it was helpful!
@@WPAcademyPK is it mobile responsive
Thank you I am following you since 4 years now from other ids and you create great tutorials. Can you create tutorial of Theme option panel with Elementor and also tutorial for themeforest market place?
Thank you so much sir .. finally i got some quality content ...
I loved watching this tutorial. This is undoubtedly the best one.
Sir may tou bus ak he baat karoo ga k is say acha or koi nahi samjha sakta jis tarhan ap nay samjhaya kasam say Big FAN love ho ap .........😍😍😍😍😍😍😍😍😍
Amazing really such a nice tutorial, step by step explain everything superb ;)
Amazing content Sir really I appreciate your efforts
Amazing video! I learnt a lot.
My best teacher❣
It's a great tutorial for designing the website from a PSD template using the elementor pro...!
Glad you think so!
awesome tutorials brother :) 😍😍
Thanks for the shearing valuable knowledge free of cost Boss
My pleasure
Brilliant Tutorials！😀 thank you
thanks bro😍
from bangladesh🇧🇩
Thank you very much Bro very informative 👍👍
thanks brother for creating this .and last series of 9 video job portal.can you please make a detailed series on wordpress speed optimization specially page speed insight related.thanks
Okay sure
thanks to creating this kind of content i learne and update my skills alote thanks sir
Glad to hear that
Best lecture so far
Nice but....it's only looks the same if someone using same screen width/ height monitor... :)
If you set the image "cover" it will look different, if you set "contain" it will show padding on the sides on bigger screen.
sir image box ma jo custom button add karna ta wo nahi kia. pir af na 1 by 1 image heading text our button la li...
our baki ap na bohot acha samjaya thanks you..
Super tutorial as i am beginer.
you are great sir.
Excellent bhai
Very helpful. Thanks for making this video.
Glad it was helpful!
Sir kamal kr dia Sir
Sir you are great
your Videos Are Awesome ... Can you tell me how to make a theme like ThemeForest ???? Please Reply
awesome man! Thank you
Happy to help!
kya psd to wordpress convert krna pr home or about pr link lag skta hai?
Good work👍👍
Assalam o alikum sir ui or psd sy wordpress main lany ky liye kisi kisam ki coding to nai zaroorat hoti rply plzzzzz
Thanks, bro this is the perfect tutorial for us
Glad you like it
Thanks Bro. its really very helpful
Always welcome
Good knowledge
very informative tutorial. Very well explained..
Glad it was helpful!
Can you share psd file 🙏
Hello i Have a problem Header add krne pr Extra height ke sath create ho rha h
Awesome tutorial!
Glad you liked it!
Good video as always
i have a problem, my wordpress section (blue control bar ) flip upside, please reply me how to fix this
Great sir
sir code ke through css leekhna bhut difficult ho jatha ha if using underscore
Thanks bro♥♥
I have a question for you, sir. The top menu where you added the phone number etc. Why don't you use the height of that rectangle? It's a genuine question from my side. You can find the height of that rectangle, right in Photoshop?
.wpac-services-box: where is this class come from can some one explain beacuse in css its only use a hover if you put on paragrap use like this p:hover but where is this come from .wpac-services-box:
Boas yeh advance wordpress kya hot hai
style ky andar content ko text align left krny sy left ho jae ga (latest news waly section mae )
Sir,practice ke liy psd kahase dawnlod kre
Apke pas Kon sa Photoshop version hai?
Good video
Sir ji what about the responsiveness of the webpage
Sir road map bat de WordPress ka k beginners ko kya aana chahiye, intermediate ko kya or expert ko kitni WordPress aani chahiye
primary font set in wordpress 51:56 😊
custom Css is not working for me.anyone can help me out?
design k leay psd khn se lete hn ???
use what theme wp
bhai iss ko mobile responsive b kar dena tha?????????????
Sir is it responsive on mobile
assalam o alikum sir bring more full website design videos using adobe XD or figma and make full tutorials please not speed art we are beginners and want to earn money for my family so please help us to make full videos like this jazakAllah
psd file for practice?
use what theme
Testimonial vala caurisol tha vo custom me js se banake add kase kar sakte he wordpress mee🤔🤔 batana
You can create custom widgets with your HTML, CSS & JS th-cam.com/video/ks9YEIyjZhg/w-d-xo.html
sir photoshop toh nahi hai ,Gimp se chal jayega??
photoshop cs6 o cc?
Very Nice
Thanks
Excellent
Thanks
Good learning for me!
Glad to hear that!
i am facing problem in site logo
sir psd to wordpress kya hamain adobe photoshop seekna zarori he?
and
ya srf adobe photoshop software install karna zaroori he
You also need to learn the basics of Photoshop.
Love from Pakistan.
1:25:57 apne kaha mainne by default padding lagai hai us element pr wo padding kya hai 3 din hai main isi section main atak gaya hn🤔
Dear, at first I added padding on hover .wpac-service-box:hover .elementor-image { padding: 15px } but later I moved the padding to the .wpac-service-box .elementor-image (main element without hover)
@@WPAcademyPK thank you so much ❤️now I correct it
Mobile responsive ?
Sir psd download nhi hu Raha
Can you make a full video on photoshop which mainly use in psd to html
I suggest you to learn photoshop from the experts, i am a web developer myself and i use photoshop rarely. There are many great design related channels, they teach Photoshop/Illustrator/Figma better than me.
Thanks bro
Learn so many new things
Sir hrr page k liye menu kaise Bana sakte hai Jo usi page k liye use ho sake home page pr to main menu chalega lekin other page k liye alag se menu kaise Bana Sakta hai
You need to create multiple headers, each one for a specific page.
Sir iske liye konsa plugin hai
@@WPAcademyPK sir konsa plugin use kre
@@mukeshrajput3171 same plugin jo is video mein use kia hai Header, Footer & Blocks wala
Sir wordperess ko as a career lai kar chalnai kai lye sath kn s language ani chye please reply sir
PHP, JavaScript.
@@WPAcademyPK thankx sir
Mobile Responsive?
Bhai Adobe photoshop k bhi tutorial banao.... Logo banana or posters waghaira banana sikhao
Graphics Designing is not my field of expertise. Please visit GFX Mentor channel.
Sir how do you copy psd text to elementor? I tried it but not copying 🙄
Press T, then click on text, CTRL + A, CTRL + C, CTRL + V
@@WPAcademyPK thank you i will try👍
is this the free version of elementor ??
Hey, could you please help me? I made the payment to get the file. I did not receive the Photoshop file. Could you please help me?
The payment is for the ready template for Elementor, not the PSD.
Asalam o alaikum,
thank you sir. but Confusion hai 1:25:56 by default pading kese lagai?
Custom CSS jo hum ne apply ki hai us k through. Aap CSS code copy kr k us mein check krain.
Copy paste kya Css phir bhi mouse hover par nexhe wali row bhi down hoti 1 jagha par stick nhi rehti please sar help
How to download psd file....when i have click on your given link... after that i am doing login through gmail..... but i have no any option for download psd file...plz help me
The file is available, you must log in to download the file.
@@WPAcademyPK Thank You sir....apke chanel se hi wordpress development sikh rha hu... I am from Delhi... Thanks for helping me
Mere paas bhi psd hai lekin jab main logo par click karti hu tab wo select nahi hota jaise aapka hota hai@wp academy
Try CTRL + CLICK
@@WPAcademyPK thank you ☺️ also i have to click on checkbox of show transform controls👍
how to make psd in photoshop...plz make a video for this
Please watch some Photoshop related tutorials, that's not our field of expertise
How to change my themes in my WordPress
Go to Appearance > Themes
It will be more helpful if you can provide us all images for practises
Assets link is available in the video description
@@WPAcademyPK tnq u
20:00
Long story short i just wanna make it long 😂😂
1:15:07
1:44:50
Hello
Please PSD file
bro you have a toon of video but still get low view, u need to change to english bro, and make more video about elementor please i love it
Yes, shifting slowly towards english tutorials.