Building an Elementor Starter Blueprint Site

Summary

In diesem Video tutorial zeigt der Speaker, wie man eine Elementor Starter-Website erstellt, um den Prozess des Aufbaus neuer WordPress-Websites zu beschleunigen. Er erklärt die Schritte zur Einrichtung der WordPress-Umgebung, wie das Installieren und Aktivieren von Themes und Plugins, sowie das Setzen von Standardwerten für Elementor. Er teilt auch seine persönlichen Vorlieben für Themes, Schriftarten und Farbschemata und wie man diese für zukünftige Projekte speichert, um ein Wiederholen von Setups zu vermeiden. Das Video ist ideal für Anfänger und erfahrene Benutzer, die ihre Webdesign-Workflows optimieren möchten.

Takeaways

• 🚀 Eine Elementor Starter Site oder Blueprint Site kann Zeit sparen und das Setup-Prozess für neue Websites erleichtern.
• 🌟 Verwenden Sie lokale Hosts wie Local by Flywheel oder Hosting-Dienste wie InstaWP, um einen Blueprint zu erstellen und schnell zu starten.
• 📂 Entfernen Sie standardmäßige Beiträge und Seiten, um mit einem sauberen Slate zu beginnen.
• 🎨 Legen Sie Ihre eigene Times New Roman-Schriftart und untergeordnete Themes fest, um die Anpassungsfähigkeit zu erhöhen und beste Praktiken zu befolgen.
• 🔧 Aktualisieren und konfigurieren Sie WordPress-Einstellungen, um eine bessere Kontrolle über Ihre Website zu haben.
• 🌐 Richten Sie globale Schriftarten und Farben ein, um einen konsistenten Design- und Branding-Ansatz zu gewährleisten.
• 🛠️ Passen Sie Ihre Elementor-Einstellungen an, um die Funktionen zu optimieren, die Sie tatsächlich benötigen, und um die Erstellung zu erleichtern.
• 📈 Verwenden Sie Elementor Pro für erweiterte Funktionen und die Möglichkeit, Ihre Blueprint Site zu exportieren und zu importieren.
• 🔗 Richten Sie Ihre Plugins ein, um eine effektive Sicherheit, Leistung und SEO für Ihre Website zu gewährleisten.
• 🎯 Erstellen Sie eine Template, um den Setup-Prozess für zukünftige Projekte noch weiter zu beschleunigen.
• 💡 Teilen Sie Ihre Blueprint Site, um anderen die Möglichkeit zu geben, von Ihren Erkenntnissen zu profitieren und Zeit zu sparen.

Q & A

Was hat der Sprecher während seiner Pause von YouTube gemacht?

Der Sprecher hat während seiner Pause von YouTube an seinem aktuellen Projekt 'Ultimatives SEO für WordPress' gearbeitet und sich auf das Verbessern seiner persönlichen Lebensbereiche konzentriert.

Was ist das Hauptproblem, über das der Sprecher spricht?

Das Hauptproblem, über das der Sprecher spricht, ist, dass jedes Mal, wenn man eine neue Elementor-Website erstellt, die gleichen langweiligen und zeitaufwendigen Schritte durchlaufen muss.

Was ist ein Elementor Starter Site oder Blueprint Site?

Ein Elementor Starter Site oder Blueprint Site ist eine vorgefasste Website, die als Vorlage dient und es Entwicklern ermöglicht, schnell und effizient neue Websites zu erstellen, indem sie die wiederkehrenden Setup-Prozesse abbaut.

Welche Optionen gibt es, um einen Elementor Starter Site zu erstellen?

Es gibt drei Hauptoptionen: Verwendung eines lokalen Hosts wie Local by Flywheel, die Verwendung des eigenen Hostings mit temporären Domains oder Subdomains und die Verwendung von InstaWP, einer Plattform, die darauf spezialisiert ist, schnell vordefinierte Starter-Blueprint-Websites bereitzustellen.

Was ist der Vorteil des Installierens eines Child-Themes?

Das Installieren eines Child-Themes ist Vorsichtsmaßnahme und folgt den besten Praktiken der WordPress-Entwicklung. Es ermöglicht es, Updates durchzuführen und stellt sicher, dass alle benutzerdefinierten Änderungen bei einem Theme-Update erhalten bleiben.

Warum empfiehlt der Sprecher, die Standard-Posts und -Seiten von WordPress zu löschen?

Der Sprecher empfiehlt, die Standard-Posts und -Seiten zu löschen, um einen sauberen Start für die Website zu gewährleisten und die Anzahl der zu löschenden Elemente zu reduzieren, die normalerweise mit jeder neuen Website kommen.

Was ist der Zweck der 'Reading'-Einstellung in den WordPress-Optionen?

Die 'Reading'-Einstellung dient dazu, die Option 'Diskussion' zu verwalten, einschließlich der Anzeige von Kommentaren und Trackbacks. Diese Einstellung sollte während der Entwicklung einer Website aktiviert sein, aber vor dem Going-Live deaktiviert werden, um Suchmaschinenindexierungen zu vermeiden.

Welche Plugins empfiehlt der Sprecher als minimale 'Plugin Stack' für jede Website?

Der Sprecher empfiehlt eine minimale Plugin-Stack, die Activity Log für Sicherheit, Cloudflare für zusätzliche Sicherheit und Leistung, Perfmatters und Light Speed für Performance-Optimierung, SEO Press für SEO und Short Pixel für SVG-Support zu verwenden.

Wie kann man die Elementor-Einstellungen für zukünftige Projekte schneller einrichten?

Man kann die Elementor-Einstellungen für zukünftige Projekte schneller einrichten, indem man eine Blueprint- oder Starter-Website erstellt und diese als Vorlage für neue Projekte verwendet. Dies beinhaltet die gespeicherten Einstellungen, globale Stile und ausgewählte Plugins, die für jeden neuen Build angewendet werden können.

Welche zusätzlichen Schritte empfiehlt der Sprecher, um die Effizienz beim Erstellen einer neuen Website zu steigern?

Zusätzlich empfiehlt der Sprecher, globale Schriftarten und Farben zu setzen, die Element-Manager-Einstellungen anzupassen, globale Seitenvorlagen wie Header und Footer zu erstellen und eine ausgewählte 'Plugin Stack' zu installieren, um die Wiederholung von Prozessen zu minimieren und den Build-Prozess zu beschleunigen.

Outlines

00:00

🚀 Wiederaufnahme von Elementor-Tutorials

Der Sprecher kehrt nach einer Pause von YouTube zurück und kündigt an, dass er mit der Erstellung von Elementor-Tutorials fortfahren wird. Er hat in der Zwischenzeit an seinem SEO-WordPress-Projekt gearbeitet und auch einige persönliche Dinge verbessert. Er stellt fest, dass jedes Mal, wenn man eine neue Elementor-Website erstellt, die gleichen langweiligen Schritte durchlaufen werden, was Zeit kostet und nicht besonders spannend ist. Daher möchte er in diesem Video ein Problem lösen, indem er eine Elementor-Startseite oder eine Blaupause erstellt.

05:02

🛠️ Erstellen einer Elementor-Startseite

Der Sprecher erklärt, dass man mehrere Optionen hat, um eine Elementor-Startseite zu erstellen. Er könnte einen Local-Host wie Flywheel verwenden, sein Hosting mit temporären Domains oder Subdomains nutzen oder InstaWP, eine Plattform, die für die schnelle Bereitstellung von vorgefertigten Starter-Websites konzipiert ist. Er entscheidet sich für InstaWP und zeigt, wie man eine neue WordPress-Website erstellt und die Standard-Beiträge und -Seiten löscht, um einen sauberen Start zu haben. Anschließend installiert und aktiviert er das Hello-Theme und ein Kindthema, um die beste Praxis zu befolgen.

10:05

🎨 Anpassung der WordPress-Einstellungen

Der Sprecher beschreibt, wie man die WordPress-Einstellungen anpasst, um die Arbeitsumgebung für die Verwendung mit Elementor zu optimieren. Dazu gehört das Aktualisieren von WordPress, das Löschen von unerwünschten Plugins und das Anpassen von Einstellungen wie Zeitzonen, Permalinks und Lese- und Schreibeinstellungen. Er betont, dass es wichtig ist, diese Schritte zu befolgen, um sicherzustellen, dass die Website richtig eingerichtet ist.

15:05

🔧 Hinzufügen von Standardseiten und Menüs

Der Sprecher erklärt, dass es wichtig ist, grundlegende Seiten wie Home, Blog und Kontakt zu erstellen, um einen Ausgangspunkt für die Menüerstellung zu haben. Er zeigt, wie man ein Menü erstellt und alle Seiten hinzufügt, um den Prozess zu beschleunigen. Er betont, dass es nicht notwendig ist, viele Seiten zu erstellen, sondern nur die notwendigen Startseiten.

