Jump to content


This topic is now archived and is closed to further replies.


Placement and nesting of objects on the page

Recommended Posts


Hello everyone.


As a newbie i am still unsure of how to best place objects on a page, can GetMeWebDesign or anyone else help?


Do i use columns first, then add items or do i use a text box or a PLNextbox.

It is not an issue with a bit of text across the page in a single column, but when it comes to laying out items on a page it gets a bit more tricky.


I have an example and would like to know what the best practice would be to pay something like this out.


Currently i have 2 PLNextboxes next to each other.

the left holding some text and an image (source placed into the text editor under the text)

The right holding the form shortcode.


But it feels like i should have three PLNextboxes.

left column would have the text in one PLNextbox and below it in another PLNextbox i would have a mediabox for the image

On the right would be a PLNextbox for the form.


I have attached an example of what i mean - I really would appreciate a best practice 101 for placing items in specific positions on the page.

Columns vs. PLNextbox and within those, how to break things like the address into 2 columns in a PLNEXTBox.


Thanks again.

Share this post

Link to post
Share on other sites

You do ask tough questions... How long is a piece of string? 


You have given two different layouts and asked which one is best practise. Also, how do you want the elements to appear when you resize the browser (ie on a mobile)


  • If you use columns, whatever is in the first column will appear before those in the second column.
  • If you didnt use columns, but added 5 PLNextBoxes, as in the second image, adjusting the width to get your desired appearance on a desktop, on resizing you would have, in this order:
  1. Contact Details
  2. Contact Form
  3. Telephone numbers
  4. Address
  5. Image

AS far as PLNext boxes are concerned, you might find it quicker to use Text or media boxes for where you are adding text or media, as the PL Next BOX requires you to be writing more code than you necessarily need, should you wish to style some more, with background images etc


"how to break things like the address into 2 columns in a PLNEXTBox."... DMS is based on Bootstrap 2 Follow the coding instructions for whatever layout you prefer/desire. However, when using DMS (Design Management System), as these features are incorporated into each section, I would say it is considered best practise to place two sections next to each other and control their width and offset to get your desired style http://docs.pagelines.com/configure/configuring-sections.


In short,

  • if you prefer to write code yourself, use PLNextboxes as it is versatile and easy to manipulate, allowing you to Render ShortCodes, Apply WordPress Auto P Filters, Allow PHP execution, Disable DMS padding classes.
  • If it is ease and speed, with simple options for the normal styling within in a section, you will be better to use text and media boxes etc
  • use columns to achieve Bootstrap Fluid Nesting, much in the way that your canvas when you dont use columns
  • There is not necessarily a best practise 101 for how you choose to layout your site. If there was, there would be less role for designers!

IMO... second layout, two columns and then either add DMS sections to achieve the look or, if you are happy coding: two PLNext boxes, reduced width and code away with fluid nesting

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post

Link to post
Share on other sites

You use whatever you feel comfortable with. However, you do not need to use PLNextBox for everything, If I was you if you're using text, then you should just use a TextBox.


So there is no right or wrong way in the two examples you have given, you should just layout your section in whatever way you feel most comfortable with.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Thank you for the answers guys - steep learning curve :-)

Share this post

Link to post
Share on other sites