• Before using the canvas
    Just two minutes to watch this tutorial.

    If you accidentally close it, you can view it again.
  • First of all, the long bar on the left is Category.

    You can select the template you want here.
    If you are using it for free, please select the Free section.

    Now we start looking for a pretty template.
  • If you have the template you want,

    Preview or You can bookmark it.
    You can search for templates through Search,
    You can also view by selecting Detailed classification.

    If you have a template you like, please see the Next page.
  • Insert the template by dragging it on the right screen.

    If there is a design on the right screen,
    You can put it in the above or below template.
    Design elements can also be placed in templates between.

    Now, I'll revise the design in detail.
  • The right screen is called canvas.

    Design elements placed on the canvas can be modified.
    If you want to change the address of an image,
    click on the image. You can modify the image's address,
    change object, border, transparency, etc.

    Design elements other than images are provided with
    different editors. It's really easy if you know the HTML tags,
    but it's okay if you don't know it!!

    You just need to write on a blog.
  • If you click design elements and you get a blue handle,
    This element means that it is a design element that
    can be positioned.

    You can grab the blue handle and move it to the blue dotted
    line    . Here's where you might get confused.

    These are the inner design elements and the outer
    design elements.
  • If you select an image, but you cannot move the image up and down
    Because this image is a internal design element inside a link.

    In this case, is used to select the parent element surrounding the
    image. This is the select upper design element button.
    It is a function to select a parent.

    If you are familiar with the function of this button, think that you
    have 90% understood Mocanvas    .

    Really!! Really!! This is an important feature.
  • There is also a function to copy a design.
    Copying the design and pasting it in the same area creates another element.
    If you paste the copied design into another area,
    Elements with the same attributes will be replaced with copied elements.

    You can copy only one cell property of a table, and you can paste it in multiple places.
    The copy and paste function will greatly speed up your working.

    This feature is really important!!!
  • Design elements if not text elements
    You can easily move in multiple directions with the arrow keys.

    If you are editing Text Design Elements,
    drag the text design to move it, or
    You can move up and down by clicking on the gear.

    Likewise, if it's not a letter element
    You can Delete by pressing the DEL button.
  • If you are curious about the look of other devices while editing the canvas,
    PC, TABLET, MOBILE You can also see it as a device.

    In the case of tablets and mobiles, they are produced in typical sizes, but
    It cannot be considered the same as all devices.

    The most accurate way is to check it directly on the device
  • You want to revert to old record while editing the canvas,
    If you want to return to different log, use Previous, Next.

    If you want to use this canvas as is even after turning off your computer,
    If you use the Save in DB function, it will be saved in the server
    You can edit it tomorrow or next month.

    If you want to rebuild your canvas, use the Trash function.
    It serves to empty the screen at once.
  • Fonts can only be used as main font and subfont.
    Font data is linked with GOOGLE CDN.

    If your site is already using web fonts,
    The canvas automatically fits on your site.
    In this case, it would be better not to use web fonts, right?

    If you write on the bulletin board, or if you need a separate page
    It is also a good idea to set the font pretty with this function.

    Why not more than two?
    This is because the font is also data, so it affects the speed.
  • The color palette will enhance your color sense.
    If you select the pallet at the top, the next step is easy.

    When modifying the text color, editing the background color,
    and editing the icon The selected palettes are linked so you can
    easily determine the color.

    These color patterns are popular colors of the ADOBE Kuler service.
    Experts choose to create a better canvas using a palette.
    If you're having trouble choosing a color, this color pattern
    will help you a lot.
  • The basic content is very important canvas size information.
    There is a full part of the website and the actual content in the middle.
    Of these, the size of the center actual content is the size of the default content.

    It's okay if the default content is bigger than your site, but if it's small
    The left and right may look empty, so if possible, the
    of your site We recommend that you write down the size of the main content part.

    For reference, open market and other entering malls should be 1000px.
    Mobile is smaller than 1000px, so it will be responsive.
  • !! The default font size is important, but it doesn't actually apply.

    All font sizes of Mocanvas are specified in REM units.
    REM unit is a unit that is transformed into based on the site's default font,
    It depends on which site you put the canvas code on.

    If your site's default font is 16px,
    If you set it to 16px, it will be convenient because you can design the same shape.

    The font size on the canvas is for preview purposes,
    Be sure to note that the font size depends on the site!! Note please.
  • If there are lack of elements while decorating the canvas,
    You can create a design by adding basic elements.

    Just like the design, you can drag it onto the canvas.

    Various elements such as text, image, button, box, table, etc.
    Place them properly to create beautiful pages.

    Just put it in like writing a blog post.
  • If you need more canvases,
    New canvas can be added.

    There is also a canvas for repeated work,
    There may be canvases with frequent modifications.

    Use the canvas     to suit your application.
  • If you find Pretty Design, try the Favorite feature.
    You can Add, Delete to Favorites at any time.

    I would put in the image pile, product list, and title, which I use often.
    Everyone can manage by putting in frequently used designs, right?

    The more designs you have, the more you will be able to use conveniently.
  • If you want to see the canvas in advance,
    Try the Preview feature.

    You will use this feature frequently.
    Try reducing the window size and check the mobile size.

    We recommend using as often as possible.
  • If your canvas is all done,
    Now use Get Complete Code to apply the actual code.

    If you click Get Completed Code, you will be informed of contents to be modified.
    There are no errors, please copy the code.
    And just put the HTML code in your site.

    Are you having difficulty? Perfect! You only have to do it once.
    Really perfect! This is once.
  • The tutorial is all over.
    Now, would you like to decorate the canvas?


  • 이미지 / 동영상

    SVG 아이콘

    EMOJI 아이콘

  • How to use icons

    Inline image

    After registration, inline images must be modified with your own image. You can change the image by clicking on the inline image and clicking the icon.

    😀 EMOJI icon

    EMOJI icons can be used in the same way as fonts. Color is not supported, but the icon can be grown with the font size. However, the EMOJI icon may differ in appearance for each browser or device.

    SVG iIcon

    The SVG icon is image coded inline without a separate url. You can modify the color or size, and because it is vector-based, the resolution does not break even if the size is large.
  Empty Text
  Empty Image
  Empty Button
  Empty Box
  Empty Box * 2
  Empty Table * 2
  • My Canvas
  •  
  • Canvas
  • Canvas is only available to members.
  • remaining period
  • infinite