20:06

🛠️ Einrichtung von Elementor und Plugins

Der Sprecher beschreibt den Prozess der Installation und Aktivierung von Elementor Pro und wie man seine Lizenz hinzufügt. Er erklärt, dass er die Elementor-Einstellungen anpasst, um die Arbeit mit den Standardeinstellungen zu verbessern. Dazu gehören die Anpassung von Post-Typ-Einstellungen, die Aktivierung von Landing Pages, die Deaktivierung von Beta-Funktionen und die Einrichtung von benutzerdefiniertem Code. Er betont, dass es wichtig ist, die Element-Manager-Einstellungen anzupassen, um nur die benötigten Elemente zu aktivieren und den Prozess zu vereinfachen.

25:07

🎨 Einrichtung von Global Farben und Schriftarten

Der Sprecher erklärt, wie man globale Schriftarten und Farben in Elementor einrichtet, um einen konsistenten Design- und Typografiestil für die gesamte Website zu gewährleisten. Er beschreibt, wie man Schriftarten auswählt und wie man die Schriftgrößen und -gewichte anpasst, um einen harmonischen Look zu erzielen. Er empfiehlt, ein minimales Schriftarten-System zu verwenden und die Schriftgrößen mithilfe von RAM (Responsive Units) anstelle von Pixeln zu setzen, um eine bessere Anpassung an verschiedene Gerätegrößen zu ermöglichen.

🔧 Fertigstellung der Elementor-Vorlage

Der Sprecher beschreibt den Prozess der Erstellung einer Elementor-Vorlage, die für zukünftige Projekte verwendet werden kann. Er erklärt, wie man die Einstellungen und Plugins exportiert und in eine Vorlage integriert, um einen schnellen Start für neue Websites zu ermöglichen. Er teilt an, dass er seine Vorlage teilt, sobald das Video 100 Likes erreicht hat, und betont, dass dies eine effektive Möglichkeit ist, den Prozess der Website-Erstellung zu beschleunigen und sich auf die kreativen Aspekte zu konzentrieren.

Keywords

💡SEO

Suchmaschinenoptimierung (SEO) ist ein Prozess, bei dem eine Website so optimiert wird, dass sie bessere Rankings in Suchmaschinenergebnissen erhält. Im Video wird die Bedeutung von SEO für WordPress-Websites betont und wie man ein Projekt mit dem Ziel, die SEO zu verbessern, beginnen kann.

💡Elementor

Elementor ist ein Drag-and-Drop-Website-Builder-Plugin für WordPress, das es ermöglicht, Websites ohne Kenntnisse in Programmierung zu erstellen. Im Video wird gezeigt, wie man Elementor nutzt, um einen Blueprint-Website zu erstellen und die Schritte zur Erstellung eines Elementor-Starter-Sites zu erklären.

💡WordPress

WordPress ist eine weit verbreitete Open-Source-Content-Management-System (CMS), mit dem Benutzer Websites erstellen und verwalten können. Im Video wird WordPress als Plattform für den von dem Sprecher erstellten Blueprint-Website genannt.

💡Starter Site

Eine Starter Site oder Blueprint-Site ist eine vorgefertigte Website-Vorlage, die als Grundlage für neue Projekte verwendet werden kann. Diese Vorlagen enthalten bereits konfigurierte Einstellungen und Designelemente, um den Prozess der Website-Erstellung zu beschleunigen.

💡Blueprint

Ein Blueprint ist eine Vorlage oder eine Blaupause, die als Grundlage für Projekte oder Produkte verwendet werden kann. Im Kontext des Videos ist es eine spezielle Art von Starter Site, die für die Verwendung mit Elementor konzipiert wurde.

💡Local by Flywheel

Local by Flywheel ist eine Software-Lösung, die es ermöglicht, WordPress-Websites lokal auf dem eigenen Computer zu entwickeln und zu hosten. Es ermöglicht Entwicklern und Designern, Websites offline zu erstellen und zu testen, bevor sie live geschaltet werden.

💡Instant WP

Instant WP ist eine Platform, die es ermöglicht, schnell vorkonfigurierte WordPress-Websites zu erstellen und zu hosten. Es ist darauf ausgelegt, den Prozess der Website-Erstellung zu beschleunigen, indem es vordefinierte Optionen und Einstellungen bereitstellt.

💡Global Colors and Fonts

