How to get started with Upfront

Hello,

I am having a hard time getting going using Upfront, can you help me?

Basically what I am trying to do is start fresh without having to customise another theme (I really don't get how, sorry, and it's making for overwhelm as I want to get my site going).

I would like to have images be full screen and have maybe 3 of them fade into each other, with text in the centre of the page saying to "Check out Today's Hotel Deals" which can be hyperlinked. The images are already in the Media library.

That's really about all I want to get happening today, I will need to refine later.

Later I would like to use the Directory plug-in underneath the full-screen images, as described above, but for now I just want to get something on the screen, but I am not sure how to load a blank theme and put these images in place.

Thanks,
Mike

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Mike! Hope you are doing good today :slight_smile:

    Please install one of our upfront child theme to get started. Spirit is something I would suggest you to start from. It already have
    https://premium.wpmudev.org/project/spirit/

    Now launch the upfront editor and delete all other regions except banner area by clicking on pencil icon and then red x.

    Click on pencil icon to change the background image.

    Now drag and drop the button element in the middle of this banner (rearrange postion by drag and drop). Double click on this button to change the label and link :slight_smile:

    Yes that's it :slight_smile:

    We have a series of blog post here to use the upfront editor, customize any child theme and create your own website easily. Please check this URL for more details.
    https://premium.wpmudev.org/blog/upfront-basics/

    Cheers, Sajid

  • Michael
    • The Crimson Coder

    How do I make the images in a slider be full screen on frederictonhoteldirectory.info?

    When I drag the edges the pictures go all haywire and cut off (and I can't seem to shrink the picture back down again), is there a setting to simply make it fill the screen automatically, whatever size of the screen, without tweaking edges?

    Many thanks, Mike

  • Michael
    • The Crimson Coder

    I'm having a lot of trouble with setting up the slider ... the images keep running off underneath the guides and are zoomed in much too far and cut off and can't figure out how to set anything to automate making the image simply fit the screen.

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Michael! Hope you are doing good today :slight_smile:

    I assume you are using slider element for image sliders. Instead of slider element I suggest you to use the background slider of upfront that you can be found in region settings.

    I recorded a screencast for you to create a full screen slider. I used spirit child theme as a base.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Michael
    • The Crimson Coder

    Hello Sajid,

    Wow thank you very much for that, what a great animation to explain it all!

    It came at the perfect timing too and I will try this out in the morning, looks terrific, thank you for all your kind effort it is much appreciated, thank you.

    Best regards,
    Mike

  • Michael
    • The Crimson Coder

    Hello Sajid,

    I found it ... on the background green button not the slider green button, thank you!

    I am just wondering, how can I keep the image to be full screen (of top of screen), yet when the screen is shrunk down to the tablet and to mobile size, the image shrinks along with it?

    Basically the idea is no matter what the screen size from desktop to mobile and everything in between I would like the image to fill the entire top of the screen, yet would not like the image to be cropped ... so it always retains its full width even if its height is shortened.

    Many thanks,
    Mike

  • Michael
    • The Crimson Coder

    P.S. Separate to my last question above, would you be able to tell me how I can install Upfront (a totally blank version) onto all my sites? i.e. not take an existing theme? The reason is that I need to delete everything anyways so I might as well start with a totally blank canvas.

    Many thanks,
    Mike

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Mike! Hope you are doing good today :slight_smile:

    Basically the idea is no matter what the screen size from desktop to mobile and everything in between I would like the image to fill the entire top of the screen, yet would not like the image to be cropped ... so it always retains its full width even if its height is shortened.

    If images would not crop then it will be distorted. Because there is no way to shrink images on all screen sizes and resize them proportionally. For mobile I suggest you to use different image then you used for desktop viewers. To do this launch the upfront customizer, click on responsive mode, select mobile and do the above to change images. You can also change text, element and resize on mobile according to your requirements.

    P.S. Separate to my last question above, would you be able to tell me how I can install Upfront (a totally blank version) onto all my sites? i.e. not take an existing theme? The reason is that I need to delete everything anyways so I might as well start with a totally blank canvas.

    I am afraid this option is not yet available, but we are working on it and hopefully you will see this option in next release of this theme.

    Take care and have a nice weekend :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.