![]() You can even reorder elements on the page just by moving them up and down in the list.īlocs 3 moves its Inspector pane, where you can customize aspects of a selected element, to the right of the screen, where it now shares space with the searchable bric library.īlocs 3 has similarly refreshed the process of adding whole new blocs. It's much easier to select individual elements on the page this way – and to see when you've accidentally crufted up your code, as I realized I'd done with some poorly placed tags. The left side of Blocs 3's window now lists every element on your page hierarchically, showing you a clear structure of your page's underlying code. What's new in Blocs 3 … for everyoneīlocs 3 gives the entire program a welcome facelift, refining an already sleek interface to be even more user-friendly, and making style tweaks and adjustments even more intuitive. You can also easily add analytics code or additional JavaScript or CSS files to individual pages or your entire site. ![]() It now builds in support for various free and paid content management systems, including Pulse, October, Cushy, and Surreal, letting users drop in fields and elements that can work seamlessly with those systems' databases. ![]() And if you've mastered the basics and want to see what else you can do, keep reading for a look at Blocs 3's more advanced features.In the four years and two successive versions since its creation, Blocs has quietly accumulated pro-friendly features without significantly steepening its learning curve. That said, if you just want to build a great-looking, mobile-friendly site in a single app, without hours of study and even more hours of trial and error, you can't beat Blocs. HTML and CSS are among the easiest programming languages to learn, even if you're the type of person whose brain starts hurting at the mere phrase "programming language." And as much as we like Blocs, a text editor is way, way cheaper – like, free cheaper in many cases – than the $100 you'll spend on it. There's a beauty, even a poetry, to coding by hand. Choose where on your hard drive to save the files, and in a few seconds, Blocs will have packed up your site for speedy delivery to the Web. But Blocs will bundle all your files and images into one tidy, ready-to-upload package.Įxport your site by selecting File > Export > Quick Export or hitting cmd-E. We'll use these controls to give the selected photo a thick, square-edged white border, and a nice-looking drop shadow:īlocs 3 doesn't include built-in tools to send your site to your web server of choice you'll need a separate FTP client to do that. For example, you can make a class's text blue, bold, and bigger on smaller screens for easier legibility, but black, smaller, and italicized on a desktop monitor. ![]() And when you open the class editor at different breakpoints, you can adjust settings for that class for the specified breakpoint. You can play around with any of these controls and see the results on the canvas in real time. And the shadowboxes control the object's drop shadow and opacity. The letter T controls typography, setting font, size, and other format attributes. The paintbrush controls color and appearance, including an object's background image and color, and the width, style, and color of any border around it. The compass controls your object's dimensions and placement on the page, including its width, height, margin (empty space beyond the edges of the object), and padding (empty space within the edges of the object). Select the main header in your hero Bloc, and use the Brics bar button above it to add an image, then fill the blank space with a picture from your Asset Manager: That hero Bloc looks pretty good, but what if we added another image on top of that background for a little contrast? Madness? Perhaps, but Blocs can still make it happen. Global styles work great for your site's broad strokes, but you can do so much more to make individual aspects of each page stand out. Once you've chosen an object, the Typeface, Size, and Color options are fairly self-explanatory, while the Direction buttons control whether your text flows left-to-right or right-to-left, in case you're building a site in Arabic, Japanese, or other written languages that employ the latter approach. This comes in particularly handy for the Logo Text and especially the Navigation Links, which aren't easy to format otherwise. Use the Object pulldown to select which site element you want to style. Anything you set at a larger breakpoint will flow down to all the smaller ones unless you specify differently. The Breakpoint buttons here control how the different elements will be styled at large (desktop computer), medium (tablet), small (big phone), and extra-small (tiny phone) screen sizes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |