Тёмный

Building an Elementor Starter Blueprint Site 

Jeffrey @ Lytbox
Подписаться 24 тыс.
Просмотров 8 тыс.
50% 1

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/?via=lytbox
🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
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

Хобби

Опубликовано:

 

18 мар 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 112   
@LytboxStudio
@LytboxStudio 3 месяца назад
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.
@user-de2xy6rb9h
@user-de2xy6rb9h 3 месяца назад
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?
@LytboxStudio
@LytboxStudio 3 месяца назад
@@user-de2xy6rb9h 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.
@jaseyarm
@jaseyarm 29 дней назад
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 :)
@bobruis4073
@bobruis4073 3 месяца назад
Its great! Made it for myself aswell a while back. Remember to update your preset / blueprint each month :)
@LytboxStudio
@LytboxStudio 3 месяца назад
Great tip! I like to connect mine to my WP manager (WP Umbrella) to keep updated.
@Etnapol77
@Etnapol77 3 месяца назад
Hello Jeffrey, nice to see you back! 2:21 Yes please!
@LytboxStudio
@LytboxStudio 3 месяца назад
You got it! It's on the list
@thewebstylist
@thewebstylist 3 месяца назад
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.
@LytboxStudio
@LytboxStudio 3 месяца назад
Big 106! 🤟 Thanks and that’s a great idea to make a few ‘starter’ templates. That’s taking the workflow to the next level.
@gabrielk5497
@gabrielk5497 3 месяца назад
Jeffrey, thanks for sharing all your process. These days I was just thinking about this. I love your minimalism!!!
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks! I do love keep thing minimal and clean 😎
@ManuelWillCom
@ManuelWillCom Месяц назад
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.
@LytboxStudio
@LytboxStudio Месяц назад
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 🤞
@payzievrustam
@payzievrustam 3 месяца назад
Letsgooo🔥🔥 So glad to see you back!
@LytboxStudio
@LytboxStudio 3 месяца назад
Ready to kick it off again 💪
@engrfahadkhansurani
@engrfahadkhansurani 3 месяца назад
This is awesome. Thank you!
@LytboxStudio
@LytboxStudio 3 месяца назад
Cool thanks! 😎
@plantifulalexandra
@plantifulalexandra 3 месяца назад
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.
@LytboxStudio
@LytboxStudio 3 месяца назад
Exactly!
@MiStiQueT
@MiStiQueT 3 месяца назад
i was looking for this! very useful
@LytboxStudio
@LytboxStudio 3 месяца назад
So great to hear thanks!
@clementyo4526
@clementyo4526 3 месяца назад
Awesome video Jef ^^
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks Clement!
@NooNaLaluna
@NooNaLaluna 3 месяца назад
Nice one!! 💗
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks!
@NicholasZein
@NicholasZein 3 месяца назад
Welcome back! 💪
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks Nicholos!
@mohammad-omar-07
@mohammad-omar-07 3 месяца назад
You saved my day.
@LytboxStudio
@LytboxStudio 3 месяца назад
Awesome thanks!
@benjah221
@benjah221 3 месяца назад
Hey Jeffrey could you please make an updated video on "Style Guide - Webdesign (Typography)"? Would be awesome
@LytboxStudio
@LytboxStudio 2 месяца назад
Definitely! Got more web design focused videos coming soon!
@benjah221
@benjah221 2 месяца назад
@@LytboxStudiowow would be so amazing, thank you ❤
@rafadiogo95
@rafadiogo95 3 месяца назад
You are the man!
@LytboxStudio
@LytboxStudio 3 месяца назад
💪
@samwillun
@samwillun 3 месяца назад
Very nice to see you back, youtube elmentor guru!
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks! 🙏
@robertsiprak6147
@robertsiprak6147 3 месяца назад
That is great video. Tnx
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks 🙏
@stefanpfadt4353
@stefanpfadt4353 3 месяца назад
Awesome! :)
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks! 🙏
@khairulislamshagar7410
@khairulislamshagar7410 3 месяца назад
Awesome
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks!
@mdqmatias
@mdqmatias 3 месяца назад
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.
@LytboxStudio
@LytboxStudio 3 месяца назад
All in one is a great way to create blueprints. I used this method for years
@jasonstetsonofficial
@jasonstetsonofficial 3 месяца назад
PLZ!!! do one for Local WP!!
@LytboxStudio
@LytboxStudio 2 месяца назад
Haha cool! Added to my list!
@skillswithzain
@skillswithzain 3 месяца назад
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.
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks for the heads up! I thought I had that fixed already. I'll need to investigate it again 😅
@plantifulalexandra
@plantifulalexandra 3 месяца назад
23:05 Same! Sometimes at least. Do you turn off the plugin later?
@LytboxStudio
@LytboxStudio 3 месяца назад
I keep SVG support tunred on becasue I set it up in the settings for better security and performance. It's usful.
@rswebmarketing
@rswebmarketing 3 месяца назад
Clamp is good but depending on what font you use, the sizes could be totally different. So it seems hard to process this step.
@LytboxStudio
@LytboxStudio 3 месяца назад
I start with REM and then it’s optional to convert into clamp. It’s still totally fine to use REM 😉
@diogos7233
@diogos7233 2 месяца назад
What software program do you use to create that ripple effect on mouse click? That's awesome.
@LytboxStudio
@LytboxStudio 2 месяца назад
Screenflow for the screen recording does it
@user-go8ub6nd7e
@user-go8ub6nd7e 3 месяца назад
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 😄
@LytboxStudio
@LytboxStudio 2 месяца назад
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.
@adywiles5132
@adywiles5132 3 месяца назад
Anyone know the left had slide out panel app Jeffrey is using to reference bookmarks, it looks useful.
@LytboxStudio
@LytboxStudio 3 месяца назад
That's the Arc Browser. It's awesome!
@adywiles5132
@adywiles5132 3 месяца назад
@@LytboxStudio thanks Jeffrey, great tutorials by the way ...fantastic workflow too. Lovin it ..cheers.
@LytboxStudio
@LytboxStudio 3 месяца назад
@@adywiles5132 thanks! 🙏
@catbraintech
@catbraintech 3 месяца назад
I was 100th like hehe
@LytboxStudio
@LytboxStudio 3 месяца назад
That’s a special like!
@pezreloaded8436
@pezreloaded8436 3 месяца назад
Great video! What was the site you were using for clamp?
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks Pez! Here's a link to the clamp calculator (btw Imran has one on his site too 😉) chrisburnell.com/clamp-calculator/
@pezreloaded8436
@pezreloaded8436 3 месяца назад
@@LytboxStudio Thanks for sharing!
@absoftcompany
@absoftcompany 3 месяца назад
nice video
@LytboxStudio
@LytboxStudio 3 месяца назад
Thanks! 🙏
@SmithyProductions
@SmithyProductions 2 дня назад
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!
@koentag84
@koentag84 3 месяца назад
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?
@LytboxStudio
@LytboxStudio 3 месяца назад
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.
@gabrielk5497
@gabrielk5497 3 месяца назад
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!
@LytboxStudio
@LytboxStudio 2 месяца назад
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.
@gabrielk5497
@gabrielk5497 2 месяца назад
@@LytboxStudio thanks for your kind answer.
@ak47marx16
@ak47marx16 3 месяца назад
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?
@LytboxStudio
@LytboxStudio 3 месяца назад
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.
@kirk59
@kirk59 3 месяца назад
Anyone advise on how to import the blueprint into instawp?
@LytboxStudio
@LytboxStudio 3 месяца назад
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.
@TakuapaFriends
@TakuapaFriends 3 месяца назад
why not use happy files for media, posts, cpts etc? :)
@LytboxStudio
@LytboxStudio 3 месяца назад
Great question. I've started using Happy Files a year ago and added it to my blueprint!
@marc3858
@marc3858 2 месяца назад
What is a child theme for and how to use it properly?
@LytboxStudio
@LytboxStudio 2 месяца назад
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.
@leebarnes9486
@leebarnes9486 3 месяца назад
how does this work if i want to turn my site into a multisite? Im running into issues with that
@LytboxStudio
@LytboxStudio 2 месяца назад
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
@KevinTunis
@KevinTunis 3 месяца назад
Jeffrey, what Elementor Pro license do you need to set this up?
@LytboxStudio
@LytboxStudio 3 месяца назад
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.
@KevinTunis
@KevinTunis 3 месяца назад
@@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.
@scottaucutt7262
@scottaucutt7262 2 месяца назад
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?
@LytboxStudio
@LytboxStudio 2 месяца назад
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.
@UsamaNawazMujaddadi-yy3eb
@UsamaNawazMujaddadi-yy3eb 3 месяца назад
Can anyone tell me what browser he's using.
@user-go8ub6nd7e
@user-go8ub6nd7e 3 месяца назад
Arc Browser :)
@wordpressjunkie8830
@wordpressjunkie8830 3 месяца назад
We got 100 likes, I'd like to check out your template please
@LytboxStudio
@LytboxStudio 3 месяца назад
I just added it in the pinned comment at the top of the comments!
@KaifShaikhTaufiq
@KaifShaikhTaufiq 3 месяца назад
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
@LytboxStudio
@LytboxStudio 2 месяца назад
Good idea if you are using design templates to create quick sites.
@pixelfacepirate
@pixelfacepirate 3 месяца назад
Why do you turn off Google Fonts?
@LytboxStudio
@LytboxStudio 3 месяца назад
Always download Google fonts and install on the site. It’s better for performance and GDRP compliance.
@pixelfacepirate
@pixelfacepirate 3 месяца назад
@@LytboxStudio Thank you. I appreciate you sharing that with me.
@pixelfacepirate
@pixelfacepirate 3 месяца назад
@@LytboxStudio Do you happen to have any content that talks about best practices for keeping inodes on servers at a minimum?
@LytboxStudio
@LytboxStudio 3 месяца назад
@@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.
@pixelfacepirate
@pixelfacepirate 3 месяца назад
@@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.
@fabrictexture4767
@fabrictexture4767 3 месяца назад
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.
@LytboxStudio
@LytboxStudio 3 месяца назад
I don’t understand. Please provide more context and explain clearly.
@campusconnecttv170
@campusconnecttv170 3 месяца назад
100 likes
@LytboxStudio
@LytboxStudio 3 месяца назад
Much 💖! I added a link to my blueprint site to clone in the top comments. Look for the pinned comment in the top!
Далее
ШАР СКВОЗЬ БУТЫЛКУ (СКЕРЕТ)
00:46
How to SEO Optimize Your Elementor Headers & Menus
17:33
Stop selling info and do this instead
12:35
Просмотров 113 тыс.
Elementor Tutorial - Flexbox vs Grid Container Layout
16:10
Стильная упаковка
0:14
Просмотров 1,5 млн
Pulling Hinges with A Halligan
0:26
Просмотров 20 млн