Unbounce Answers/FAQ/Page Builder - Basics

What is a 'page section'?

Oli Gardner
posted this on October 21, 2010 10:36 PM

Page sections are the foundation of Unbounce landing pages. Each page must have at least one page section, within which you place your other page elements.

The purpose of page sections is to allow you to break up your page into separate areas (header, banner area, main content area, footer). Page sections can be stretched to increase their height - automatically moving the section below.

If you have a page with repetitive content, you can create one block of content within a page section, then you can duplicate the entire page section to add your next block of content to the page.

Our templates are already split up into a series of page sections. If you open up the left-hand inspection panel you will see how the content of the page is broken up into sections and which content is contained within each section.

page_contents.png

Notice how each section or content element is named appropriately. Like layers in photoshop you can double-click them to rename the elements for better organization.

In this example, the Logo Header, Headline, and Features and Form are page sections, which contain other components like text, boxes, images, and forms.

Page sections can be duplicated, or moved up and down using the controls in the editor toolbar.

When you add a new page section it starts at the bottom of the page - click the "Move Up" button to move it up the page to where you'd like it to appear.

 

Head over to our Getting Started Guide to learn more about using Page Sections ยป

 

 

Comments

User photo
Michael Keplinger

How can I move an a block of content or image from one section to another?

August 24, 2011 03:56 PM
User photo
Justin Stacey
Unbounce

Hi Michael,

Unfortunately the answer to your question, at the moment at least, is no. However we have just completed work on a new version of the editor which will allow you to move content between one page section to another and also in between other containers such as boxes. I can't give you an exact release date because that depends on whether or not we find any significant bugs during testing, but it should be quite soon. We will probably "pre-release" the new version to a select group of customers first to mitigate any problems that maybe encountered so if you are interested in that let us know.

 

In the meantime if you are having problems with a particular page you have built let us know by sending an email to support@unbounce.com and we may be able help you out.

thanks

Justin

August 24, 2011 07:04 PM
User photo
Dominic Zabriskie

Can I copy an entire page section from one champion variant so that I can use it in another?

September 14, 2011 08:16 PM
User photo
Jacquelyn Ma
Unbounce

Hi Dominic,

Unfortunately we do not currently have the functionality to move page sections between Unbounce as each Page section is created and rooted into a given landing page when initially generated. However, please feel free to visit our development team at http://getsatistfaction.com/unbounce to discuss any features you would like to see in the future.

I hope this information helps. Please don't hesitate to send us a message at support@unbounce.com if you have any further questions about the system and how to use particular features.

 

Cheers,

Jacquelyn M

September 15, 2011 08:19 AM
User photo
John Balestrieri

Any update on when the ability to move elements between sections will be available? I feel dead-in-the-water at the moment. :(

September 20, 2011 11:55 AM
User photo
Patrick Allen

Is there a way to re use page sections that were generated by templates?  I'm not ready to use all the sections yet, but I would like to store the sections for later use.

September 27, 2011 02:10 PM
User photo
Ronen Bekerman

I'm trying to build a landing page currently and a must say... Unbounce is not yet the easiest way to build a landing page!

 

- Not being able to move items among section.

- Not being able to select a group of items (only 1 at any given time).

- Not being able to rotate images.

- No fast and automatic Mailchimp / Aweber / Other email list app integration

- No fast and easy social buttons integration (Twitter, Facebook, Linkedin, Google+, ... )

 

I find your interface keeps sending be back to Photoshop all the time since it is limited in what it allows to do!

 

I tested this system a year+ ago and nothing has changed much...  Isn't this something all users here would want? yesterday?

September 28, 2011 12:32 AM
User photo
Frank Taylor

I would like to round the corners of my page sections. Is this possible? 

May 10, 2012 08:38 AM
User photo
Justin Stacey
Unbounce

It is possible to add round corners to a page section using custom CSS. This will only affect the appearance in the preview and published page but will not appear while in the editor. First you will need to identify the "id" of the page section that you wish to apply the round corners to. You can see the "id" of the selected page section near the bottom of the right hand side properties panel. Assuming the page section "id" is "lp-pom-block-8", you should add the following CSS using the Styles button in the toolbar:

 

<style>
#lp-pom-block-8  {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
</style>

 

Please note that Internet Explore versions 9 and below do not support these CSS3 features so in these browsers the corners will still appear "un-round".

We are currently working on features that will allow you to apply CSS3 attributes such as rounded corners and gradients to elements directly with the editor.

May 10, 2012 01:52 PM
User photo
Chester Bailey

How would I add a link to a button to jump down to another section on the same page?

July 12, 2012 09:04 PM
User photo
Sebastian Zontek

How can I hide ("comment out") a section of a page without deleting it?

And, that's what Chester asked: how can add a link to another section on the same page?

July 20, 2012 12:00 PM
User photo
Ryan Engley
Unbounce

@Sebastian - I'm just in the process of creating a screencast to demonstrate how to add anchor links within your page.  In the mean time, feel free to email support@unbounce.com and we'll connect you with some instructions.

And so far as commenting out a page section, that functionality should be built into our editor very soon.  In the mean time, your best best is to set the page section as transparent so it seems to disappear.  Stay tuned for that and a number of other great editor updates.

July 24, 2012 03:33 PM
User photo
Nina Martinez

@Justin Stacey - Hi!  Can you tell me how to modify a horizontal form that I created, using the html feature, to have rounded corners?

October 09, 2012 06:36 PM
User photo
Nina Martinez

@All - Nevermind... Got it to work by adding the following stylesheet (where my html section's "id" is "lp-code-27"):

<style>
#lp-code-27 input{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
</style>

October 09, 2012 07:45 PM
User photo
Justin Stacey
Unbounce

@Nina Martinez,

Currently, to apply rounded corners to form fields you will need to add some custom styles (css) to the page. You can do this by clicking on the "Styles' button in the toolbar and pasting the following:

 

<style>
form input.text,
form textarea {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>

 

This assumes you want to have a 4 pixel radius on the corners. Please note, that these changes will not take effect within the Unbounce page editor but they will be visible in the preview and published page. Also this feature is not supported by some older browsers. If an older browser does not support this feature the form input elements will just appear with the usual square corners.

We are currently working on supporting CSS3 features such as rounded corners directly within the editor so in the future it will not be necessary to use a custom style and the appearance will be reflected in the editor view of the page as well as preview and published versions.

 

I hope that helps!

Justin

October 09, 2012 07:54 PM
User photo
Noodle Labs

Hey folks, does anyone have a solution to Chester's question of making a button/link that jumps to a specific section on a page? I tried the standard <a href="#location"> and <a name="location"> but it doesn't seem to work...

December 11, 2013 12:22 AM
User photo
Lou Sturm
Unbounce

@NoodleLabs We sure do! Unbounce now has a knowledge base article that'll walk you through how to create smooth scrolling anchor links for your Unbounce pages. Alternatively, if you want to anchor a button that requires two steps:

1) create the anchor point by dragging a Custom HTML object to the desired area on your page and paste in the following code 
<a name="ANCHOR_NAME">&nbsp;</a>
2) create the Link to the Anchor.  Drag a button to the desired area on your page and set its target URL to #ANCHOR_NAME (or whatever you named the anchor in Step 1).  Hope that helps!

December 11, 2013 05:49 PM