Globale Farben und Schriftarten sind ein Designkonzept, bei dem standardisierte Farben und Schriftarten auf einer Website verwendet werden, um ein konsistentes Erscheinungsbild zu erzielen. Im Video wird gezeigt, wie man globale Farben und Schriftarten in Elementor setzt, um den Designprozess zu vereinfachen und eine einheitliche Ästhetik zu gewährleisten.

💡Custom Code

Benutzerdefinierter Code bezieht sich auf HTML, CSS oder JavaScript-Code, der von den Standardeinstellungen abgeweicht, um eine Website speziell anzupassen. Im Video wird erläutert, wie man benutzerdefinierten Code hinzufügt, um zusätzliche Funktionen oder Anpassungen an die Website zu machen.

💡Performance Plugins

Performance-Plugins sind Erweiterungen für WordPress, die darauf ausgelegt sind, die Ladezeit und allgemeine Leistung einer Website zu verbessern. Diese Plugins können Cache, Minimierung von Ressourcen und andere Optimierungstechniken verwenden, um den Seitenaufbau zu beschleunigen.

💡SEO Plugins

SEO-Plugins sind spezielle Erweiterungen für WordPress, die darauf abzielen, die Suchmaschinenoptimierung einer Website zu verbessern. Sie helfen dabei, Keywords zu verwalten, Meta-Tags zu setzen und den Inhalt für Suchmaschinen Crawler besser zugänglich zu machen.

💡Template

Ein Template ist eine vordefinierte Vorlage, die verwendet wird, um eine Website oder einen Inhaltsbereich zu strukturieren. Templates können Designelemente, Texte und sogar Funktionalitäten enthalten, um den Erstellungsprozess zu vereinfachen und zu standardisieren.

Highlights

The speaker has taken a break from YouTube to focus on an ultimate SEO for WordPress project and personal life improvements.

The goal is to streamline the process of starting a new Elementor website by creating a starter site or blueprint.

A local host like Local by Flywheel can be used to store and host the starter site, which is free and allows saving sites as blueprints.

The speaker chooses InstaWP as the platform for creating the Elementor blueprint due to its efficiency in deploying pre-built websites.

The process begins with setting up the WordPress environment, including deleting default posts and pages for a clean start.

The Hello theme is replaced with a preferred theme, and a child theme is installed for best practices, even if not immediately used.

WordPress settings are updated, and unnecessary plugins like Hello Dolly are removed to start with a clean slate.

Important settings such as time zone, site title, and tagline are configured, and reading settings are adjusted for development.

Permalink settings are customized, and default pages like Home, Blog, and Contact are added for a basic site structure.

The Elementor Pro plugin is installed and activated, with licensing set up for full functionality.

Elementor settings are tailored to the speaker's preferences, including disabling unused features and enabling only necessary ones.

Globals and settings within the Elementor Builder are set up, including font styles, sizes, and color schemes.

A plugin stack is established, focusing on minimalism and only including necessary plugins for each site.

The blueprint site is saved as a template on InstaWP, allowing for quick deployment of new sites with the same configurations.

The speaker plans to share the personal Elementor blueprint with the audience if the video reaches 100 likes.

The process of creating a starter site saves time and streamlines the website building process, focusing on creativity and efficiency.

Transcripts

hey everybody check it out I took some

time off of YouTube to focus on my

latest project the ultimate SEO for

WordPress project also I took some time

off to focus on improving some things

inside of my own personal life but now

I'm back and I'm ready to start cranking

out some more Elementor tutorials and

fact I got a long list of some really

fun ones that I'm just waiting to dive

in and start creating but I got a

problem and you might have the same

problem as well and that is every single

time we start a brand new Elemental

website we got to go through the same

boring tedious steps they take a lot of

time it's not that fun going through

that whole setup process so I thought

why not solve that problem right here

inside this video by creating an

Elementor starter site or a blueprint

site also for anybody brand new to

Elementor this is going to be the

perfect video to help get you started

you're going to be able to set up your

website the right way and I'm going to

take you steps by step making this whole

thing easy to do all right check it out

let's get started the first place to

start is setting up our WordPress

environment and that means we need to

choose where we are going to store and

host our starter site we have a couple

different options one is going to be

using a local host like this one right

here local by Flywheel this is a local

host that I use it's totally free and if

we go over here and we take a look at my

setup right here these are all my local

sites if we build our site right here we

start up a brand new site we could

rightclick it and then we could save it

as a blueprint and that's what we're

creating a element or starter site it is

a blueprint site the second option is to

use your hosting some of our hosts like

runcloud or cloudways they do give you

the option to use temporary domains or

you could always create a subdomain as

well and just host the site yourself now

the Third option and this is what I'm

going to be using for my Elementor

starter site my Elementor blueprint and

that's going to be insta WP this

platform was built to do stuff like this

to quickly deploy pre-built starter

blueprint websites to make the whole

workflow a lot faster now you just got

to choose and if you do want to see a

tutorial on something like local and

building a blueprint on local by

Flywheel uh let me know I'd be happy to

do that but for now let's go ahead over

here to instant WP and I'm going to spin

up a brand new site and now we're in a

brand new WordPress website and the next

step is to set it up the first thing I

want to do is clean up my environment

WordPress comes with some default posts

and pages I always like to delete those

cuz I love to have a clean start so

let's go ahead and move these to trash

and remove them the next step is I want

to put in my hello theme and the reason

why I'm doing this right now is because

with with the new WordPress FSE the full

sight editor we don't have all of our

settings here we don't have all of our

options so I want to get those options

back into the environment that we're

going to be using so let me go over here

and add a new theme and I do see this

update right here we're going to get to

that next but let me install this and

then activate it and then I'm going to

add the child theme and let's quickly

grab that download right here now it's

inside GitHub I'll leave a link to this

inside of the description but I'm going

to go here to download the zip back over

to themes and let's install our child

theme so it's really important to always

have a child theme even if you're not

going to use it it's just using best

practices Let Me Go activate it I'm not

going to install Elementor yet there's a

few more things that I want to do inside

of my WordPress settings let's go update

everything and now that WordPress is

updated let's go check our plugins now

it depends on where you are spinning up

your WordPress website some of them come

with pre-installed plugins if you do

have pre-installed plugins like Hello

Dolly or something like that go ahead

and delete them we want to start clean

next up I got a few things that I want

to do in the settings just to make sure

that we are all good one thing is I like

to set up my time zone since I'm in

Thailand I'm going to search for Bangkok

all right got my time zone that is good

I am going to leave this off right here

you can go ahead and change this I'm

going to call this my Elementor

blueprint and then totally optional but

I'm going to give mine a cool tagline

and there we go cutting out redundant

work that's my tagline because that's

what we're doing with this blueprint all

right let's go over to reading and yes

we want to make sure this is checked on

make sure that's on anytime you're

starting a brand new site in development

of a site you want to make sure this is

on but when you do go live don't forget

to turn this off so your site could get

indexed and then I'm going to go over

here to permal links and make sure I'm

using the post name next up we want to

go over here to pages and let's add the

default Pages which pretty much goes on

every single website that is going to be

home blog and contact and this is all we

need we just need a few of our starter

Pages this way we could go over here to

our menus and I could add in my first

menu so I'm going to call this my main

menu and let's add everything to it you

don't need to add a bunch of pages or

start to create it we just want to

starter that way when we do put in our

pages and we got to build out our menu

it's already going to be started and we

get a quicker start into the process all

right let's go over here next to our to

our appearance and then customize from

here we are going to go to our homepage

settings this is the reason why I also

add in a few pages that way we can get

this set up right away because by

default the homepage is the blog

and that is a bit of a headache we can't

leave it that way to start a site we

could go to our site identity as well I

mean it's already set up inside our

general settings for now I am going to

leave this be because this is going to

change on a project by project basis

right now what we're doing we are

looking for anything that is repeated

over and over the best way to automate

is when you catch yourself doing the

same thing three four or five times and

it's all the same then you want to try

to create a process where you don't have

to do it again and that's what we're

doing all right now we got our settings

in WordPress set up if there are any

other settings that you catch yourself

doing with WordPress before every single

website make sure to do that now I'm

going to go and add

Elementor and then when you activate it

you get this wizard but I don't want to

use a wizard I just want to install

Elemental Pro so all the way over here

in the very top right hand corner click

that X to get up out of here and back

into your WordPress website now I'm

going to install my Elementor Pro and

upload my plugin which I already have

downloaded go ahead and activate and

then the next step add in your license

and connect it and now the next steps

are going to be setting up Elementor and

this is where I catch myself spending a

lot of time redoing the same thing over

and over so we're just going to do this

one time now I'm going to start here

with the settings and I'm going to work

my way through it now for the Post types

I usually just leave it on these I

always turn these on click these cuz

we're going to use our Global colors and

Global fonts and then I'm going to leave

that off right there let me save changes