Select / Edit Canvas

Need a new canvas?

Still not a member?

Login Join

 
    • #ED5565|#DA4453|#FC6E51|#E9573F|#FFCE54|#FCBB42|#A0D468|#8CC152|#48CFAD|#37BC9B|#4FC1E9|#3BAFDA|#5D9CEC|#4A89DC|#AC92EC|#967ADC|#EC87C0|#D770AD|#F5F7FA|#E6E9ED|#CCD1D9|#AAB2BD|#656D78|#434A54_____#264653|#2A9D8F|#E9C46A|#F4A261|#E76F51|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#E63946|#F1FAEE|#A8DADC|#457B9D|#1D3557|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFCDB2|#FFB4A2|#E5989B|#B5838D|#6D6875|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#05668D|#028090|#00A896|#02C39A|#F0F3BD|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#000000|#14213D|#FCA311|#E5E5E5|#FFFFFF|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#011627|#FDFFFC|#2EC4B6|#E71D36|#FF9F1C|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#2B2D42|#8D99AE|#EDF2F4|#EF233C|#D90429|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#D8E2DC|#FFE5D9|#FFCAD4|#F4ACB7|#9D8189|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#1A535C|#4ECDC4|#F7FFF7|#FF6B6B|#FFE66D|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFBE0B|#FB5607|#FF006E|#8338EC|#3A86FF|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#247BA0|#70C1B3|#B2DBBF|#F3FFBD|#FF1654|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#F4F1DE|#E07A5F|#3D405B|#81B29A|#F2CC8F|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFA69E|#FAF3DD|#B8F2E6|#AED9E0|#5E6472|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#EF476F|#FFD166|#06D6A0|#118AB2|#073B4C|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#3D5A80|#98C1D9|#E0FBFC|#EE6C4D|#293241|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFB5A7|#FCD5CE|#F8EDEB|#F9DCC4|#FEC89A|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#F6BD60|#F7EDE2|#F5CAC3|#84A59D|#F28482|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FF9F1C|#FFBF69|#FFFFFF|#CBF3F0|#2EC4B6|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#50514F|#F25F5C|#FFE066|#247BA0|#70C1B3|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#22223B|#4A4E69|#9A8C98|#C9ADA7|#F2E9E4|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#7BDFF2|#B2F7EF|#EFF7F6|#F7D6E0|#F2B5D4|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#606C38|#283618|#FEFAE0|#DDA15E|#BC6C25|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#9C89B8|#F0A6CA|#EFC3E6|#F0E6EF|#B8BEDD|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#CAD2C5|#84A98C|#52796F|#354F52|#2F3E46|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#0B132B|#1C2541|#3A506B|#5BC0BE|#6FFFE9|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFFFFF|#84DCC6|#A5FFD6|#FFA69E|#FF686B|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FE938C|#E6B89C|#EAD2AC|#9CAFB7|#4281A4|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#ECF8F8|#EEE4E1|#E7D8C9|#E6BEAE|#B2967D|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#555B6E|#89B0AE|#BEE3DB|#FAF9F9|#FFD6BA|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#006D77|#83C5BE|#EDF6F9|#FFDDD2|#E29578|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#FFFFFF|#00171F|#003459|#007EA7|#00A8E8|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#CFDBD5|#E8EDDF|#F5CB5C|#242423|#333533|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#283D3B|#197278|#EDDDD4|#C44536|#772E25|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#114B5F|#1A936F|#88D498|#C6DABF|#F3E9D2|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#ED6A5A|#F4F1BB|#9BC1BC|#5CA4A9|#E6EBE0|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#5F0F40|#9A031E|#FB8B24|#E36414|#0F4C5C|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#355070|#6D597A|#B56576|#E56B6F|#EAAC8B|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#5BC0EB|#FDE74C|#9BC53D|#E55934|#FA7921|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000_____#335C67|#FFF3B0|#E09F3E|#9E2A2B|#540B0E|#ffffff|#E6E9ED|#AAB2BD|#434A54|#000000