Building an Elementor Starter Blueprint Site

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
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 High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
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

[@LytboxStudio]

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]

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]

@@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]

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 :)

[@Etnapol77]

Hello Jeffrey, nice to see you back! 2:21 Yes please!

[@LytboxStudio]

You got it! It's on the list

[@payzievrustam]

Letsgooo🔥🔥 So glad to see you back!

[@LytboxStudio]

Ready to kick it off again 💪

[@gabrielk5497]

Jeffrey, thanks for sharing all your process. These days I was just thinking about this. I love your minimalism!!!

[@LytboxStudio]

Thanks! I do love keep thing minimal and clean 😎

[@engrfahadkhansurani]

This is awesome. Thank you!

[@LytboxStudio]

Cool thanks! 😎

[@bobruis4073]

Its great! Made it for myself aswell a while back. Remember to update your preset / blueprint each month :)

[@LytboxStudio]

Great tip! I like to connect mine to my WP manager (WP Umbrella) to keep updated.

[@mohammad-omar-07]

You saved my day.

[@LytboxStudio]

Awesome thanks!

[@rafadiogo95]

You are the man!

[@LytboxStudio]

💪

[@MiStiQueT]

i was looking for this! very useful

[@LytboxStudio]

So great to hear thanks!

[@NicholasZein]

Welcome back! 💪

[@LytboxStudio]

Thanks Nicholos!

[@clementyo4526]

Awesome video Jef ^^

[@LytboxStudio]

Thanks Clement!

[@samwillun]

Very nice to see you back, youtube elmentor guru!

[@LytboxStudio]

Thanks! 🙏

[@NooNaLaluna]

Nice one!! 💗

[@LytboxStudio]

Thanks!

[@robertsiprak6147]

That is great video. Tnx

[@LytboxStudio]

Thanks 🙏

[@plantifulalexandra]

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]

Exactly!

[@khairulislamshagar7410]

Awesome

[@LytboxStudio]

Thanks!

[@thewebstylist]

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]

Big 106! 🤟 Thanks and that’s a great idea to make a few ‘starter’ templates. That’s taking the workflow to the next level.

[@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]

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 🤞

[@stefanpfadt4353]

Awesome! :)

[@LytboxStudio]

Thanks! 🙏

[@absoftcompany]

nice video

[@LytboxStudio]

Thanks! 🙏

[@benjah221]

Hey Jeffrey could you please make an updated video on "Style Guide - Webdesign (Typography)"? Would be awesome

[@LytboxStudio]

Definitely! Got more web design focused videos coming soon!

[@benjah221]

@@LytboxStudiowow would be so amazing, thank you ❤

[@jasonstetsonofficial]

PLZ!!! do one for Local WP!!

[@LytboxStudio]

Haha cool! Added to my list!

[@plantifulalexandra]

23:05 Same! Sometimes at least. Do you turn off the plugin later?

[@LytboxStudio]

I keep SVG support tunred on becasue I set it up in the settings for better security and performance. It's usful.

[@rswebmarketing]

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]

I start with REM and then it’s optional to convert into clamp. It’s still totally fine to use REM 😉

[@adywiles5132]

Anyone know the left had slide out panel app Jeffrey is using to reference bookmarks, it looks useful.

[@LytboxStudio]

That's the Arc Browser. It's awesome!

[@adywiles5132]

@@LytboxStudio thanks Jeffrey, great tutorials by the way ...fantastic workflow too. Lovin it ..cheers.

[@LytboxStudio]

@@adywiles5132 thanks! 🙏

[@mdqmatias]

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]

All in one is a great way to create blueprints. I used this method for years

[@gabrielk5497]

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]

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]

@@LytboxStudio thanks for your kind answer.

[@diogos7233]

What software program do you use to create that ripple effect on mouse click? That's awesome.

[@LytboxStudio]

Screenflow for the screen recording does it

[@koentag84]

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]

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.

[@ak47marx16]

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]

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.

[@pezreloaded8436]

Great video! What was the site you were using for clamp?

[@LytboxStudio]

Thanks Pez! Here's a link to the clamp calculator (btw Imran has one on his site too 😉) chrisburnell.com/clamp-calculator/

[@pezreloaded8436]

@@LytboxStudio Thanks for sharing!

[@user-go8ub6nd7e]

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]

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.

[@skillswithzain]

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]

Thanks for the heads up! I thought I had that fixed already. I'll need to investigate it again 😅

[@SmithyProductions]

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!

[@kirk59]

Anyone advise on how to import the blueprint into instawp?

[@LytboxStudio]

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.

[@marc3858]

What is a child theme for and how to use it properly?

[@LytboxStudio]

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.

[@TakuapaFriends]

why not use happy files for media, posts, cpts etc? :)

[@LytboxStudio]

Great question. I've started using Happy Files a year ago and added it to my blueprint!

[@catbraintech]

I was 100th like hehe

[@LytboxStudio]

That’s a special like!

[@leebarnes9486]

how does this work if i want to turn my site into a multisite? Im running into issues with that

[@LytboxStudio]

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]

Jeffrey, what Elementor Pro license do you need to set this up?

[@LytboxStudio]

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]

@@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.

[@UsamaNawazMujaddadi-yy3eb]

Can anyone tell me what browser he's using.

[@user-go8ub6nd7e]

Arc Browser :)

[@scottaucutt7262]

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]

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.

[@KaifShaikhTaufiq]

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]

Good idea if you are using design templates to create quick sites.

[@wordpressjunkie8830]

We got 100 likes, I'd like to check out your template please

[@LytboxStudio]

I just added it in the pinned comment at the top of the comments!

[@pixelfacepirate]

Why do you turn off Google Fonts?

[@LytboxStudio]

Always download Google fonts and install on the site. It’s better for performance and GDRP compliance.

[@pixelfacepirate]

@@LytboxStudio Thank you. I appreciate you sharing that with me.

[@pixelfacepirate]

@@LytboxStudio Do you happen to have any content that talks about best practices for keeping inodes on servers at a minimum?

[@LytboxStudio]

@@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]

@@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]

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]

I don’t understand. Please provide more context and explain clearly.

[@campusconnecttv170]

100 likes

[@LytboxStudio]

Much 💖! I added a link to my blueprint site to clone in the top comments. Look for the pinned comment in the top!