and I am going to turn on landing pages

I've been using landing pages more and

more frequently lately so we could leave

that on I don't see myself using any

Integrations for every single site so

I'm not going to touch that but for

advance I do have the same settings

first for Google fonts I'm going to

disable it for the font awesome for

support I'm going to leave this off and

I'm going to leave this enabled we're

good to go oh yeah and I want to turn

this on right here for the unfiltered

file uploads this way I can use svgs and

Json and not really have a problem and

then this is a big one right here and

this one this changes over and over

through time so depending on when you

watch this it might be different uh but

this is my setup right now and if you

follow the way that I'm doing this even

when this does change with new features

well it's going to be pretty much the

same thought process behind it I want to

turn off everything that I am not using

uh also want to try not to use anything

in beta now I am going to use the grid

container I am going to leave this

inactive we already got landing pages on

so I'll leave that turned on Le nested

elements I'm going to turn this on

inactive uh lazy loading I'm going to

turn that inactive I have other plugins

for performance that I'm going to be

using for that I don't want them to

conflict you see this is a thing this is

active by default but it is in beta and

that should not happen all of these

should be turned off if it is inside

beta it's in beta it's not ready for the

public so it should not be turned on and

this is why this step is really

important so I'm going to turn that off

I'm going to turn this off don't leave

anything on default ever at this also

okay and active now for the stable

features okay I always leave this on

active our optimizations right here

these are the top ones because if I am

building it while these are active I

could catch a bug or something not

working right during the build instead

of building out a full website and then

turning these on and then something

breaking this way it helps me to

identify and fix a problem a lot quicker

all right flexbox container we're going

to make this active uh we could leave

that active uh I'm going to turn this

off I like the old school theme Builder

but this is my own personal choice I

just find it a lot easier to work this

one I am not going to

use okay this one I will leave active I

haven't really tested it but I'll leave

it active I'm not going to use AI on

every project so I'm going to going to

turn this

off I will go ahead and leave this on

active right here okay we'll keep that

on notes we're going to turn this on

inactive informs unactive another thing

you got to understand too if you are not

using notes on your site turn it off

because if you keep it on there is an

extra file being loaded all this does

add extra code so this is also a way for

us to keep everything as light as

possible with our builds next up let's

skip down over here to custom code now

custom fonts this is one that we are

going to have to set up on every single

site we are going to come back to this

later when we're setting up our globals

but for now let's go here to custom code

because this is something I personally

add on every single site I always have

my header

Snippets and this is going to be inside

the

head all right I'm I'm going to leave it

on that condition right there next up

let's work our way down cuz now we got a

new setting which gives us more options

to do when we are setting up our starter

site and that is going to be our element

manager now I'm going to turn everything

off except for a very few of them that I

actually use cuz look at I've never used

a SoundCloud widget so it makes no sense

for me to keep this on to start off let

me turn off everything and here here it

is this is pretty much all I use on

every single side I build now if I do

need to go in and let me go ahead and

turn it back to all statuses if I do got

to go in and I'm going to use something

you know like uh let's say a social

share button on my blog post page on my

blog post template then I'll just come

back here and turn it on but by starting

clean starting as minimal as possible

with only the basics and what you're

going to use well it's going to make it

a lot just more streamlined a lot more

more quicker and I I'm just a minimalist

I like to clear out the Clutter and have

a clean start set Yours up to your style

though now we're almost there but we

have one really big tedious task this is

the painful one for me and that is going

to be setting up the globals and then

setting up the settings inside of your

Builder now let me go back over here to

my page and let me edit with Elementor

and then from here we're going to jump

right into our site settings and let's

start setting this up now I'm going to

come back to these two this is where

we're going to spend a lot of time now

from here inside the theme style I would

not touch this typography at all and I

got another video coming up very soon

about SEO and the reason why I do not

touch these settings but we got our

Global fonts here having both of these

or trying to use both of them just

creates a mess so I would avoid the

typography I never touch this layout

though this is what we want to change

the first thing is a seter width and I'm

going to put this at a rim I do like

1280 and if we go over here to a

calculator and I'm going to put 1280

that's going to be 80 Ram so I'm going

to use Ram right here we're going to put

80 Ram now the container padding by

default it has 10 pixels around the

container having this default padding

right here messes up the design it's

really bad that this is here turn it off

set it to zero I know what it's trying

to do it's trying to make it easier to

use a builder but it's doing so at the

cost of messing up the design and taking

away from having everything just

consistent and in line so I'm going to

