WordPress News and Tips
best wordpress website design examples, award winning websites reviews
Buttons vs Links: When To Use Each In Divi 5 (With Practical Examples)
Your site is full of things people can click. Menus, buttons, icons, banners, and form submits. They can look identical, but the HTML underneath tells browsers, screen readers, and search engines what each element actually is.
With Divi 5, you can control that meaning directly in the builder using Semantic Elements and Custom Attributes. In this post, you will learn the practical rule for choosing links vs buttons, plus real Divi 5 examples you can copy into your own layouts.
Buttons vs Links: The Difference Explained
Links and buttons can look the same, but they do different jobs in your code.
A link uses the <a> tag with an href attribute. It points to a URL. Click it, and you move to a new page, a different section, or an external site. A button uses the <button> tag for in-page actions. You can also apply role=”button” to a non-button element, but then it must be focusable and support keyboard activation so it behaves like a real button. Click it, and something happens right where you are: a form submits, a modal opens, content toggles, a menu appears.
ElementTagPurposeKeyboard Activation
Link<a href="...">Navigation to another locationEnter key
Button<button> or role="button"Action on current pageSpace bar or Enter key
Both can be styled to look identical. CSS can make a link look like a button and a...
With Divi 5, you can control that meaning directly in the builder using Semantic Elements and Custom Attributes. In this post, you will learn the practical rule for choosing links vs buttons, plus real Divi 5 examples you can copy into your own layouts.
Buttons vs Links: The Difference Explained
Links and buttons can look the same, but they do different jobs in your code.
A link uses the <a> tag with an href attribute. It points to a URL. Click it, and you move to a new page, a different section, or an external site. A button uses the <button> tag for in-page actions. You can also apply role=”button” to a non-button element, but then it must be focusable and support keyboard activation so it behaves like a real button. Click it, and something happens right where you are: a form submits, a modal opens, content toggles, a menu appears.
ElementTagPurposeKeyboard Activation
Link<a href="...">Navigation to another locationEnter key
Button<button> or role="button"Action on current pageSpace bar or Enter key
Both can be styled to look identical. CSS can make a link look like a button and a...
https://www.elegantthemes.com/blog/div
Telex Updates: From Napkin Sketch to WordPress Block (and More)
When we launched Telex back in August, we invited everyone to experiment with AI-powered block creation.
Since then, thousands of you have built blocks, shared feedback, and pushed the tool in directions we didn’t expect.
That enthusiasm kept us going. Here’s what’s new.
1. Show Telex what you want to build
You can now upload reference images when describing your block. A Figma mockup. A screenshot of a design you like. A napkin sketch.
Upload it alongside your prompt and let Telex see what you’re imagining.
This helps most with complex layouts — or when you’re chasing a specific aesthetic. Instead of writing a detailed description of how every element should be arranged, just show it.
A picture is worth a thousand prompt words, or so they say.
2. Work in your favorite editor, then come back
One of our most requested features — editing blocks outside of Telex — is here.
Download your block, open it in VS Code, Cursor, or whatever you prefer (we’re not starting that debate), and make your changes. Then upload the zip back to Telex to keep refining with AI.
This round-trip workflow bridges AI generation and traditional development. It’s early days — we’ll keep improving it.
3. Explore previous versions risk-free
Version history now works better. When you...
Since then, thousands of you have built blocks, shared feedback, and pushed the tool in directions we didn’t expect.
That enthusiasm kept us going. Here’s what’s new.
1. Show Telex what you want to build
You can now upload reference images when describing your block. A Figma mockup. A screenshot of a design you like. A napkin sketch.
Upload it alongside your prompt and let Telex see what you’re imagining.
This helps most with complex layouts — or when you’re chasing a specific aesthetic. Instead of writing a detailed description of how every element should be arranged, just show it.
A picture is worth a thousand prompt words, or so they say.
2. Work in your favorite editor, then come back
One of our most requested features — editing blocks outside of Telex — is here.
Download your block, open it in VS Code, Cursor, or whatever you prefer (we’re not starting that debate), and make your changes. Then upload the zip back to Telex to keep refining with AI.
This round-trip workflow bridges AI generation and traditional development. It’s early days — we’ll keep improving it.
3. Explore previous versions risk-free
Version history now works better. When you...
https://wordpress.com/blog/2026/02/19/
Lily Burton Is Pivoting from PhD to Science Journalism. Her Portfolio Took an Hour to Build — and Already Landed Her Work.
Lily Burton spent years in the lab. PhD in biochemistry and molecular biophysics at the University of Chicago. Deep research. Big questions.
But something was missing.
“I really enjoyed thinking about very deep questions,” she says. “But I kind of missed the human element. I would get frustrated — why should a normal, everyday person care about this?”
That question led her toward science writing. And eventually, to a portfolio she built in an hour using our AI website builder.
From lab to byline
To pursue her science writing dream, Lily built up slowly. Volunteer projects. Small bylines. Then, in late 2023, she applied to the AAAS Mass Media Fellowship — mostly as practice.
She got in.
Ten weeks at a public radio station in North Carolina, reporting on science. That was the moment it became real.
“This might actually be something I could do.”
The portfolio problem
But to get paid work, she needed a portfolio. A place to show her clips. Proof she could do the job.
She kept putting it off.
I had been dreading making the website — not because it would be so hard, but I just didn’t know exactly how to do it.
Then a deadline hit. An internship application. Four hours to finish everything — resume, cover letter, portfolio.
She opened WordPress.com, found the AI website builder, and started...
But something was missing.
“I really enjoyed thinking about very deep questions,” she says. “But I kind of missed the human element. I would get frustrated — why should a normal, everyday person care about this?”
That question led her toward science writing. And eventually, to a portfolio she built in an hour using our AI website builder.
From lab to byline
To pursue her science writing dream, Lily built up slowly. Volunteer projects. Small bylines. Then, in late 2023, she applied to the AAAS Mass Media Fellowship — mostly as practice.
She got in.
Ten weeks at a public radio station in North Carolina, reporting on science. That was the moment it became real.
“This might actually be something I could do.”
The portfolio problem
But to get paid work, she needed a portfolio. A place to show her clips. Proof she could do the job.
She kept putting it off.
I had been dreading making the website — not because it would be so hard, but I just didn’t know exactly how to do it.
Then a deadline hit. An internship application. Four hours to finish everything — resume, cover letter, portfolio.
She opened WordPress.com, found the AI website builder, and started...
https://wordpress.com/blog/2026/02/18/
Introducing the WordPress AI Assistant — Now Built Into WordPress.com
The WordPress AI Assistant is now available on WordPress.com.
If you’ve used our AI website builder, you already know how easy it is to create a full site by having a conversation. Now, that same intelligence stays with you inside the editor and Media Library.
Unlike standalone AI tools, the WordPress AI Assistant works inside your site. It understands your content and layout and can take action where you’re already building — no copy-pasting, no prompt engineering, and no code to figure out what to do with.
Sites on WordPress.com’s Business or Commerce plans can now opt into the WordPress AI Assistant at no extra cost.
Build, write, design, and manage without breaking your flow
The new AI assistant will show up in a few places within your WordPress experience once enabled on each of your sites:
The Editor
Get help with site-wide structure and design decisions, as well as content editing and refinement without leaving the editor. You can adjust layouts, styles, and patterns on your posts and pages just by talking — and see changes take shape as you work.
You can ask it to:
“Make this section feel more modern and spacious.”
“Change my site colors to be more bright and bold.”
“Give me more font options that feel clean and professional.”
“Add a testimonials section below this section.”
“Add a Contact page.”
“Rewrite this...
If you’ve used our AI website builder, you already know how easy it is to create a full site by having a conversation. Now, that same intelligence stays with you inside the editor and Media Library.
Unlike standalone AI tools, the WordPress AI Assistant works inside your site. It understands your content and layout and can take action where you’re already building — no copy-pasting, no prompt engineering, and no code to figure out what to do with.
Sites on WordPress.com’s Business or Commerce plans can now opt into the WordPress AI Assistant at no extra cost.
Build, write, design, and manage without breaking your flow
The new AI assistant will show up in a few places within your WordPress experience once enabled on each of your sites:
The Editor
Get help with site-wide structure and design decisions, as well as content editing and refinement without leaving the editor. You can adjust layouts, styles, and patterns on your posts and pages just by talking — and see changes take shape as you work.
You can ask it to:
“Make this section feel more modern and spacious.”
“Change my site colors to be more bright and bold.”
“Give me more font options that feel clean and professional.”
“Add a testimonials section below this section.”
“Add a Contact page.”
“Rewrite this...
https://wordpress.com/blog/2026/02/17/
How To Create An Off Canvas Services Popup In Divi 5
Off canvas menus appear everywhere on the web, but building one that works smoothly on desktop often means fighting with custom CSS or patching together mega-menu workarounds. Divi 5 handles this differently with Canvases and Interactions.
We’ll build a global off canvas services menu triggered from a Theme Builder header template. The menu sits in its own canvas, completely separate from your page layout, and stays fixed while visitors scroll. On mobile, it gets a max-height and internal scroll so everything stays accessible on smaller screens.
What Are Canvases In Divi 5?
A canvas in Divi 5 is a separate workspace that exists outside your main page layout. Your page content lives in the main builder area, but canvases operate independently and stay hidden until triggered.
Think of them as dedicated containers for interface elements that only appear when needed. You build off canvas menus, slide-in panels, popups, or drawers inside a canvas, and they wait in the background until a button click or interaction pulls them into view. The page doesn’t register their presence until that moment.
After updating your Divi 5 theme to the latest version, you’ll see a new Canvas dropdown in the top bar.
The dropdown lets you switch between canvases you’ve created. The Canvas Grid View option shows all canvases in a single dashboard for quick access.
You can...
We’ll build a global off canvas services menu triggered from a Theme Builder header template. The menu sits in its own canvas, completely separate from your page layout, and stays fixed while visitors scroll. On mobile, it gets a max-height and internal scroll so everything stays accessible on smaller screens.
What Are Canvases In Divi 5?
A canvas in Divi 5 is a separate workspace that exists outside your main page layout. Your page content lives in the main builder area, but canvases operate independently and stay hidden until triggered.
Think of them as dedicated containers for interface elements that only appear when needed. You build off canvas menus, slide-in panels, popups, or drawers inside a canvas, and they wait in the background until a button click or interaction pulls them into view. The page doesn’t register their presence until that moment.
After updating your Divi 5 theme to the latest version, you’ll see a new Canvas dropdown in the top bar.
The dropdown lets you switch between canvases you’ve created. The Canvas Grid View option shows all canvases in a single dashboard for quick access.
You can...
https://www.elegantthemes.com/blog/des
9 Steps to Prepare Your WordPress Site for AI Search Engines
AI search tools such as ChatGPT and Google’s AI Mode are changing how people find content.
The good news? Your WordPress site can show up in both traditional Google results and AI-generated answers with a few practical tweaks.
In fact, most of what AI systems need already exists in WordPress — if you structure and use it properly.
This guide shows you how to optimize your WordPress site for AI search with nine simple steps.
1. Write answer-first content with a clear structure
Start each section with the main point, then add supporting details when creating content for your website.
AI systems extract information by scanning for direct answers and clear patterns. When you lead with the answer and use structured formatting, AI can quickly identify, extract, and cite your content.
Here’s an example of this answer-first approach: a question-based heading followed by a paragraph that starts with the most relevant details, then adds more context later.
How to do it in WordPress
Start each page with a direct answer, definition, or takeaway.
Use Heading, List, Table, and Quote blocks to break content into scannable sections.
Match your first sentence to your heading. If the heading asks “What is matcha?”, start with “Matcha is…”.
Keep paragraphs short (2–3 sentences) so AI can extract key points...
The good news? Your WordPress site can show up in both traditional Google results and AI-generated answers with a few practical tweaks.
In fact, most of what AI systems need already exists in WordPress — if you structure and use it properly.
This guide shows you how to optimize your WordPress site for AI search with nine simple steps.
1. Write answer-first content with a clear structure
Start each section with the main point, then add supporting details when creating content for your website.
AI systems extract information by scanning for direct answers and clear patterns. When you lead with the answer and use structured formatting, AI can quickly identify, extract, and cite your content.
Here’s an example of this answer-first approach: a question-based heading followed by a paragraph that starts with the most relevant details, then adds more context later.
How to do it in WordPress
Start each page with a direct answer, definition, or takeaway.
Use Heading, List, Table, and Quote blocks to break content into scannable sections.
Match your first sentence to your heading. If the heading asks “What is matcha?”, start with “Matcha is…”.
Keep paragraphs short (2–3 sentences) so AI can extract key points...
https://wordpress.com/blog/2026/02/16/
When To Use Section, Aside, And Main HTML Elements In Divi 5
Search engines and assistive technologies rely heavily on your page’s HTML structure to understand what each part is for. When everything is wrapped in generic <div> elements, they get less structural context, which can make your content harder to interpret and navigate.
Using <main>, <section>, and <aside> can clarify your page structure and improve navigation for screen reader users. It also gives search engines a clearer context about which content is primary versus supporting.
So when should you use each one? In this post, we’ll break down how these elements work and how Divi 5 makes it easy to assign semantic elements to any part of your layout. Let’s get into it.
The Three Key Semantic Elements
Semantic HTML includes many elements that describe page structure and content roles, each with a specific purpose. The elements you’ll use most often for structure are <main>, <section>, and <aside>. Understanding what they do individually helps you structure pages correctly. We’ll look at how each element works and what it tells browsers about your content in this section:
Understanding The Section Element
<section> groups related content into a distinct thematic region. Content on a page rarely exists as one continuous block. You’ve got an introduction, some background info, the main points, and a conclusion. Each of...
Using <main>, <section>, and <aside> can clarify your page structure and improve navigation for screen reader users. It also gives search engines a clearer context about which content is primary versus supporting.
So when should you use each one? In this post, we’ll break down how these elements work and how Divi 5 makes it easy to assign semantic elements to any part of your layout. Let’s get into it.
The Three Key Semantic Elements
Semantic HTML includes many elements that describe page structure and content roles, each with a specific purpose. The elements you’ll use most often for structure are <main>, <section>, and <aside>. Understanding what they do individually helps you structure pages correctly. We’ll look at how each element works and what it tells browsers about your content in this section:
Understanding The Section Element
<section> groups related content into a distinct thematic region. Content on a page rarely exists as one continuous block. You’ve got an introduction, some background info, the main points, and a conclusion. Each of...
https://www.elegantthemes.com/blog/div
Using Divi 5’s Flexbox Layout System For Responsive Web Design
Responsive design often comes down to controlling how elements shift, wrap, and space themselves across different screens.
Divi 5 introduces Flexbox as its core layout system, giving you control over layout flow and alignment at the container level. While block-style layouts lock you into fixed columns and floats, Flexbox adjusts to available space, making responsive behavior more predictable.
In this post, we’ll look at how Flexbox works in Divi 5 and walk through a simple layout to show how these tools come together to create a clean, responsive design with fewer adjustments.
What Is Flexbox In Divi 5?
Flexbox is a modern way of arranging elements so they automatically adapt to available space. Think of it like organizing items on a shelf: you decide how they should sit, how much room they need, and what happens when you run out of space.
Rather than locking modules into fixed columns, Flexbox treats a section or container as a flexible space and gives you control over how its items should behave as the screen size changes.
This flexibility becomes especially useful when you’re building for multiple screen sizes. You no longer need to guess how elements will squeeze together on a tablet or worry about content overflowing on mobile. Flexbox handles those adjustments for you based on the rules you set at the container level.
Divi 5 now includes Flexbox as a core...
Divi 5 introduces Flexbox as its core layout system, giving you control over layout flow and alignment at the container level. While block-style layouts lock you into fixed columns and floats, Flexbox adjusts to available space, making responsive behavior more predictable.
In this post, we’ll look at how Flexbox works in Divi 5 and walk through a simple layout to show how these tools come together to create a clean, responsive design with fewer adjustments.
What Is Flexbox In Divi 5?
Flexbox is a modern way of arranging elements so they automatically adapt to available space. Think of it like organizing items on a shelf: you decide how they should sit, how much room they need, and what happens when you run out of space.
Rather than locking modules into fixed columns, Flexbox treats a section or container as a flexible space and gives you control over how its items should behave as the screen size changes.
This flexibility becomes especially useful when you’re building for multiple screen sizes. You no longer need to guess how elements will squeeze together on a tablet or worry about content overflowing on mobile. Flexbox handles those adjustments for you based on the rules you set at the container level.
Divi 5 now includes Flexbox as a core...
https://www.elegantthemes.com/blog/div
