Similar page layout

[abheeshekj]

Hi guys!

I am having problems in making my page look like this (have attached the screenshot below).
I am able to get the news ticker (with the help of a plugin). The problem comes when i am dividing the page into three columns.
I’ll break down my problems -

1. The height of the three columns should be the same. The map should fit in the centre column (3/5th) and the pointers on both side should fit in their respective columns (1/5th each)
2. I am also not able to gather what shortcode should i use for the boxes on the left (content band/alert/feature box). something that looks neat and fits well aesthetically.
3. Similarly for the icons and pointers on the right.

Please help me out!
Thanks and regards
AJ

[ruenel]

Hello There,

Thanks for the very detailed post information.

1.) You will need to create a section with two rows. The first row with one column will be for your news ticker. The second row on the other hand will have 3 columns. To make sure that the 3 columns will have the same height, your contents will also needs to have the same amount of content height. Or you can simply check out this thread to have the same column heights: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272

Since nesting columns is not allowed in Cornerstone, you might need to check out this video too:

And if you are not familiar with Cornerstone yet, please check this out: https://theme.co/apex/forum/t/cornerstone-content-builder-introduction/118/1

2.) For left the column, you may need to use the classic counter element and the button element which would link you to the search page.

3.) The icons on right could probably use the icon element or the featured box element.

Hope this helps.

[abheeshekj]

Hi,
I have used the text editor all this while. Please tell me how to achieve using it?

[rad]

Hi @abheeshekj,

You mean you wish to achieve it with just text editor? It would be tricky since it would need manual coding and shortcodes. Please use cornerstone instead. OR, if you really prefer the text editor, then just use cornerstone to build it then switch back to the text editor. It’s the same, so it still easier to use a builder.

And if you switch to a text editor and switch back to the cornerstone, any changes you made in a text editor will be removed.

Thanks!

[abheeshekj]

yeah, as you mentioned - “if you switch to a text editor and switch back to the cornerstone, any changes you made in a text editor will be removed.”

I really dont wanna risk this. Could you please tell me if this is possible in the text editor?
I have made a section. 2 rows and three columns. but how do i call the eual heights class etc

Thanks
AJ

[paul.r]

Hi AJ,

If you are using shortcodes, you can add the class to your column like this

[column class="equal-height" type="1/2"] Place your content in here. [/column] 
[column class="equal-height" type="1/2" last="true"] Place your content in here. [/column]

http://demo.theme.co/integrity-1/shortcodes/columns/

You can do it for your container as well. (If you are using CSS Alternative)

[content_band  class="equal-height" bg_color="#ffba00" border="all"] [container] [custom_headline style="margin: 0;" type="center" level="h4" looks_like="h3" accent="true"]Check it out, I'm being contained both vertically and horizontally![/custom_headline] [/container] [/content_band]

http://demo.theme.co/integrity-1/shortcodes/container/

Please review the link below again for the js script and where to add the js code

Use Flex Layout | Themeco Docs

Thanks

[abheeshekj]

Hi how can i use the equal height shortcode for buttons? I have used the JS code

[christian]

Hey @abheeshekj,

You will need to duplicate the JS code and change the selectors in the duplicated code to a class you will apply to your buttons. Regretfully, this would be quite complex and would require further custom development because though you can achieve an equal height for your buttons, you’ll need further custom CSS.

I’ll can give you an overview but we could not provide continuous help for this as this will be getting into custom development which is outside the scope of our support. Please see our Terms.

Please watch this screencast for the Javascript method. And this one for the CSS Flexbox method.

Thank you for understanding.