remove that the gaps and this one is

totally up to you I'm going to set my

gaps cuz I find myself using the same

gaps over and over it does help to speed

things up but I am not going to use

pixel for gaps instead I'm going to use

RAM and this is going to be a 1.25 Ram

will make 20 pixels I just use my

converter right here this is really

helpful for when you're building a site

by the way okay so I'm going to put

1.25 okay there is a bug in Elementor

right now where if I put one and press a

DOT it's going to move the cursor in

front of the digit instead of adding a

decimal

so uh hopefully that gets fixed by the

time you watch this all right next up

right here for the default page layout

I'm going to leave it at theme and then

if you are going to use different break

points go ahead and set them up but for

now I am good on this I don't use a lot

of break points because I use Rim I use

uh clamps and that helps out with

everything and next up this is where

we're going to spend quite a bit more

time and that's going to be inside of

our Global colors and our Global fonts

so we got got our Global fonts right

here but by default we only got these

four now for all of my sites I use

pretty much a very similar design system

that I replicate over and over and I got

my font Styles and I always I always

label them the same I always use like

the same size as t-shirts to identify

the size of my titles and my text so

these there they're replicated on

everything and then also we got to set

up the font colors as well now we need

to get a good starting point for the

fonts it does take a bit of time I am

going to set my end up and I'm going to

show you how I get started with it now

this is another site right here that I

have built and as you can see in the

fonts I have my settings right here and

to go through all this and to set up a

clamp for all of these it does take

quite a bit of time but if you do it

once then the only thing you got to do

when you do you us this on a brand new

website is just to adjust the font sizes

and it'll save you so much time and now

I'm going to fill out everything just

like how I did here and basically

replicate my system that I have over

here with all my

fonts and this is a system I use over

and over and over and you use your own

system if you do have one if you don't

go ahead and replicate mine and use this

as a starter as you design more you're

going to start to build your own system

it really helps to speed everything up

and it looks like this I got my header

extra large my header large my header

medium header small and then my header

my subhe header right here I got my text

Medium my text large text small and text

extra small and then I have my button

text Medium right here and I'm realizing

I missed my button text small and this

is why you're going to probably spend a

lot of time right here cuz you're going

to want to make make sure you have

everything covered now when you are

setting up your default font Styles you

don't want to have too many of them the

more that you have the more likely you

are going to create a mess typography is

very difficult the more minimal and the

less that you use the better outcomes

you are going to have when it comes to

your typography and your design next up

you're going to set up the font sizes

and you could do this two different ways

you could go ahead and start with rim

and set up your font size let's say I'm

going to do 72 pixels 4.5 rim and then

you can set it up for your tablet and

mobile it takes a little bit more time

but it's going to be a little bit easier

to update it based on the design when

you start it on a new website that's one

option but the other option is going to

be using a clamp so when you do use a

clamp we set up the size right here

using the pencil and then you can go to

a calculator like this so this is going

to be my extra large text I want it to

be super big my extra large header the

max size is going to be 72 pixels the

minimum I'm going to say the minimum is

going to be

36 I don't want it to be too small my

viewport let me update this I'm going to

put 380 and for my maximum I'm going to

put 1,200 you can leave it on default by

default it's probably good but if you

know what you're doing and you're used

to uh this you got some experience then

go ahead and set it up the way that you

like let me calculate it and now I could

just go in copy

this and paste it into here and then at

the very end you have to put a semicolon

here so there you go so it catches it

all right you might not want to do this

on your blueprint or your your starter

website CU you're going to have to redo

it anyways uh or you might want to give

it a start and then can go ahead and

adjust it that's going to be your call

play around with it find what works same

thing goes with the weight you might

want to change that now the one thing

that I never change is going to be my

line height for very large text I always

use the m and I always use one now if I

am going smaller in text my line height

gets a little bit bigger so that is the

next step I'm going to go ahead and set

all mine up but now let's jump to the

next thing we need to style up and that

is going to be our colors right here now

we have these default the primary

secondary text accent uh choose the

names that you want and now my dogs are

barking which is probably telling me

that this video is getting too long so

let's wrap this up and take it home

there's only a couple more steps over

here you want to set up set something up

for you to get started these colors are

not fun colors to start off with the

names aren't fun when you do get started

and you have a site ready to go you have

everything right here all you're going

in is changing the colors you can see I

have my style right here I got my main

color which is usually my main dark I

have my main light and then I have my

highlight colors and then I have all of

