ELEMENTOR 3.0 Global Styles & Theme Builder Explained - Full Walkthrough
HTML-код
- Опубликовано: 12 сен 2024
- Elementor 3.0 will soon be released and in this walkthrough, I'll show you how to can use the new Global Styles & Theme Builder in combination.
If you're looking to see how these updated and new features work together to streamline the job of building, editing and styling templates and theme files for WordPress using Elementor - This video is going to be a good introduction.
Once the final versions of Elementor 3.0 are released, I'll be doing a full deep dive into building a complete website using all the new tools.
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Elementor Pro 3.0: • Elementor Pro 3.0 Beta...
★ Elementor Free 3.0: • Global Styling with El...
★ Download Theme Styles Template: jo.my/estyles
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► WORDPRESS VISUAL PAGE BUILDERS ◄
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Brizy Pro: bit.ly/2Ji97r8
★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
★ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
★ GeneratePress Premium: bit.ly/2Ydn1SE
★ OCEANWP: bit.ly/2fRHBr0
★ DIVI Theme: bit.ly/2G8JMiA
★ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
★ SMART SLIDER 3: bit.ly/2G0G1vB
★ CSSHERO: bit.ly/2qbrRl6
★ SLIDER REVOLUTION 6 - jo.my/sr6
► WORDPRESS PLUGINS ◄
★ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
I just came across this comprehensive tutorial. It's such a time saver ! Congratulations and thanks !
Just started today to learn about these new updates and your video really helped me out! Thank you and keep it up man!
Once again, after watching a few vids on E3, your teaching is the best! Thanks for being excellent. /After using Elementor since it was released, I'd consider myself an expert but with E3, I'm still a bit confused as to the correlation of Global Fonts and Typography (Theme Style) but I'm pretty much going to ignore the Global Fonts and just focus on the Typography. I still just don't understand the reason for both. Thanks again. :)
I was pulling my hair out with the new elementor 3 update, would have happily got a refund, if they didn't refuse. But, after watching this video, I can see light at the end of the tunnel.
Really appreciate the video, and the JSON file for creating the base styling. I used that, and it's helped a lot. Thank you and a Big thumbs up :-)
Tim
Finally 😁 Been waiting for this for a long time. Thanks for making easy to understand and implement Paul.
My pleasure Rob.
@@WPTuts You mentioned that you were going to do a more in-depth video on this. Did that happen? If so, I'd be grateful for the link. Keep crushing it!
Hi Paul, first off, thank you so much for your amazing tutorials, they have been an inexhaustible and immensely helpful resource. Second (lol), when working with Elementor Pro & Astra, when would you recommend working with Astra's Theme Customization options v. what is offered by the Elementor Pro Theme Builder? If you've worked with these in tandem before, have you found an optimal workflow that takes advantage of the benefits of both?
This was just what I was looking for! Thank you!
Brilliant video. Thanks for breaking down the whole process. I've been looking forward to working like this
Its going in the right direction. Would be nice if we can reference these global colors and fonts in our custom css.
I agree, that would be a useful addition. Hopefully something they will impliment.
Great job, Paul! Looking forward to v3.
Hey Paul, the content sample that you mentioned is not available in the description. Do you think you could add that for us? Thank you in advance!
Glad I wasn't the only one that couldn't find it (lol)
Yes, please could you add that sample content layout page template Paul. It looks really useful and as a newbie, I'm not quite sure how to recreate it. Many TIA :)
Sorry all, it's now been added and here's a link to it to save you digging through the description above: jo.my/estyles
Hi Paul, not sure if you know this but 5 days ago RUclips decided to stop sending email notifications (to us followers) when you post videos. This means that you have a higher risk of your followers missing out of the videos which means you miss out on the likes & shares and increasing the number of people that follow you.
Thanks for letting me know Susan. Always good to know that YT is screwing us content creators out of views. 😲
@@WPTuts thank heavens you send out emails so I will not be missing out on those.
Thanks for this overview. I found it helpful. Looking forward to your 'in-depth' video. I am confused as to whether we use Global Fonts or Theme Style > Typography, or both to style the site. What's the point of both?
Simon, you aren't alone in your confusion! Even though I'd categorize my Elementor level as expert, I too have been confused as to the seeming redundancy of Global vs (Theme Style) Typography as they seem to overlap. I'm pretty much ignoring Global Fonts and using the Typography.
Simon / Michael what did you decide in the end? I’m new to Elementor and hitting this confusion off the bat! I don’t really get the global font thing if every heading / text element needs a tag (which I guess will revert to theme font settings ...). Am I better setting all the theme H settings etc before I get started and just use those? Global is cool for colours though ...
@@sonareclipse9810 Somehow I never saw this comment from a LONG time ago! Sorry. :-/ What I've worked out is I do in fact use Elementor>Global Fonts for each font style. Define your colors in the Global Colors in a similar fashion. I ignore the Typography section altogether. Seems pointless and redundant and confusing. I got this tip from watching some other peeps. What you do is go to Global Fonts and make a new style for each style you want: Xtra Large, Large, Medium, Body, Link1, etc. Make each it's own style setting. The cool thing is to RETHINK of how you address H tags. We've wrongly learned that H1 is supposed to be the LARGEST font style. Why? That's a wrong way of thinking of what an H tag really is. With the HEADING widget, drag over the widget, assign the H tag you want, then go to the Style tab and in the Typography field, click the Globe icon and choose the Font style you want for that H tag. H1 is often a more "special H" tag, but often doesn't fit with the theme layout and style. So maybe the page title is better being smaller? So then assign H1 to that heading but choose a SMALL font. Google DOES NOT CARE of your styling. But it WILL see your H tag for it's page optimization/accessibility "rankings." So THAT is how we're setting up Elementor Settings now. :-)
Like your Videos. Really Helpfull. Thx Keep on.
How is that final version of the new Elementor 3 tutorial coming along? I'm looking forward to seeing it!!
me as well
Hello 👋! Will I have to redesign my website if I use the beta 3.0 version now? Or can I simply update in "two" weeks and keep what I create now on the beta version? Thank you.
3.0 is very good improvement 👍🏼
Hi, thank you once again for the great video! Just one thing: the dl link for the style template appears to be gone, it now redirects to WPTuts homepage.
Is there any chance to install a global style on the main website and another on a subdomain?
For example, having the agency with one global style and a subdomain, for example a website template, with another?
Thank you, Paul. In the beginning, you made sure the elementor setting was checked to disable both default colors and default fonts, thus inheriting them from the theme. But then you proceeded to work not in the theme, but in elementor. I found this to be confusing. Please explain. Thanks again!
This is one of the most asked about confusing aspects about Elementor. My takeaway for your question, and my own, is that it's not clear if there's a difference between "working in Elementor", and "working in the theme." There must be, because of the check boxes "disable Elementor's default colors and fonts," where the heck are those "default colors and fonts" set?
@@richardbryanesq oh wow, this comment is a throwback! I've ditched elementor. Back then the only other option was Oxygen (which I never liked), but nowadays we have Bricks; so elementor is retired permanently from my stack.
I"m struggling to figure out how to install that zip file for the template page. I know it's simple so I feel stupid. Any tips?
I figured it out, you need to upload it to your template section in elementor itself.
Great explanation
Should save a few requests to the server if the coding is as it should be. I'm hoping. :)
Thanks for your video! Whats accent colors and font used for? Also, how to import the theme file to elementor? Do I have to create a page?
When is Elementor 3.0 will be available ?
@Fabian Im going to build a new website, do you think it might interesting to wait to 3.0 version comes out or can i start today ? thank you for your answer!
Hi Paul! I am a newbie here. Now that 3.0 is live, I have a question regarding reverse engineering to make future updates to my website easier. I have different types of pages on my website. For example, all my service pages look the same and all my portfolio pages look the same, and all my blog pages look the same. These are not templates and have minor differences but same styling throughout. Is there a way to take one of the pages from each category and turn into templates within the theme builder without having to recreate 3 page templates in the theme builder?
Another question - while my header and footer wordpress templates transferred over to the theme builder automatically, my pop up template, and other templates that are just sections did not transfer. These are in my wordpress dashboard under templates. Any quick way to transfer these over without having to recreate in theme builder?
Am I missing something? I can't seem to find the link for the sample content page.
Great job ! (again) Thanks !
Question: Sample Content page shown at 2:31. How did it become the Sample Content page shown at 10:04?
And how is the Header editiable directly?
Pardon the stupid question. How do I install your "Theme Styles Template" into a current website?
Hello please make and guide video about how to deliver a complete wordpress site to client... it's become very helpful me for grow fast freelance carrer...
Great stuff, will there be a way to save and export the whole styling settings to use or import on another site? so far this did not work...
thanks for the video 😍
Hi Paul, Do you know if can you create a type style in Elementor Global type styles, that you can reference in the standard Worpress page interface? I understand that you can style up the standard HTML H1, H2 etc. tags, but I was more thinking if you wanted to say create an intro paragraph style in Elementor, that when creating a post in WordPress, you can reference so that it would get picked up by an associated Elementor template for styling?
Actual video starts at 09:15
I can't figure out how to make a nav with transparent background and overlays the hero. I've seen it done, but I can't figure it out.
How does the global settings work with Global Blocks?
My frustration with Global Blocks has been that both the styling and the text/content is locked. Can I, for example, create a Small Button, a Medium Button, etc. Custom global styling so that I can then apply the styling for a medium size button throughout the site?
Global colors do not work, in the latest version. Any ideas?
When creating a template to be used to standardize blog posts, how do you account for specific sections of that template to be variable? For example, the standard wordpress block editor allows you to add a featured image and content. Those are 2 elements of the template that will be variable because they are pulled from the block editor. But what if you have created a section of the template that shows a related product that needs to be hand coded by the poster. Meaning, if I'm writing about widgets and I want to embed the widget product within the post, I can add a WooCommerce product, and manually query the widget. But once I make that a template, every post that uses it will show the widget product. I want to be able to have that section be variable, just like the feature image and the content. Is this possible? If so, how?
When will you have the updated video using Elementor 3.0x?
hello, very good your video thanks, I have a question, would it be possible to change things like login and registration screen and also the design of the menu bar with elementor?
Hi Paul. Can these site settings (inc global settings) be exported to another site? I thought they would be stored in the Default Kit template but when I try to export it, it says the template is empty? Cheers
ok after done with the theme builder how do I Export my theme to publish in my other sites
Is it possible in your upcoming in-depth tutorial on Elementor and Pro to clarify possibilities with global styles re responsiveness? I tried to make one heading font style for desktop use and then use a similar heading style with smaller font for use on the responsive mobile version. However, seems assigning either style then shows up on desktop and mobile versions. It would be nice not to have to mod everything individually in the mobile version. Any way around this Paul? And any thoughts on adding new styles vs. using H1 to 6 instead?
that is why you need to use REM instead pixels
Hey, I saw "Save as a Global" (ruclips.net/video/fNaz9BOjdaE/видео.html) when you've right-clicked. Does that mean we can add a certain style to global?
hi! may I know why my Elem. the theme builder v3 says "failed to fetch" when I am trying to add condition and save it. It doesn't apply and says failed to fetch.
how to fix that?
thank you.
I need help please, when using colors and global fonts they are not shown in the final result, only in the editor, does anyone know what I can do? thank you.
Does this styling carry over to woocommerce?
Hi Paul! how are you? Thanks for the video!!! I can't find the template for the "Sample Content", do you have the link where i can download this? Thank youu!!
My apologies, I didn't add it to the description as mentioned. it is there now, so please feel free to download and use it in your projects. :)
@@WPTuts Thanks Paul!!!
Free professional template will be the next move
Or elementor template market place.
I'm pretty sure that a template marketplace will be something they will be looking into, especially now there is the forced signup to be able to use the current ones.
They should also make a marketplace for custom widgets. I've made a few but I don't want all the hassle with sales, promotions etc.
could you help how can i get telementor 3.0?
I really hope 3.1 has custom loops, breakpoints and deeper woocommerce integration 😩
Breakpoints = Yes, custom loops (hopefully) but I very much doubt that deeper WC integration is on the cards.
github.com/elementor/elementor/milestone/60
How can i get this version?
Now it's going to be like when you created websites with Sass, nodejs, etc.
wow
Before I start with the new global style, how do I reset everything?
try wp reset plugin
@@jonano508 everything in elementor styles
I don't believe there is a 'Global' reset for styles I'm afraid.