How to combine landing page components on Shipixen

intermediate 8 min read Updated 2026-03-18

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.

Get ShipixenPartner

Try Shipixen Full Shipixen Review

Prerequisites

Active Shipixen account
Basic understanding of landing page design
Familiarity with component-based layouts
Project already created in Shipixen

Step-by-Step Instructions

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.

Browse components by category (Hero, Features, Testimonials, etc.) to find complementary elements for your page.

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.

Start with high-impact components like Hero or Value Proposition sections to establish your page hierarchy.

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.

Consider the user journey flow - typically Hero → Problem/Solution → Features → Social Proof → Pricing → CTA.

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.

Place social proof elements (testimonials, logos) strategically between features and pricing for maximum impact.

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.

Maintain consistent color schemes and font choices across all components for a cohesive brand experience.

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.

Use alternating background colors (white/light gray) to create visual separation between different sections.

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.

Include multiple CTAs throughout the page but ensure they all lead to the same primary action to avoid confusing visitors.

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.

Test the page on different devices and screen sizes to ensure your component combination works well across all viewports.

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Shipixen website before purchasing.

Visit Shipixen View Shipixen Pricing