[EliseParticipant]

Hello,

I’m using the visual Composer for my pages but I need some “content bands” containing five columns. I understand I need to use the shortcodes to insert 5 columns, since the VC doesn’t support them.
My question is, can I switch from VC to the editor back and forth without creating errors?
Can I use the [column type=”one-fifth”] shortcode without breaking the rest of the page? I know the row containing the five columns will appear broken on the VC, and that doesn’t bother me, as long as the rest of the page is still customizable with the VC.
For this row, is it better to use [vc_row] and [vc_column], or [content_band] and [column] while editing manually the code?

Thanks!

[Thom GParticipant]

Also looking to do the same exact thing!

Thanks

[ChristianModerator]

Hey guys,

You can place the code in the Text element (see http://prntscr.com/3h08bq and the result http://prntscr.com/3h08jn).

[column type="one-fifth"] Place your content in here. [/column] [column type="one-fifth"] Place your content in here. [/column] [column type="one-fifth"] Place your content in here. [/column] [column type="one-fifth"] Place your content in here. [/column] [column type="one-fifth" last="true"] Place your content in here. [/column]]

Hope that helps. 🙂

[EliseParticipant]

That’s a neat trick, thanks! But if a try to insert some [text_output] inside the columns, it breaks everything and wrong blocks are added in the visual composer 🙁

here’s my code :

[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="clock-o" type="left"]Réactivité[/feature_headline][text_output]99% des demandes prises en charge dans l'heure[/text_output][/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="coffee" type="left"]Réactivité[/feature_headline][text_output]99% des demandes prises en charge dans l'heure[/text_output][/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="comments" type="left"]Réactivité[/feature_headline][text_output]99% des demandes prises en charge dans l'heure[/text_output][/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="flask" type="left"]Réactivité[/feature_headline][text_output]99% des demandes prises en charge dans l'heure[/text_output][/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="group" type="left"]Réactivité[/feature_headline][text_output]99% des demandes prises en charge dans l'heure[/text_output][/column]

and without the [text_output], here’s how it looks :

The columns are narrow, they seem to be enclosed in a column that takes only a third of the page width.

[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="clock-o" type="left"]Réactivité[/feature_headline]99% des demandes prises en charge dans l'heure[/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="coffee" type="left"]Réactivité[/feature_headline]99% des demandes prises en charge dans l'heure[/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="comments" type="left"]Réactivité[/feature_headline]99% des demandes prises en charge dans l'heure[/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="flask" type="left"]Réactivité[/feature_headline]99% des demandes prises en charge dans l'heure[/column]
[column type="one-fifth"][feature_headline class="mtn mbs" level="h3" looks_like="h5" icon="group" type="left"]Réactivité[/feature_headline]99% des demandes prises en charge dans l'heure[/column]

[ChristianModerator]

Hey there,

Your setup is wrong. You should place the columns in a Text Element (see http://prntscr.com/3h79p5).

If it still doesn’t work out for you, please give us access to your WordPress admin so we could see your setup.

Thanks.

[EliseParticipant]

Hi,
That’s exactly what I did, I tried to put the codes I gave you in a text output.

Here’s the screenshots of the results with the first code :

And the ones without text oututs :

thanks!

[EliseParticipant]

I just tried to put this new code in the text_output, it’s the same I already tried but with more space, and it seemed to work :

[column type="one-fifth"][feature_headline class="mtn mbs" level="h2" looks_like="h5" icon="clock-o" type="left"]Réactivité[/feature_headline]

99% des demandes prises en charge dans l'heure

[/column][column type="one-fifth"][feature_headline class="mtn mbs" level="h2" looks_like="h5" icon="coffee" type="left"]Réactivité[/feature_headline]

99% des demandes prises en charge dans l'heure

[/column][column type="one-fifth"][feature_headline class="mtn mbs" level="h2" looks_like="h5" icon="comments" type="left"]Réactivité[/feature_headline]

99% des demandes prises en charge dans l'heure

[/column][column type="one-fifth"][feature_headline class="mtn mbs" level="h2" looks_like="h5" icon="flask" type="left"]Réactivité[/feature_headline]

99% des demandes prises en charge dans l'heure

[/column][column type="one-fifth"][feature_headline class="mtn mbs" level="h2" looks_like="h5" icon="group" type="left"]Réactivité[/feature_headline]

99% des demandes prises en charge dans l'heure

[/column]

As a result, I now have 5 columns, but only four are aligned, the fifth appears underneath the four others.
I inspected the code, and here are the css I found :

.x-column.one-fifth {
    width: 16.8%;
}
.x-column {
    float: left;
    margin-right: 4%;
}

Now if I want a total width of 100%, I need to set the margin-right of the last column to 0%… I added the “mrn” class to the shortcode of the last column, is this the right way to do it? It did the trick for me.

Thanks!

[RadModerator]

Great to hear that! Though what you did will affect other columns you will add next time. That is global css you modified, my advice is using specific content band ID selector to apply that css.

Thank you.

[Author]

Posts