Hi Chris,
Absolutely, you can create a website with horizontal scrolling using Elementor, though it requires some adjustments. There are two main approaches:
1. Using Elementor Pro (Recommended): Elementor Pro offers a built-in feature for horizontal scrolling effects. Here's how to achieve it:
- Create a new page and enter the Elementor editor.
- Design your sections with the content you want to display horizontally.
- Duplicate the sections to create a sequence.
- Select each section and go to the "Advanced" tab in the settings panel.
- Under "Motion Effects," activate "Scrolling Effects."
- Choose "Horizontal Scrolling" and define the direction (left or right).
2. Using Custom CSS (Free, but requires more coding): This method involves adding custom CSS code to your website. Here's a general outline:
- Create your sections with Elementor as usual.
- Go to the "Advanced" tab in the main section settings.
- In the "CSS Classes" field, add a class name (e.g., "horizontal-scroll").
- In your WordPress dashboard, navigate to Appearance > Customize > Additional CSS.
- Paste the following code, replacing "horizontal-scroll" with your class name:
CSS
CSS:
.horizontal-scroll {
display: flex; /* Arranges sections side-by-side */
overflow-x: scroll; /* Enables horizontal scrolling */
width: 100vw; /* Ensures sections fill the viewport width */
}
.horizontal-scroll > * {
width: 100vw; /* Makes each section take full width */
}
Additional Notes: - Consider using responsive design techniques to adjust the layout for different screen sizes.
- The free method offers more flexibility but requires some coding knowledge. Elementor Pro simplifies the process with a visual interface.
- Websites like offer video tutorials that walk you through the process step-by-step for both methods.
By following these steps, you can create a website with horizontal scrolling using Elementor, similar to the example you provided.
