Help for Update - How to create your 1der1 page - including advanced options
Learn how to implement the features for your 1der1 page. There is never a need to edit code. Just Copy and Paste and use our text editor. We recommend Drag and Drop. You can drag all kind of data from your computer and from the internet into the input fields on the update page. You will be amazed, how easy and powerful drag and drop can be. It's a lot of fun. You can do this! If you feel overwhelmed, like while assembling your IKEA purchase, we can create your 1der1 page for you.
Click the section headers on this page to read the help text. If you use the navigation tool on the update page, the integrated help link will open this page with the related help section. The section labels on the left of this page match the navigation links on the update page.
Clicking a button uses browser tabs; pressing a function key opens a popup window.
F2 key opens this help page context related.
F3 key opens a search page for matching examples. Please move the mouse over an input field of the form. Then press F3. You can then Copy from those examples.
F4 key shows you a preview of your page before you publish with the Save button. Using the F4 key opens a single popup while clicking one of the preview buttons opens another tab for you to compare the results.
F8 key opens a help video - context specific to your mouse position.
Please note: Automatic adaption to slower devices and connections can result in overriding your settings for a better performance of your 1der1 page.
Top
1der1 is about making it easy for you. You don't have to provide content. Instead, we can use content from your website and your social media accounts. On your 1der1 update page, you provide your website address and the addresses of your account profiles. In the top section of the update page, you will find some tools for this:
- The Fill button uses public information on given websites and social media accounts to fill empty fields on your update page. Of course, you can add all these data manually as well.
- The Copy button lets you copy public data from another 1der1 page. Copying affects only data that you can edit on the update page. The copy feature is very convenient for local shops of the same chain, where you can mix chain content with local shop content. You can copy data from the demo pages to learn about possible content.
- You find several links that are searching for your business. This way you can find links and content to use on the update page. On your 1der1 page, you can find even more search links.
- There are many links to check your website. You might use this information to optimize your web presence.
- Facebook is one of the most important social websites. We help you to get a professional Facebook account. 1der1 uses Facebook data like business hours, parking information, etc. and we will tell you, which data we are using.
- Google is most important for your business. 1der1 uses and analyzes your data in Google local business. If you don't have an entry, we can register your business at Google automatically. 1der1 shows you how to optimize your data at Google, improving your ranking in search results and your presentation on Google maps.
Data
Just enter missing business data. You can find help information next to each field.
F8 key opens a help video - context specific to your mouse position.
Set
Changing the settings is very easy. You can disable automatic content. If you don't want data from a social media account, just disable it in the following Social list or move it to the Pages.
F8 key opens a help video - context specific to your mouse position.
Colors
You can change the background colors and the QR code colors as well. We show you the contrast and make sure that the QR code can be scanned. Please avoid dark background colors to allow easy reading. You can choose dark or bright frame colors for images.
Header
The header is the top part of manually added content. Like the cover, it has several optional components. Watch this video. While header and cover have many options in common, there are special features for the header:
- Maximum width is 1180 instead of 580 pixels.
- You can choose Full Header Width, only limited by window width.
- There is an option to move Street View into the Header.
- The Header Text/Logo replaces the page title line. The six Header Styles of the editor will resize responsively. The font size adjusts automatically.
- The Logo Style settings affect screen and print logos. Animations start as soon as your page loads. If you want later starts, you can add a Script.
- There is an alternative Header Text for Print.
If you stack a 'Header Text/Logo' on a 'Header Pictures' video, you would prefer a white 'Text' over of a dark video. Since the video will not be part of the print, the white logo image would be invisible on a white page background. Just choose a 'Header Text for Print' like in this example.
Cover
The cover is the central part of manually added content. It is on top of the social media covers. Like the header it has several optional components.
Content
You can use the content field to drop or paste any code from external sources, or you can start the text editor by clicking the symbol in front of it.
Help about entering external data
Use the LCR position control to choose the 1der1 page column for the content. It can be the wider central cover or one of the left or right sidebars. The order of the content always relates to its column.
Social
1der1 can connect to internet services to provide data for your 1der1 page. You just have to enter your related profile address. 1der1 develops special connection software for every service and shows the icons of these services. The entries for the Icon profile addresses come prefilled with suggestions for your future registrations. If you click into an address field, you get hints how to find your profile at this service.
Facebook requires a public fan page for unrestricted features. As long as your Facebook account is private, you can enter it into the Web page list, giving it the name Facebook (private).
In the Set section, you can disable features of services. If you don't like any of a service's features, just un-check the Use field or enter the service into the Web page list instead.
Pages
Enter page addresses you like to see linked on your 1der1 page.
Help about entering external data
The page names will show up on your 1der1 page, and we try to replace the favicons with native 32x32-pixel pictures for better quality.
Styles
Styles change the appearance of the page.
Please paste Styles as a file with .css extension or as code with the <style> tag.
Help about entering external data
Styles might interfere if they are sharing the same internal names. Reordering the style sequence might help avoid resulting problems. Please paste style-only code into the style fields and not into the general content fields, because this would slow down the performance of your 1der1 page.
If a widget contains style and other code as well, you can paste both separately. If you do not have the knowledge to do this, just paste the whole widget into a content field.
Scripts
A script for your 1der1 page is executable Javascript code from external sources.
Please paste Javascript as a file with .js extension or as code with the <script> tag.
Help about entering external data
Scripts might interfere if they are sharing the same internal names. Reordering the script sequence might help avoid resulting problems. Please paste script-only code into the script code fields and not into the general content fields, because this would slow down the performance of your 1der1 page.
If a widget contains script and other code as well, you can paste both separately. If you do not have the knowledge to do this, just paste the whole widget into a content field.
You can add a script for cascading animations. This script can contain one or more function calls:
LogoAnimation(<name>, <delay>, <duration>, <count>, <direction>);
Example:
LogoAnimation('spin', 10000);
LogoAnimation('rotateYfull', 20000);
All parameters are optional and relate to the settings in the update page.
Following animation names come with 1der1. More are possible by adding Style Sheets.
| blur | Blur |
| borderbrightness | Border Brightness |
| bordercolor | Border Color |
| borderpulse | Border Pulse |
| bounce | Bounce |
| bounceIn | Bounce In |
| bounceInDown | Bounce In Down |
| bounceInLeft | Bounce In Left |
| bounceInRight | Bounce In Right |
| bounceInUp | Bounce In Up |
| bounceOut | Bounce Out |
| bounceOutDown | Bounce Out Down |
| bounceOutLeft | Bounce Out Left |
| bounceOutRight | Bounce Out Right |
| bounceOutUp | Bounce Out Up |
| brightness | Brightness |
| burst | Burst |
| contrast | Contrast |
| fadeIn | Fade In |
| fadeInDown | Fade In Down |
| fadeInDownShort | Fade In Down Short |
| fadeInLeft | Fade In Left |
| fadeInLeftShort | Fade In Left Short |
| fadeInRight | Fade In Right |
| fadeInRightShort | Fade In Right Short |
| fadeInUp | Fade In Up |
| fadeInUpShort | Fade In Up Short |
| fadeOut | Fade Out |
| fadeOutDown | Fade Out Down |
| fadeOutLeft | Fade Out Left |
| fadeOutRight | Fade Out Right |
| fadeOutUp | Fade Out Up |
| flash | Flash |
| flip | Flip |
| flipInX | Flip In X |
| flipInY | Flip In Y |
| flipOutX | Flip Out X |
| flipOutY | Flip Out Y |
| float | Float |
| fontsize | Font Size |
| foolishIn | Foolish In |
| grayscale | Grayscale |
| growIn | Grow In |
| hinge | Hinge |
| horizontal | Horizontal |
| hue-rotate | Hue-Rotate |
| hue-rotateAnti | Hue-Rotate Anti |
| hue-rotateFull | Hue-Rotate Full |
| invert | Invert |
| jello | Jello |
| left | Left |
| letterspacing | Letter Spacing |
| lightSpeedInLeft | LightSpeed In Left |
| lightSpeedInRight | LightSpeed In Right |
| lightSpeedOutLeft | LightSpeed Out Left |
| lightSpeedOutRight | LightSpeed Out Right |
| lineheight | Line Height |
| magic | Magic |
| marginleft | Margin Left |
| margintop | Margin Top |
| opacity | Opacity |
| outlinecolor | Outline Color |
| outlineoffset | Outline Offset |
| outlinewidth | Outline Width |
| padding | Padding |
| passing-reverse | Passing Reverse |
| passing | Passing |
| puffIn | Puff In |
| pulse | Pulse |
| ring | Ring |
| rollIn | Roll In |
| rollOutAway | Roll Out Away |
| rotateIn | Rotate In |
| rotateInDownLeft | Rotate In Down Left |
| rotateInDownRight | Rotate In Down Right |
| rotateInUpLeft | Rotate In Up Left |
| rotateInUpRight | Rotate In Up Right |
| rotateOut | Rotate Out |
| rotateOutDownLeft | Rotate Out Down Left |
| rotateOutUpLeft | Rotate Out Up Left |
| rotateOutUpRight | Rotate Out Up Right |
| rotateX | Rotate X |
| rotateXfull | Rotate X Full |
| rotateYfull | Rotate Y Full |
| rubberBand | Rubber Band |
| saturate | Saturate |
| sepia | Sepia |
| shake | Shake |
| shakeHorizontal | Shake Horizontal |
| shakeUp | Shake Up |
| spaceInDown | Space In Down |
| spaceInLeft | Space In Left |
| spaceInRight | Space In Right |
| spaceInUp | Space In Up |
| spin | Spin |
| swap | Swap |
| swing | Swing |
| tada | Tada |
| textshadow | Text Shadow |
| top | Top |
| twisterInDown | Twister In Down |
| twisterInUp | Twister In Up |
| vanishIn | Vanish In |
| vertical | Vertical |
| wiggle | Wiggle |
| wobble | Wobble |
| wordspacing | Word Spacing |
| zoomIn | Zoom In |
| zoomInDown | Zoom In Down |
| zoomInLeft | Zoom In Left |
| zoomInRight | Zoom In Right |
| zoomInUp | Zoom In Up |
Bottom
Clicking the Save button is the only action that updates your 1der1 page.
Before you update, you can preview the changes in the update form data by using one of the Preview buttons. One button shows you the premium version of your page, the other one the free version. For faster development cycles you can use the view symbol on the navigation control as well. Clicking this symbol will always show the full view.
Backup and restore are paramount for your business data. We store all your data with high-end security. 1der1 backup & restore automatically creates additional backup versions, that you can name. This way you can easily restore earlier versions after a particular campaign is over, or you can restore last year's seasonal campaign. 1der1 keeps your data in synchronization - modules can't mess up. If your PC crashes before you can submit your data, we have Autosave & Auto Recovery.
Some professions require a physical backup. Click the Extern button. You can export and import all your data in the standard, human-readable JSON data format that you can edit with Open Source tools. You can have your whole website in a spreadsheet. This way your IT could edit thousands of franchise shop pages in an instant. In fact, all 1der1 Examples are created by a 1der1 software, that creates the JSON data. The update page is just another way to create the data, and both methods can be used by turns.
More Pages
1der1 allows you to present your business as easy as possible, and it is a hub for your most important content as well. You can use 1der1 as your website or as a companion of your existing website.
- Use the Home Page entry for your existing website. Your 1der1 page will automatically use the favicon of your website.
- You can add a special Contact Page. Example: Contact Page
- The Cover can embed a page as well.
- Just enter more of your website pages into the Web page list. Example: Website Pages
If you need more pages:
- If you are selling items or services, just get an online shop as your website. Shopify integrates with your real world business and enables you to create an excellent website easily.
- Tumblr can be your blog or website, and your 1der1 page can have an Interactive Tumblr timeline.
- 1der1 recommends: Publish as much as possible on social media, then use 1der1 to bundle it all together.
- Apple™ Developer Guidelines:
“Keep the total number of pages as small as possible to simplify navigation.”
External Data
As soon as you have dropped or pasted into the data field, you will find a name for the content in the name field, which you can change. If there is a link inside the data, you will see a favicon at the beginning of the row as well. Name and favicon will help you to remember which kind of content you added.
As soon as you have added, there will be another row for you to fill. This way you can add without limits. Use the symbol in front of the line to reorder lines by dragging it up or down while you click on it.
Header and Cover Components
Headers have all type of cover components as well:
- Pictures
Just drop or paste the address of the content into the 'Pictures' input of your update page. If you paste or drop several pictures line by line, your page will show a slide show. Please choose pictures with the same height to width ratio. Otherwise, there will be a gap at the bottom of the wider pictures. Please use the JPG format with web quality and follow the width recommendations at the related input field to reduce the loading time of your page.
- Poster
You can stack a picture over embedded iframe content. This way you can hide the loading of a video and choose an individual thumbnail. If the video is supposed to play automatically, the poster will vanish as soon as the video starts. Otherwise we will add a play button over the poster. Clicking the button or the poster will hide both and start the video. Use the Video Poster Tool to manage your video posters. Please keep in mind, that posters add to your 1der1 page load.
Advanced: Instead of using embedded iframe and poster you can use a video tag with poster. Just check the Hooters Video example.
- Title
Text that shows up in a tooltip on mouse over
- Text
There is a text editor for you to write text. Just paste and edit text, insert pictures, and even Video. For a picture logo just use the link or the image data URI.
- Link
The address of a page to visit on mouse click
- Print Pictures
Do you like the picture component to be part of the print? The default depends on the content and on the position.
- Layout
If you want to show the text first or over the pictures, just choose the Layout. If you stack 'Text' over the "Pictures" area, you cannot click this part of the "Pictures" content.
- Button
If there is a poster and no autoplay, we will automatically add a play button, because the poster is in front of the video play button. In case your poster contains a click to play hint already, you can choose to have no play button.
Text Editor
You can use the editor for every content field. You can start by pasting code directly into the content field, then clicking the symbol in front of it.
The editor offers video embedding, too. Click the Video button, and then insert a video address from YouTube, Vimeo, Vine, Instagram, DailyMotion or youku. You get the video address by right clicking on the video of your choice, then 'Copy video URL'.
Use the Picture button, to insert a picture link obtained by mouse clicking and 'Copy image URL'. You can even select an image from your computer's folder, but we don't recommend this for performance reasons.
After clicking on an inserted picture, you can change the image properties.
The editor uses the spell checker of your browser. We recommend Grammarly, which integrates into Google Chrome and Microsoft Office, extending and improving the existing checks for grammar and spelling. You can use external editors like Microsoft Word, too. The 1der1 editor preserves font information of dropped or pasted text.
Click Action
Buttons, links, and images can have associated click actions.
| Type | Param | Action |
|---|---|---|
| Page content anchor | Navigate to | |
| Attach | Show/hide at item | |
| Inline | Lightbox | |
| Phone | Phone call | |
| Open mail | ||
| Message text | Open Mail with subject and body | |
| Text | HTML | Lightbox |
| Function | Parameter | Function call |
| URL | Open tab | |
| Target | Open in target | |
| Popup | Open popup | |
| Image | Lightbox | |
| Video | Lightbox | |
| Iframe | Lightbox | |
| Ajax | Lightbox |
Please note: Some websites may limit access.
Popup and all Lightbox parameters can include width and height:
Popup, width:500, height:300 opens the popup window with 500 pixel width and 300 pixel height.
auto:0 causes ANY click on the page to start the click action of the element:
HTML,auto:2 opens the HTML lightbox with the first click on the page, if the click happens at least 2 seconds after the page load.
Lightbox parameters may include (case sensitive):
infobar: true/false
toolbar: true/false/auto
smallBtn: true/false/auto
Attach parameters may include (for animation):
duration: number of milliseconds
effect: blind/bounce/clip/drop/explode/fade/fold/
highlight/puff/pulsate/scale/shake/size/slide/transfer
easing: linear/swing/_default/
easeInQuad/easeOutQuad/easeInOutQuad/
easeInCubic/easeOutCubic/easeInOutCubic/
easeInQuart/easeOutQuart/easeInOutQuart/
easeInQuint/easeOutQuint/easeInOutQuint/
easeInExpo/easeOutExpo/easeInOutExpo/
easeInSine/easeOutSine/easeInOutSine/
easeInCirc/easeOutCirc/easeInOutCirc/
easeInElastic/easeOutElastic/easeInOutElastic/
easeInBack/easeOutBack/easeInOutBack/
easeInBounce/easeOutBounce/easeInOutBounce
direction: up/down/left/right
complete: name of function that is called once the animation is complete
for position:
my: position of the attached content, for example:
left top
at: position of the clicked item, for example:
right+10 top-25%
collision: dealing with overflow, for example:
fit
Classes
Classes define styles for elements, for example as part of the image properties. Following classes come with 1der1. For animations, use animation classes by preceing the "anim_" extension, for example, "anim_bounceOut". More classes are possible by adding Style Sheets.
| round | Rounded corners, increasing intensity |
| round7 | |
| round15 | |
| round25 | |
| round40 | |
| ellipse | Ellipse, circle |
| shadow | Shadows, increasing intensity |
| shadow7 | |
| shadow15 | |
| shadow25 | |
| shadow40 | |
| borderWhite | Border, white |
| borderDark | Border, dark |
| border_solid | Border styles |
| border_dashed | |
| border_dotted | |
| border_double | |
| border_groove | |
| border_inset | |
| border_outset | |
| border_ridge | |
| background | Backgrounds |
| grad_blue_green | |
| grad_blue_red | |
| grad_darkpink_purple | |
| grad_gold | |
| grad_orange | |
| grad_orange_red | |
| grad_pink_purple | |
| grad_rainbow | |
| grad_red_orange | |
| grad_silver | |
| grad_yellow_green | |
| grad_yellow_orange | |
| grad_yellowed | |
| shad_3d | Font shadows |
| shad_cloudy | |
| shad_dreams | |
| shad_embossed | |
| shad_fire | |
| shad_fire_flare | |
| shad_future | |
| shad_letterpress | |
| shad_machine | |
| shad_metal | |
| shad_neon1 | |
| shad_neon2 | |
| shad_neon3 | |
| shad_neon4 | |
| shad_neon5 | |
| shad_neon6 | |
| shad_neon | |
| shad_retro | |
| shad_street | |
| shad_whiteframe | |
| shad_blackframe | |
| shad_redframe | |
| shad_goldframe | |
| shad_whity | |
| hover_bright | Hover and Active Effects |
| (see in Link tool) | |
| mcover | float: left; margin-right |
| w100p | width: 100% |
| left | float: left |
| right | float: right; position: relative |
| inline | display: inline |
| center | text-align: center |
| align_left | text-align: left |
| align_right | text-align: right |
Page Name Rules
- You can choose and reserve an additional, unique name for your page - first-come, first-served.
- Minimum name length is three characters.
- We recommend restricing to a maximum of 18 characters - for SEO and practical reasons.
- Page names can't consist only of a generic word (ex: Restaurant) or location (ex: London).
- All kind of Impersonating, Pretending, Misleading and Violation of Others' Rights is forbidden.
- '1der1' can't be part of the name.
- As always you may not use abusive or offensive content.
- 1der1 reserves the right to remove violating content and accounts.
- If you change the name, the old name will be available to others.
- Important: Changing the name destroys external references to the old name.
If you like to have a unique website address/domain, just get one at Namecheap.
Copy Rules
1der1 makes it very easy for you to Drag and Drop or Copy and Paste data. You can even copy from existing 1der1 pages. This feature is very useful if you create 1der1 pages for chain stores. Please respect Copyrights and linking rights and use your own or free content only.
Adding Pictures
You can embed pictures by copy and paste of one or more picture links into the 'Pictures' input of your update page.
Please note: All picture links have to be secure: They have to start with "https".
If you use drag and drop instead of giving the picture link, we can quite often convert the images and store them for you into the cloud automatically. You can drag pictures directly from your website. However, we recommend dragging image files from your PC.
If the dragging from websites can't make your images secure, you should download the pictures first. 1der1 collects the pictures for you, allowing you to download at the click of a button. You can then optimize your pictures before usage.
If you want to create more specific solutions, use the text editor at the Cover or any Content field.
Sources for Pictures
If you have a website already, just use the same pictures for 1der1, if the links start with "https". Otherwise, drag and drop images from your PC.
Your resulting 1der1 page will load faster if you use Google Chrome or Opera for dragging photos after scaling down and compressing with Compressor.io online service or Riot image optimizer software. You can create logos with SVG-edit. Read the SVG-edit introduction. Convert images into SVG using INKSCAPE.
Stock Photos
Adding Video
You can embed videos by dropping or pasting video code into the 'Pictures' input of your update page or by pasting it into a Content field.
If you want to create more specific solutions, use the text editor.
Sources for Video Code
YouTube
When viewing a video on YouTube click on the Share button located left-hand under the video player. Then click on the Embed tab. You can now copy the code.
Vimeo
Click on the Share button located in the top right-hand corner of the video.
A pop-up box will appear that will allow you to copy the Embed code.
Vevo
Most of the providers of embedded code will offer you some options.
Sources for Code
"Code" is a piece of software which you can embed into your 1der1 page. This functionality is called Web Widget.
- In general, you can paste the code into a content field. You can change the position on your 1der1 page by changing the position of the field.
- You can add Video as code.
- A Script contains executable code. There might be no visible result on your 1der1 page, or the position is determined by the code.
General
Selling
Calendar
Booking & Appointments
Chat
Charts
Forms
Surveys
Slideshows
Text Messages/SMS
Voice
Music and Radio
Ads
Emails
Cancel before Save
The update page has several ways for changing the input data of the form. In these cases, you get a note and the option to cancel the changes.
When you changed data manually without saving, there will be a warning before leaving the update page.
Auto Recovery
While you are entering data on the update page, every change is saved to your hard drive to prevent data loss. There will be an auto recovery of these autosaved data when you re-start the update page after a PC crash. You can cancel the auto recovery.