Intro to HTML in WordPress
Learn basic HTML tags and how to use them in WordPress to format content, customize layouts, and gain more control over their site’s appearance.
Scripture
Proverbs 4:7 (HCSB) – “Wisdom is supreme—so get wisdom. And whatever else you get, get understanding.”
→ Tie-in: Understanding HTML gives you deeper control over your website, allowing you to go beyond pre-built tools like Divi.
Logo Setup
How to Add a Logo in Divi (Step-by-Step)
Log in to the WordPress dashboard
In the left sidebar, click Divi → Theme Options
At the top of the General tab, find the section labeled Logo
Click Upload (or Upload Image)
Choose your logo file from your Media Library or upload a new file
Click Set as Logo
Scroll down and click Save Changes
🧩 Optional — Adjust logo size in the header
Go to Divi → Theme Customizer
Click Header & Navigation
Click Primary Menu Bar
Adjust:
Logo Max Height
Menu Height
Click Publish to save
✔ Helpful tips for students
Use PNG with transparent background for best look
Recommended size: around 250–400 px width
Keep logo file name simple (example: school-logo.png)
Save a backup of the original logo file
What is HTML?
- Definition: HyperText Markup Language — the standard language for creating web pages.
- HTML is the “skeleton” of the webpage, telling the browser what each piece of content is.
- Even with a visual builder like Divi, HTML knowledge lets you:
- Fix layout issues.
- Add special formatting.
- Customize beyond what Divi offers.
https://www.w3schools.com/html/html_intro.asp
Basic HTML Tags
- Headings: <h1> to <h6> (H1 for page title, H2–H3 for subheadings).
- Paragraphs: <p> for text.
- Bold & Italics: <strong> and <em>.
- Links: <a href=”URL”>Link Text</a>.
- Images: <img src=”URL” alt=”description”>.
- Lists:
- Ordered: <ol><li>Item</li></ol>
- Unordered: <ul><li>Item</li></ul>
Line Break: <br>.
Using HTML in WordPress
- Live demo:
- Open an existing page in the WordPress block editor.
- Add a “Custom HTML” block.
- Type simple HTML code and preview the result.
- Switch Divi to “Text” mode to edit module content in HTML.
Show how to fix formatting issues by editing HTML directly.
Homework
Watch https://youtu.be/BzYMFd-lQL4
What was the most surprising or useful thing you learned from this video, and how might it help you in web design?