Logo

Your Logo Goes Here

Your Fully Branded Digital Publishing Platform
Home
Articles
Back Issues
Log in
  • Image

    How to Set Your Default Fonts and Colors in Universal App

    Follow these easy steps to set up your default fonts and colors in Universal app!

    Even though it looks simple, but setting up the right font and colors can be a huge boost to your branding! In Universal App, you can do this very easily by following these steps:
    First of all, you need to be logged in to your Universal App account.

    From there, on the left side menu, go to Branding > Designer
    Image
    You will then be able to see a preview of how your homepage looks like. To customize your default fonts, click on the Fonts button on the top right
    Image
    There are three main sections that you can set up your fonts for, which is Heading, Body, and UI font
    Image
    Next, you can click on the Colors button to start customizing your default colors
    Image
    Image
    Once you've made these changes, don't forget to click save!

    If you changed your mind, you can also click the Reset button to return the fonts and colors to the previous settings.
    Image
    Once you've saved the new fonts and colors, you can check out how it looks right away by clicking the Live Preview button on the top right
    Image

    Want to learn more on how to design your Universal App Homepage? Feel free to reach out to our support team using the live chat at the bottom right corner of your Universal App dashboard or simply send an email to support@magloft.com

    Click here to get started.
    Image

    Image
  • Asset Dimension Guidelines for Universal App (UA)

    The UA is powered by PWA technology that works in any browser and is responsive to any screen size. To ensure your image or graphic assets remain to look high-quality to your readers on any device, please only upload non-vectorized assets that meet the following requirements depends on where it’s being placed.

    Main Banner on UA Homepage

    The main banner on the homepage takes full width on any device, including the desktop. Therefore, we need to consider using assets with minimum width that will still look sharp on the desktop monitor.
    Image
    • Minimum width: 1600px (with important content within 640px to the left-and-right from the center.
    • Minimum height: 400px
    • Compatible file formats: .jpg, .png
    • Best Practices: 2x size for retina displays (i.e. image width of 3200px) 
    • Features: Banner can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

    Advertisement Banner on UA Homepage

    Image
    Ads on the left column
    • Minimum width: 704px
    • Compatible file formats: .jpg, .png, embedded HTML
    • Features: Ads can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.
    Best Practices
    • 2x size for retina displays (i.e. image width of 1408px)
    • Contain Call-to-Action (CTA) on the image
    • Use relevant title
    • If you’re using embedded HTML, please take out the HTML code that defines the fixed width.
    Ads on the right column
    • Minimum width: 398px
    • Compatible file formats: .jpg, .png, embedded HTML
    • Features: Ads can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.
    Best Practices
    • 2x size for retina displays (i.e. image width of 796px)
    • Contain Call-to-Action (CTA) on the image
    • Use relevant title
    • If you’re using embedded HTML, please take out the HTML code that defines the fixed width.
    Image

    Advertisement Banner inside an article (added through Typeloft Editor)

    Image
    Full-page width page
    • Minimum width: 768px
    • Compatible file formats: .jpg and .png using image widget; embeded HTML using HTML widget
    • Features: Ad using image widget can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.
    Best Practices
    • 2x size for retina displays 
    • Contain Call-to-Action (CTA) on the image
    Other than full-page width
    Content on multiple columns layout on the desktop most likely will be displayed in one column on mobile, taking the full width of the mobile device.
    • Minimum width: 376px
    • Compatible file formats: .jpg and .png using image widget; embeded HTML using HTML widget
    • Features: Ad using image widget can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.
    Best Practices
    • 2x size for retina displays 
    • Contain Call-to-Action (CTA) on the image
    Image
    Get stuck? Feel free to reach out to our live chat at the bottom right corner of your Universal App dashboard or simply send an email to support@magloft.com.

    Want to learn more how to monetize your content and take full advantage of all Universal App features? Follow our Discord community to know more all of the latest updates!

    Click here to get started.
    Image

    Image