{"id":8619,"date":"2024-02-03T07:46:58","date_gmt":"2024-02-03T02:16:58","guid":{"rendered":"https:\/\/www.wpelemento.com\/?p=8619"},"modified":"2024-02-03T18:06:39","modified_gmt":"2024-02-03T12:36:39","slug":"elementor-custom-css","status":"publish","type":"post","link":"https:\/\/preview.wpelemento.com\/old_website\/elementor-custom-css\/","title":{"rendered":"Elementor Custom CSS &#8211; How to Add Custom Styles to Your Pages"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8619\" class=\"elementor elementor-8619\">\n\t\t\t\t        <section class=\"elementor-section elementor-top-section elementor-element elementor-element-4bd8ac9 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"4bd8ac9\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7f8a053 ct-column-none\" data-id=\"7f8a053\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-085e481 elementor-widget elementor-widget-text-editor\" data-id=\"085e481\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><span style=\"font-weight: 400;\">Customizing the design of your website is a powerful way to make it stand out and make a lasting impression on your visitors. One of the best ways to do this is by using Elementor custom CSS styles. With the Elementor plugin for WordPress, it&#8217;s easy to add custom CSS styles to your pages and take your website to the next level.<\/span><\/p><p><span style=\"font-weight: 400;\">CSS, or Cascading Style Sheets, is a language that is used to control the layout and design of web pages. It allows you to apply styles to specific elements on your page, such as text, images, and buttons. This gives you complete control over the look and feel of your website, and you can use it to create a unique and visually appealing design.<\/span><\/p><p><span style=\"font-weight: 400;\">When it comes to customizing your website with CSS, the Elementor plugin is a great choice. It&#8217;s a popular drag-and-drop page builder that makes it easy to create custom designs without having to write any code. Furthermore, you can utilize <a href=\"https:\/\/www.wpelemento.com\/free-wordpress-themes-compatible-with-elementor\/\" target=\"_blank\" rel=\"noopener\">Free WordPress Themes Compatible With Elementor<\/a>, making it possible to use it with virtually any website.<\/span><\/p><p><span style=\"font-weight: 400;\">In this blog post, we&#8217;ll see how to use the Elementor plugin to add custom CSS styles to your pages. We&#8217;ll walk you through the process step-by-step and provide you with all the information you need to get started. Whether you&#8217;re a beginner or an experienced web designer, this guide will help you create a website that looks amazing and is uniquely your own.<\/span><\/p><p><span style=\"font-weight: 400;\">By the end of this tutorial, you&#8217;ll be able to customize the design of your website using custom CSS styles, and you&#8217;ll have a better understanding of how the Elementor plugin works. With this knowledge, you&#8217;ll be able to create a website that is truly unique and tailored to your needs.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-ad99d2b elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"ad99d2b\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b80b340 ct-column-none\" data-id=\"b80b340\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-2590f32 elementor-widget elementor-widget-heading\" data-id=\"2590f32\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">What Is Elementor Custom CSS?\n<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-488916e elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"488916e\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5df1877 ct-column-none\" data-id=\"5df1877\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-9bebbb3 elementor-widget elementor-widget-text-editor\" data-id=\"9bebbb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Elementor Custom CSS is a feature in the Elementor page builder that allows users to add their own CSS code to specific elements on a webpage. This allows users to customize the look and feel of their website beyond what is possible with the built-in design options.<\/span><\/p><p><span style=\"font-weight: 400;\">Custom CSS can be added to elements by selecting the element in the Elementor editor and clicking on the &#8220;Advanced&#8221; tab. From there, users can input their own CSS code in the &#8220;Custom CSS&#8221; field. The code will only affect the specific element that is selected, and will not affect other elements on the page.<\/span><\/p><p><span style=\"font-weight: 400;\">Custom CSS can be used to change the font, color, size, spacing, and other visual aspects of elements. It can also be used to add animations, hover effects, and other dynamic features to elements.<\/span><\/p><p><span style=\"font-weight: 400;\">It is important to note that custom CSS can sometimes conflict with other styles on the page, so users should test their code and make sure it is working as intended before publishing the page. Additionally, custom CSS may not work properly on all browsers or devices, so users should test their code on multiple platforms to ensure compatibility.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-3f76c2b elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"3f76c2b\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-382e953 ct-column-none\" data-id=\"382e953\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-6b23d38 elementor-widget elementor-widget-heading\" data-id=\"6b23d38\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Why Add Custom CSS To Elementor Website?\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d27e6b elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"1d27e6b\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-576228b ct-column-none\" data-id=\"576228b\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-d283419 elementor-widget elementor-widget-text-editor\" data-id=\"d283419\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">There are several reasons why you may want to add custom CSS to your Elementor website:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Customization:<\/b><span style=\"font-weight: 400;\"> Custom CSS allows you to make changes to your website&#8217;s design that are not available through the Elementor editor. This includes changes to colors, fonts, spacing, and more.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Branding:<\/b><span style=\"font-weight: 400;\"> Custom CSS can be used to match your website&#8217;s design to your brand&#8217;s colors and fonts, making it more visually consistent and recognizable.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Responsiveness:<\/b><span style=\"font-weight: 400;\"> Custom CSS can be used to make your website responsive, meaning it will look and function well on different devices and screen sizes.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibility:<\/b><span style=\"font-weight: 400;\"> Custom CSS can be used to improve the accessibility of your website, making it easier for users with disabilities to navigate and use.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance:<\/b><span style=\"font-weight: 400;\"> Custom CSS can be used to optimize the performance of your website, making it load faster and run smoother.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">Overall, adding custom CSS to your Elementor website can help you create a more unique, visually appealing, and functional website.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe4499c elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"fe4499c\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4b43edd ct-column-none\" data-id=\"4b43edd\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-cb0cd4a elementor-widget elementor-widget-heading\" data-id=\"cb0cd4a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Add Elementor Custom CSS?\n<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-cebae11 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"cebae11\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cef4f3f ct-column-none\" data-id=\"cef4f3f\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-9b2a50b elementor-widget elementor-widget-text-editor\" data-id=\"9b2a50b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Let\u2019s explore four different methods for adding custom CSS to an Elementor page or widget. These methods include Using the Elementor Custom CSS Widget, Using the Elementor HTML widget, Using the WordPress Customizer, and Using the Code Snippets plugin. Each method has its own advantages and disadvantages, and the best method for you will depend on your specific needs and skillset.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-c414137 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"c414137\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-822222a ct-column-none\" data-id=\"822222a\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-aa72c48 elementor-widget elementor-widget-heading\" data-id=\"aa72c48\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Using The Elementor Custom CSS Widget in Site Setting\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-5be1201 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"5be1201\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bc4622c ct-column-none\" data-id=\"bc4622c\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-e4a04d0 elementor-widget elementor-widget-text-editor\" data-id=\"e4a04d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The Elementor Custom CSS widget allows you to add custom CSS code to specific sections or elements of your website, giving you more control over the design and layout. Adding custom CSS using the Elementor Custom CSS widget is a simple and efficient way to customize the look and feel of your website without having to edit any theme files. This feature is especially useful for making small design changes or adding custom styles to specific elements on a page or post. This widget is only available in the Elementor Pro version, so you will need to upgrade to access it. Here&#8217;s a step-by-step guide on how to add custom CSS using the Elementor Custom CSS widget:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open the page or post in the Elementor editor where you want to add the custom CSS.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af8e3ad elementor-widget elementor-widget-image\" data-id=\"af8e3ad\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-1024x513.png\" class=\"attachment-large size-large wp-image-12003\" alt=\"open-the-page-where-you-want-to-add-css\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05b515e elementor-widget elementor-widget-ct_text_editor\" data-id=\"05b515e\" data-element_type=\"widget\" data-widget_type=\"ct_text_editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"ct_text_editor-05b515e\" class=\"ct-text-editor \" data-wow-delay=\"ms\">\n\t<div class=\"ct-inline-css\"  data-css=\"\n        \t\t\">\n\n    <\/div>\n\t<div class=\"ct-text-editor elementor-clearfix\">\n\t\t<ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">On the left sidebar, click on the &#8220;Menu&#8221; button and click on site setting, then select &#8220;Custom CSS&#8221;\u00a0 from the list of available widgets.<\/span><\/li><\/ul>\t\t\n\t<\/div>\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7fa25bb elementor-widget elementor-widget-image\" data-id=\"7fa25bb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-1024x512.png\" class=\"attachment-large size-large wp-image-12041\" alt=\"navigate-to-site-setting\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting-768x384.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-site-setting.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9ea75e elementor-widget elementor-widget-text-editor\" data-id=\"b9ea75e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>In the &#8220;CSS Selector&#8221; field, enter the element(s) you want to target with your custom CSS. This could be a class, ID, or HTML tag.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59995eb elementor-widget elementor-widget-image\" data-id=\"59995eb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-1024x512.png\" class=\"attachment-large size-large wp-image-12042\" alt=\"go-to-custom-css\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css-768x384.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-custom-css.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe69eb elementor-widget elementor-widget-text-editor\" data-id=\"cbe69eb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the &#8220;CSS Code&#8221; field, enter the CSS code you want to apply to the selected element(s). You can use the syntax for CSS such as {property: value;}<\/li><li aria-level=\"1\">Click the &#8220;Save&#8221; button to apply the custom CSS to the page or post.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92848ad elementor-widget elementor-widget-image\" data-id=\"92848ad\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-1024x512.png\" class=\"attachment-large size-large wp-image-12044\" alt=\"add-your-css\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-768x384.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07b7df2 elementor-widget elementor-widget-text-editor\" data-id=\"07b7df2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>It&#8217;s important to note that any CSS code you add using the Custom CSS widget will only affect the page or post you are currently editing. If you want to add custom CSS globally for the entire website, you can go to Elementor &gt; Settings &gt; Advanced and add the CSS code there.<\/p><p>Additionally, you can use the &#8220;Custom CSS&#8221; widget to add custom CSS code to specific sections, columns, or widgets on a page or post. Simply select the section, column, or widget you want to add custom CSS to, and then click on the &#8220;Advanced&#8221; tab in the Elementor editor to access the &#8220;Custom CSS&#8221; fields.<\/p><p>You can also inspect the element you want to target by right-clicking on the element and selecting &#8220;Inspect&#8221; in chrome developer tools. You can then use the class, id, or tag of the element in the CSS Selector field. Later on, you can check out the various changes and then copy and paste those codes into the &#8220;Custom CSS&#8221; fields.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-a8c66f0 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"a8c66f0\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e3ce124 ct-column-none\" data-id=\"e3ce124\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-0602864 elementor-widget elementor-widget-heading\" data-id=\"0602864\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Using The Elementor HTML Widget\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-aa5fddc elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"aa5fddc\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-266b13d ct-column-none\" data-id=\"266b13d\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-e4c8339 elementor-widget elementor-widget-image\" data-id=\"e4c8339\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-1024x512.png\" class=\"attachment-large size-large wp-image-12016\" alt=\"add-your-css-code-and-save-changes\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes-768x384.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-and-save-changes.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14fd889 elementor-widget elementor-widget-text-editor\" data-id=\"14fd889\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The Elementor HTML widget is a powerful tool that allows you to add custom HTML, CSS, and JavaScript to your website. It is a versatile widget that can be used to add custom elements, styles, and functionality to your pages and posts.<\/span><\/p><p><span style=\"font-weight: 400;\">To add custom CSS using the Elementor HTML widget, follow these steps:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open the page or post where you want to add the custom CSS.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d499928 elementor-widget elementor-widget-image\" data-id=\"d499928\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-1024x513.png\" class=\"attachment-large size-large wp-image-12003\" alt=\"open-the-page-where-you-want-to-add-css\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/open-the-page-where-you-want-to-add-css.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d39a580 elementor-widget elementor-widget-text-editor\" data-id=\"d39a580\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Drag and drop the Elementor HTML widget to the location where you want to add the custom CSS.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-362e28a elementor-widget elementor-widget-image\" data-id=\"362e28a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-1024x512.png\" class=\"attachment-large size-large wp-image-12014\" alt=\"drag-and-drop-html-widget\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget-768x384.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/drag-and-drop-html-widget.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eed6aae elementor-widget elementor-widget-text-editor\" data-id=\"eed6aae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Click on the widget to open the settings.<\/li><li aria-level=\"1\">In the settings, click on the &#8220;Advanced&#8221; tab.<\/li><li aria-level=\"1\">Under the &#8220;Custom CSS&#8221; section, add your custom CSS code.<\/li><li aria-level=\"1\">Click on the &#8220;Apply&#8221; button to save your changes.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d95161d elementor-widget elementor-widget-image\" data-id=\"d95161d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-1024x513.png\" class=\"attachment-large size-large wp-image-12004\" alt=\"enter-your-css-code-and-apply-changes\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-and-apply-changes.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61032cf elementor-widget elementor-widget-text-editor\" data-id=\"61032cf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Your custom CSS will now be applied to the element where the Elementor HTML widget is placed. It is important to note that the custom CSS will only affect the element within the widget and not the entire page or post.<\/p><p>You can also use the Elementor HTML widget to add custom HTML and JavaScript code to your website. This can be useful for adding custom elements, such as buttons or forms, or for adding functionality, such as tracking scripts.<\/p><p>It&#8217;s important to note that when adding custom code to your website, it&#8217;s crucial to have basic knowledge of HTML, CSS, and JavaScript, and ensure that the code is well-formatted and valid. Also, it&#8217;s crucial to test the code before publishing it.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-fadfe63 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"fadfe63\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-068e7f1 ct-column-none\" data-id=\"068e7f1\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-5fdfbe8 elementor-widget elementor-widget-heading\" data-id=\"5fdfbe8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Using The WordPress Customiser\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-ae13db6 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"ae13db6\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cdaf694 ct-column-none\" data-id=\"cdaf694\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-5b02aab elementor-widget elementor-widget-text-editor\" data-id=\"5b02aab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">WordPress Customizer is a built-in tool in WordPress that allows users to easily customize various aspects of their website, such as the layout, colors, fonts, and more. It can be accessed by going to Appearance &gt; Customize in the WordPress dashboard.<\/span><\/p><p><span style=\"font-weight: 400;\">To add custom CSS using the WordPress Customizer, follow these steps:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can customize your WordPress appearance by logging in to your dashboard and clicking Appearance &gt; Customize.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49bdedc elementor-widget elementor-widget-image\" data-id=\"49bdedc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-1024x513.png\" class=\"attachment-large size-large wp-image-11994\" alt=\"appearance-customize\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/appearance-customize.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1075431 elementor-widget elementor-widget-text-editor\" data-id=\"1075431\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the Customizer, navigate to the Additional CSS tab.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebf416c elementor-widget elementor-widget-image\" data-id=\"ebf416c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-1024x513.png\" class=\"attachment-large size-large wp-image-11995\" alt=\"navigate-to-additional-css-tab\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/navigate-to-additional-css-tab.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5740b38 elementor-widget elementor-widget-text-editor\" data-id=\"5740b38\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Click on the Add CSS button to open the CSS editor.<\/li><li aria-level=\"1\">Enter your custom CSS code in the editor. You can also use the editor&#8217;s tools to format and preview your code.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-143ede7 elementor-widget elementor-widget-image\" data-id=\"143ede7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-1024x513.png\" class=\"attachment-large size-large wp-image-11997\" alt=\"add-your-css-code\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-your-css-code.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b6ca2d elementor-widget elementor-widget-text-editor\" data-id=\"7b6ca2d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Click the Save &amp; Publish button to save your changes and make them live on your website.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2390ae elementor-widget elementor-widget-image\" data-id=\"d2390ae\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-1024x513.png\" class=\"attachment-large size-large wp-image-11998\" alt=\"save-and-publish\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-and-publish.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63e54b8 elementor-widget elementor-widget-text-editor\" data-id=\"63e54b8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>It&#8217;s important to note that any custom CSS added in this way will only apply to your current <a href=\"https:\/\/www.wpelemento.com\/wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">WordPress theme<\/a>. If you switch to a different theme, the custom CSS will no longer be in effect. Additionally, if you update your theme, your custom CSS may be overwritten. Therefore, it is recommended to use a child theme to add custom CSS.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-23d91fa elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"23d91fa\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d14c8ba ct-column-none\" data-id=\"d14c8ba\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-3cb1a4f elementor-widget elementor-widget-heading\" data-id=\"3cb1a4f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Using The Code Snippets Plugin\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-bcd3827 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"bcd3827\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8b76ca7 ct-column-none\" data-id=\"8b76ca7\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-bf67d09 elementor-widget elementor-widget-text-editor\" data-id=\"bf67d09\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">There are several Code Snippets plugins available for WordPress, but some of the most popular ones include:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Code Snippets:<\/b><span style=\"font-weight: 400;\"> This plugin allows you to easily add custom code snippets to your site without modifying your theme or plugin files. It comes with built-in syntax highlighting and error checking, making it easy to use for both beginners and advanced users.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Advanced Code Snippets:<\/b><span style=\"font-weight: 400;\"> This plugin is similar to Code Snippets, but it also includes a visual editor and the ability to import and export code snippets.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Simple Custom CSS:<\/b><span style=\"font-weight: 400;\"> This plugin is designed specifically for adding custom CSS to your site. It includes a simple interface and the ability to preview your changes before applying them to your site.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">To add custom CSS using the Code Snippets plugin, follow these steps:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Install and activate the Code Snippets plugin on your site.<\/span><\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbd9f30 elementor-widget elementor-widget-image\" data-id=\"fbd9f30\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-1024x513.png\" class=\"attachment-large size-large wp-image-11980\" alt=\"install-and-activate-plugin\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-plugin-1.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03fe564 elementor-widget elementor-widget-text-editor\" data-id=\"03fe564\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Go to the Code Snippets menu in your WordPress dashboard<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ab72a8 elementor-widget elementor-widget-image\" data-id=\"6ab72a8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-1024x513.png\" class=\"attachment-large size-large wp-image-11981\" alt=\"go-to-snippet-in-wordpress-dashboard\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/go-to-snippet-in-wordpress-dashboard.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a33c13 elementor-widget elementor-widget-text-editor\" data-id=\"8a33c13\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">Click on the Add New button to create a new code snippet.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-026b89b elementor-widget elementor-widget-image\" data-id=\"026b89b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-1024x513.png\" class=\"attachment-large size-large wp-image-11982\" alt=\"add-new-snippet\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-new-snippet.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1baa941 elementor-widget elementor-widget-text-editor\" data-id=\"1baa941\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the Code box, enter your custom CSS code. You can also add comments to your code to help you remember what it does.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c51649f elementor-widget elementor-widget-image\" data-id=\"c51649f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-1024x513.png\" class=\"attachment-large size-large wp-image-11983\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/enter-your-css-code.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-118218e elementor-widget elementor-widget-text-editor\" data-id=\"118218e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the Description box, enter a brief description of what the code does.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70084c4 elementor-widget elementor-widget-image\" data-id=\"70084c4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-1024x513.png\" class=\"attachment-large size-large wp-image-11984\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/description-of-your-css-code.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5bea05b elementor-widget elementor-widget-text-editor\" data-id=\"5bea05b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the Tags box, add any relevant tags to help you organize your code snippets.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7ded36 elementor-widget elementor-widget-image\" data-id=\"d7ded36\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-1024x513.png\" class=\"attachment-large size-large wp-image-11985\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/add-relevant-tags.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46aa9fa elementor-widget elementor-widget-text-editor\" data-id=\"46aa9fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li aria-level=\"1\">In the Execution box, select where you want the code to be executed on your site.<\/li><li aria-level=\"1\">Click on the Save Changes button to save your new code snippet.<\/li><li aria-level=\"1\">Go to the Code Snippets menu and activate the code snippet you just added.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09dda97 elementor-widget elementor-widget-image\" data-id=\"09dda97\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"321\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-1024x513.png\" class=\"attachment-large size-large wp-image-11986\" alt=\"save-changes-and-activate-the-code\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-1024x513.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-600x301.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code-768x385.png 768w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/save-changes-and-activate-the-code.png 1200w\" sizes=\"(max-width: 640px) 100vw, 640px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39c83ff elementor-widget elementor-widget-text-editor\" data-id=\"39c83ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Your custom CSS code will now be applied to your site. If you need to make any changes, you can simply edit the code snippet and save the changes.<\/p><p>Note: If you are using a <a href=\"https:\/\/www.wpelemento.com\/wordpress-page-builder\/\" target=\"_blank\" rel=\"noopener\">WordPress page builder<\/a> like Elementor, it is important to select the &#8220;Footer&#8221; option in the Execution box, so that the CSS code is loaded after the page builder&#8217;s CSS code, ensuring that your custom CSS takes precedence.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-c3a1ea3 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"c3a1ea3\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cbe308c ct-column-none\" data-id=\"cbe308c\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-8819e9d elementor-widget elementor-widget-heading\" data-id=\"8819e9d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-04d8bcc elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"04d8bcc\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d80674c ct-column-none\" data-id=\"d80674c\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-ff169ce elementor-widget elementor-widget-text-editor\" data-id=\"ff169ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In conclusion, adding Elementor custom CSS styles to your pages can be a great way to enhance the design and functionality of your website. We have seen several ways to add custom styles to your pages using Elementor. The Elementor Custom CSS widget allows you to add CSS directly within the page builder, while the Elementor HTML widget allows you to add custom CSS within an HTML container. Additionally, the WordPress Customizer and Code Snippets plugins offer alternative methods for adding custom CSS to your website.\u00a0<\/span><\/p><p><span style=\"font-weight: 400;\">What if you could design your website without any coding skills or any knowledge with just one click? that&#8217;s exactly What WP Elemento offers with their Premium WordPress themes as well as the <a href=\"https:\/\/www.wpelemento.com\/elementor\/wordpress-theme-bundle\/\" target=\"_blank\" rel=\"noopener\">WordPress Theme Bundle<\/a>. The themes come with one click demo importer and are easy to install and customize with ease.<\/span><\/p><p><span style=\"font-weight: 400;\">Whether you prefer using the Elementor Custom CSS Widget, the Elementor HTML Widget, the WordPress Customizer, or the Code Snippets Plugin, each method provides a unique solution for customizing your pages to your specific needs. Remember to always test your custom CSS before publishing, and if you&#8217;re unsure of how to proceed, seek help from the Elementor community or a web developer. With the right tools, knowledge, and selection of <a href=\"https:\/\/www.wpelemento.com\/wordpress-elementor-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress Elementor Themes<\/a>, you can take your pages to the next level and create a truly unique and personalized website.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n        \t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Customizing the design of your website is a powerful way to make it stand out and make a lasting impression on your visitors. One of the best ways to do this is by using Elementor custom CSS styles. With the Elementor plugin for WordPress, it&#8217;s easy to add custom CSS styles to your pages and [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":11979,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[78],"tags":[],"class_list":["post-8619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/8619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/comments?post=8619"}],"version-history":[{"count":91,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/8619\/revisions"}],"predecessor-version":[{"id":21837,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/8619\/revisions\/21837"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/media\/11979"}],"wp:attachment":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/media?parent=8619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/categories?post=8619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/tags?post=8619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}