I'm trying to figure out how to make 3 columns with full color backgrounds like on the new salient demo page. I have attached a screenshot. I looked through the documentation and training videos but cannot figure out how this was done. Thanks!
Looks like it is a 3 column set up with each column background colored (i.e the blue, red, purple,). The test looks to have a <h3></h3> or <h4></h4> up top and then some body text under neath with a button short code at the bottom. Hopefully this helps. If not, I am sure TN will give a better response, haha.
Thanks Ryan. I tried to make them full width like in the demo but could only get 3 smaller boxes and was unable to color each of them. I tried with and without the full width shortcode. Thanks for trying to help!
I'm trying to do this now also. I could not find the controls to color each column/box, so I installed the demo data in a separate copy of WP, displayed the demo home page, opened up edit view, and copied the raw code from the Text view of the edit screen, then modified it. I still don't see where the color options exist in the visual editor — I had to manually paste in color tags from the demo in the Text view.
Take full control of the power Salient has to offer with our new exciting page builder. You'll be grinning in delight when you see just how easy it is to create stunning layouts with little effort.
The days of being overwhelmed by long documents without any visual guidance are over - We have an entire video tutorial series available for you that's narrated through the duration.
The looks & functionality you've been dying for are finally easily accessible. We know you'll enjoy the freedom to showcase your content in the way that it deserves.
[button color="See-Through" size="large" url="http://themenectar.com/demo/salient-frostwave/portfolio/mobile-weather-app/" text="Shine Like A Star" image="steadysets-icon-star"][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column]
OK, just did a test and when I create the full-width row and add a 3-column container from scratch, the color option appears. There must be something that happens when pasted-in stuff is added that messes it up.
Hey Guys, super sorry for the delay in the official response on this one.
Firstly thank you Ryan & Mike for helping others out - the methods listed from both of you are the correct way to go about it. Also I will be adding new tutorials on Youtube this week to cover some things like this for anyone else who might be interested.
Lee - it's weird you couldn't get the BG color option to appear until you created a new row. I'll note to look into that to see what might have caused it.
I'm trying to figure out how to make 3 columns with full color backgrounds like on the new salient demo page. I have attached a screenshot. I looked through the documentation and training videos but cannot figure out how this was done. Thanks!
Looks like it is a 3 column set up with each column background colored (i.e the blue, red, purple,). The test looks to have a <h3></h3> or <h4></h4> up top and then some body text under neath with a button short code at the bottom. Hopefully this helps. If not, I am sure TN will give a better response, haha.
Thanks Ryan. I tried to make them full width like in the demo but could only get 3 smaller boxes and was unable to color each of them. I tried with and without the full width shortcode. Thanks for trying to help!
Needed to updated to 4.0.....
I have 4.0 and set up the three columns and coloured the backgrounds etc. However i get three boxes in a white row. How did you do it?
Make sure the entire row is labeled "Full width Content" and not "In container."
Then color each column individually.
I'm trying to do this now also. I could not find the controls to color each column/box, so I installed the demo data in a separate copy of WP, displayed the demo home page, opened up edit view, and copied the raw code from the Text view of the edit screen, then modified it. I still don't see where the color options exist in the visual editor — I had to manually paste in color tags from the demo in the Text view.
If anyone can describe or show where the color controls for column backgrounds exist in a wysiwyg view, that would be fantastic!
This is the code I pulled out of the demo. Was this added by hand by the developer?
[full_width_section bg_pos="Center Center" bg_repeat="No-Repeat" text_color="light" top_padding="0" bottom_padding="0" type="full_width_content" text_align="left" parallax_bg="true" background_color="#171920"][vc_column width="1/3" animation="flip-in" column_padding="padding-4-percent" background_color="#20cfef" background_color_opacity="1" enable_animation="true"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in-from-left" column_padding="no-extra-padding" delay="500"][vc_column_text]
A Breeze To Build With
Take full control of the power Salient has to offer with our new exciting page builder. You'll be grinning in delight when you see just how easy it is to create stunning layouts with little effort.
[button color="See-Through" size="large" url="http://themenectar.com/demo/salient-frostwave/features/page-builder/" text="Discover More" image="steadysets-icon-diamond"][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width="1/3" animation="flip-in" column_padding="padding-4-percent" background_color_opacity="1" background_color="#fe4641" enable_animation="true"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in-from-left" column_padding="no-extra-padding" delay="500"][vc_column_text]
Tutorials To Help
The days of being overwhelmed by long documents without any visual guidance are over - We have an entire video tutorial series available for you that's narrated through the duration.
[button color="see-through" size="large" url="https://www.youtube.com/user/ThemeNectar" text="See The Tutorials" image="steadysets-icon-screen" open_new_tab="true"][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width="1/3" animation="flip-in" column_padding="padding-4-percent" background_color_opacity="1" font_color="#ffffff" background_color="#6b58cd" enable_animation="true"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in-from-left" column_padding="no-extra-padding" delay="500"][vc_column_text]
Show Off In Style
The looks & functionality you've been dying for are finally easily accessible. We know you'll enjoy the freedom to showcase your content in the way that it deserves.
[button color="See-Through" size="large" url="http://themenectar.com/demo/salient-frostwave/portfolio/mobile-weather-app/" text="Shine Like A Star" image="steadysets-icon-star"][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column]
Added 3 screenshots for you.
Edit the red arrow on the right to say full width content.
Arrow on the left is where you choose the color for each section.
Thank you, this looks really obvious. But when I Edit Column, I don't get these options. I'm attaching a screen grab of what I see. I'm using v4.0
OK, just did a test and when I create the full-width row and add a 3-column container from scratch, the color option appears. There must be something that happens when pasted-in stuff is added that messes it up.
Hey Guys, super sorry for the delay in the official response on this one.
Firstly thank you Ryan & Mike for helping others out - the methods listed from both of you are the correct way to go about it. Also I will be adding new tutorials on Youtube this week to cover some things like this for anyone else who might be interested.
Lee - it's weird you couldn't get the BG color option to appear until you created a new row. I'll note to look into that to see what might have caused it.
Cheers everyone :)