CSS Express
CSS Express
  • Видео 66
  • Просмотров 271 844
CSS course: How a CSS line looks like | CSS Basics for beginners, designers and non-coders: Lesson 3
This video is part of our online course CSS Basics for beginners, designers and non-coders.
In the series of videos, we will cover different topics about CSS and this lesson will show you how a basic line of CSS looks like, what are the elements and how you call out a class in CSS, how you open and close the class and the code and much more. We will see how to define a property and assign a value to it, all by using a simple language, no technical terms and with visual explanations!
💻 If you would like to learn more and get access to the full course and interactive CSS exercises, check our website:
www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
---------------------...
Просмотров: 21

Видео

CSS course: Basic terminology in CSS | CSS Basics for beginners, designers and non-coders: Lesson 2
Просмотров 15День назад
This video is part of our online course CSS Basics for beginners, designers and non-coders. In the series of videos, we will cover different topics about CSS and this lesson will introduce you to basic terminology in CSS. We will see what CSS classes are, IDs, selectors, paddings and margins, pseudoelements and pseudoclasses and much more. All in simple language, no technical terms and with vis...
CSS course: Introduction to CSS | CSS Basics for beginners, designers and non-coders: Lesson 1
Просмотров 6 тыс.День назад
This video is part of our online course CSS Basics for beginners, designers and non-coders. In the series of videos, we will cover different topics about CSS and this first lesson will introduce you to CSS and it will explain you what CSS is, when it is used and what is the main difference between HTML and CSS. 💻 If you would like to learn more and get access to the full course and interactive ...
CSS Basics online course for beginners, designers and non-coders | Course Intro
Просмотров 345День назад
Our beginner course, CSS Basics, is focusing on practice and is aimed specifically at the beginners, without any coding experience, designers and non-coders. In this course, you will learn the basics of CSS without complicated technical talk, through simple language, visual explanations and short lessons and a more than 50 interactive hands-on custom exercises, not just the theory. The course i...
How to highlight the current post in the current category post list in Elementor
Просмотров 882 месяца назад
This tutorial will teach you how to filter the posts in the list using the current post category. That way your post list will display ONLY the posts of the same category as the one that you are currently viewing. Then, we will include the current post in that list. That's something that is missing in the 'Related Posts' widget in Elementor! And lastly, we will highlight that current post in th...
Zoom image effect on hover using Elementor and CSS | Scale image up within the box upon mouse hover
Просмотров 6562 месяца назад
This tutorial will teach you how to create a smooth zoom image effect on hover using Elemntor and CSS. First, we are using an image widget in Elementor to place our image and we will assign a pixel width to the section that contains the image. Then we will define the hover state of our image using the transform property to scale our image up. We will adjust the transition of our image to create...
Custom Step 1,2,3 ordered lists in Elementor and CSS | How to add custom words to ordered lists
Просмотров 772 месяца назад
In this tutorial, you will learn how to create custom ordered lists in Elementor and CSS and add custom words before the numbers 1,2,3 in your list. That way you can create the list that has 'Step 1', 'Step 2', 'Step 3' instead of just 1, 2, 3 markers. This 'Step' word can be changed to whatever word or words of your choice. We will be using and styling the ::marker of our list, add the content...
Direct checkout in WooCommerce & Elementor (skip the cart page) | Simple, NO PLUGINS, just free PHP
Просмотров 1,3 тыс.6 месяцев назад
This simple tutorial will teach you how to skip the cart page in WooCommerce and Elementor and create a direct checkout process in your WooCommerce store in Wordpress. That way, you can create a faster purchasing process for your customers and increase the sales and conversions on your Wordpress website. After clicking the 'Purchase', 'Buy' or 'Add to cart' button, your customers will now be re...
Change font color of certain repeated words in JS and Elementor | Target & style specific words
Просмотров 1996 месяцев назад
This short and easy tutorial will teach you how to color all instances of certain words in text using Javascript (JS) and Elementor in Wordpress. Imagine that you want to give red color to all the words 'red' that appear in your text on your website or your webpage. And that you have 100 instances or that word. You can change the font color and the style of specific repeated words or string of ...
Vertically center bullets with long text in CSS and Elementor | How to align bullets with list items
Просмотров 4046 месяцев назад
In this tutorial, I will show you how to vertically center and align bullets with text in CSS in Elementor using unordered lists. If you have a list item that contains a lot of text and has multiple lines, the default bullet might still be aligned to the top of the list item. If you want to make it centrally aligned with your text, you can first clear the list style. This will remove the defaul...
Make text tables in Elementor using CSS only | No plugins, no HTML
Просмотров 8406 месяцев назад
In this tutorial, we are creating tables in Elementor with CSS only. No need to install a plugin, no HTML. Just simple, plain text using Text editor widget, unordered lists and some CSS. First, we will style the unordered (bullet) list that creates each column of our table. We will remove the bullets, add padding and spacing and text alignment. We can then apply shading to our table rows and ro...
How to style form fields in Elementor with CSS | Customize the look of Elementor forms
Просмотров 2,2 тыс.8 месяцев назад
This tutorial will teach you how to customize Elementor forms in Wordpress using CSS. You can style the form input fields, such as name, surname, email or a text field, change their borders and colors, round the corners, customize the fonts and much more. 🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. PURCH...
Style radio and checkmark field box in CSS and Elementor forms with custom icons | Part 2
Просмотров 8598 месяцев назад
In this tutorial, we are continuing with styling and customizing radio boxes using Elementor forms and CSS. You will learn how to add an icon from Font Awesome or a completely custom SVG icon uploaded to your Wordpress library. This way, you can completely customize how a radio box field looks like when it is checked (or clicked on) and appear with a custom icon. First, we will hide the default...
How to style radio and checkmark field box in CSS and Elementor forms | Custom radio boxes | Part 1
Просмотров 1,7 тыс.8 месяцев назад
In this tutorial, you will learn how to style radio (or checkmark) boxes in Elementor forms using CSS. The difference between a radio box and a checkmark box is that with radio field, you can only select one option from the list, while the checkmark field enables you to select multiple choices. Using CSS, you can easily change the size, border color or thickness, border radius, color etc. First...
Add a custom icon to the file upload button in Elementor forms and CSS before or after the text
Просмотров 1 тыс.8 месяцев назад
In this tutorial, you will learn how to place an icon in the 'File upload' button using Elementor forms and CSS. First, we will create a custom upload button and hide the default one from Elementor forms. This custom button is created using a before pseudoelement in CSS. After this, I will show you three different ways to create and insert an icon before or after the button 'Upload file' text. ...
Change the text for the file upload button and label | Edit and customize Elementor forms with CSS
Просмотров 2,4 тыс.8 месяцев назад
Change the text for the file upload button and label | Edit and customize Elementor forms with CSS
How to change the color or remove the 'No file chosen' label | File upload Elementor forms and CSS
Просмотров 1,5 тыс.8 месяцев назад
How to change the color or remove the 'No file chosen' label | File upload Elementor forms and CSS
Style the file upload button in Elementor forms and CSS | How to make the 'Choose file' button nicer
Просмотров 9 тыс.8 месяцев назад
Style the file upload button in Elementor forms and CSS | How to make the 'Choose file' button nicer
Center the content on a page in CSS and Elementor | How to put objects in the middle of a page
Просмотров 7898 месяцев назад
Center the content on a page in CSS and Elementor | How to put objects in the middle of a page
How to make Barbie 3D Text effect in Photoshop | Editable Pink Gloss Text PSD Tutorial
Просмотров 3,9 тыс.Год назад
How to make Barbie 3D Text effect in Photoshop | Editable Pink Gloss Text PSD Tutorial
How to create custom image masks with text layers in Elementor and CSS | Knockout text effect
Просмотров 1,9 тыс.Год назад
How to create custom image masks with text layers in Elementor and CSS | Knockout text effect
How to create custom image masks with linear gradients in Elementor and CSS | Fading image effect
Просмотров 4,9 тыс.Год назад
How to create custom image masks with linear gradients in Elementor and CSS | Fading image effect
How to create custom image masks with PNG layers in CSS and Elementor | Put images in custom shapes
Просмотров 422Год назад
How to create custom image masks with PNG layers in CSS and Elementor | Put images in custom shapes
How to put images in semi circle and quarter circle in CSS and Elementor using aspect ratio
Просмотров 1 тыс.Год назад
How to put images in semi circle and quarter circle in CSS and Elementor using aspect ratio
Create tabs with custom design in Elementor | Make tabs with custom layouts with Anywhere Elementor
Просмотров 11 тыс.Год назад
Create tabs with custom design in Elementor | Make tabs with custom layouts with Anywhere Elementor
How to enable vector SVG file uploads in Elementor | Safe SVG plugin for Wordpress websites
Просмотров 2,2 тыс.Год назад
How to enable vector SVG file uploads in Elementor | Safe SVG plugin for Wordpress websites
How to import Google fonts in CSS | Use non-standard web fonts on Elementor websites
Просмотров 1,1 тыс.Год назад
How to import Google fonts in CSS | Use non-standard web fonts on Elementor websites
Create custom graphics above titles in CSS and Elementor | Headings with custom vectors above them
Просмотров 388Год назад
Create custom graphics above titles in CSS and Elementor | Headings with custom vectors above them
How to create an ordered list with numbers in circles in CSS and Elementor
Просмотров 2,1 тыс.Год назад
How to create an ordered list with numbers in circles in CSS and Elementor
How to create a horizontal list in Elementor and CSS | Put list items in a row instead of a column
Просмотров 1,1 тыс.Год назад
How to create a horizontal list in Elementor and CSS | Put list items in a row instead of a column

