Responsive Editor

By using responsive design you can adapt the layout of your site to different screen sizes from a single editor.

Moonfruit avatar
81 articles in this collection
Written by Moonfruit
Getting Started

Responsive Editor: Adding and organising new pages

Add and organise your site pages in responsive pages quickly using the dropdown navigator.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing the page layout

Learn how the pages are structured and their key components.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Subpages or child-page

How to add a new subpage, set an existing one as a subpage or delete them.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Publishing your pages

Publish your website pages and learn how you can save draft page changes before making them live to the public.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a navigation bar

Navigate your site's pages using the page menu and navigation bar.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing the Navbar menu

Change your brand name, choose a menu style and control menu position behaviour.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding content to the header area

A header area can be used to insert a navbar or call to action on your site and will appear on every page of your responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a section, row or column

Responsive pages are made up of these components.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding content to the footer area

Add an additional page menu or content to your site using a footer area in order for it to appear on every page of your responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Repositioning a section

Arrange sections in real time or reposition a section to appear before the navigation bar.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Duplicate and delete functions

Learn how to duplicate and delete page items in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a text box

Add a text box in order to add headings, links and other text to your responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding an image

Add or preview an image in the file manager before adding it to your responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a link button

Users can navigate your page using link buttons; visit an external URL, emai, go to page section or add a file download.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Animating page items

Bring your site to life in responsive pages with page item animations like transitions, scroll and hover effects.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding an image background

An image background can be added to different page areas and even text boxes in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding SEO meta data

Edit your page title, description and keywords, also known as search engine meta data or meta tag.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Testing and previewing

Preview your site on desktop, tablet or mobile view in order to test your design responsiveness.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: How to undo and redo changes

Undo and redo changes in the press of a single button.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a file download

Add a file download to a button, icon or image using the file link. PDF, MP3, Word and many others are supported in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing layout for mobile and tablet

Edit how your site appears on mobile and tablet, including hiding certain elements.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Copy/paste sections and elements

Save yourself time by reusing existing content from your site
Moonfruit avatar
Written by Moonfruit
Updated over a week ago
Images

Responsive Editor: Replacing an existing image

Replace an existing image in responsive pages rather than deleting it to save time.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a link to an image

Images on responsive pages can also be used as a link in the same way a button can.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a blur, dim or black and white filter to an image

An image filter can be applied to images when you hover over them.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Enabling and disabling an image Lightbox

A Lightbox is a way to present your image in a pop-up window within your site.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a colour overlay to an image

Add a fade to your images using a colour overlay.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing image attributes

Edit the corners, brightness, contrast, saturation and opacity of an image in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a text caption to an image

Overlay an image with text by using an image caption.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Aligning an image within an image area

Adjust the width of an image while maintain its aspect ratio and align it within a section using responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Using the file manager

Add, sort and delete folders in the file manager as well as upload different file types to your responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding an image gallery

Add and reorder an image gallery on your responsive page displaying multiple images while saving space on your page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding and removing images from an existing image gallery

Quickly add and remove images from an existing gallery in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding an image filmstrip

Autoplay your gallery images using a filmstrip using responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding an image slideshow

Autoplay your gallery images using a slideshow using responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding image icons

Image icons can be used to indicate inbound or outbound links to specific sites from your responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Using a spacer or page divider

Spacers and dividers help break up the sections of a responsive page.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago
Text

Responsive Editor: Formatting a text box

Format a text box using the text box toolbar or by using the right sidebar to add a link, choose fonts, font size, letter spacing and more.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Changing text box, highlighted text, link and link hover colour

More information on formatting text link colours in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Aligning text in text boxes

Left, centre, right or justify the alignment of text in text boxes in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing line and letter spacing

Edit line and letter spacing using the slider in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Choosing a border style for a text box

Add border lines to your text box in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a background image to a text box

As well as adding an image background to your pages, you can add an image background to a text box in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing a text box font and font size

Edit an individual text box font and font size in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing font and font size using global styling

Apply changes across your site just once using global styling options in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Editing links, hovered links and their visited colour using global styling

Apply changes across your site just once using global styling options in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago
Backgrounds

Responsive Editor: Choosing a background colour

Add a solid background colour to your page or page areas in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a stock video background

Adding a stock video to your responsive page can bring your site to life with movement.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding scrolling effects to an image background

Add scroll effects to image backgrounds on your site in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding blur or opacity to a video background

Add blur or opacity to a video background using responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a YouTube video background

Adding a YouTube video to your responsive page can bring your site to life with movement.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a background to all pages using global styling

Apply changes across your site just once using global styling options in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding margins

Edit your page width with page margins in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Changing the section height

Expand the section or row height rather than have it automatically resized in responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Colour themes

Use a pre-existing colour theme to apply a colour palette across your whole site.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Adding a border to a section, row or column

Add a border to a section, row or column and edit the border style, thickness or colour.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago

Responsive Editor: Applying your colour theme to a section

Learn how to apply your site's colour theme to specific sections within your responsive pages.
Moonfruit avatar
Written by Moonfruit
Updated over a week ago