The great thing about the Visual Editor is that it comes with loads of easy-to-use Modules. One thing that makes these Modules so easy to use is the fact that every one of them share a lot of the same customization settings and options.
This tutorial we’ll cover the basic Module settings so that if you don’t remember something you can easily refer back to this article.
This pop-up contains ALL the functionality for any Module you choose. The layout will always be the same. From the top to bottom we’re going to dissect and discuss the main features you’ll be using.
Starting from the top is the Module title, in this case we’re looking at the Text Module. This title changes depending on the Module you choose.
To the right of the title are 2 little buttons. The first one on the left side allows you to Expand or Contract the size of your Module. The one beside that causes the Module to Snap To Left, meaning it’ll stick to the side of your browser.
NOTE: You control the exact size of the Module using the arrow in the bottom right corner. Or move it about by holding down in the purple area by the Modal Title.
Continuing down you’ll see 3 tabs, Content, Design & Advanced. Though you’re not likely to ever use Advanced.
Content Tab
This is where as the title suggests you add the content you want in your Module. Just about every Module will have the same 4 options under content. Text, Link, Background and Admin Label. There are other options however those will be specific to that Module. Of these 4 basic settings you only need to know 2, Text and Background.
Text will usually vary from Module to Module however the principal is the same. Whatever text you want displayed will be inputted here.
The Background is pretty self-explanatory and will always have the same options. Four tabs give you the ability to add a background color, gradient, image or video.
Design Tab
NOTE: While most of the options here will vary there are a few that are universal. And we’ll discuss in further other options in the tutorials that cover those Modules
While you’re given a handful of styling options within the Content tab, the majority of your styling will be under the Design tab.
The first option, Text is similar to Text under the Content tab. So why is it there then? The choices here are universal for Modules that have the option to add text. Some of these are:
- Choice of Font
- Precise Font Colors
- Letter Spacing
- Line Height
- Text Shadow
The following tabs under Heading Text are rather self explanatory. They allow you to add some cool styling around your text like a border or some shadowing. However the Sizing option is a little bit different, as it has nothing to do with the font size. Rather this option allows you to view your paragraph on different screen sizes and the adjust the width of your paragraph accordingly if you so choose.
Scrolling down to the last tab in the Design option is Animation. This is a simple but cool feature. Animations give your modules fade-in effects as your visitors scroll down and your different Modules come into view.
For each animation type there are different customization options that affect the duration, delay and if you want it on repeat.
NOTE: Animation duration & Delay are timed in milliseconds(ms). 1000ms = 1 second.
Saving, Undoing, Redoing & Deleting
Once again every Module is exactly the same when it comes to Saving, Undoing, Redoing & Deleting.
So if you get yourself into a situation where you’ve made a mistake or do not like the look of something, Visual Editor has your back. You can undo/redo your work by clicking the purple or blue button at the bottom. If you’re just experimenting to see how something will look or really do not like the look of what you did, simply discard all changes by clicking the red box. When all is said and done and your satisfied with your work, simply click the green box.
When you like the changes you’ve made and are ready to save simply click on the green arrow which will save your changes. It’s important to know though that these changes will not be visible on your website yet Until you close the Visual Editor.
