Thursday
Feb182010

« MOD: Add New Editable Regions to Your Squarespace Template »

One modification I make frequently to Squarespace templates, is to create new editable regions within the layout -- actually, what I'm doing here is taking sections out of the sidebar that contain Text/HTML widgets, and re-inserting them somewhere else. Here is an example:

Let's take a sidebar section (containing a Text/HTML widget), and place it into the page content area so that it's is broken up into two editable regions. Each of these areas can now be styled separately with CSS.

STEP 1: Add a new section to your sidebar -- Inside that section insert a Text/HTML widget. It's good to also add some content into your widget even if it's just some sort of placeholder.

STEP 2: Get the section's ID -- Using Firebug for Firefox or the equivalent, track down the unique identifier for this section. It should look something like #sectionContent1234567.

STEP 3: Use jQuery to Re-Position the Section -- Make sure you have the jQuery basics down to include proper jQuery reference and script tags, then insert the following jQuery to move your new sidebar section out of the sidebar and place it inside the content area:

This will take the section out of the sidebar and append it to the bottom of the page content area.
$("#sectionContent123456").appendTo("#content");
This will take the section out of the sidebar and prepend it to the top of the page content area.
$("#sectionContent123456").prependTo("#content");
This will take the section out of the sidebar and insert it before the page content area.
$("#sectionContent123456").insertBefore("#content");
This will take the section out of the sidebar and insert it after the page content area.
$("#sectionContent123456").insertAfter("#content");

And so on ...

If you use the "Selective Display" in the configuration settings for the sidebar section then you can specify what page/s you want this section to be added to, just like you would to hide/show the section when it is in a sidebar.

Alternatively, you can use a specific page's unique ID to make sure the section is only added to that page:

$("#sectionContent123456").appendTo("#modulePage1234567 #content");

You can use CSS (added to the Custom CSS panel) to make sure that the section is only visible on the specified page:

#sectionContent123456 { display: none; }
#modulePage123456 #sectionContent123456 { display: block; }

 

Take This Idea Further -- There are tons of ways to expand on this idea, here are some examples:

Use CSS style your new section to stand out from the rest of the content area:

#sectionContent1234567 { background: #cccccc; padding: 20px; }

Add multiple Text/HTML widgets to your section, then use CSS to position them as a row of editable boxes:

#sectionContent1234567 .section-wrapper { width: 120px; margin-right: 10px; float: left; }

 

References (10)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    Response: social
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    Response: YSL outlet
    vivienne westwood,YSL handbags birkin rep YSL handbags birkin replica lica,Onbandage University Difaccumulationry Our Website Will Provide birkin YSL handbags You 70 Off With vivienne westwood:vivienne westwood hogan bracelets in addition to.Free Ship Now and therefore Free Return No Way,birkin YSL outlet
  • Response
    Clashes immediately among police and supporter birkin ysl handbags s associated with Egypt ousted president remaining a minimum o ysl handbags outlet uk f seven individuals dead, regulators stated Tuesday, within the most recent eruption of politics violence within the country streets because ysl handbag sale uk t
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    Response: relevant web-site
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template
  • Response
    VUELA | Squarespace Design & Development | Seattle, Portland - Blog | Squarespace Tricks, Marketing Tips, Musings - MOD: Add New Editable Regions to Your Squarespace Template

Reader Comments (12)

Where do you put the Jquery?
in custom CSS?

03.5 | Unregistered CommenterMatt

Hi Matt! Take a read through this other post:
"Basics for jQuery Setup".

03.5 | Registered CommenterVUELA

Perfect - this is great, Its taken me a while to find someone who actually can do this !
Many thanks
Matt

03.5 | Unregistered CommenterMatt

Sorry - new to CSS but learning.

Trying to get this to work so that I can position the HTML sections in a side bar in a row.

I have moved the section using the Jquery above and have been adding this (with my specific section id) in the Custom CSS editor but the html sections seem to stay vertical and not horizontal next to each other.
Sorry to ask you a question again !

#sectionContent2716692 .section-wrapper { width: 50px; margin-right: 10px; float: left; }

Any ideas?

Many thanks
Matt

03.7 | Unregistered CommenterMatt

Hi Matt, can you post a link to your site so i can investigate?

03.8 | Registered CommenterVUELA

Wonderful post... Very informational and educational as usual!

Acai Optimum

03.16 | Unregistered CommenterJay B.

Great post, thanks for providing such useful information to us, I am adding squarespace template with the help of your blog.

Useful tips. Thanks for sharing. Great template, mate!

Great post, but when trying to copy the scripts from your website it isn't possible to copy. Is this a known issue? I'd like to create editable regions in Squarespace.

Regards
Gerard

12.14 | Unregistered Commentergpruim

I read this post with interest. I want to condense the body from two columns into one in a squarespace blog. I want to put the post tags underneath each blog entry. I'd like the width to be similar to yours, and not so narrow and long. I thought it might be possible with jQuery, using .prepend. After closely reading your post I realized you are adding a widget, and I want to rearrange. Do you have any ideas for the body? And thank you for posting your advanced techniques, it is appreciated.

12.24 | Unregistered CommenterRonnie

I figured out the solution to the post above after several tries. It was a combination of CSS and HTML, and the "Guides" were informative enough to get me there. Thanks again for your instruction.
Happy Holidays, Ronnie

P.S. I love your watercolor and the background aesthetic, it works well.

12.25 | Unregistered CommenterRonnie

This is what I have been searching in many websites and I finally found it here. Amazing article. I am so impressed. Could never think of such a thing is possible with it...I think you have a great knowledge especially while dealings with such subjects.Home Security Houston

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>