Building an Elementor Starter Blueprint Site
HTML-код
- Опубликовано: 31 дек 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy....
Setting up an Elementor starter blueprint site can help speed up your workflow by reducing repetitive tasks when building a new WordPress site.
Checkout InstaWP for a workflow solution and get 20% off with coupon code JEFFREY20 👉 instawp.com/?v...
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy....
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy....
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy....
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy....
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy....
xCloud:
lytboxacademy....
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy....
Breakdance Builder:
lytboxacademy....
Bricks Builder:
lytboxacademy....
Crocoblock:
lytboxacademy....
SEOPress (the best SEO tool for WordPress!):
lytboxacademy....
Perfmatters:
lytboxacademy....
InstaWP:
lytboxacademy....
WP Umbrella:
lytboxacademy....
/////
TIMESTAMPS:
1:04 Step 1 - Selecting a WordPress Staging Environment
2:34 Step 2 - Setting Up WordPress
6:45 Step 3 - Setting Up Elementor
21:52 Step 4 - Adding Your Plugin Stack
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorblueprint
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
![The Ultimate FREE WordPress Speed Optimization Plugin 🚀 [Airlift]](/img/1.gif)
Thank you all for the 100+ likes 💖 Here is my Elementor Starter site free to use and make it yours!
Link to spin up the site and and clone - app.instawp.io/launch?t=the-lytbox-elementor-blueprint-1&d=v2
It's all free, no strings attached. Use as you like. To clone the starter site:
1. Use InstaWP and clone to your own templates
2. Use All in One Migrate or other migration tool to clone and use on your own staging environment.
Hi, thanks for your work. In the video you set the typography in viewport-based clamped values and in the template I found only in rem and em units. Why?
@@СергейБондаренко-ф9б whenever starting a new site, I need to adjust the desktop and mobile fonts sizes for the design. I start adding rem in desktop and mobile to quickly make adjustments then when I got my sizes down, I can turn into clamps. It’s quicker than adjusting a clamp.
very kind of you mate. you're a true sharer :)
i am gonna have a go at installing this. i thought the video was great, so this should be a real asset. thanks again buddy :)
why have you created header snippets in custom code option? what is the use of it? it will be very kind of you
@@Genzhero2024 Some snippters like google verification and analytics goes inside of the head snippets. Then there are others that go in the footer like javascript. This would be a good video explaining which snippets goes where.
Hello Jeffrey, nice to see you back!
2:21 Yes please!
You got it! It's on the list
i think you deserve more likes bro. very detailed video, nice speed. some how developers do make informative videos but they actually explain way too much so sometimes we forget what did we just watched because whoever is here definitely would know some basics , so i loved the idea of skipping the basics and getting right into the important stuff we're all here for.
love from Pakistan
Its great! Made it for myself aswell a while back. Remember to update your preset / blueprint each month :)
Great tip! I like to connect mine to my WP manager (WP Umbrella) to keep updated.
Very nice to see you back, youtube elmentor guru!
Thanks! 🙏
First time watching your videos. I like it! Greetings from Argentina.
Jeffrey, thanks for sharing all your process. These days I was just thinking about this.
I love your minimalism!!!
Thanks! I do love keep thing minimal and clean 😎
Luv your process bro annnnd Like 106th! I’ve got 4 of my own saved ‘templates’ and start most site designs w importing one of their zip files w All In One Migration pro plugin, indeed our starter sites save sooo much time.
Big 106! 🤟 Thanks and that’s a great idea to make a few ‘starter’ templates. That’s taking the workflow to the next level.
@@LytboxStudio I've been using Duplicator plugin all along and was wondering if All in One Migration is simpler?
@@andonisr It’s been years since I tried Duplicator. From what I remember, I went with All In One Migrate because it was an easier process but I still don’t know who Duplicator has changed throughout the years. They both basically clone sites that can be used for migrations.
Thanks for that! I would love to see your take on setting up padding classes for your containers. this takes a huge chunk if not most of the time when building out a site in Elementor. Have tried a few systems but i always fall back to manually adjusting a lot.
Classes on containers is def the way to go for speeding up a workflow. It'll also keep the code cleaner. It's been rumored that Elementor is working on a class feature like in Bricks. Fingers crossed 🤞
Letsgooo🔥🔥 So glad to see you back!
Ready to kick it off again 💪
This is awesome. Thank you!
Cool thanks! 😎
i was looking for this! very useful
So great to hear thanks!
Yes, that's great, I did a similar thing, also with the font styles because it's such a pain to set it up. You can still make changes if it doesn't work for your font.
Exactly!
Anyone know the left had slide out panel app Jeffrey is using to reference bookmarks, it looks useful.
That's the Arc Browser. It's awesome!
@@LytboxStudio thanks Jeffrey, great tutorials by the way ...fantastic workflow too. Lovin it ..cheers.
@@adywiles5132 thanks! 🙏
Awesome video Jef ^^
Thanks Clement!
Welcome back! 💪
Thanks Nicholos!
Hey Jeffrey could you please make an updated video on "Style Guide - Webdesign (Typography)"? Would be awesome
Definitely! Got more web design focused videos coming soon!
@@LytboxStudiowow would be so amazing, thank you ❤
23:05 Same! Sometimes at least. Do you turn off the plugin later?
I keep SVG support tunred on becasue I set it up in the settings for better security and performance. It's usful.
Hey Jeff I understand the way you use the global fonts but there's one problem: when you don't set up the default text and h-tags the client won't have any styling when writing a blog and selecting styles. Or am I missing something?
Good question. The only time setting up Typography Styles makes sense is with blogs but the impacts the entire website and harms SEO. Best way for us to set up clients is to create Global Fonts and test the client how to use these and how to select the write H tags with their headers. And then for the blogs is for us to create a single post template and style it up once with CSS. The client only needs to add their content in Gutenberg for blogs and not need to worry about styling. I have a video on my list to share this strategy and CSS framework for blogs. I wrote one and reuse on all my client sites and saves a lot of time. That’ll be out soon.
Great video! What was the site you were using for clamp?
Thanks Pez! Here's a link to the clamp calculator (btw Imran has one on his site too 😉) chrisburnell.com/clamp-calculator/
@@LytboxStudio Thanks for sharing!
Do the plugins update to their latest versions within the template? Also is there a way to do this with Siteground as my host? Thanks!
Nice one!! 💗
Thanks!
What software program do you use to create that ripple effect on mouse click? That's awesome.
Screenflow for the screen recording does it
That is great video. Tnx
Thanks 🙏
what website builder/manager do yo use?
Hi Jeffrey! On Content Width setup did you experience with VW instead of REM? Would like to know your thoughts about VW on this situation.
Thanks!
Good question. I never use VW for container width because it doesn't fit my design system. I set a width to my container and all of my elements are carefully structured and styled to fit it just right. And then with side paddings I can make sure I have the right paddings for responsiveness. I use rem instead of px so it's relative for accessible tools. I wouldn't say using VW is wrong, just that to make sure your design system can work with the fluid width changes and remove the VW when getting to tablet widths because it'll cause design issues.
@@LytboxStudio thanks for your kind answer.
You saved my day.
Awesome thanks!
Hi Jeff, Nice to see you again! Btw, I have a question, Why did you not set up Typography by default? How do you set up a font for the blog purpose like H1-H6? IMHO, if you have not set up typography, the single blog uses the default font system not font from the design system. Need enlightenment 😄
Good question and this is a WordPress challenge. If you set up Typography style for H1-H6 only for the purpose of the blog, it'll effect the whole site and then we need to override the styles for the entire site. It's not a good thing to have to override CSS styles.
A way to keep your code cleaner and prevent issues is to write the CSS for the blog styles. I have a video coming up on this with my CSS template I use for my blogs. It'll explain more and make it easy even for non-coders to style up single post templates.
What happened to your fonts at 26:25?
You are the man!
💪
Hey Jeffrey!
I have visited your website and it's really beautiful & attractive🔥
But these is an issue, that cookies pop-up cause an vertical scroll (in mobile) which not looks good.
Thanks for the heads up! I thought I had that fixed already. I'll need to investigate it again 😅
PLZ!!! do one for Local WP!!
Haha cool! Added to my list!
how does this work if i want to turn my site into a multisite? Im running into issues with that
I haven't tested multisite yet but InstaWP does have a multisite option. You can give that a try and the Insta team is very responsive with support
Interesting, thanks for the info. If you set content width 1280 does that mean, that people with 1280px wide laptops will not see any padding from the sides and the logo and content is stuck to the screen side? I noticed 8% in my country use 1280px resolution screens so I should stick to elementors 1140px?
Good question. Your outer container should have padding inside of it. I usually use 40-80 pixel padding on the sides for desktop and 20px in the sides for mobile (converted to rem)
Even if you set at 1140px, you'll run across the same issues with smaller screens like iPads and Chromebooks. That's why we need padding in the outer containers.
Hi again and thank you so much for the tips and free template.
I just wanted you to know that the export through the plugin came to about 156mb. When trying to import using the same plugin, it tells me the free version only supports imports up to 12mb :-) I then tried Duplicator, (installed it, exported ), but while the installation went fine, I cannot access the front-end of the site...! Bummer..!!!
Do you mean the front end or back end. If it’s the backend (dashboard) here’s the fix, duplicate the blueprint in InstaWP and change the email and password before migrating it with Duplicator.
@@LytboxStudio Hi, it's the front end that cannot be accessed. Any idea what can be causing it? Also, is the back up limit just 12mb with the other plugin?
Cheers 😎
@@andonisr what are you seeing in the front end?
@@LytboxStudio Oh I've now given up on it as I did the installation twice and I just saw a while screen with just the wordpress customise menus at the top. It's weird, it's like it loads all WP editing tools at the top and none of the content.
I thought it was something to do with Duplicator and the AIOMigration plugin, so I even deleted the later. Nothing, still no content.
So now I installed a fresh WP and started tweaking settings from the start.. 😨😉
@@andonisrit’s supposed to have a white screen in the front. It’s a blank site with all the plugins and set ups completed to start building faster. It’s a white screen all set up to start building. You misunderstood what a blueprint site is for.
I have made this but i have a file of all in one always ready to upload to any fresh wp installation and boom, all my blueprint it's there.
All in one is a great way to create blueprints. I used this method for years
What is a child theme for and how to use it properly?
Great question. A child theme is a safe way to add code to your website. If you edit code in your parent theme, it'll all be removed in the next theme update. A child theme will keep your code even after updates. It's a good practice to add child themes even if you aren't editing or adding code to your theme because that could change in the future.
How come you use t-shirt sizes for your fonts and not title tags like H1, H2, etc? Isn't that more confusing when you are troubleshooting SEO? 🙂
H tags are not for font sizes. They are the content hierarchy. Using H tags based on font sizes is bad for SEO. I explain it all here - ruclips.net/video/PYIZhsW__iQ/видео.htmlsi=1dx6Ter8fpPdrqUw
Jeffrey, what Elementor Pro license do you need to set this up?
To get the full features of Elementor we need the advanced on up. Free version is way too limited and you’ll need many plugins to compensate and the new Essentials plan is also a deal breaker for me without dynamic data.
@@LytboxStudio In the video where you demonstrate installing Elementor Pro, you activate it and add your license. It appears that with each new project spin-up, I am going to have to purchase a new license for each.
I have a question about uploading fonts into Elementor vs just turning on the use Google fonts option. If I am using the fonts from Google anyway, why take all that time to download the Google font, upload and designate all the versions you want to use in your Elementor site? It just seems like a lot of time wasted for very little benefit. Is there something I'm missing?
Good question. The thing is it's a very big benefit. It keeps your site GDPR and privacy compliance and has a big impact on the performance. Well worth the time to do things right.
Awesome
Thanks!
Clamp is good but depending on what font you use, the sizes could be totally different. So it seems hard to process this step.
I start with REM and then it’s optional to convert into clamp. It’s still totally fine to use REM 😉
@@LytboxStudio ..and you'd use REM for more responsiveness sake???
@@andonisr great question! It’s more for accessibility’s sake. REM adjusts when the screen is zoomed in.
Anyone advise on how to import the blueprint into instawp?
I added a link to my blueprint in the pinned comment in the top. If using InstaWP, create a staging site, then go to templates, create a new template and use the staging for the template.
Can anyone tell me what browser he's using.
Arc Browser :)
nice video
Thanks! 🙏
why not use happy files for media, posts, cpts etc? :)
Great question. I've started using Happy Files a year ago and added it to my blueprint!
Awesome! :)
Thanks! 🙏
I was 100th like hehe
That’s a special like!
Why do you turn off Google Fonts?
Always download Google fonts and install on the site. It’s better for performance and GDRP compliance.
@@LytboxStudio Thank you. I appreciate you sharing that with me.
@@LytboxStudio Do you happen to have any content that talks about best practices for keeping inodes on servers at a minimum?
@@pixelfacepirate I'm more of a front-end and design guy. I got some awesome devs in the Lytbox Pro Community that specialize in server and backend best practices.
@@LytboxStudio I'd be interested to learn more about just being a front end design guy. Currently, all my clients were interested in having their site hosted for them. So I use siteground and hostinger to host their sites for a fee.
What about a blueprint site, and a component site
Having all the loop templates, card, different styles of header, footer and mostly repeated conponents
Why a different component site, we don’t need unsed templates on our new site
Just copy paste or import export the template
Good idea if you are using design templates to create quick sites.
We got 100 likes, I'd like to check out your template please
I just added it in the pinned comment at the top of the comments!
jeff its look like you going to miss the train. It is not a biggner elementor tutorial, it is wise to name this tutorial, how to make a video tutorial to get 47 marks out of 100. Isnt It?
if you are not agree I will time stamp here jeff.
Anyway take my comment possitivly.
I don’t understand. Please provide more context and explain clearly.
100 likes
Much 💖! I added a link to my blueprint site to clone in the top comments. Look for the pinned comment in the top!