{"id":26481,"date":"2024-11-14T14:59:33","date_gmt":"2024-11-14T13:59:33","guid":{"rendered":"https:\/\/www.digitizer.rs\/news-stories\/google-web-designer-for-creating-html5-ads\/"},"modified":"2026-01-09T15:33:46","modified_gmt":"2026-01-09T14:33:46","slug":"google-web-designer-for-creating-html5-ads","status":"publish","type":"post","link":"https:\/\/www.digitizer.rs\/en\/news-stories\/google-web-designer-for-creating-html5-ads\/","title":{"rendered":"Google Web Designer for creating HTML5 ads"},"content":{"rendered":"
[vc_row full_width=”stretch_row” css=”.vc_custom_1487086373501{padding-top: 80px !important;padding-bottom: 140px !important;}”][vc_column][vc_column_text css=”.vc_custom_1573604425425{padding-top: 30px !important;padding-bottom: 30px !important;}”] <\/span> We encounter online <\/span><\/i>ads<\/span><\/a> <\/span>as soon as we open the browser, but do you know how these ads are actually made?<\/span><\/span><\/p>\n

Google <\/span><\/i>has created a powerful tool that allows us to quickly and easily design and create <\/span>HTML5<\/span><\/i> Ads and advertisements, will use a visual and code interface. This is a complex program that contains a large number of possibilities. <\/span>Google Web Designer (GWB) <\/span><\/i>also offers a set of components that allow us to add image galleries, <\/span>carousels<\/span><\/i>, videos.<\/span><\/span><\/p>\n

And the best part of it all is that it is completely free.<\/span> <\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1584707536276{padding-top: 30px !important;}”]\n

How to use Google Web Designer?<\/strong><\/span><\/h1>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573604433028{padding-top: 30px !important;padding-bottom: 30px !important;}”]You can download Google Web Designer<\/span><\/i> at the following <\/span>link<\/span><\/a>.<\/span><\/span><\/span><\/p>\n

“Okay, I’ve downloaded the program, what’s next, this is too confusing”, you think to yourself for sure.<\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1WY5_4eRb_FdcuiZ1XCSQz6UHGhe60Ucb” css=”.vc_custom_1573602108388{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1584707547767{padding-top: 30px !important;}”]\n

Getting acquainted with the program<\/strong><\/span><\/h2>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573581599387{padding-top: 30px !important;padding-bottom: 30px !important;}”]Once we have downloaded and installed <\/span>Google Web Designer<\/i><\/b>, the first challenge we face is to create a file:<\/span><\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1573604390306{padding-top: 30px !important;padding-bottom: 30px !important;}”]On the left side of the interface, we select the type of ad (<\/span>Banner, AMPHTML Banner, Expandable and Interstitial<\/span><\/i>) or one of the above options (<\/span>HTML, HTML with Pages, CSS, Javascript and XML<\/span><\/i>).<\/span><\/span><\/p>\n

For now, we will stick to banner ads. We move to the right part of the screen. Add the name and location where you want to store the material you are working with in the program. The next item is the environment for which our advertisement is intended. There are 4 options, namely: <\/span>Display & Video 360, Google AdMob, Google Ads, Non-Google Ad<\/span><\/i>. Depending on which platform we are working for, we will choose the appropriate option. <\/span><\/span><\/p>\n

This time we will choose<\/span> Non-Google Ad <\/span><\/i>and the appropriate dimensions, we will not check <\/span> the Responsive layout<\/span><\/i> and we will choose <\/span>the advanced Animation Mode<\/span><\/i>, so that we have more options when making animations in <\/span> the Timeline<\/span><\/i> segment.<\/span><\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1584707559638{padding-top: 30px !important;}”]\n

