CSS Framework for WordPress Fonts - Free Code
HTML-код
- Опубликовано: 8 сен 2024
- Rather than just assign H1, He separately, have a think about broadening what you can do with this CSS Framework for WordPress Fonts - Free Code.
Example code:
.xlarge :is(h1, h2, h3, h4, h5, h6, p) {
font-size: 3rem;
line-height: 1em;
color: var(--e-global-color-primary);*/
}
.large :is(h1, h2, h3, h4, h5, h6, p) {
font-size:2.5rem;
line-height: 1em;
}
.medium :is(h1, h2, h3, h4, h5, h6, p) {
font-size: 1.5rem;
line-height: 1em;
}
...etc...
👉 Grab our $1 Business Packs: learn.websquad...
👉 WordPress Hosting: be.elementor.c...
👉 The Pro Page Builder: be.elementor.c...
Need 1-2-1 Support: learn.websquad...
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com...
Thanks, Imran. That will certainly reduce time... very efficient.
Just waiting for Elementor to relase a class system like Bricks or Oxygen... It will be a game changer for Elementor
Agreed
They announced it a year ago! :) I'm betting on June 2029.
It would be nice and I've voted for it on their Github, but don't hold your breath.
@@MarekSzulikowski That would be early Beta that sits for atleast a decade in Activate Feature section
@@VijayKumarIM😂😂😂
It's better to use class names as .h1, .h2 , .h3 , .h4 , .h5 , .h6
Let's say I want to use H3 but I want it to look like H2
I'll simply add the class of .h2
And that .h2 class is using the variables for everything.
And those variables are using clamp() values for everything
Clamp for font size
Clamp for line height
Clamp for letter spacing
Yup normally we would add clamp.
But this method allows you to add the class name based on the size grouping.
It’s all good.
What's the benefit over adding clamp to the typography sizing format field?
Responsive font resizing between your maximum and minimum px widths. It means the fonts will shrink and grow from desktop to mobile.
Easier editing (everything is in one place).
@@websquadron Isnt that the same as clamp?
I tried your clamp method on a recently built website and did your "on the fly" method, for me I need a framework that can control everything in one place. I've been meaning to ask on the FB group but since you answered half of my question with this video I'll ask you the following: Let's say I have a style called Menu Text, how do I target it on the CSS side? Is this syntax correct: --menu-text-font-size:
Try this:
/* Applied to Menu */
.elementor-nav-menu a {
color: #000;
}
Hello, I have a question to another topic but I could not find it in other videos.
Can you create a gallery in Elementor with images + videos mixed? As I tested last time in free mode it was only possible to add images in the gallery.
You need Pro, unless you built via HTML.
@@websquadron so with Pro its possible with only the Elementor tools, without any additional html codes?
Why don't you just use the custom typography styles in the theme styles within settings? Setup all of these (with clamp if you want) and then there is no need for all of the custom CSS?
Because this gives you much more control and variety
@@websquadronFair enough. Setting up modular scales this way is probably easier with calc etc. 👌
3 lines of code is not a framework
There is no need to spit out content every single day just to spit it out
you started of great but lately but the last 6 plus months you have a lot of misses
This is the start of a framework that you can build upon. I’m sorry that you feel this way about my content.
@@websquadron As said you started out a a good informative content creator, but like many things is life sometimes less is good enough
@@erling5148 I've got many ideas and sometimes you have to get them out there.
@@websquadron Lets agree to disagree