👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at firstname.lastname@example.org.
Beautify the default H tag style of WordPress (3 steps): The default CSS styles for WordPress websites are generally relatively simple. If you think this is beautiful enough, you can use CSS to add styles to it to make your WordPress website more beautiful. Today’s WordPress website will share implementation methods with you.
Continue to share the wordpress website building tutorial. Today we modify the default H tag style of the wordpress site to make it look better. If the content of your website articles is relatively long, then there is a high probability that you will use H tags, at least H2 tags, or H3 tags, which can make the content of the website more organized and have many benefits for website SEO optimization.
But the default H tag style of wordpress is rather ugly, there is only one big and thick style. Next, we will start to simply beautify the H tag style.
Table of Contents
Step 1: Find the H tag style of the current website
Someone may have tried to directly use the CSS style shared by others, but it did not take effect when used directly, because different websites have different themes, and the original CSS style ID is different, so we need to find the H tag of the current website first CSS styles.
First open an article containing the H tag, press F12 to enter the developer mode while browsing, select the H tag, and find the CSS style of the current H tag from the code, as shown on the right side of the above figure, we have determined that the H2 style ID of the current website is【.blog-details.details-content h2】. Then we just need to add the written CSS style into it. In the same way, we can find the H3 tag as 【.blog-details .details-content h3】.
Step 2: Write CSS styles
Next, we can directly debug the CSS style in the browser. If you don’t understand it, you can directly find someone else’s written one to modify it. Finally, 【WP-Host/悦然wordpress建站】 The finalized style is as follows:
Finally, we only need to add the above CSS code to the currently used wordpress website building theme.
Here【WP-Host/Yueran wordpress website building】recommended to add additional CSS code, do not directly modify the CSS file of the theme. The above code can be directly added to the [Additional CSS] function of the theme, or added to other CSS plugins. For example, you can install the Simple Custom CSS plugin.
The final H tag effect is shown in the figure above, which are the effects of H2 and H3 tags, which will look better than the original H tag style.
Today’s wordpress tutorial is shared here. Here is a reminder that although CSS styles can achieve many beautiful effects, if it is not necessary, you should not have too many CSS styles, otherwise it will affect the effect.
【WordPress Hosting / 悦然wordpress建站】I am a WordPress hobby from China, and I like to communicate with friends from all over the world to learn WordPress website building and maintenance related knowledge.