Prezi.com like start page

Support
#1

Hi, I have the following question:
I would like to create a start page similar looking like www.prezi.com

I have started with the gym template, because I like the picture style and fonts and general page outlook, but for the start page I would prefer it being whiter not broken down in white/grey content lines.

Any ideas on how to achieve this effect?
Thank you for your thoughts!

#2

For example, I edited the slider background to make it look round at the bottom, but how can I make it align to the bottom. Depending on the size of the screen, it looks round or cut off. See screenshots
It doesnt have to be slider, it can also just be an element with a background, since I just need one for now, and would also like to add it at the bottom. But when I try this, it scales even more and stays straight and not curved.

#3

Hi There,

You could use instead of the slider a normal section on Cornerstone and add a curved bottom separator.

After that you can use a custom headline element, a text element and a button and a picture to replace the laptop picture.

Hope it helps

#4

great idea!
but I had to set the section below on “curved out”, otherwise it looked like this.

thank you!

#5

One more question, could I also set the menu colors to dark on the home page? as opposed to regular white on all the other pages? Or maybe make the nav bar see through?

#6

Hello @mikireimann,

Thanks for asking. :slight_smile:

Please add following CSS under X > Launch > Options > CSS to change navigation color only on home page:

.home .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    color: #000;
}

.home .masthead-inline .x-navbar .desktop .sub-menu a {
    color: #000;
}

Thanks.

#7

I added the text, but nothing changed, I would like the background be black and text white and orange or even grey and orange like now. but black would be ffffff, so what else do I need to add?

#8

Hello @mikireimann,

Thanks for clarification. Please replace the code I gave you with following:

.home .x-navbar {background-color: #000;}
.home .x-navbar .x-nav-wrap .x-nav > li > a {color: #fff;}
.home .x-navbar .desktop .x-nav > .current-menu-item > a {color: #fff;}

I am sharing the screenshot of the output that you should see upon adding above code. https://cloudup.com/chzpJnXhBhF

Thanks

#9

Beautiful. Thank you!

#11

I am still trying to recreate the page style of www.prezi.com, but I am failing to make my sections properly mobile adapted.
The part from the Demo with 1 row with 3 parts (3/3) is very nice and mobile, you have nice gaps on all sizes and text and picture is alternated on mobile.
But when I make multiple rows with 2 parts each (where the right and left part are different sized), it looks ok on Desktop, but on mobile, the gaps are way too big (after the classic slider especially) and you have text, picture, picture, text, text picture - not perfect.

Any way to fix this, like they did on www.prezi.com? (which is prob not wp:)

thank you for your thoughts.
Not sure if I explained it right, you can have a look, the logins are above.

#12

I also saw that http://demo.theme.co/integrity-1/ has somewhat a similar building style, two columns with image and text, but here the text and image alternate properly on mobile (text, image, text, image) and the gaps work properly on mobile. Thank you.

#13

Hi There,

We have achieve it in integrity demo by utilizing HIDE BASED ON SCREEN WIDTH settings. It is available on Section/Row Customize tab > HIDE BASED ON SCREEN WIDTH. One ROW with 2 columns are set to be hidden on small screen and then another ROW with just one column is set to be hidden on large screen. This way, we have total control on padding, margins , and content per screen size. Try this approach to solve your responsive content issue.

Hope this helps.

#14

Thank you! I will have a look now.

#15

Any idea how I can achieve this kind of drop down

#16

Hi There,

Please provide the URL of the specific page to clarify.

Thanks

#17

Sorry, of course: https://prezi.com/product/

#18

Hi again,

You can achieve this using Classic Tabs element with some Custom CSS to match the design, please see https://theme.co/apex/forums/topic/styling-of-tabs/ and https://theme.co/apex/forums/topic/customize-tabs-with-icons-and-remove-border/ to get started.

Cheers!

#19

Works beautifully!

How can I modify it further as to align the text to the left and possibly add a picture and a button.
Like this example

#20

Hi there,

Would you mind providing the URL of the page you’re currently working on? As for alignment, are you referring to the tab nav and content? And you can always add a button under the tab elements. Or are you referring to the button overlaying on the image background?

Thanks!

#21

I mean the modified, frameless tabs, what do I need to add for the title to appear left aligned and to add a button underneath the text.
Also like in the example (https://prezi.com) could I change the color of the active tab and underline it?
Thank you!