Google Web Designer interface<\/strong><\/span><\/h2>\n[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1ws3faVy8W0E-lndX9zGytgwMT3J02d9G” css=”.vc_custom_1573602101550{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573581715876{padding-top: 30px !important;padding-bottom: 30px !important;}”]After creating the project, we encounter the main interface of <\/span>Google Web Designer <\/span><\/i> program. The interface is divided into several main parts. In the central part, we have a large area for building the project and editing the code itself (basic desktop). At the left end of the screen is the toolbar, at the bottom of the screen is <\/span>Timeline, <\/span><\/i>and on the right is a set of panels that allows us to change and add colors, elements, components, various events<\/span><\/span> and many other options.<\/span><\/i><\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1YKLcju69V0s81_c1j6yn5xgzQJLZ8j76″ css=”.vc_custom_1573603962851{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573581820164{padding-top: 30px !important;padding-bottom: 30px !important;}”]In the upper right corner <\/span> of Google Web Designer<\/span><\/i>, there are 2 modes for creating ads:<\/span><\/span><\/p>\n
    \n
  1. Design View<\/span><\/i>, where images, text, and other elements of our document are visually displayed, just as they will appear in a browser<\/span><\/span><\/li>\n
  2. Code View<\/span><\/i>, where the code of the document itself is displayed<\/span><\/span><\/li>\n<\/ol>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1584707641488{padding-top: 30px !important;}”]\n

    Tool Menu – Tools<\/strong><\/span><\/h3>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573581885118{padding-top: 30px !important;padding-bottom: 30px !important;}”]On the far left side is a toolbar.<\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1bim7kfUZEp3-Kdi19pObYfA–yeBu76h” css=”.vc_custom_1573602094797{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573581915576{padding-top: 30px !important;padding-bottom: 30px !important;}”]It contains all the tools needed to create elements (text, shapes, masks…). With the toolbar we create the text and add the elements that we want to have in the advertisement. <\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1584707652340{padding-top: 30px !important;}”]\n

    Timeline<\/strong><\/span><\/h3>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573581953453{padding-top: 30px !important;padding-bottom: 30px !important;}”]With <\/span>Timeline<\/span><\/i>, we create animations through <\/span>keyframes<\/span><\/i>. <\/span>Keyframe <\/span><\/i> It represents the position of an object at a specific time. This makes it possible to <\/span> Determine in time when each component will appear and in what way.<\/span> In advanced mode, each element is animated by adding <\/span>keyframes <\/span><\/i>to <\/span> the timeline <\/span><\/i>to indicate where the animations begin and end.<\/span><\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=11egJazbZQQyXsMg72VsV2Ixy6cy37EtP” css=”.vc_custom_1573602212092{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573581992709{padding-top: 30px !important;padding-bottom: 30px !important;}”]Now let’s move on to the animation of the object. If we want, for example, to text <\/span>Google Web Designer<\/span><\/i> is animated so that it appears on the left:<\/span><\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1GXeX8UadqPwmqzImsJP6-53AYZbkH4Nt” css=”.vc_custom_1573602217996{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573582029709{padding-top: 30px !important;padding-bottom: 30px !important;}”]In <\/span> the Timeline <\/span><\/i> segment, 2 keyframes<\/span><\/i> must be added<\/span><\/span>, one where the text is outside the desktop on the left and one where it is currently located.<\/span> <\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1I3B9gNBGsLLcUymYAtyz7vZSz1a8pMr3″ css=”.vc_custom_1573602255245{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1573582063293{padding-top: 30px !important;padding-bottom: 30px !important;}”]Right-click on the <\/span>timeline<\/span><\/i> to add <\/span> a keyframe<\/span><\/i>.-these when we want. Select the first one and change the position of the text so that it is off the desktop. <\/span><\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” css=”.vc_custom_1573602346522{padding-top: 30px !important;padding-bottom: 30px !important;}” custom_src=”https:\/\/drive.google.com\/uc?id=1xP6UoRIf0gzwcfcVk87jQJAwgs0weilN”][vc_column_text css=”.vc_custom_1573582104179{padding-top: 30px !important;padding-bottom: 30px !important;}”]Second <\/span>keyframe <\/span><\/i> This is the position in which we want the text to remain, more precisely the one from the beginning. Scrolling <\/span>scroll <\/span><\/i>in <\/span>the Timeline <\/span><\/i>we can check what the animation looks like.<\/span><\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1584707667099{padding-top: 30px !important;}”]\n

    Panels<\/strong><\/span><\/h3>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573582256772{padding-top: 30px !important;padding-bottom: 30px !important;}”]The panels within the Google Web Designer program include items on the right side of the screen, in order: color palettes and text, display of current elements on the project, properties of the selected object (position, rotation, fill…), components.<\/span>[\/vc_column_text][vc_single_image source=”external_link” alignment=”center” custom_src=”https:\/\/drive.google.com\/uc?id=1T6ukxMgtohY5o07JC76SfsNUFjd59ucu” css=”.vc_custom_1573602128360{padding-top: 30px !important;padding-bottom: 30px !important;}”][vc_column_text css=”.vc_custom_1584707677819{padding-top: 30px !important;}”]\n

    Object Properties<\/strong><\/span><\/h4>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573630678216{padding-top: 30px !important;padding-bottom: 30px !important;}”]Changing the structure of an object in Google Web Designer is done manually (moving, enlarging the object with the mouse) or using the panel on the right.<\/span><\/p>\n

    On the right, there are options for:<\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1573582391562{padding-top: 30px !important;padding-bottom: 30px !important;}”]\n

      \n
    1. position and size of the object (this can be expressed in pixels or as a percentage).<\/span><\/li>\n
    2. rotation, 3D rotation and ratio in length, width and height<\/span><\/li>\n
    3. style, color and size of the frame, whether it will be curved or not<\/span><\/li>\n
    4. The visibility of the object (from 0 to 1), where 0 means that the object is completely invisible.<\/span><\/li>\n<\/ol>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1584707688402{padding-top: 30px !important;}”]\n

      Components<\/strong><\/span><\/h4>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1573582461334{padding-top: 30px !important;padding-bottom: 30px !important;}”]Components are pre-built modules that allow you to make ads or <\/span>HTML <\/span><\/i> You need to add certain functions to the documents. They are organized into several smaller sections that are expanded by clicking on the name of one of the sections. <\/span><\/span><\/p>\n

      We’ll single out a few:<\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1573582491937{padding-top: 30px !important;padding-bottom: 30px !important;}”]Galleries:<\/span><\/p>\n

       <\/p>\n