Articles tagged "design"

Getting Started with Layouts Auto groups have been renamed Layouts. What are Layouts? A layout is a structure that can be applied to one or more objects to style them with padding and... Making your website accessible Why should you make your website accessible? Making your website accessible is an important part of your website design. There are several important... Include a GIF with Giphy GIFs are short animated images that help add a dynamic element to your PageCloud page. GIFs can be used to help explain a short process visually (without... Animate objects on your page Add animations to Sections, Columns, text boxes, buttons, images, and more with Pagecloud animations! You can choose the type of animation, and customize... Advanced Button Hover Over Effects This is an advanced walkthrough. For simple button hover over effects visit the walkthrough HERE. Embed Different Tools with POWr.io POWr.io offers a number of different integrations, most of which are available as iFrame embed codes. These integrations cover a huge range of... Find an Exact Colour on any Webpage with ColorZilla ColorZilla is a browser extension that allows you to find out the exact color of any object within your web browser. This is especially handy if you want... Apply a custom color to Text and Objects Apply custom colors to text, objects and more using the Editing menu. Apply a custom color Gradient colors Gradients blend multiple colors together to make cool and interesting elements. You can apply gradients to different backgrounds and objects within... Add and style components Components are prebuilt complex objects that you can add to your page. They may contain additional functionality and/or structure content to maximize... Creating a Mobile Experience By Default, Your website will appear as a scaled version of your desktop site on mobile devices. Use the Mobile Layout Builder to build an optimized... Create Animations with Animate.CSS This is an advanced walkthrough that requires the use of JavaScript. Adding animations to objects on your site can help add emphasis, excitement or even... Add a Drop Shadow to an Object Adding a drop shadow effect to your objects can help them stand out from your page. Auto Layouts Auto groups have been renamed Layouts. What are Layouts? A layout is a structure that can be applied to one or more objects to style them with padding and... Project-wide colors Project-wide colors are colors that you can create, name, and reuse throughout your site. You can apply these colors to objects, backgrounds, image tints... Change or Disable the Blue Glow Around your Objects Focus Glow is a feature imposed by most browsers to show that a link has been clicked. This feature is helpful for accessibility to show that they have... Full width - Stretch across a Column An Image or object within a Section Stretch an image or object across the full browser width Group objects together Combining multiple objects into unified groups enables you to move them collectively as a single unit within PageCloud. Group content - Manual Groups Group content in Manual Groups to allow the freeform layout of different objects. Content in groups behave as a single object. How to Lock Objects from Moving Sometimes, you'll have sections of a page that you don't want to accidentally reposition while adjusting another part of your page. Avoid that by locking... Hide objects from Desktop or Mobile views Update: Show and Hide objects now works for both Auto and Manual columns. Sometimes you want to hide some objects in one mode and show them in another.... Rotate an Object Rotating an object will give you more flexibility over the look of your photos and text boxes. Add space below an object (Auto column and Auto groups) The Space Below tool allows you to add vertical space between objects in an Auto Column Layout and Auto groups. How to multi-select objects Selecting multiple objects are one is easy in Pagecloud. This is a great way to apply formatting, styles, layouts, links and other attributes and... Move all objects up & down the page with squeegee (Manual column only) The Squeegee tool allows you to move all objects below a horizontal plane up or down the page to create or remove space. Show All Objects with X-Ray Mode It can be helpful to see the outline of your objects on the page as some objects may be layered below others. Managing and Adding Fonts Managing Fonts in Pagecloud Fonts are a great way to bring your brand, design and personality into your website. Design Sidekick - Chrome Extension Design Sidekick is a free extension powered by Pagecloud to help you find, save, and copy design styles directly into your Pagecloud website. Design... Apply an Aspect ratio Aspect ratios apply a defined width and height ratio to the selected object. A good example is your TV: a modern TV screen is a 16:9 ratio. A square is a... Tint an Image's Color when Hovered Over When images are used as links, a popular effect is to have the image's color tint when hovered over to emphasis that it is clickable. Add Color Tint to an Image Adding a color tint to an image can help make a number of different images feel similar across your website. It can also be useful when trying to have... How to Crop an Image Image cropping allows you to highlight a specific section of an image. Cropping an Image Background images A background image is the image attached to the back of a container (such as a Page, Section, or Column). Background images add visual interest to your... Add Image Filter Image filters help adjust the look of your images to make them more stylized. Add Image Filter Add an Image Gallery Image galleries help organize a collection of images into a single object on the page. Disable image optimization Pagecloud optimizes images on upload to give you an optimal image size and quality based on the display size of the image on a page. How to Add or Replace your Images Adding New Images to your Page There are a few ways to add images to your page: Drag and drop one or more photos from your computer right onto your page.... How to Make a Lightbox Image Gallery or Video Lightbox "Lightbox" is a term used when the content that displays images and videos on a page fills the screen and dims the rest of the webpage. Animating Images with a Zoom Effect The Image Zoom Effect (also called the Ken Burns effect) adds subtle movements to your still images. This brings them to life and gives a more dynamic... Add Parallax effect to an image Keep your background fixed as the rest of your page scrolls. This is also know as the Parallax effect. Showcasing your Images in a Slider Gallery Create a slider image gallery on your PageCloud site to display a collection of images How to Import a Layer from Photoshop Bring elements or designs from Photoshop onto your PageCloud site. Copy Layers from Photoshop Find an Exact Colour on any Webpage with ColorZilla ColorZilla is a browser extension that allows you to find out the exact color of any object within your web browser. This is especially handy if you want... Set a Page background Your page contains all of your Sections and columns within it. You can set a page background color, image or video to have the entire page filled with a... Columns - Vertical containers within Sections Columns Every Section has at least one Column and can have as many as four. Columns contain your content (objects, text, images, etc.) and has different... How to Create a Fixed Header Section A Fixed header will keep your header section in place when visitors scroll up or down your pages. Site wide Header and Footer Sections Header and Footer Sections allow have the same standard functionality as Sections with Columns. Header and Footer Sections offer the additional ability to... Sections - Building the Areas of your Website Sections are the building blocks of your page. Each Section is a horizontal container which contains Columns where you can place the content on your page. Import Page Layout PageCloud launched in late 2015 with a unique feature called "Import Page Layout". This tool allowed a user to import the layout of any page on the web...