Push Pull Columns

[Swift Ideas – Ed]

@icecast – I think you may be looking at this the wrong way.. If you use the columns on the page, you can place the text block within them.

There is an extra class box in the edit column modal – there you can place the push / pull classes.

– Ed

[icecast]

it is still unclear to me how to push / pull 4 columns

the bootstrap example i provided only pushed / pulled 2 columns

[Swift Ideas – Ed]

Pushing increases the LEFT position value of the column, Pulling increases the RIGHT position value.

So you’d need to set up the columns as 4, 3, 2, 1 in the builder, then use the CSS classes to push 4th and 3rd, and pull 2nd and 1st.

– Ed

[icecast]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Col 1 add col-md-push-9
Col 2 add col-md-push-3
Col 3 add col-md-pull-3
Col 4 add col-md-pull-9

I’ve tested this for you and it works

– Kyle

[icecast]

where are you placing this and how?

Col 1 add col-md-push-9
Col 2 add col-md-push-3
Col 3 add col-md-pull-3
Col 4 add col-md-pull-9

[Kyle – SUPPORT]

In the same place you’ve put your other classes, the extra class box for the row

– Kyle

[icecast]

here is my set up, still not clear to me how you would add

[spb_column col_el_class=”local” width=”1/4″ el_position=”first”] [spb_text_block animation=”none” animation_delay=”0″ padding_vertical=”0″ padding_horizontal=”0″ width=”1/1″ el_position=”first last”]

Local

[/spb_text_block] [/spb_column] [spb_column col_el_class=”regional” width=”1/4″] [spb_text_block animation=”none” animation_delay=”0″ padding_vertical=”0″ padding_horizontal=”0″ width=”1/1″ el_position=”first last”]

Regional

[/spb_text_block] [/spb_column] [spb_column col_el_class=”national” width=”1/4″] [spb_text_block animation=”none” animation_delay=”0″ padding_vertical=”0″ padding_horizontal=”0″ width=”1/1″ el_position=”first last”]

National

[/spb_text_block] [/spb_column] [spb_column col_el_class=”global” width=”1/4″ el_position=”last”] [spb_text_block animation=”none” animation_delay=”0″ padding_vertical=”0″ padding_horizontal=”0″ width=”1/1″ el_position=”first last”]

Global

[/spb_text_block] [/spb_column]

[Kyle – SUPPORT]

Have you used the page builder? You just click the pen icon on the column asset and then add the classes to the extra class box. The same way you did to add classes like ‘local’, ‘national’ etc

– Kyle

[icecast]

yes, i used pagebuilder. i don’t understand why you cannot help me just insert the code into the text above?!

[Kyle – SUPPORT]

Because it’s way more simple to click the edit icon to edit the columns and add the class that way. I don’t understand why you’re trying to do it the hard way? But here:

[spb_column col_el_class="local col-md-push-9" width="1/4" el_position="first"] [spb_text_block animation="none" animation_delay="0" padding_vertical="0" padding_horizontal="0" width="1/1" el_position="first last"]

Local

[/spb_text_block] [/spb_column] [spb_column col_el_class="regionalcol-md-push-3" width="1/4"] [spb_text_block animation="none" animation_delay="0" padding_vertical="0" padding_horizontal="0" width="1/1" el_position="first last"]

Regional

[/spb_text_block] [/spb_column] [spb_column col_el_class="national col-md-pull-3" width="1/4"] [spb_text_block animation="none" animation_delay="0" padding_vertical="0" padding_horizontal="0" width="1/1" el_position="first last"]

National

[/spb_text_block] [/spb_column] [spb_column col_el_class="global col-md-pull-9" width="1/4" el_position="last"] [spb_text_block animation="none" animation_delay="0" padding_vertical="0" padding_horizontal="0" width="1/1" el_position="first last"]

Global

[/spb_text_block] [/spb_column]

– Kyle

[icecast]

I do not like using the pagebuilder, because it does not work as advertised. For example, if I replace the above text “Global” with the svg image below, it does not work. However, that same image works in a non-pagebuilder table as shown in the example below …

Any suggestions to insert “global col-md-pull-9” into the standard minimal table below?

<svg class=”icon-global”><use xlink:href=”#icon-global”></use></svg>

[one_fourth]
[table type=”standard_minimal”]
[trow]
[tcol]
<svg class=”icon-global”><use xlink:href=”#icon-global”></use></svg>
[/tcol]
[/trow]

[Kyle – SUPPORT]

Sorry I don’t, will have to leave that to Ed. WordPress is only just bringing in support for svg so guessing there will be some final things to iron out.

Will mark this as resolved

– Kyle

[icecast]

it is not a wordpress issue. it is a pagebuilder issue. i re-opened.

[Kyle – SUPPORT]

Ok I’ll get Ed to check this

– Kyle