Create a Mobile-optimized Page
Creating a Mobile-optimized page is a breeze, and you'll find that it offers a plethora of possibilities for various purposes. To get started, follow these four straightforward steps:
- Select the type of Mobile-optimized page you'd like to create.
- Add your content, tailored to the chosen page type.
- Customize the appearance and design of your Mobile-optimized page to make it truly unique.
- Generate and Share the Mobile-optimized page with your audience by using the associated QR code.
What is a Mobile-optimized Page?​
A Mobile-optimized Page, often referred to as a Mobile Landing Page, is a web page designed and formatted specifically for optimal viewing and interaction on mobile devices such as smartphones and tablets. These pages are carefully crafted to provide a seamless and user-friendly experience for mobile users, ensuring that content is easily accessible, readable, and navigable on smaller screens.
Mobile-optimized Pages are a crucial component of the QRLynk platform, allowing you to create custom web pages tailored to your specific needs and preferences. Whether you're promoting a product, sharing information, or engaging with your audience, Mobile-optimized Pages offer versatility and responsiveness across various mobile devices.
In this documentation, we'll explore the key features, customization options, and best practices for creating Mobile-optimized Pages on the QRLynk platform. Discover how to leverage the power of mobile-friendly content to enhance your QR code-based marketing and communication strategies.
Start creating a Mobile-optimized Page​
To begin creating your Mobile-optimized Page, follow these steps:
Log in to your QRLynk account. If you don't have an account yet, you can learn how to register here.
Click the Create button.
From the available options, select Page. This option allows you to create your page quickly when you don't need to customize the associated QR code.
If you want to not only customize the page but also design the associated QR code, choose the QR code option. This gives you full control over both the content and appearance of your page and QR code.
Select the type of Mobile-optimized page you'd like to create​
When creating your Mobile-optimized Page, you have two options for selecting the layout:
Choose by Template: By selecting this option, you can pick a template of your choice from the complete list of available templates. This gives you the flexibility to choose a design that suits your preferences.
Choose by Page Type: If you opt for this method, you first select the type of page you'd like to create from the available options. Once you've chosen the page type, you can then select one of the templates associated with that specific page type. This allows you to create a page tailored to your specific needs while ensuring a coherent design.
Once you have made your choice, whether by template or by page type, click the "Next" button to proceed.
Add your content, tailored to the chosen page type​
After pressing the "Next" button, you'll be presented with the content input view, regardless of whether you selected by type or by template. If you chose a template, the platform will determine the page type based on the template you selected.
You're not required to fill in the "QRLynk name" field right from the start, but it's mandatory to specify a name for your QRLynk before saving. This name will help you identify the created page in your list of QRLynks.
Even if you initially selected a template, you are free to change it to any other available template for that page type. The chosen template will provide a starting point for your page, including a set of pre-designed sections and an overall layout. If you select the "Do it yourself from scratch" template, there won't be any preloaded content or design, but it will include default sections recommended for the selected page type.
When you haven't started editing the content of the sections and decide to change the template, the new template will be taken as it appears by default. This allows you to switch between templates until you find the one that best suits what you're looking for. For example, we've changed the template, and the Donation section from the previous template hasn't been included because we haven't started editing the content of that Donation section yet, as shown in the image below.
If you're concerned that changing templates after editing content might cause you to lose the entered content, don't worry. Once you've edited the content and decide to change the template, the previous content will be adapted to fit the design of the new template. This way, you can preserve your current content and easily apply the design of the new template. To continue with the explanation, let's switch back to the previous template.
Sections Edition​
The content of your page is composed of sections. Regardless of whether the page is created from a template with a predefined set of sections, these sections can be edited freely. You have the flexibility to not only modify the content within each section but also rearrange, delete, or add new sections as needed.
Every change you make will be reflected in real-time on the preview of the page you're creating.
Rearrange sections​
To rearrange sections, simply use the drag-and-drop functionality to move a section to your desired position.
Section Settings​
Each section offers customization options in its top-left corner.
The "Delete" button allows you to remove a section from the page. Please note that this action is irreversible.
The "Duplicate Section" button allows you to clone a section, including both its content and configuration.
The "Edit section headline" button allows you to edit the text of the section's heading.
In the example shown below, we've added a wink ";)" to the text, and to save the changes, click the "OK" button.
Press the "Section's Settings" button to modify other settings for the section.
In the example shown below, the section's header was configured not to be visible.
If you choose to make the section header visible, additional settings related to the header or dependent on its visibility will become available. These include the 'Section arrangement mode' which allows you to select how the section is displayed: always expanded, collapsible with a button, collapsible using the classic variant, or as a separate tab.
Another section configuration option is the top and bottom spacing relative to the rest of the sections. In the example shown below, we have changed the 'Bottom Spacing' to a medium size.
To accept the changes to the section's configuration, press the "Close" button. Be aware that if you press the "Reset" button, the section will revert to its default configuration values.
Section Content Edition​
To edit the content of each section, simply expand the section you want to work on.
The content you can edit within each section will depend on the type of section it is. For example, in the image below, we demonstrate how to edit the "Social Networks" section, which was previously cloned and moved to the end of the page. In this case, we're not only modifying the social media usernames, but we're also choosing the option to display the social networks as buttons.
It's essential to note that this section is independent of the original section it was cloned from. That's why in the preview, you can see that the "Social Networks" section that appears higher up on the page still shows only icons, while the one we moved to the bottom of the page appears as buttons.
Perhaps you're feeling overwhelmed with all the details related to editing the page's content, but don't worry. In the Sections Overview page, we provide detailed information about each available section type and how to edit their content.
Add New Section​
As mentioned earlier, in addition to editing existing sections in the template, rearranging them, and even deleting them, you can also add new sections. To add a new section, use the "+ Section" button.
When you press the button to add a new section, you'll need to choose the type of section you want to add. The Sections Overview page contains detailed information about the types of sections available.
In the example below, we've chosen the Contact Form section, which allows you to add a contact form to the page.
The new section will be added to the end of the page, but you can edit its content and move it to another position, just as we did in the previous examples.
Customize the appearance and design of your Mobile-optimized page to make it truly unique.​
In addition to editing the page's content, you have the freedom to modify its design to match your style, which doesn't have to be an exact replica of the template. To fine-tune the page's design, navigate to the "Page Design" tab in the current view.
The "Main Colors" section allows you to change the primary and secondary colors. In the example shown below, we've updated them to dark blue and light blue, respectively.
The "Banner and Profile Images" section allows you to change both the banner and profile images. In the example shown below, we've changed the profile image by pressing the "Profile Image" button while keeping the original banner image from the chosen template.
In the "Fonts" section, you can configure everything related to the text, including its type, color, and size. Here, you can see that the template had a custom global font color selected, and we will change it to the Main Primary Color, as shown in the example below.
In the "Custom Fonts" section, you have full control over the fonts used in your page. You can customize the font type, color, and size for different roles on your page. For example, if you want to change the font color of headings to match the Main Primary Color, you can easily do so in the Custom Fonts section, as shown in the example below.
Let's assign the default font color to all text elements except for the buttons.
For the buttons, we'll select Blue as the font color.
The Buttons section allows you to configure various settings for the buttons, including shape, borders, background color, and more. In the example, the template had specified that the buttons alternate their orientation, so they pointed left and right alternately. We will deactivate this property to ensure that all buttons have the same orientation.
Experience the freedom to personalize your page's design effortlessly. With an array of customization options, crafting a unique look for your page has never been more straightforward. For comprehensive details on each customization feature, feel free to delve into the Design Specifications section.
Customizing the Short URL​
Feel free to switch between the content editing and design customization tabs as often as you like.
You might be thinking at this point that customizing the Short URL aligns more with creating a QR code than a webpage, and you're probably right. However, even though you're creating a webpage, the content tab provides you with the option to edit your QRLynk's code. This means you can incorporate your name, nickname, or business name into your Short URL, adding a personalized touch to your page's QR code.
Simply hit the code in the Short URL, and a modal window will open, allowing you to edit the code.
A quick alternative is to hit the code, and you'll achieve the same result as selecting the "Edit" option: a modal window will appear, allowing you to edit the code in the Short URL with your desired value. Afterward, wait for confirmation that the code is available, and then press the "OK" button.
Generate and Share the Mobile-optimized page with your audience by using the associated QR code.​
When you're satisfied with how your page looks in the preview, simply hit the "Save" button to create your page. Don't worry if something isn't exactly as you envisioned it – you can edit your page, both its content and design, whenever you wish.
Once the saving process is complete, the QRLynk associated with your page will appear in your list of QRLynks.
Hit the "Open" button to access the live page and verify that the result is as expected.
The "Copy Short URL" button allows you to copy the URL of your page for sharing it with your audience.
If, after creating your page, you find yourself frustrated because the associated QR code has a basic design, keep in mind that this is because you selected the "Create Page" option, which does not include QR code customization.
However, there's no need to be discouraged. Even if you selected the "Create Page" option, you can still customize the QR code from your list of QRLynks using the "Edit QR code" option, as explained in the Manage your QRLynks section.
To learn in detail how to customize the content and design of a page, please review the Sections Overview and Design Specifications sections.