For this we can change the CSS style of the WordPress template. But what is CSS? How can you use CSS to change the look of your blog? Here we teach you.
To get started, let's start by understanding what CSS is. In short, it is a sheet with lines of code, which style the various HTML elements that make up a web page.
By changing the values in the various properties and selectors, you can change the appearance of the page. We briefly explain how to create an elegant CSS header for your webpage and how you can change the CSS style of your template in WordPress.
How to edit the CSS in a WordPress template?
There are several ways to edit CSS code in WordPress, but here we will explain one of the simplest: via the dynamic editor the application itself. This feature is available from WordPress version 4.7. By simply clicking on the "Appearance" → "Customize" → "Additional CSS" menu, you can access a CSS editing area with good functionality.
But now, how do you know which elements you want to customize on your page? For this, we will use the inspector of elements of your browser. For example Firefox allows you to easily and easily edit or change the text or element of your web page.
To do this, we open the Web page or the WordPress blog whose appearance we want to change and we position ourselves on the element we want to change, by clicking with the right mouse button, we select "Inspect" in the drop-down menu. A panel will open in which the HTML code of that element is displayed on the one hand and the CSS codes that give it the style on the other.
Even in the same panel, when you find the elements, labels and selectors you want to customize, you can try change property values you want so you can immediately see what they look like on the left side of the screen. Now all you need to do is rewrite the CSS in WordPress.
How to override CSS code in WordPress?
Now that you know the elements you want to change in the WordPress CSS, go back to the post and open the dynamic editor. Therefore, type the tag or element you want to change to based on what you previously did in the browser element inspector. Finally, place the properties you want to change and enter new custom values. Give your website the look you like best!
Remember that you have to follow the structure of the CSS code as seen in the browser elements inspector. An advantage of the WordPress dynamic CSS editor is that it makes it easy to edit with various features, such as code highlighting that helps identify classes, tags, and values. Additionally, it has built-in auto-completion text and a typing error detector.
There are many properties you can change for give your page a change of styleFor example: you could change the appearance of the titles and subtitles represented by the tags H1, H2,… With the properties: font-size, text - family, color, background, among others.
In addition, you can easily insert or change a FAVICON, the background of the form fields, the color of the buttons and the text they contain. It also changes the appearance of some elements before an action, such as: the color of menu items when you hover or click on them.
However, you have to be careful to change some of the properties belonging to certain elements in the CSS code. Since these can completely change and ruin the structure of your website. Some of these properties are: width, height, fill, margin, position, display, among others. If you can't identify what aspect a property refers to, don't change it.
Now customizing your blog or website is a breeze! Design your website to your liking and change the header and footer in WordPress making it more attractive to visitors.
TagsWordPress
