Parallax Pro Screen Width Divs?

[Northumbrian]

Parallax Pro. The easiest way to achieve screen-width Divs with full-width content?

A picture below [saves 1000 words] of what I'd like to do on a non-Home Page in PPro. My struggles are outlined in the Red Text ...

Many many thanks for anyone who can help...

---

– looks like Saruman is now running the Shire.

[mowse.ink]

Bump this topic. I have found this possible solution, but it still requires some workaround.

Genesis Simple Page Sections

Basically, I want to be able to create full width content sections just like on the home page. Would also be great to be able to apply the parallax sections on other pages besides home.

Can anyone please offer some guidance?
🙂 jonathan

[Northumbrian]

i am in the middle of solving this notwithstanding any mo' beddah solutions that might appear.. [NOT even remotely interested in Divi or 3rd Party Page Template Plug-ins [e.g. ig-pagebuilder or whatever it is this week]]

This solution below appears to work but, caveat, not all permutations have been tested...

Starting with the Parallax Pro child theme's style.css I saw this below:

.site-inner, .wrap {
	margin: 0 auto;
	max-width: 1200px; /* 6/2 changed from 1140px */
}
.site-inner {
	clear: both;
	margin-top: 170px;
}
.parallax-home .site-inner {
	margin-top: 100px; /* 6/16 watch this one */;
	max-width: 100%;
}
.parallax-landing .site-inner {
	margin-top: 100px;
}

I then created a new class in [child theme's] style.css called .screenwidth.

Then added it like so:

/* My Screen Width Pages 8/31/2014 */

.screenwidth .site-inner, .screenwidth .content-sidebar-wrap, .screenwidth .content {
    margin-top: 40px;
    max-width: 100%;
    width: 100%;
	padding:0;
}

.screenwidth .wrap {
    width: 1200px;
	margin:0 auto;
}

.screenwidth .content .page {
	margin:0;
}

Then, added the .screenwidth to the custom class in a Page layout like below:

Looks like this [under dev.]

http://104.131.132.233/products/

Comments welcomed. Thanks.

---

– looks like Saruman is now running the Shire.

[mowse.ink]

Your solution seems very workable, Anakyst. Thanks for sharing!

I'm trying to make this simple for the client to be able to create these full-width sections with different background colors or images. Can you tell me how you're implementing it in your content area? Are you using divs? Is there a way to create this in the visual editor?

[Northumbrian]

also, thanks for your link to the plugin. What workarounds did you come across?

Also, sorry, second thing I always do in all my WP installs is to turn off the visual editor. "...once bitten, twice shy.." 🙂

Code? No problem!!

Here's the Page linked to above - in full sloppiness!

---

– looks like Saruman is now running the Shire.

[Northumbrian]

also, fwiw, i have similar issues with clients wanting to edit their own site. Shocking!!

---

– looks like Saruman is now running the Shire.

[colin]

Unfortunately. it's not responsive. Have you made it responsive?
Thx

[mowse.ink]

I've tried to submit a reply twice, but it's not letting me. :-/

[Northumbrian]

Responsive is on my to-do-list - when the client is happy with the boxes and general layout... I'm sure it's just a matter of adding in the .screenwidth where necessary.

---

– looks like Saruman is now running the Shire.

[mowse.ink]

Thank you so much, Anakyst, for sharing your code.

I have only played with the Genesis Simple Page Sections a little, but it required some css tweaking to make it full width.

For both the solutions, if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like AdamBraun.com doing most of the work themselves. I just don't think that's going to be possible without some custom coding.

I know a page-builder is not what you're looking for, Anakyst, but I'm curious to know how something like Visual Composer might work with Parallax Pro.

[Northumbrian]

"...if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like..."

+10 to that!

Visual Composer appears to work well for the challenges involved in the quote above. In addition VC has extensibility [if that's the right word] that many others have taken advantage of [e.g. VC-popup, VC-ihover etc..]. I would think it's well worth a try. It has depth, breadth and is designed to be a drag-n'drop [visual] solution. Given a few days commitment to learning I would think it should serve well.

Another thing you could look at, if you're not too far down the road, is Divi. It's a substantial solution - and not just to the issue that started this thread.
http://www.elegantthemes.com/gallery/divi/readme.html

---

– looks like Saruman is now running the Shire.

[mowse.ink]

Thank you so much, Anakyst, for sharing your code!

I have only played with the Genesis Simple Page Sections a little, but it required some css tweaking to make it full width.

For both the solutions, if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like AdamBraun.com doing most of the work themselves. I just don't think that's going to be possible without some custom coding.

I know a page-builder is not what you're looking for, Anakyst, but I'm curious to know how something like Visual Composer might work with Parallax Pro.

[Author]

Posts