![]() ![]() Using a subgrid allows for more responsive flexibility at smaller screen sizes. Containers can be used in many ways but one good example of its use would be for navigation as explained in this article.Ī subgrid element is a group of containers where you can add rows and columns within an existing column. By applying boundaries, a width limit, to the container you can, for example, have a row with a different background that extends the full width of the screen while constraining the content elements to a certain size. Like a taco, you can stuff extra elements within them.Ī container allows you to group elements together and control the positioning, like for example, centering them within your layout. These special elements give you more granular control over the placement of content. Layout elements are the last group on the elements pane and include the subgrid and container. Using Web Form Builder? Then instead use the HTML element to paste the fully completed and functional form. You will need to export the page source to complete the configuration for these elements. Use them as a placeholder for your custom fields in the design. If you have created a custom form, then use the form container, input, and button submit elements. The interaction elements are for the more skillful web developers. Have an embed code for a widget? How about a navigation menu or a code from YouTube? Or maybe you’d just like to add some custom HTML? Add the HTML element to your layout then switch over to the design pane to add your markup. Other common elements include a formatted address, or the rule to place a line across the container that can work as separator, breaking up content and sections. They are frequently used to display attention grabbing text with an associated small caption. The hero units are combined elements, a heading and paragraph wrapped in a div container. The common elements help to enhance the look of a page. Temp images are typically used as placeholders for future images and you can adjust the size ratio within the design pane. Use the pulldown to choose from various sizes or use the picture link element to make the image clickable. You’ll notice as you make the browser skinnier, the image will bring into focus his hat, thus cutting out the less important part (background) of the image. See this in action with the photos of the Gatekeeper. Use this control to zoom-in on a specific section, which is great for smaller displays. Unique to CoffeeCup is the ability to set a focal point on an image. Want to learn more about this cool element and how to use it? Check out this helpful tutorial. This will make the page (and images) load faster and give a better the user experience. It is good practice to use smaller images for smaller display widths. In our visual design apps the image can be changed at any breakpoint. The designer can instruct the browser to display a specific image, out of the set of images available in the picture container. The picture element serves as a wrapper for one or more image elements. ![]() Yet, it does mean that when testing the display width in these browsers, a refresh is needed to pull in the new image. ![]() This is only a minor inconvenience considering we added a javascript based solution to make it work exactly the same in these browsers. Unfortunately, at the moment of this writing picture is not supported by Internet Explorer and Safari. This means mobile browsers don’t have to download ginormous images intended for desktop viewers. The picture element is a newly introduced HTML specification that gives designers and developers a method to use different images based on, for example, display width or resolution. The next set of content elements are for images and graphics. You also have the choice of making this icon a link. Drop the font icon element into place, and choose from the collection on the Design pane. Our responsive apps are pre-loaded with 1600+ font icons to jazz up your site. You can use the pulldown to select a plain text element. Right-clicking and selecting edit or triple clicking also starts edit mode. You can start the editor by clicking on the pencil on the design pane. You can also add links within text elements using the Text Editor. Once you add this element to the page, click over to the Design pane to apply the URL of the link. The list element gives you 3 style options: unordered (bullet points), ordered (numbered bullet points), and description (indented).Ī text link allows you to link to another location (another section on the same page, another page, a different website, or a file referenced online). Take your pick of text headings ranging from H1-H6, paragraphs, and a few other text elements available in HTML. These components know how to scale and shift for the best viewing experience on various screen sizes. Express what’s on your mind using the most popular group of the bunch, text elements. ![]()
0 Comments
Leave a Reply. |