- 22
- 59 759
Advanced Themer
เข้าร่วมเมื่อ 26 เม.ย. 2023
What's new in Advanced Themer 2.9
Advanced Themer v2.9 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements.
In this video:
00:00 - Introduction to Advanced Themer 2.9
00:45 - Advanced CSS 2.0
02:49 - Advanced CSS - Edit your Child Theme
04:05 - Advanced CSS - Create custom stylesheets
04:24 - Advanced CSS - Enqueue options
06:31 - Advanced CSS - Comment code
06:48 - Advanced CSS - Fullscreen Mode
06:56 - Advanced CSS - Selector Picker
08:51 - Advanced CSS - Add component Selectors
09:36 - Advanced CSS - Beautify CSS
10:06 - Advanced CSS - Extract Global Classes
11:07 - Advanced CSS - Add CSS with AI
12:18 - Advanced CSS - Edit existing CSS with AI
14:10 - Advanced CSS - SASS integration
15:10 - Advanced CSS - Live Error Checker
16:11 - Advanced CSS - View Compiled CSS
16:30 - Advanced CSS - Global Partials and Mixins
19:34 - Advanced CSS - WPCodebox Integration
22:04 - Advanced CSS - Conclusions
22:57 - Codepen Converter
31:56 - Codepen Converter - HTML parser
33:32 - Codepen Converter - Emmet Integration
34:21 - AI Generated Structure
41:36 - Generated Code - Styles
43:44 - Generated Code - HTML parser
46:18 - Quick Search
48:05 - Quick Search - Jump on structure elements
48:35 - Quick Search - Add elements to the structure
49:53 - Quick Search - Assign Global Classes
50:56 - Quick Search - Create Global Class
51:35 - Quick Search - Assign Global Variables
52:10 - Quick Search - Create Global Variable
53:05 - Quick Search - Conclusion
54:08 - Code Elements Tweaks
55:09 - Sync Element's label with first global class
57:00 - SuperPowerCSS - Global partials/mixins support
59:24 - SuperPowerCSS - Variabilize CSS
01:01:25 - SuperPowerCSS - Convert UX values in CSS
01:03:07 - SuperPowerCSS - Emmet support
01:04:10 - Plain classes - Default global class picker
01:05:10 - Plain classes - New Events
01:06:30 - Dynamic Data Modal - Copy to Clipboard
01:07:43 - Variable Manager - Variables defined outside of the Manager
01:12:30 - Variable Picker - Right-click
01:13:56 - Color Manager - Switch between color and variable
01:17:00 - Color Manager - Import variables defined outside of the Manager
01:18:23 - Color Manager - @property declaration
01:25:05 - Improved Keyboard Shortcuts
01:27:17 - Conclusions
🎉 If you're looking to streamline your development process and speed up your workflow, Advanced Themer is the plugin you've been waiting for!
📚 In this video, I'll walk you through the NEW and IMPROVED features in version 2.9 so you can fully understand how Advanced Themer can help you level up your design game!
✨ Hit the play button now and discover how Advanced Themer v2.9 can help you create incredible designs faster and more efficiently than ever before! 📈
Happy designing! 🎉
In this video:
00:00 - Introduction to Advanced Themer 2.9
00:45 - Advanced CSS 2.0
02:49 - Advanced CSS - Edit your Child Theme
04:05 - Advanced CSS - Create custom stylesheets
04:24 - Advanced CSS - Enqueue options
06:31 - Advanced CSS - Comment code
06:48 - Advanced CSS - Fullscreen Mode
06:56 - Advanced CSS - Selector Picker
08:51 - Advanced CSS - Add component Selectors
09:36 - Advanced CSS - Beautify CSS
10:06 - Advanced CSS - Extract Global Classes
11:07 - Advanced CSS - Add CSS with AI
12:18 - Advanced CSS - Edit existing CSS with AI
14:10 - Advanced CSS - SASS integration
15:10 - Advanced CSS - Live Error Checker
16:11 - Advanced CSS - View Compiled CSS
16:30 - Advanced CSS - Global Partials and Mixins
19:34 - Advanced CSS - WPCodebox Integration
22:04 - Advanced CSS - Conclusions
22:57 - Codepen Converter
31:56 - Codepen Converter - HTML parser
33:32 - Codepen Converter - Emmet Integration
34:21 - AI Generated Structure
41:36 - Generated Code - Styles
43:44 - Generated Code - HTML parser
46:18 - Quick Search
48:05 - Quick Search - Jump on structure elements
48:35 - Quick Search - Add elements to the structure
49:53 - Quick Search - Assign Global Classes
50:56 - Quick Search - Create Global Class
51:35 - Quick Search - Assign Global Variables
52:10 - Quick Search - Create Global Variable
53:05 - Quick Search - Conclusion
54:08 - Code Elements Tweaks
55:09 - Sync Element's label with first global class
57:00 - SuperPowerCSS - Global partials/mixins support
59:24 - SuperPowerCSS - Variabilize CSS
01:01:25 - SuperPowerCSS - Convert UX values in CSS
01:03:07 - SuperPowerCSS - Emmet support
01:04:10 - Plain classes - Default global class picker
01:05:10 - Plain classes - New Events
01:06:30 - Dynamic Data Modal - Copy to Clipboard
01:07:43 - Variable Manager - Variables defined outside of the Manager
01:12:30 - Variable Picker - Right-click
01:13:56 - Color Manager - Switch between color and variable
01:17:00 - Color Manager - Import variables defined outside of the Manager
01:18:23 - Color Manager - @property declaration
01:25:05 - Improved Keyboard Shortcuts
01:27:17 - Conclusions
🎉 If you're looking to streamline your development process and speed up your workflow, Advanced Themer is the plugin you've been waiting for!
📚 In this video, I'll walk you through the NEW and IMPROVED features in version 2.9 so you can fully understand how Advanced Themer can help you level up your design game!
✨ Hit the play button now and discover how Advanced Themer v2.9 can help you create incredible designs faster and more efficiently than ever before! 📈
Happy designing! 🎉
มุมมอง: 4 987
วีดีโอ
What's new in Advanced Themer 2.7
มุมมอง 3K6 หลายเดือนก่อน
Advanced Themer v2.7 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.7 00:53 - Nested Elements 21:54 - Dynamic Data Modal 26:59 - Expand All Children 28:55 - Bug fixes and improvements 35:28 - Image Mask Helper 36:27 - Conclusions 🎉 If you're looking to streamline your de...
What's new in Advanced Themer 2.6
มุมมอง 2.4K8 หลายเดือนก่อน
Advanced Themer v2.6 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.6 05:10 - CSS Variables Integration 16:10 - Revamped Variable Picker 20:04 - Focus Point 25:50 - Hide/Remove Element 30:26 - Merge Global Classes 37:37 - Text-to-Speech Converter 41:17 - UX Improvements ...
Micro-animations done right with Bricks
มุมมอง 4K8 หลายเดือนก่อน
This quick tutorial will show you how to create micro-animations within Bricks using only one interaction and one keyframes on your whole site. So super lightweight and easy to implement! Make sure to copy/paste the following code inside your global css: pastebin.com/gV6wcq2N
Getting Started with Advanced Themer - My recommended Theme Settings (Part 2)
มุมมอง 3K8 หลายเดือนก่อน
If you are using a CSS Framework such as ACSS, Core Framework, OxyProps, Tailwind, etc... and wondering which options of Advanced Themer play well with it, this video is for you! In this review, I start from the recommended Theme Settings described in PART 1 (th-cam.com/video/donnbWlK7KY/w-d-xo.html) and apply some changes to make sure you get the best of both worlds. Chapters: 00:00 - Introduc...
Getting Started with Advanced Themer - My recommended Theme Settings (Part 1)
มุมมอง 3.8K8 หลายเดือนก่อน
If you're new to Advanced Themer and feeling overwhelmed by the multitude of options within the Theme Settings, this video is for you! In this review, I walk you through each Theme Setting and recommend which ones you should activate to get started with Advanced Themer confidently. Chapters: 00:00 - Introduction 00:57 - Opening Theme Settings 01:47 - Global Settings 04:57 - Global Colors 06:38 ...
What's new in Advanced Themer 2.5
มุมมอง 1.8K9 หลายเดือนก่อน
Advanced Themer v2.5 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.5 01:17 - UX Enhancements 08:27 - AT Main Menu 13:20 - Class Contextual Menu 18:26 - More controls over Strict Editor View 38:44 - SASS integration 43:30 - SuperPower CSS improvements 45:41 - New Keyboar...
What's new in Advanced Themer 2.4
มุมมอง 5K11 หลายเดือนก่อน
Advanced Themer v2.4 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.4 00:34 - Grid Builder v2 22:20 - Global Query Manager 30:50 - Global Query Loop List 34:23 - Box-shadow Generator 47:05 - Advanced Text Wrapper 54:34 - Quick Save Templates 59:08 - Copy/Paste interactio...
I create 20 Bento Grids using Bricks Builder and Advanced Themer
มุมมอง 5Kปีที่แล้ว
Let's create Bento Grids like there's no tomorrow! In this video: 00:00 - Introduction 02:57 - Bento Grid 1 06:42 - Bento Grid 2 10:17 - Bento Grid 3 15:55 - Bento Grid 4 30:07 - Bento Grid 5 36:10 - Bento Grid 6 39:05 - Bento Grid 7 41:30 - Bento Grid 8 49:30 - Bento Grid 9 55:42 - Bento Grid 10 59:10 - Bento Grid 11 1:02:28 - Bento Grid 12 1:09:06 - Bento Grid 13 1:23:08 - Bento Grid 14 1:24:...
CSS Grid Builder for Bricks - Advanced Themer 2.3
มุมมอง 4.1Kปีที่แล้ว
Advanced Themer v2.3 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.3 00:36 - Activate Grid Builder 01:10 - Basics of the Grid Builder 13:33 - Generate grids on classes 18:50 - Overlapping Grids 21:04 - Generate grids on query loops 25:52 - Add static blocks to your quer...
What's new in Advanced Themer 2.2
มุมมอง 2.1Kปีที่แล้ว
Advanced Themer v2.2 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.2 00:20 - Responsive Helper 10:25 - Enable/Disable Elements 14:53 - Draggable Structure Panel 17:59 - Grid Guide Revamped 22:22 - Import/Export/Reset Improvements 30:38 - Style Overview Shortcut 33:00 - ...
What's new in Advanced Themer 2.1
มุมมอง 3.3Kปีที่แล้ว
Advanced Themer v2.1 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.1 00:35 - CSS Variable Manager V1 22:10 - Variable Picker Improvements 25:43 - Dynamic Variable Suggestion 27:22 - Color Manager V2 43:18 - Structure Panel Helper 54:20 - Class Manager Shortcut 56:13 - D...
What's new in Advanced Themer 2.0 - part 2
มุมมอง 1.3Kปีที่แล้ว
Advanced Themer v2.0 Final has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.0 Final 00:24 - Meta Theme Color 02:20 - Copy Color Variable to Clipboard in the Color Manager 03:00 - "Active Colors on page" indicator inside the Color Manager 05:10 - Multi-select drag & drop in...
What's new in Advanced Themer 2.0?
มุมมอง 3Kปีที่แล้ว
Advanced Themer v2.0 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 2.0 00:35 - Color Manager - Introduction 01:45 - Color Manager - Installation 05:20 - Color Manager - Overview 06:57 - Color Manager - Dynamic Colors 10:50 - Color Manager - Convert Static Colors 13:30 - C...
What's new in Advanced Themer 1.3?
มุมมอง 2.2Kปีที่แล้ว
Advanced Themer v1.3 has arrived, and trust us, you'll want to watch this overview as we unveil all the latest updates and improvements. In this video: 00:00 - Introduction to Advanced Themer 1.3 00:35 - Class Manager 03:04 - Class Manager - Filters 07:50 - Class Manager - Rename 08:12 - Class Manager - Reorder 10:15 - Class Manager - Lock/Unlock 10:30 - Class Manager - Active Elements 11:15 - ...
Advanced Themer 1.2 - Style Overview & Custom CSS on steroids!
มุมมอง 2.1Kปีที่แล้ว
Advanced Themer 1.2 - Style Overview & Custom CSS on steroids!
Advanced Themer 1.1 - Stable release and 10+ more features added!
มุมมอง 1.2Kปีที่แล้ว
Advanced Themer 1.1 - Stable release and 10 more features added!
Advanced Themer 1.0.8 & 9 Overview - 20+ more features added!
มุมมอง 2.1Kปีที่แล้ว
Advanced Themer 1.0.8 & 9 Overview - 20 more features added!
Advanced Themer 1.0.7 Overview - New Sidebar / Resizable Structure / BricksLabs / Performance boost
มุมมอง 771ปีที่แล้ว
Advanced Themer 1.0.7 Overview - New Sidebar / Resizable Structure / BricksLabs / Performance boost
Advanced Themer 1.0.5 Overview - New BE UI / Import/Export / Custom Frameworks / ACSS compatibility
มุมมอง 1.8Kปีที่แล้ว
Advanced Themer 1.0.5 Overview - New BE UI / Import/Export / Custom Frameworks / ACSS compatibility
Thanks Maxime! These micro animations have been a game changer on recent website builds. I did recently notice that Google Page Insights is throwing a NO_LCP error on mobile, the culprit seems to be the animation trigger class. Has anyone else experienced this or have a fix?
Thanks for the video. I have a problem with bricks and it is that the animations created with interactions are broken when accessed from mobile devices. They flicker or do not animate at all, as is the case with the slides widget. Is there a way to fix this? I don't have any other plugins in my wordpress other than bricks builder.
Maxime, awesome update!! There is so much functionality in your Themer, woww...
I just got the license and I’m so excited! This will be on every website I create. Thank you for the amazing work Maxime!
1fr may arise potential overflow issues so the question is can we change the values to minmax(0,1fr) after creating grid? Thank you,
Nice and important video! Thanks
Binge watching all of these, Soooooooooo Good, thank you.
Speechless!
That WPCodebox integration is GOLD!!!
There is no words anymore for your amazing work - just a ❤
The CodePen Converter feature in Advanced Themer looks incredible and could be the deciding factor in my purchase. However, I’m not entirely sure how well it performs. Is there a way I could test this feature in action?
Hi Sir, I'm trying to contact you through email these days but dint receive a reply, could you check it? Thanks!
The variable referencing is great way to integrate with CoreFramework. Love it!
Hey Maxime, great update!!! Just wondering if it is possible to add the reverse of the action of Convert UX values to CSS at the 1hour 1min mark in the video. i.e. Convert CSS to UX Values (Builder values). This could also be great for the codepen importer too. This would be great for users who either prefer to use the Builder UX over CSS, and when they/we can make any tweaks in the UX rather than going to the CSS / HMTL in the superpower CSS modal.
That would be great but we need Thomas to implement such method - it’s out of my reach I’m afraid
Love the new options to get our hands dirty writing HTML
Thanks for the overview of all the new features. Highly appreciate the time and effort you put into Advanced Themer! 😊
Penso che bricks senza at non sarebbe la stessa cosa... in pratica hai inventato un modo per importare pagine intere da qualunque base e questa cosa e incredibile.
Yes, really a new era 👌👍😀
I'm always impressed by how quickly you can implement so many ideas! Just wow, there are so many new things and optimizations on board, thanks!
Amazing work Maxime. Love the Search bar.
Any significant impact on site's frontend performance with all these amazing additions enabled?
Nope
Thanks for your amazing work, max! Def one of the best in the business. How come some of your classes are green and red?
They are just test classes ;)
So happy to be able to edit stylesheets in builder. Love the Emmet integration, quick search and all of the other features. Thank you so much for this update!
Some graeat additions. I am seeing scope here to adjust my workflow around variables and colours.
Congrats to this amazing update. 🎉
You're just amazing :)
I can try it on a test site so it's not so important but do you know off hand whether AT would be okay to use with a plugin like Simply Static?
I never tested, but I wouldn’t be surprised if you would get some broken styles on frontend…
@@AdvancedThemer Thanks, will play with it to find out! Fun to break things, good learning....
incredible update! One question though - why would someone use wpcodebox when everything can run through AT?
WPCodebox is fully-fledged script manager. It handles both js and php and has more filters and API for advanced users. If you just need to manage your styles, AT might be enough. But for a more complete solution, WPCodebox is a better fit. The good thing is: you don’t have to choose between the two: you can just use both in harmony :)
@@AdvancedThemer I see. Thank you!
For importing JavaScript, you could offer to wrap it in an Immediately Invoked Function Expression (IIFE).
Yea but it depends how the js is actually structured… i need to ask chatgpt if wrapping everything in a (function())() could potentially break things 😂
Great update - bringing Bricks further in line with modern builders. Thanks! 💪
The biggest, biggest release ever, ever. So great. Congratulations.
Oh, AI!! I love it! Thank you, thank you!
Have you tried implementing function calling API for the AI part? I saw in your video you sometimes have parsing remnants, but you shouldn't have them if you declare a function called `updateCSS` (for example) and then task Open AI to fill the parameters. It should be more compliant to return only the paramenter (for example a CSS Text fragment) as the parameter in the structured response of the function calling API response. The function is never actually called, only the intent and the parameters are handed to you as structured data. Or are you already doing this?
You could also consider limiting the AI to the user selection in the text box (optionally) or the full text if nothing is selected. Meaning, when a user has a partial selection in the text editor that you only transfer the selection to the AI and replace only that section with the return.
I do use the function calling API for generating the AI structure. I can’t use it for the css because the function calling API is limited to 1000 tokens on input right now… it’s not enough to manage big css files and returns an error
The selecting option is a great suggestion 👍
Hello internet! Advanced Themer is growing very fast, and it continues to improve!
You should do a test on whether the AI code is of higher quality by adding "please" or leaving it out.... Just joking.....I hope other content creators who might see this channel notice how things are zoomed in where needed and is easy on the eyes, it makes a huge difference for someone who has trouble seeing!!!
i tried the zoom in on a few vids and got non-stop complaints from viewers saying they were motion sick. maybe if i was as smooth as Maxime
You can tell which people are "old school" (not necessarily old) and well brought up by the way they use please and thank you. These people are also usually hard working thorough and disciplined, producing outstanding work. Maxime is obviously such a person.
What is the secret for the 1 second beard growth ? Wait...Advanced Bearder 1.0 ? 👀
That’s a hidden tweak in the theme settings ;) you need a beard API though
what program you record video?
Screenstudio
Just thinking, wow, seen so many new things about AT from Facebook, really need a video for us who hate documentation, and here you are...Thanks for the vid and thanks for the hard work!
This is so good. Thanks for sharing!
Hi, quick question, is it just me or the structure panel is not resizable anymore? I don't see the option in the builder tweaks.... I'm on v 2.8.1. Its so bad because i cant see my elements when deep down in the structure....
Since Bricks v1.10.2, this feature is available natively.
Thanks Maxime. Never even thought to check youtube to keep up with this.
The best animation tutorial on the internet! Thank you!
Thanks for this! Is it possible to do grids that feature inverted border radii using Advanced Themer? Would love to see a video about that!
We hope one day be a pro using advanced themer.
Hello, i'm using Core Framework (the free one Web Based). Could i integrate the CSS of Core Framework with AT?
Why is it that every time I spend an hour or more watching a video about Advanced Themer, almost nothing in the video matches what I see in the software? CSS Variables tab is missing almost everything you pointed out in this video. There is nothing about typography, nothing about spacing, borders, border radius. This video is a waste of time.
This video has been recorded before Bricks released their variable manager inside the builder. Since then, we released v2.6 which converted the variables created inside the theme settings into native Bricks Variables. It allows you to manipulate your variables right inside the builder rather than going back and forth from the admin, and it won't create conflicts in case you deactivate Advanced Themer. Bricks and Advanced Themer are two softwares that evolve quickly, and I think that it's in the interest of the user to have AT quickly adapting to Bricks based on the updates it provides. The truth is - beside the variables tabs - all the other options in the actual version of AT are pretty much the same as the ones shown in the video. The recommended settings have also been implemented as default values when installing AT on a fresh install (or when resetting the the theme settings).
so to clear the nested elements a little bit up. I'v noticed, that when using bricks templates (the section ones) I can import them into a page in several ways...some stay connected to the templates, so everytime I edit the template, it's edited everywhere, I used them, but when I use another way to implement them, they aren't connected. I there is a usecase for both if this, but I can't remember, which is which. now, with the AT nested elements, as you showed, when importing one to a page in the builder, It seems not connected, I can make style changes which aren't reflected to all the elements, UNLESS I save them with EDIT. and If at some Point I think: oh, these nested-element, which I altered in one spot, is quite good, I want this to also user in other spots too, I just have to save it as a new nested element? Just want to get it straight, like in the first part, so I have kinda templates/components, which are somehow global, but I can make them locally if I wish to?
Consider the nested elements like the Bricks nestable elements (like sliders, tabs etc,…). They are not global elements nor components.
@@AdvancedThemer ok, so even if make changes and save/Edit the Nested element under the same Name, the changes are not applied to every Spot, I Used them before the changes, the changes are only for whenever I use those Elements afterwards?
Correct
@@schatten105 But when you put classes to them, they will be synced if through the classes only not the html like components. right?
So, would it be safe to say that these 'nested elements' are basically 'components'?
Kind of, but not exactly…
Not completely right: @20:25 a change to a global templates does NOT change "everywhere". This depends on the option, the global template was inserted (there are 2 options: 1 bound to global template, 1 not bound to global template)
I’m referring to global elements there, not templates
changing the name of the category itself is not possible yet, right? Only through nested element the category can be switched, but NOT renamed. Maybe a chance for improvement ;-)
Going to double check that 👍
Bravo!
Hello Maxime, it would be needed to have thumbnails for the nested elements. As the library grows, after 3 months you would have to select elements on best guess. Also a dropdown for selecting the existing group on saving would be great, else you have to open a second browser and search for the group name. Thanks for the detailed video which gives AT all the time it's value for me!
Elements don’t need thumbnails. If you need thumbnails, you probably want to use templates instead of nested elements. The category has already an autocomplete dropdown. Keeping it as a text field allows you to create new category as well - not just selecting an existing one.