Adding and Arranging Sections

Now that you have a new page, let’s give it some content! Pixelesq pages are built by stacking sections – think of sections as pre-designed content blocks (like Lego pieces for your website). In these steps, you’ll learn how to add new sections to a page, rearrange them, and remove any sections you don’t want.

Steps

  1. Open the section library: In the page editor, look for a + Add Section button or placeholder. It appears between sections (and if your page is empty, you’ll see a large prompt to add your first section). Click + Add Section to bring up the sections library. Ensure the Sections tab is selected (this tab lists all the available content section designs). You’ll notice categories like Hero, Content, Forms, etc., to help you find the type of section you need.

  2. Choose and insert a section: Browse or search within the library for a section that fits your needs:contentReference[oaicite:8]{index=8}. For example, if you want a big title at the top, pick a Hero section. Click on the section thumbnail you want (❶). A preview and description may show on the right side to help you decide. Once clicked, Pixelesq will insert that section onto your page. You’ll see it appear in your page layout immediately. Don’t worry if the placeholder content isn’t exactly what you need – you’ll be able to edit text and images in the next steps.

  3. Reorder sections (if needed): Maybe you add a section and then decide you want it in a different spot. To move a section up or down, use the drag handle on the section list. In the left sections list, each section has a handle (often represented by a set of dots or lines). Grab the handle next to the section’s name (❶) and drag the section to a new position in the list:contentReference[oaicite:9]{index=9}. As you drag, Pixelesq highlights the spot where the section will land. Drop it in the desired spot, and the page preview will update the order instantly.

  4. Remove unwanted sections: If you added a section you don’t need or want to delete a placeholder section, it’s simple to remove. Click the delete icon for that section (❷) to remove it (as shown in the image above). Pixelesq will remove the section from your page. Don’t worry – this won’t affect other pages. It only removes that section from the current page. If you remove something by mistake, you can always re-add a new section again.

Take a moment to add a few sections and arrange them in a logical order. You might have a hero at the top, some text or image sections in the middle, and perhaps a call-to-action near the bottom. You now know how to build the skeleton of your page!

Troubleshooting

  • Can’t find a section you saw before: Make sure you’re looking under the correct category in the section library. If it was a special design (like a custom-made one for your site), ensure it’s available or hasn’t been removed by an update.

  • Section won’t drag: If you’re unable to drag a section, try clicking and holding on the section’s handle icon (the small grip). Ensure you’re not clicking a non-draggable part of the section item. Also, very short pages (with only one section) won’t show drag capability until there are multiple sections to reorder.

  • Removed the wrong section: There’s no undo button, but you can quickly re-add a section. Pixelesq makes it fast to insert a new one, so if you delete something by accident, just click + Add Section and bring it back.

What’s Next

Your page now has structure! Next, let’s fill in those sections with your own content. Head over to Editing Text, Images, and Buttons to learn how to customize the text and media in each section. This will turn the generic placeholders into your unique content.

NEWLY LAUNCHED

Effortless Integration

Our product seamlessly integrates with existing tools and workflows, ensuring smooth transitions and maintaining productivity levels.
Laptops

Targeted Audience

Deliver personalized content to your audience, enhancing engagement and driving conversions through targeted messaging strategies.
Laptops
built with
Pixelesq Logo
pixelesq