Title: Full Width Element Layout Last modified: August 21, 2016 --- # Full Width Element Layout * [SomeThrowAwayAcc](https://wordpress.org/support/users/nyecodem/) * (@nyecodem) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/) * I am trying to build a a layout of two widgets inside of a centered element that is inside of a full-width element. Something like this: * ``` ___________________________________________________________________ |PAGE | |___________________________________________________________________| |FULL-WIDTH ELEMENT | | ___________________________________________________ | | |CENTERED ELEMENT | | | |___________________________________________________| | | |WIDGET 1 WIDGET 2| | | |___________________________________________________| | | |___________________________________________________| | |___________________________________________________________________| |___________________________________________________________________| ``` * The reason for this is that I want a unique background for the full-width element; but it seems that the IG PageBuilder only allows me to assign class names to two wrapper elements: one for the row, and one for the widget. For this to work, I would need a wrapper element for the whole set of widgets (centered element), though. Any ideas? * Thanks in advance. * [https://wordpress.org/plugins/ig-pagebuilder/](https://wordpress.org/plugins/ig-pagebuilder/) Viewing 8 replies - 1 through 8 (of 8 total) * [www.AloGam.com](https://wordpress.org/support/users/son-tung-mr/) * (@son-tung-mr) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980433) * Hi Nyecodem, * Thank you for giving us your question, Yes, If you want to change full-width element you need to style it. This depends on which theme you are using , so please let me know your admin account via my email : [tungnbs@bravebits.vn](https://wordpress.org/support/topic/full-width-element-layout/tungnbs@bravebits.vn?output_format=md) so that i can have a cafeful investigation on your theme and find a way to change it for you. * Have you a good day * Sincerely, Innogears support team * [www.AloGam.com](https://wordpress.org/support/users/son-tung-mr/) * (@son-tung-mr) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980563) * Hi Nyecodem, Thank you for emailing me your code, I also saw the page link you showed. If you want to color the background fully, you can try the following steps: * Firstly, you click on Edit row button * > [View post on imgur.com](https://imgur.com/FAgqjed) * Secondly, In Row Setting, you tick on the full radio on the second row and then choose which kind of background you like; For instance, I chosen Solid Background. After that you select the background color by hovering over the color pixel box. [http://i.imgur.com/b7EqCoJ.png](http://i.imgur.com/b7EqCoJ.png) * Finally, please remember to click on save button and update your page! * This picture is my example: [http://i.imgur.com/VZm0VZf.png](http://i.imgur.com/VZm0VZf.png) * Have You a good day! Sincerely, Innogears Support Team * Thread Starter [SomeThrowAwayAcc](https://wordpress.org/support/users/nyecodem/) * (@nyecodem) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980604) * This does not really answer my original question. I know how to change the background of the row; the issue I was having was with centering the widgets. I would like to have all the widgets fit into a 80% width wrapper, and then centered. Like in the ascii I included above. * Example: [http://i.imgur.com/rSFJ2Lp.png](http://i.imgur.com/rSFJ2Lp.png) * [www.AloGam.com](https://wordpress.org/support/users/son-tung-mr/) * (@son-tung-mr) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980606) * Hi Nyecodem, * Thank you for your reply, It depends on which template you are using. For instance, if your theme limit the width of the page, you need access it’s css file to resize. If unconvenience, You can send me the information related to your back-end and FPT account via my email: [tungnbs@bravebits.vn](https://wordpress.org/support/topic/full-width-element-layout/tungnbs@bravebits.vn?output_format=md) so that you can take a closer look at your theme and help you do it. * Have you a good day * Best Regards, Innogears Support Team * [Adam](https://wordpress.org/support/users/hieudm/) * (@hieudm) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980608) * Hi Nyecodem, * You can choose edit Row >>> in CSS Class >>> type in ‘col-md-10 col-md-offset- 1’ (please note that there’s a white space between 2 classes) * Save your page and recheck. * Thread Starter [SomeThrowAwayAcc](https://wordpress.org/support/users/nyecodem/) * (@nyecodem) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980621) * Thank you, Son Tung Mr and Adam for you answers. Adam’s solution was what solved my problem. * I have another question, slightly off topic, but maybe you can answer it for me: Since your plugin already includes the css for rows/columns, would it be in best practice to use that grid system on other areas of my site (i.e. header, footer) or should I get a separate grid system if I would want to use rows/columns somewhere outside the content? * Thread Starter [SomeThrowAwayAcc](https://wordpress.org/support/users/nyecodem/) * (@nyecodem) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980625) * I apologize, but there’s again there’s a small problem. widgets are centered correctly now, but when I try to apply background color to the row, only the centered area changes color. In this instance, I set white as the background: [http://i.imgur.com/iUS55Vv.png](http://i.imgur.com/iUS55Vv.png) * It seems to me, that this issue can’t be solved playing around with the settings. From what it looks like, I need one element to contain the whole width of the page, and then another wrapper element to center the widgets inside. That way I could apply the background to the first element, and have widgets centered and fit into 80% width using the wrapper. * [Adam](https://wordpress.org/support/users/hieudm/) * (@hieudm) * [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980631) * Hi, * In this case, you might want to take a look at this thread first [http://wordpress.org/support/topic/use-row-in-a-row?replies=4](http://wordpress.org/support/topic/use-row-in-a-row?replies=4), using the same concept so we can implement as described below : * 1. Create a page A with centered columns and make it as Full width. * 2. Create a page B with your desire background, add a new Text element, then include page B there via shortcode. Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Full Width Element Layout’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/ig-pagebuilder.svg) * [IG PageBuilder](https://wordpress.org/plugins/ig-pagebuilder/) * [Support Threads](https://wordpress.org/support/plugin/ig-pagebuilder/) * [Active Topics](https://wordpress.org/support/plugin/ig-pagebuilder/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ig-pagebuilder/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ig-pagebuilder/reviews/) * 8 replies * 3 participants * Last reply from: [Adam](https://wordpress.org/support/users/hieudm/) * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/full-width-element-layout/#post-4980631) * Status: not resolved