Комментарии

  • @EduardoMalbert
    @EduardoMalbert 2 дня назад

    Someone knows how to do this with Pro Elements?

  • @kashishmistry4804
    @kashishmistry4804 5 дней назад

    in my case links are not opening😭

  • @Bardesigners
    @Bardesigners 14 дней назад

    Loved this video - thank you! For those of us who are using Elementor Pro in 2024, the CSS code shown on Velvetmade doesn't work well (I was only able to produce one circle on my first list), but not to worry! I incorporated the CSS code shown in this video into the Custom CSS section in the 'Advanced' tab, and it worked virtually straightaway, albeit with a few refinements. What I really like about creating it in the Custom CSS area is that you can work with the code (and refinements) interactively - in real time!

  • @authentic_101
    @authentic_101 15 дней назад

    Useful tip! But the problem is that Download as PDF messes up with my text formatting in the file while Save as PDF / Print to PDF doesn't!

  • @cssexpresstutorials
    @cssexpresstutorials 15 дней назад

    🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the PHP code for free here: www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/

  • @cssexpresstutorials
    @cssexpresstutorials 15 дней назад

    🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the CSS code for free here: www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/

  • @Regfol
    @Regfol 19 дней назад

    Recommend ❤

  • @franktielemans6624
    @franktielemans6624 25 дней назад

    Unfortunate when I set font-size to 0 the choose file button height collapses. Dunno why. To solve this I have to double the vertical padding. What browser are you using? I have Chrome.

  • @jordans03
    @jordans03 Месяц назад

    LIFE SAVOR!!!! THANK YOUUUUUUUUUUUU

  • @achernar0200
    @achernar0200 Месяц назад

    How would I make the radio options in the same line, Ive tried a lot of inline css options but cant get it to work

    • @cssexpresstutorials
      @cssexpresstutorials Месяц назад

      Hi! Try using this below: .elementor-field-option{ display: inline-block !important; flex-basis: auto !important; } .elementor-field-subgroup { display: flex !important; column-gap: 20px !important; } Or if you are using Elementor forms, in the radio form field settings, you should be able to use the toggle for 'Inline List'. It should be just below the 'Options' field in the radio form field settings. Let me know if this helps!

  • @BeerioMusic
    @BeerioMusic Месяц назад

    not work

    • @cssexpresstutorials
      @cssexpresstutorials Месяц назад

      Hi! Can you share more about the code that you are using and what's not working? Otherwise I won't be able to assist you. You can also send screenshots or a link to my email and I'll take a look

  • @syler0
    @syler0 Месяц назад

    Perfect, Thank You Very Much.

  • @mahalakshmi4769
    @mahalakshmi4769 Месяц назад

    Hi! I have four tabs on a single page. In the menu bar, there are sub-menu options and tabs name are some. How can I set it up so that clicking on a sub-menu redirects to the corresponding tab?

  • @Amansharma-g3z
    @Amansharma-g3z Месяц назад

    It was very very helpful

  • @rfdesign354
    @rfdesign354 Месяц назад

    how to make remove uploaded file button ?

  • @Mahnoor_Shahzadi
    @Mahnoor_Shahzadi Месяц назад

    mam it is not working even after setting them both inline 🥺

    • @cssexpresstutorials
      @cssexpresstutorials Месяц назад

      Hi! Since Elementor changed and introduced flexbox, this might not be the current setup needed anymore. Can you share the link or send me an email so that I can help? Feel free to include the screenshots or a link and I will take a look :)

    • @Mahnoor_Shahzadi
      @Mahnoor_Shahzadi Месяц назад

      @@cssexpresstutorials congrats you got a new subscriber 😁😁😁i'm learning wordpress i'll ask you all needed as a student 🥹🥹🥹

  • @carlospaz3277
    @carlospaz3277 2 месяца назад

    Great I didn't know about that css, js and html plugin, awesome

  • @rafin_rabby
    @rafin_rabby 2 месяца назад

    Wording good

  • @TerryCole-rg4wu
    @TerryCole-rg4wu 2 месяца назад

    I am running elementor pro and it already stores all of the form submissions info. You dont need a seperate plug in. Do you know this or are you just trying to promote an extra plug in.

  • @archand06
    @archand06 2 месяца назад

    The best video of the lot on this topic. Thanks!

  • @alaska2026
    @alaska2026 2 месяца назад

    thank you so much for this video! it was exactly what i was looking for!!!

  • @thomasho.
    @thomasho. 3 месяца назад

    the break-before: column is not supported on Firefox browser

  • @ayeshaj2468
    @ayeshaj2468 3 месяца назад

    This is exactly what i was looking for.. thank you very much.. i wish you all the success! 😊

  • @eter_nall
    @eter_nall 3 месяца назад

    thank youuuu

  • @wassimtchicara6693
    @wassimtchicara6693 3 месяца назад

    Great video, It was very helpful, it saved a lot of time, Thank you?

  • @moeseo1
    @moeseo1 3 месяца назад

    Not Working for me

  • @SamWereb
    @SamWereb 3 месяца назад

    Excellent. Subscribed.

  • @TheRealSamard
    @TheRealSamard 3 месяца назад

    Thank you so much for going straight to the point, it worked!

  • @virtualbrian
    @virtualbrian 3 месяца назад

    Nope, this no longer works.

  • @jorleydossantostavares
    @jorleydossantostavares 3 месяца назад

    Congratulations on the video, I wanted to ask if possible for a video with the theme: As there are categories with different colors in an item loop, that is, just the customized term of the category name with ACF with different colors in a single loop item, is it possible ?

  • @fahimahmad7958
    @fahimahmad7958 3 месяца назад

    Thanks..

  • @robinsullivan3407
    @robinsullivan3407 3 месяца назад

    hint for all of you who only wanted to change the radio circles and leave check boxes as they are: add "[type="radio"] at "/* This adds the custom radio box circles for unchecked and checked states */. Otherwise it will add a radio circle next to checkboxes

  • @DiscoverSiargao
    @DiscoverSiargao 4 месяца назад

    thanks

  • @Superbalbon
    @Superbalbon 4 месяца назад

    Muchas gracias !!!

  • @MatheusPereira-rv6jf
    @MatheusPereira-rv6jf 4 месяца назад

    Thank you!

  • @user-gx3vm6ch1o
    @user-gx3vm6ch1o 4 месяца назад

    Thanks for this! More Please!

  • @christianking1428
    @christianking1428 4 месяца назад

    Thanks a lot for this tutorial. This is really helpful. Could you also point out how you achieved the sorting by categories? I would like to achieve a similar layout that automatically shows the third level <ul> under the second level. Elementor hides this with an inline display:none. How did you mange to achieve such a clean display?

    • @cssexpresstutorials
      @cssexpresstutorials 4 месяца назад

      Hi, thanks for watching! If you refer to the sample I am showing in the video as a reference, I actually just put another link in the menu of the same level as the rest, just removed the link itself from that menu item. So just go to Appearance > Menus and when you are adding the items to your menu, add the item you want to appear as a heading (let's say second level item) above your third level items, but keep it in the same level (so without the visual 'indent' in the menu), add it as a 'Custom link' and then simply leave the 'URL' field for that menu item blank. You can then style that particular item in CSS, make it bold etc. That will create a menu item that simply acts as a header without a link. Hope that helps and makes sense?

  • @laki0208
    @laki0208 4 месяца назад

    Thank you this is very helpful! I also have one more question: how can I apply this to multiple borders?

    • @cssexpresstutorials
      @cssexpresstutorials 4 месяца назад

      Hi, thanks for watching! I am not sure I understand what do you mean by 'multiple borders'? Can you please clarify a bit more?

    • @laki0208
      @laki0208 4 месяца назад

      @@cssexpresstutorials Sure! Like if I want to put the gradient border to both top and bottom :)

    • @cssexpresstutorials
      @cssexpresstutorials 4 месяца назад

      @@laki0208 Hi! Try with this: selector img{ mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%); } You can then just change the values - basically the center of the image will be fully visible from 20% to 80% and you can play with these numbers to achieve the effect you want. And of course, you can also change the angle (deg). Let me know if that worked!

  • @mohammedzishan81
    @mohammedzishan81 4 месяца назад

    NOT SO GREAT

  • @monkis2793
    @monkis2793 4 месяца назад

    Hello! How to make it work on Mozilla browser too? Thanks.

  • @annafeledi7909
    @annafeledi7909 5 месяцев назад

    thank you so much :)

  • @creativedave
    @creativedave 5 месяцев назад

    What if I just want to globalize the button style, but have different unique hyperlinks for each one? I'm assuming I would have to unlink each button then, correct? Is there a way to somehow just save the styling of the button only?

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi! In that case I would highly recommend assigning a class to your button and styling that class in CSS. Then you can simply give any button that class, it would have a unique link, but the same look that you can customize from a single place, without creating a template for each. I will do a video on this shortly and let you know!

  • @MarcelSulak
    @MarcelSulak 5 месяцев назад

    Hi Doesn't work for me too

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi! As we managed to resolve the issue with the previous case, could you send me a link and more details on my email so that I can take a look? It's hard to say without taking a look, as there might be something there overriding these settings on your website.

    • @MarcelSulak
      @MarcelSulak 5 месяцев назад

      @@cssexpresstutorials Hi. I've fixed it, needed simply to replace text in File Upload button for custom text. Thanks anyway for light-speed answer. But I found another, much cleaner and elegant, intrinsic solution. Add Label to it, and just in Custom CSS set File Upload button by ID to hidden selector #form-field-field_65d9f53 { display: none; } -> Format label text from Elementor Menu Thx

  • @Claudinfern
    @Claudinfern 5 месяцев назад

    Exactly what i need! Thank you

  • @ElementoryMyDearWatson
    @ElementoryMyDearWatson 5 месяцев назад

    Whether using Elementor pro or not you should always have the css in a global style sheet that targets a class name and not at the element level using just 'selector'. That way you can make any changes that will take effect site wide if you have many lists on multiple pages on your site. Great channel BTW.

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      I absolutely agree and I strongly recommend this as a common practice. Thanks for watching!

  • @TheEdysocial
    @TheEdysocial 5 месяцев назад

    elementor free?

  • @MarkoI
    @MarkoI 5 месяцев назад

    Your video is very helpful and interesting but when I go to your site - it forces me to subscribe with a popup without being able to close it. That's not nice. Provide a popup close button please.

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi, as I am providing the ready code for you to just copy and paste and use it, in order to get it for free, you should subscribe with your email. If you do not wish to do so, you can watch the video and write the code yourself based on the video and the instructions in it.

    • @MarkoI
      @MarkoI 5 месяцев назад

      @@cssexpresstutorials , nevertheless, not being able to close the popup is not nice, to say the least. It's a basic courtesy. And even if I subscribe - it comes again, and again. What's the point of having content on a site if I cannot access it.

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi Marko, I don't think you understood the point of the popup - it is there to subscribe. You cannot access the page without subscribing. Once you subscribe in the popup, you get the link in your email for the page that contains the codes. Once you open that page from the email, you can browse and copy and paste the codes. Please note that I am providing this content, tutorials AND the code FOR FREE. As I said, if you want, you can just watch the video and write the code yourself based on the instructions in the tutorial. If not and you want to be able to just copy and paste the code, adjust it and use it directly on your website, it is more than a common practice to subscribe to get this content. It is a value for value and I think it's reasonable. Please check the email you got after subscribing. Here is the code from the video: .bullet-list-checkmark li{ font-size: 21px; list-style: none; list-style-image: none; position: relative; padding-left: 1.5em; } .bullet-list-checkmark li:before{ content: " "; display: block; border: solid 0.5em red; border-radius: 0.5em; position: absolute; left: 0px; top: 12%; } .bullet-list-checkmark li:after{ content: " "; display: block; width: 0.3em; height: 0.6em; border: solid white; border-width: 0 0.145em 0.145em 0; position: absolute; left: 0.35em; top: 20%; transform: rotate(45deg); }

  • @MechTechSimulations
    @MechTechSimulations 5 месяцев назад

    Thank you so much for your video. But, when navigating to the pages, if we visit the cart page and replace the shortcode with [woocommerce_checkout] instead of [woocommerce_cart], it performs the function correctly! Is there any issue in that? please let me know if there is any..

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi, thanks for trying this out and sharing! This also works, the only issue I see with it is that technically you are not skipping the cart page, so you can see the 'Cart' URL even though it is basically a checkout. Of course, it's an easier solution and works just fine if you don't have a problem with it. This PHP function was only to actually skip one step and go to the checkout page :)

  • @MechTechSimulations
    @MechTechSimulations 6 месяцев назад

    Great video... Can you please explain how to change the "Add to Cart" text. Here you have changed to "Purchase this Product". How to do that please?

    • @cssexpresstutorials
      @cssexpresstutorials 5 месяцев назад

      Hi! Glad you found this video helpful - try using 'Custom Add to basked' widget in Elementor and let me know if that worked. You should be able to use custom button label there.

    • @MechTechSimulations
      @MechTechSimulations 5 месяцев назад

      YES it works well. Great thanks.@@cssexpresstutorials

  • @zulikharhazzan9226
    @zulikharhazzan9226 6 месяцев назад

    I tried the second option but the font is only responsive on desktop, it's not responsive on mobile The first option didn't work for me at all

    • @cssexpresstutorials
      @cssexpresstutorials 6 месяцев назад

      Hi, could you please share the link so that I can inspect what might be the issue? Feel free to send me an email with the link and I will check it.

    • @zulikharhazzan9226
      @zulikharhazzan9226 6 месяцев назад

      ​@@cssexpresstutorialsHi, I appreciate your response But I can't seem to find your email address on your about details. Could you please reply me with your email? Thanks so much

    • @zulikharhazzan9226
      @zulikharhazzan9226 6 месяцев назад

      @@cssexpresstutorials I don't know why but my comments kept getting deleted I really appreciate your response. I've been trying to get your email but I can't seem to find it on your bio, could you please reply to this message with your email? Thank you so much.