方法1：使用文本编辑器

1.在编辑文章或页面时，使用键盘输入竖直线字符 |。

方法2：使用小部件HTML

1. 在Elementor编辑器中选择小部件HTML。
2. 插入你要想放置分隔符的位置。
3.  复制并粘贴代码：|

方法3：使用短代码

1. 在编辑文章或页面时，插入一个自定义短代码。
   [separator]
2. 在主题的 functions.php 文件中添加短代码的处理函数。

   function custom_separator_shortcode() {
   return '<div class="custom-separator"></div>';
   }
   add_shortcode('separator', 'custom_separator_shortcode');

3. 在主题的样式表中添加 CSS 规则。

   .custom-separator {
   border-left: 1px solid #000; /* 根据需要调整颜色、宽度等样式 */
   height: 50px; /* 根据需要调整高度 */
   }

   这将在页面或文章中插入一个自定义样式的竖直分隔符。

选择适合你需求的方法，并根据需要进行样式定制。请记得备份你的主题文件或使用子主题来进行修改，以防止不小心破坏主题文件。

网站服务器Hostinger(20%折扣链接)：https://creativewebdev.net/hostinger

老牌域名注册商NameSilo优惠码：webdev

在查看完此文章的同时，您会发现以下资源也很有用：

• 如何自动和批量添加图片的alt属性？
• 如何提交API主动推送而加快百度普通收录？
• 如何把WordPress网站转换成手机APP？
• 15个WordPress网站必备插件
• 10个最好的WordPress缓存插件
• 8个最佳联盟营销WordPress在线赚钱插件

如果您喜欢这篇文章，请订阅我的网站，您将会收到最新的资源分享信息。您还可以在YouTube和小红书上找到我。

The post 如何在WordPress页面或文本中插入竖直分隔线？ first appeared on Creative Web Dev.

即使只有一点基本的HTML和CSS知识，也可以让你的网站看起来更专业和吸引人。以下是一些简单的HTML和CSS技巧，可以帮助你改善网站的外观和用户体验：

1. 使用语义化的HTML标签：使用语义化的HTML标签可以提高网站的可读性和可访问性，同时有助于搜索引擎理解你的网页内容。例如，使用<header>、<nav>、<main>、<section>、<article>等标签来组织页面内容。
2. 响应式设计：使用CSS媒体查询和弹性布局技术来创建响应式网站，使网站能够适应不同大小和分辨率的设备。这可以提高用户在不同设备上的浏览体验，并使网站看起来更专业。
3. 美化字体：使用CSS来调整字体样式、大小和颜色，以确保文字在网站上清晰可读，并与网站的整体设计风格相匹配。你可以使用Google Fonts等工具来选择和嵌入合适的字体。
4. 优化图像：使用CSS来调整图像的大小、位置和样式，以确保它们在网站上呈现良好。你也可以使用CSS技术来创建图像的悬停效果、过渡动画等，增强用户体验。
5. 边框和阴影：通过添加边框和阴影效果，可以使网站元素更加突出，并增加整体设计的深度和层次感。你可以使用CSS的border属性和box-shadow属性来实现这些效果。
6. 背景和颜色：使用CSS来设置背景颜色、背景图像和背景渐变，以及调整元素的颜色和透明度，可以使网站看起来更吸引人和专业。确保选择合适的颜色组合，以确保良好的可读性和视觉吸引力。
7. 间距和对齐：使用CSS来设置元素之间的间距和对齐方式，以确保页面布局整齐有序，并且各个元素之间的关系清晰明了

掌握一点基本的HTML和CSS知识，会让你的网站看起来更nice，推荐学习coding的两个网站：

freecodecamp

codepen

网站服务器Hostinger(20%折扣链接)：https://creativewebdev.net/hostinger

老牌域名注册商Namesilo优惠码：webdev

在查看完此文章的同时，您会发现以下资源也很有用：

• 如何设置外贸独立站多客服WhatsApp聊天功能？
• 如何提交API主动推送而加快百度普通收录？
• 15个WordPress网站必备插件
• 10个最好的WordPress缓存插件
• 8个最佳联盟营销WordPress在线赚钱插件
• 如何順利轉移網站域名到另一個服務供應商？
• 如何順利把網站共享主機轉移到VPS主機？
• 如何免費申請D-U-N-S鄧白氏編碼？
• 如何使用D-U-N-S編號註冊Google的公司開發者賬號？
• 如何搭建 URL 短鏈接平台？
• 如何把網站封裝成 App 並上架 Google 和 Apple？
• 如何創建多語言外貿獨立站？
• 4 個最流行的WordPress免費主題

如果您喜欢这篇文章，请订阅我的网站，您将会收到最新的资源分享信息。您还可以在YouTube和小红书上找到我。

The post 免费学习基本的HTML和CSS知识，超多项目可以练习coding first appeared on Creative Web Dev.