Retina Logo Widget

High-Resolution Retina Logo

The Retina Logo feature in UAE Lite helps you display a high-quality version of your site’s logo on high-density screens like Retina, 4K, and other ultra-HD displays. This ensures that your logo always looks crisp, clear, and professional perfect for modern websites and businesses.

How to Use the Retina Logo Feature

To set up a retina-ready logo using the UAE Lite widget, follow these simple steps:

1. Add the Retina Logo Widget

• Edit the page using Elementor.
• Search for “Retina Logo” in the Elementor widget panel or find it under the “Ultimate Addons” section.
• Drag and drop the Retina Logo widget onto your section.

2. Upload Your Logos

In the Content tab:

• Normal Logo: Upload the standard version of your logo (1x).
• Retina Logo: Upload the 2x version of your logo (typically double the dimensions of the normal logo).

Pro Tip: If your normal logo is 150×50 pixels, the retina logo should be 300×100 pixels for best results.

3. Adjust Image Resolution, Alignment, Caption and Link

Once you’ve uploaded your logos, you can fine-tune their behavior and appearance using the available settings:

• Image Resolution: Choose between the Normal Logo and the Retina Logo. The Retina option ensures your logo appears sharp and clear on high-DPI displays like Retina and 4K screens. Upload a 2x version of your logo to enable Retina support.
• Alignment: Set the position of your logo within the section. You can align it to the left, center, or right, depending on your layout preference. Ideal for adjusting logo placement inside headers or navigation bars.
• Caption: Add a custom caption below your logo image, if needed. This can be helpful for accessibility, branding slogans, or descriptive text. You can style the caption separately under the Style tab.
• Link: Add a clickable link to the logo, typically linking back to your homepage or any custom URL. You can also set the link to open in a new tab and add a nofollow attribute if required. Great for making logos function as navigation elements.

4. Style the Retina Logo

Under the Style tab, you’ll find several options to customize the appearance of your logo and make it fit perfectly into your website design.

• Width: Adjust the logo size for responsiveness. You can set different widths for desktop, tablet, and mobile to ensure it looks perfect on all devices.
• Max Width: Control how much space the logo can occupy within its container. This is useful to prevent the logo from stretching too far on larger screens.
• Border Style: Choose a border style (solid, dashed, dotted, double, etc.) to apply around your logo. This helps add a defined frame or visual interest if needed.
• Border Radius: Soften the corners of your logo by adjusting the border radius. You can create rounded edges or even a circular logo by increasing the radius value.
• Box Shadow: Apply shadow effects to your logo to give it depth and make it pop visually. You can customize the position, blur, and spread of the shadow.
• Opacity: Control the transparency level of your logo. A lower opacity makes the logo more see-through, while a higher value (close to 1) keeps it fully visible.

Responsive Settings

The widget supports responsive controls, so your logo looks great on mobile, tablet, and desktop views. You can:

• Set different logo sizes per device.
• Hide the logo on specific devices if needed.

Why Use a Retina Logo?

Retina and high-DPI displays are becoming the standard. Using a retina-ready logo ensures:

• A professional first impression.
• Sharper visuals on modern devices.
• Better brand representation across all screen types.

Need Help?

If you have any questions or face issues while using the widget, feel free to reach out to our support team or check out more UAE Documentation.