Intermediate
How to combine landing page components on Shipixen
Quick Answer
Combining landing page components on Shipixen involves selecting multiple components from the library, arranging them in your desired order, and customizing their content and styling to create a cohesive page flow. You can drag and drop components, adjust spacing, and modify individual component settings to achieve your desired layout.
Prerequisites
- Active Shipixen account
- Basic understanding of landing page design
- Familiarity with component-based layouts
- Project already created in Shipixen
1
Access the Component Library
Navigate to your Shipixen project dashboard and click on Landing Pages in the sidebar. Select your target page or create a new one, then click the Add Components button to open the component library.
Tip
Browse components by category (Hero, Features, Testimonials, etc.) to find complementary elements for your page.
2
Select Your First Component
Choose your primary component, typically a Hero Section. Click on it to add it to your page canvas. You'll see it appear at the top of your page with default content and styling.
Tip
Start with high-impact components like Hero or Value Proposition sections to establish your page hierarchy.
3
Add Secondary Components
Click Add Components again and select additional components like Features, Benefits, or Pricing. Each component will be added below the previous one in the order you select them.
Tip
Consider the user journey flow - typically Hero → Problem/Solution → Features → Social Proof → Pricing → CTA.
4
Arrange Component Order
Use the drag handles (six dots icon) on the left side of each component to reorder them. Drag components up or down to achieve your desired page flow. You'll see a blue insertion line indicating where the component will be placed.
Tip
Place social proof elements (testimonials, logos) strategically between features and pricing for maximum impact.
5
Customize Individual Components
Click on each component to access its Settings Panel on the right. Modify text content, upload images, adjust colors, and configure component-specific options like number of columns or button styles.
Tip
Maintain consistent color schemes and font choices across all components for a cohesive brand experience.
6
Adjust Spacing and Layout
In the component settings, use the Spacing controls to adjust padding and margins between components. You can also modify Background Settings to alternate between different background colors or add section dividers.
Tip
Use alternating background colors (white/light gray) to create visual separation between different sections.
7
Configure Component Interactions
Set up Call-to-Action buttons across components to link to the same conversion goal. Use the Button Settings to ensure consistent styling and link all CTAs to your primary conversion page or form.
Tip
Include multiple CTAs throughout the page but ensure they all lead to the same primary action to avoid confusing visitors.
8
Preview and Test the Combined Layout
Click Preview to see your combined components in action. Test the page flow, check mobile responsiveness using the device toggles, and verify that all components work together harmoniously before publishing.
Tip
Test the page on different devices and screen sizes to ensure your component combination works well across all viewports.
Troubleshooting
Components appear misaligned or have inconsistent spacing
Check the Container Settings for each component and ensure they're using the same max-width and padding values. Use the global spacing controls to maintain consistency.
Page loading is slow with multiple components
Optimize images in each component by using WebP format and appropriate sizing. Consider removing unused components or combining similar sections to reduce page complexity.
Mobile layout breaks with combined components
Switch to Mobile Preview mode and adjust column layouts for each component. Ensure text sizes and button spacing are mobile-optimized in the responsive settings.
Components don't match brand colors consistently
Use the Global Theme Settings to set primary and secondary colors that will apply across all components. Override individual component colors only when necessary for specific design needs.
Ready to get started with Shipixen?
Put this tutorial into practice. Visit Shipixen and follow the steps above.
Visit Shipixen →