Step 1: Create a New Page or Template
- Add a New Page or Template:
- Go to
Pages > Add NeworTemplates > Add Newin your WordPress dashboard. - Name your page or template and click Edit with Elementor.
- Go to
- Add a New Section:
- In the Elementor editor, click the + icon to add a new section.
- Select the 2-Column Layout (or any layout that suits your split section needs).
- In the Elementor editor, click the + icon to add a new section.
Step 2: Customize the Split Section Layout
1. Set Column Widths:
- Hover over the section and click the Column icon.
- Adjust the column width by dragging the divider or setting percentages (e.g., 50% – 50%, 60% – 40%).
2. Add Content to Each Column:
- Drag and drop widgets (e.g., Text Editor, Image, Buttons, Video, etc.) into each column.
- Customize the content as needed.
3. Apply ElementsKit Widgets:
- ElementsKit provides advanced widgets and modules that can enhance your split section. For example:
- Use the Advanced Heading widget for stylized headings.
- Use the Image Box widget for combining images and text.
- Use the Accordion or Tabs widget for collapsible or interactive sections.
- Use the Advanced Heading widget for stylized headings.
Step 4: Style the Split Section
1. Set Backgrounds for Columns:
- Click on a column, go to the Style tab, and set a background color, gradient, or image.
- Repeat for the second column to create contrast or complement the design.
2. Adjust Padding and Margins:
- Use the Advanced tab to adjust spacing between elements, ensuring a clean and balanced layout.
3. Add Borders or Dividers:
- Use the Border options under the Style tab to create a line or shadow effect between the columns.
4. Make It Responsive:
- Click the Responsive Mode button at the top of the Elementor editor.
- Check and adjust the layout for tablet and mobile views to ensure it looks great on all devices.
Step 5: Save and Publish
- Once satisfied with your split section layout, click Update or Publish to save your changes.
