Split an article page in 2 columns

[armpouniotis]

Hi there !

Is it possbile to split and article page in 2 columns ?

Thank you in advance
Christos

[web-infox]

use column-count

.elx_article_page p{
    column-count: 2;
    column-rule: 4px double #434343;
    column-gap: 20px;
}

[datahell]

Elxis (5.x) has built-in CSS classes for this.

Use the following HTML (copy-paste in editor - turn editor in html mode):

<div class="elx5_2colwrap">
     <div class="elx5_2colbox">
           HTML of first column here (anything)
     </div>
     <div class="elx5_2colbox">
           HTML of second column here (anything)
     </div>
</div>

The above HTML is also responsive for mobile devices.

Tip: You can create 3 and 4 columns the same way with elx5_3colwrap/elx5_3colbox and elx5_4colwrap/elx5_4colbox

[armpouniotis]

It works !

Where can we find all these biuld in classes ?

Christos

[datahell]

In standard.css! Templates / System / CSS / standard.css

All CSS classes that added in Elxis 5.x have the "elx5_" prefix. Older (Elxis 4.x) CSS classes have the "elx_" prefix.

[armpouniotis]

ok !

thank you very much !

Christos

[chongbing]

Cool, This tips are VERY useful.   THANK YOU datahell 👍

Hope there will be more kinds of tips.

[datahell]

Hope there will be more kinds of tips.

Ask and you will get tips 

[chongbing]

OK, Continue this question,
How to set the background color and opacity in each column?  Thanks.

[chongbing]

OK, Continue this question,
How to set the background color and opacity in each column?  Thanks.

Success after testing, sorry about that.

Code: [Select]


<div class="elx5_2colwrap">


    <div class="elx5_2colbox" style="background:#E6E6E6; opacity: 1;">
        HTML of first column here (anything),
        from https://forum.elxis.org/index.php?topic=9141.0


    <>


    <div class="elx5_2colbox" style="background:#E6E6E6; opacity: 0.9;">
        HTML of second column here (anything)


    <>
<>


[chongbing]

Hi datahell,

What if I want to put 80% or 20% in the columns, please see attached?  I have tried the following ways without success.   Thanks a lot.

    <div class="elx5_2colbox" style="width: 80%; ">
    <div class="elx5_2colbox" style="width: 20%; ">

or

    <div class="elx5_2colbox" style="width: 650px; ">
    <div class="elx5_2colbox" style="width: 200px; ">

[datahell]

Avoid using inline CSS. I recommend you the following. Also Elxis uses flexbox, so the "width" you wrote has no affect.

Open your template's CSS file and add 2 new custom CSS classes. Also add a media query in accordance to "elx5_2colwrap"

.my_2colboxa { flex:0 0 79%; margin:0; padding:0; box-sizing: border-box; }
.my_2colboxb { flex:0 0 20%; margin:0; padding:0; box-sizing: border-box; }
@media only screen and (max-width:850px) {
   .my_2colboxa, .my_2colboxb { margin-bottom:15px; }
}

Now change your HTML in the editor to the following:

<div class="elx5_2colwrap">
     <div class="my_2colboxa">
           HTML of first column here (79%)
     </div>
     <div class="my_2colboxb">
           HTML of second column here (20%)
     </div>
</div>

Note 1: I used 79% instead of 80% inorder for the columns to have same space between them If you don't want space replace 79% with 80%.

Alternatively you can set width to 80% and add padding in columns like this:
<div class="elx5_2colwrap">
     <div class="my_2colboxa elx5_pad">
           HTML of first column here (80%)
     </div>
     <div class="my_2colboxb elx5_pad">
           HTML of second column here (20%)
     </div>
</div>

Note 2: "elx5_pad" adds 5 pixel padding arround the element. "elx5_mpad" adds 10 pixel padding arround the element.

Note 3: Flexbox is the new CSS3 cool way to create columns (among others). Before the best option we had was to use floated elements.

[chongbing]

Great, Works!    THANK YOU datahell !!

[chongbing]

...
Alternatively you can set width to 80% and add padding in columns like this:
<div class="elx5_2colwrap">
     <div class="my_2colboxa elx5_pad">
           HTML of first column here (80%)
     </div>
     <div class="my_2colboxb elx5_pad">
           HTML of second column here (20%)
     </div>
</div>

Note 2: "elx5_pad" adds 5 pixel padding arround the element. "elx5_mpad" adds 10 pixel padding arround the element.

Note 3: Flexbox is the new CSS3 cool way to create columns (among others). Before the best option we had was to use floated elements.

👍 It seems this looks better, "elx5_pad & elx5_mpad" in terms of typography.