Wondering how to use Wix mobile editor?
In this Wix website tutorial, you'll learn how to do Wix responsive Wix design using
the Wix editor mobile to customize your Wix mobile website.
So let's get right into this Wix tutorial on Wix basics on how to make a website with
the Wix mobile view using the new Wix editor.
First off, if you don't have a Wix account yet, just click on the link in the description
box below to sign up for free.
Once you've logged in to your Wix account, locate the website you wish to use the Wix
mobile editor on, hover your mouse over it, and then click on the pencil icon to access
the Wix editor.
The Wix editor defaults to the desktop editor.
In order to access the Wix editor mobile, click on the mobile device on the panel up
top to switch to mobile and edit your site for mobile.
You can always toggle between the Wix mobile editor and Wix desktop editor from this white
panel up top.
If this is your first time using the Wix mobile editor, you'll be prompted with a few questions
to set it up.
For more details on those questions and what to do when accessing the Wix editor mobile
for the first time, make sure to watch my video on 'Wix Mobile Optimization Using The
Wix Mobile View'.
I'll leave the link to it in the description box below.
Just like with the desktop Wix editor, you can click on any element within the Wix editor
mobile to edit it from its individual toolbar.
For instance, if you click on this piece of text, you can increase its size by 1 pixel,
decrease its size by 1 pixel, click on settings to change the font size, color, enable vertical
text or not, and change the alignment, add an animation, hide the element or access help.
You can also click on any section at large, such as on the header or on a page section,
and use the options that appear on the right to move that page section up, move that page
section down or hide that section.
The Wix editor mobile even suggests proper sizes for your Wix website's header and footer
for best results.
Another exclusive feature of the mobile editor is the quick action bar.
If you click on it, you can then click on 'set up quick actions' to select the elements
that should appear within the quick action bar, such as phone, email and Facebook.
You can click and drag on the left-hand side of any existing element to reorder it, or
click on the three little dots on the right-hand side of an element to set it up, rename it
or remove it.
When you click on 'set up', you'll be able to add additional settings for that specific
element.
If you wish to add even more elements to your quick action bar, click on 'more actions'
at the bottom, and then add a custom action, phone, email, WhatsApp, address, contact form,
Facebook, Flickr, Google business profile, Instagram, LinkedIn, Pinterest, TikTok, Twitter,
Vimeo, VK, Yelp, YouTube or Line.
Under 'settings' from the quick action bar's individual toolbar, you can select whether
you wish to show labels (no or yes).
Under 'layout', you can select which side the quick action bar is on (left or right).
Under 'design', you can discover more action bars, and then click on 'customize design'
at the bottom to edit the quick action bar's fill color and opacity, border and shadow
when open, and fill color and opacity, border and shadow when closed.
You can access these same settings under 'customize design'.
Under 'help' from the quick action bar's individual toolbar, you can learn more Wix editor mobile
tips and tricks on how to edit the quick action bar.
Just like with the desktop Wix editor, you can use the left-hand side panel to access
additional Wix mobile editor options.
Under 'add to mobile', you can add text, an image, button, decorative, box, social or
embed to your Wix mobile site.
Those elements that you add to your Wix mobile site won't be added to the desktop version.
Under 'menus and pages', you can access your site menu, as well as other page options on
your Wix website, such as member pages, store pages, bookings pages, blog pages and lightboxes.
Within the site menu, you can click on the three little dots next to any page to access
the mobile settings for that page, and select whether the page should have a standard layout
or no header and footer layout, and to hide that page on mobile.
Under 'background', you can edit the mobile background to a color, image or video, or
select one of the Wix editor mobile's stunning image and video backgrounds, perfect for any
page.
You can even choose to apply that mobile background to all pages on your mobile site if you so
wish.
Under 'mobile tools', you can access tools available just within the Wix editor mobile.
These include the quick action bar, which we already covered, as well as a back to top
button to get visitors to the top of your site in a click, a welcome screen to introduce
your brand in a stunning welcome screen, and browser theme color where you can choose a
mobile browser color that matches your site.
Let's cover each one of these Wix editor mobile tools individually.
Let's first click on 'add to site' next to the 'back to top button'.
From the back to top button's individual toolbar, you can click on 'change icon' to select another
icon for that button, and then click on 'customize design' at the bottom to edit the button design's
fill colors and shadows.
You can access these same settings under 'design'.
Under 'animated', you can select an animation to add to your back to top button, and then
click on 'customize' at the bottom to change that animation's duration.
Under 'help', you can learn more about what you can do with the back to top button, including
how to change the button icon, upload your own button, change the position of your button,
and change the size of your button.
Let's x out of these back to top button settings, click on 'mobile tools' from the left-hand
side panel, and then click on 'add to site' next to 'welcome screen'.
From here, you can click on the play button to see your welcome screen in action.
You can also upload your logo as either an image or vector art to increase your brand
awareness, choose your logo animation (none, bounce in, fade in, float in, expand in, spin
in, fly in or blur in), select the direction (from left, from right, from top or from bottom),
choose the background color, select the background animation (none, slide in, fade in or expand
in), as well as its direction (from left, from right, from top or from bottom).
Once you're done setting the welcome screen design settings, click on 'done' at the bottom.
Lastly, let's click on 'mobile tools' from the left-hand side panel, and then click on
'add to site' next to 'browser theme color'.
All you have to do is click on the color picker to choose a color, and then click on 'done'
at the bottom.
Under 'hidden on mobile' from the left-hand side panel, you'll be able to locate all of
the elements that are visible on your Wix desktop website that you hid from your Wix
mobile website.
If for some reason you can't find an element, you can view and organize any element on a
page from the layers panel.
The layers panel is this option at the bottom of the left-hand side panel.
From here, you can click on any element within the header, page and footer to locate it,
and then edit it from its individual toolbar.
Under 'page layout optimizer' from the left-hand side panel, you can click on 'optimize now'
to optimize and update the mobile layout of this page.
Once you're done using the Wix editor mobile, make sure to click on 'save' and then on 'publish'
on the top, right-hand side to make your changes active.
If you're serious about using the Wix mobile editor, make sure to sign up for a free Wix
account by clicking on the link in the description box below, check out our Wix tutorials playlist
for even more Wix tips and tricks, as well as our FREE Complete Website Creation Guide
below this video to learn more about how to create your own website step-by-step without
stress or overwhelm.
Leave a comment below and let me know if you'll be creating a responsive Wix site using the
Wix editor mobile.
If you liked this video, make sure you give it a thumbs up and subscribe to my channel
so that you can navigate the tech side of online business with ease, and stay tuned
for our next video which is about how to make money with Wix.
As you wait for my next video to go live, check out these two videos I have right here,
and I'll see you in my next video.