我正在为我的 wordpress 网站配置小部件，但我希望这些小部件在 1200 像素后开始可见（例如）。就像在第一个小部件和 1200 像素的顶部菜单之间有一个边距，但我找不到实现这种行为的方法。
如果你想看一个真实的例子，你可以去这个帖子：
https://www.thetravelerlens.com/tutorial/photoshop/enfocar-photoshop
小部件必须出现在黑色细线分隔线（社交图标所在的位置）之后。
非常感谢您提前提供的所有帮助。
【问题讨论】：
我不确定您指的是哪个小部件。如果您正在谈论“ENFOCAR IMAGEN EN PHOTOSHOP”和“Lo más destacado de este artículo”部分，那么实现此目的的正确方法是检查您的主题文档，如果还有其他小部件区域可以使用，或通过 php 和子主题（我认为您已经在使用）移动您希望显示的小部件区域或使用 CSS，但不仅仅是边距。
从外观上看，您使用的是this theme。它不再可用，因此我无法查看工作演示，但通过查看页面上的屏幕截图，您可能还可以使用其他小部件区域。请看下面的截图：
See red rectangles in the screenshot
我建议你阅读你的主题文档，看看你是否可以使用这些，但一般来说，你可以：
继续发一篇文章，然后点击顶部管理栏中的自定义。
单击小部件，您应该会在此页面上看到所有可用小部件位置的列表。在不同的位置添加小部件，并检查另一个是否更适合您的需求。如果找不到任何东西，请检查下面的解决方案。
在您的父主题中找到一个名为 single.php 或 single-post.php 的文件并将其复制到您的子主题中。
在这个子主题文件中，找到代码中的小部件区域，它应该看起来像这样dynamic_sidebar( 'some_identifier' );。获取此代码，并将其移动到页面模板中的所需位置。
重新加载您的页面并检查它是否放置正确。您可能需要删除页面上的其他元素以删除顶部部分并在子主题的 style.css 文件中添加 CSS 以向新的小部件部分添加一些样式
请注意，这只是一般说明，每个主题都不同，因此您的主题可能会有所不同。
您还可以使用 CSS 移动整个小部件区域。如果没有更好的小部件位置，并且您不太习惯在 php 中玩耍，这可能是最好的解决方案。
使用弹性框：
这是一种更现代的方法，但对跨浏览器的支持较少。您还应该添加供应商前缀以获得更好的支持。
首先，我们将 flexbox 应用到父容器：
.single-post #tve_editor {
display: flex;
flex-direction: column;
}
然后我们将更改带有社交媒体图标的部分的顺序，使其位于所有其他元素之前：
.single-post .thrv_symbol_72533 {
order: -1;
top: -49px; //Little fix for the CSS Thrive builder applies
}
带绝对定位：
这个解决方案有更多的跨浏览器支持，但需要更多的 CSS 调整，主要用于media-queries 的响应行为（我不会在这里详细介绍）。
首先，我们将在小部件部分的顶部添加一个边距，该边距正好是带有社交媒体图标的部分的高度：
.single-post #tve_editor > .thrv-page-section.tcb-window-width {
margin-top: 115px !important;
}
然后我们将使用绝对定位移动页面顶部带有社交媒体图标的部分：
.single-post .thrv_symbol_72533 {
position: absolute;
top: -114px;
}
完成后，您需要检查响应行为并使用媒体查询应用 CSS 调整来调整所有情况下的布局。
为当前小部件添加边距：
同样，我不确定您是否真的指的是带有深色背景图像的顶部，但如果是这种情况，以下是为什么简单地添加 CSS 边距不是一个好主意的原因部分：
1200 像素高不是您可以移动小部件的固定距离，它适用于所有屏幕。您的主题是响应式的，因此此高度将根据设备而变化。例如，它在移动设备上会更高。
小部件的高度还取决于其内容。如果您在另一篇文章中有更多文字，它会更高，因此您不能只应用特定高度的边距并希望它在所有情况下都能正常工作。
您仍需要在具有社交媒体图标的部分下方创建一个足够高的空白区域以接收小部件部分。但是，由于高度是动态的，您不能只为其高度设置一个值。
【讨论】：