This is How to Change Section Height in WordPress (Shapely Theme)
As a WordPress developer, one of the most common requests I get from clients is to adjust the height of various sections on their website. Whether it's the hero banner, a parallax widget, or a secondary content area, being able to control the dimensions of different page elements is crucial for achieving the perfect layout and design.
The Shapely WordPress theme is a popular choice for many website owners, thanks to its modern aesthetic and robust feature set. However, like any theme, there may be times when you need to make custom CSS tweaks to get the layout just right. In this article, I'll walk you through the process of changing the section height in the Shapely theme, step-by-step.
Understanding the Default Shapely Theme Styles
Before we dive into the CSS changes, let's take a closer look at the default styles applied to the Shapely theme's various sections and widgets. This will help us identify the specific elements we need to target.
By default, the Shapely theme applies the following styles:
.bg-secondary {
padding: 30px 0;
}
.widget.shapely_home_parallax {
height: 335px;
}
The .bg-secondary
class is used to style secondary content sections on the website, such as the about section or the contact form. The default padding of 30px 0
means these sections have 30 pixels of vertical padding, but the height is determined by the content inside the section.
The .widget.shapely_home_parallax
class, on the other hand, is applied to the parallax effect widgets on the homepage. These widgets have a default height of 335 pixels.
So, if you want to adjust the height of either the secondary content sections or the parallax widgets, you'll need to target these specific CSS classes.
Changing the Height of Secondary Sections
Let's start by adjusting the height of the secondary content sections. As mentioned earlier, the default padding is 30px 0
, which means the height is determined by the content. If you want to set a fixed height, you can override this by adding the following CSS:
.bg-secondary {
padding: 100px 0;
}
This will set the vertical padding to 100 pixels, effectively increasing the overall height of the secondary sections. You can adjust the 100px
value to any height you prefer.
Alternatively, if you want to set a specific height without the padding, you can use the height
property instead:
.bg-secondary {
height: 500px;
}
This will set the height of the secondary sections to 500 pixels, regardless of the content inside.
Changing the Height of Parallax Widgets
Now, let's move on to adjusting the height of the parallax widgets on the Shapely theme's homepage. As mentioned earlier, the default height is set to 335 pixels using the .widget.shapely_home_parallax
class.
To change the height of these widgets, simply override the height
property in your custom CSS:
.widget.shapely_home_parallax {
height: 500px;
}
This will set the height of the parallax widgets to 500 pixels. Again, you can adjust the value to your preferred height.
Responsive Considerations
When making changes to the section heights, it's important to consider how your adjustments will impact the responsive design of your website. What may look great on a large desktop screen may not translate well to smaller devices like tablets and smartphones.
To ensure your website looks great on all screen sizes, you'll need to include media queries in your custom CSS to target specific breakpoints. For example, you might want to reduce the section height for smaller screens:
/* Desktop */
.bg-secondary {
height: 500px;
}
.widget.shapely_home_parallax {
height: 500px;
}
/* Tablet */
@media (max-width: 991px) {
.bg-secondary {
height: 400px;
}
.widget.shapely_home_parallax {
height: 400px;
}
}
/* Mobile */
@media (max-width: 767px) {
.bg-secondary {
height: 300px;
}
.widget.shapely_home_parallax {
height: 300px;
}
}
In this example, we're setting the section height to 500 pixels for desktop screens, 400 pixels for tablets, and 300 pixels for mobile devices. This ensures that your website will look great and maintain a consistent layout across all screen sizes.
Testing and Validation
Before implementing your custom CSS changes, it's always a good idea to thoroughly test your website to ensure everything is working as expected. Use your browser's developer tools to inspect the elements and verify that the new styles are being applied correctly.
You should also consider using a CSS linter or validator to check for any errors or potential issues in your code. Tools like CSS Lint or W3C CSS Validator can help you identify and fix any problems before pushing your changes live.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Integrating the CSS Changes
Once you're satisfied with your custom CSS, you have a few options for integrating the changes into your Shapely-powered website:
-
Child Theme: Create a child theme for the Shapely theme and add your custom CSS to the style.css
file. This is the recommended approach, as it ensures your changes won't be overwritten when the Shapely theme is updated.
-
Custom CSS Plugin: Use a plugin like Custom CSS and JS or Jetpack's Custom CSS to add your CSS changes. This is a quick and easy solution, but it may not be as robust as using a child theme.
-
WordPress Customizer: If you're only making a few minor adjustments, you can add your custom CSS directly to the WordPress Customizer under the "Additional CSS" section. This is a convenient option, but it's not recommended for larger or more complex CSS changes.
Regardless of the method you choose, be sure to thoroughly test your website after implementing the CSS changes to ensure everything is working as expected.
Conclusion
Adjusting the section heights in the Shapely WordPress theme is a straightforward process that can be accomplished with a few lines of custom CSS. By targeting the .bg-secondary
and .widget.shapely_home_parallax
classes, you can easily control the dimensions of your secondary content sections and parallax widgets.
Remember to consider responsive design and thoroughly test your changes before going live. With the right CSS adjustments, you can ensure your Shapely-powered website looks and performs exactly how you want it to.
If you found this article helpful, be sure to check out Flowpoint.ai – a powerful web analytics tool that can help you identify and fix technical issues on your website, improve user experience, and boost conversion rates.
Happy coding!