How to create a theme using Upfront Builder?

Hi, I noticed that when I first activate Upfront Builder it brings me to the editor and in the end I can build a theme from the edition. However, I still do not know how to build a theme from the current website whatever time I want, is that possible? Thank you!

  • Sajid

    Hello diegpl,
    Hope you are doing good today :slight_smile:

    You can create a theme from scratch using Upfront Builder on any website. When you done then you can enable the theme on same site.

    Do you get any technical issue while creating a theme or you are unable to use the Upfront Builder at all ?

    Also, for getting started, see the following documentation:
    https://premium.wpmudev.org/docs/upfront-and-themes/

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

  • Sajid

    Hello diegpl,
    Hope you are doing good today :slight_smile:

    If you have a website designed already then you have to create it in Upfront Builder again (you can not import the design I am afraid).

    Here are the steps.

    1. First of all, look at our existing Upfront Child theme closest to your existing website and start from there. This will save you a lots of time and effort.

    2. Go to Upfront Builder/Editor -> Theme Settings -> Colors and configure colors for your theme.

    3. Go to Upfront Builder/Editor -> Theme Settings -> Typography and add some fonts for your website. From this panel, you have to also configure basic styling of html elements on your website like links, headers, list items, paragraphs etc.

    4. Next step is to add Upfront Elements like menu, image (logo), sliders, texts, buttons etc on your page for basic layout of your website home page.

    5. Now style elements of the site the way you have already on existing site using the presets of each element. This will get you most of the design of your existing site.

    Each element have appearance tab to configure basic styling including fonts, colors and padding.

    6. But for some cases, you may need to write/copy some CSS styles and add it in Upfront Editor/Builder -> Theme Settings -> Global Theme CSS.

    7. Once done, don't forget to save each element and upfront theme to actually apply those changes on frontend.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

  • diegpl

    I am not sure if I understood. Are you telling me that I have only one opportunity to create a new theme? Like, when I activate Upfront Builder it brings me to the theme creation url and from there I can create a new theme. So, should I do everything just on this chance? Can not I work a little bit, stop and then continue to work again on the other day. Is that what you are telling me? Thank you.

  • Social Advisors

    Go to Upfront on the left hand side from the admin panel then click Builder. You can then create a new theme by naming it where it says "What do you want to call your new theme?" then click start building. Build then click save. You can have multiple at the same time and export themes files. I am working on different layouts for tablet, desktop, and mobile. Let me know if you need screenshots.

  • Sajid

    Hello diegpl,
    Hope you are doing good today :slight_smile:

    So, should I do everything just on this chance? Can not I work a little bit, stop and then continue to work again on the other day. Is that what you are telling me?

    Yes, of course you can take breaks during the theme creation process and resume from where you left.

    Once you created a theme, made some changes there, now save those changes and feel free to quit the builder.

    To edit the existing theme and resume from where you left. Go to Upfront -> Builder and click on Edit in Builder button in the list of themes.

    You can do this as many time you want until you are finished creating the theme (unlimited revisions).

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.