my secondary colors and if you are going

to use uh something like shading then

start off your Shades create a shade

grid right over here and then one last

thing back over here here I forgot to

mention this and when you move this over

your starter site over to a brand new

website that you're going to build

you're going to have all this here but

when you do set up your Elementor

website for that project in the very

beginning of the process you are going

to add your custom fonts so you're going

to install those so that way when you do

go back here all you got to do is go in

and select it and it's already connected

it's going to give you a much quicker

jump start now that's it for the

Elementor side if you do find anything

else that you do over and over such as

you know creating your templates you can

go over here to your theme Builder you

can create a header template a footer

template and a single post template and

an archive template those pretty much

goes on every single website think of

all the things that you do over and over

and over whatever you repeat and then

here is the last part and that is going

over to your plugins and adding your

stack of plugins here and here is my

stack and it is a minimal stack so first

thing over here I got an activity log I

use this for my security right here also

for my security I do a lot of stuff

right on the server and with Cloud flare

uh so if you are going to set up

something like word fence or if you're

going to use your Security Solutions

then you want to install them you don't

have to like turn them on and set them

up but just keep them ready so that way

when you do push this to a live website

you just got to turn it on and activate

it next up I have my performance plugins

I use perf matters and light speed I do

not turn these on for when I am building

a website so I always leave these off I

only turn them on at the very end in the

final process and then we got SEO press

this is my go-to for my SEO I do turn

these on and I do use them because when

I am building a WordPress website I want

to make sure I'm setting up the SEO

during the build process I got my short

pixel I keep that off I do keep on SVG

support for some reason whenever I start

a brand new Elemental website I always

have a problem uploading svgs so I turn

this on and that takes away that problem

and then right now I'm using WP code box

there are several other good ones code

Snippets is awesome uh the fluent team

just brought out a new one so whatever

tool you're using if you are using one

for your code then that is something

good to have and that's it put your

starter now let's say you use ACF or

croca block uh you're using jet engine

on a lot of your sites are you using

them on all of them that is the thing if

you are using the plugins on every

single website go ahead and add it add

the ones you add to every website the

thing is I try not to add a plugin until

I actually need it because every time

you do add a plugin well it starts to

build build up that database and I want

to keep everything as clean as possible

once you got it all set up this is what

I am going to do here inside my insta WP

so I got my site it's right here let me

go over to my templates and I want to

create a brand new template and this is

the one right here the Elementor

lightbox BP my blueprint let's go ahead

and create this this is my

Elementor blueprint and then I give it a

description a quick way to start my

Elemental websites and now here is the

cool part for the template I could

either keep it private for myself or I

could share it with all of you you guys

know me I love to share stuff with you

so as soon as this video hits 100 likes

I'm going to share my template inside

the descriptions all right when you see

100 likes in this video I am going to

have a link that is going to share to my

personal Elementor blueprint you could

take it and use it as your own also like

this feature for instant templates I

could turn this on and anytime I start a

site bam this gets started all right so

let me go ahead and save it oops and the

template has been taken somebody got my

idea okay I'm going to call this light

box cuz there's no other light box

elements or blueprints I am 100% certain

of that and now it's done it was that

quick and now when I go over to my

staging sites and I want to add a brand

new site I could go here to my template

I choose this one let me go ahead and

create it and that took less than 2

minutes let's go take a look at it I'm

going to log in and now when I go back

here I could just go right to my plugins

and I can see everything is set up the

way that I want it to be set up I have

my Elemental settings the way that I set

them up and not by default I don't have

to worry about those even my element

manager it is going to be set up just

with the elements that I am going to use

and all this takes is an hour or 2 hours

of your time and now that it is all set

up the next step that I would go to

while I am starting a brand new project

I would go add my pages I would go set

up my menu I would add in my custom

fonts that would be the next step and

then after that we would go here to our

site settings and set up our globals

which would be right inside here and

then you're ready to go and start

building your website and have some fun

being creative and cutting out all of

that that tedious boring stuff all right

hope this helped out if it did then

definitely give a like And subscribe and

with that we are good to go now with our

starter sites we could get to the fun

parts of building a website much faster

which is designing and creating also

we're going to be speeding up our

processes as well we're going to be

geeking out a lot I got a lot more

planned for Elementor and also for

bricks and break dance as well and other

stuff too all web design like I am

really excited for what is coming this

year on my YouTube yoube Channel all

right well that's it for this video

thank you for watching I appreciate it

and I'll see you inside the next

one