You can always adjust the layout (division of the different elements per content area), the colours or whether a background image or not, etc. of the individual areas of your website.
After you have «logged in to the Designer» you will find yourself in the Designer Editor on the start page and thus in the «Site editor» area. Proceed as follows:
On each page, here on the start page of the construction kit, the pages are composed of different «Elements (areas)». These can be adapted at any time.
There are different area or content types. Depending on the types, the editing options for title, text and image are different. We will discuss the following here:
• Title & Menu Bar
• Header area
• Content area images and text
• Content area with button and text
• Footer
To adjust the «Title & Menu Area», move the mouse over the round «Slider» icon to the left of the area, the «Appearance» button will open. Now click on the icon.
The edit mode is automatically displayed. The following customization options are available here.
• Color selection or background image
• Layout
• Animation
• Header Adjustments
According to your chosen design and its color scheme, you can now define the area according to the 3 (or more) color components. Or you can select the image which will then be used as background image over this area.
To define which content is displayed in the header area, you can choose from various ready-made header areas. To do this, click on «Change layout».
Select your desired header layout by clicking and then click on «Update». The new layout will be applied immediately.
You can add an animation to the text areas and let them fade in accordingly. To do this, click on «Animation».
You can define whether you want to apply the selected layout to the home page only or to all pages. To do this, click on the bottom section, here: «Page header».
A popup opens with the options for your header area:
• All pages on my site
• Just this page
Then click on «Done» to save the desired changes.
In the header area you can adjust the header image on the one hand and the header text on the other hand. Click on the appropriate area to continue.
If you want to adjust a full screen area, move the mouse over the round «Slider» icon on the left of the area, the button «Appearance» will open. Now click on the icon.
In this example, our startup image is a «full screen area». The following settings are now available for adjusting the image:
• Replace image
• Overlay
• Focus point
• Scroll effects
• Chance layout
• Shape dividers
• Animation
You can exchange this picture at any time. To do this, click on «Replace image».
You can now either upload a new picture «Upload» or select a «Recent» added picture or one from your «Facebook» account or get a «Stock image».
Please note that depending on your subscription, a certain number of photo credits are available to you for the designer.
When you have selected your picture, click on it. It is saved immediately and the view is updated.
The «Full Screen» area is displayed with a color overlay by default. If you want to adjust the «Color» or the «Opacity» of the color overlay, click on «Overlay».
Depending on your chosen design and its color scheme, you can now select one of the «dark or light accent color» or the «Overlay Color» from black, gray or white in the «Preferences» section.
In the «Individual» ection you can insert your desired colour or the colour of your logo by hex or RGB data.
And now select the intensity with which the selected color overlays the image in the «Opacity» section. As you move the slider, the preview image adjusts immediately.
If you are satisfied with your settings, click on «Save».
In the «Full Screen» area you can set a focus point for this image. To do this, click on «Focus point».
You can now set the focus point in the popup that opens by clicking the mouse in the image preview area. The preview image adjusts immediately.
If you are satisfied with your settings, click on «Save».
If you want the header area to have a scroll effect, click the «Scroll effects» button.
In the «Full Screen» area you can determine where or at which position in the image the «Text Area» is placed by selecting the «Layout». To do this, click on «Change layout».
Now click on the «arrow icon» to preview the different layouts.
If you are satisfied with your settings, click on «Done».
If you would like to add a color accent to the image, select «Shape dividers» here.
Now select the desired shape of the dividing line. In the preview, the selection is immediately adjusted. You can now choose the colour of the dividing line according to your chosen design and its colour scheme.
If you are satisfied with your settings, click on «Done».
You can add an animation to the header image and have it displayed accordingly. To do this, click on «Animation».
To change the «Text area» in the header image, click on the corresponding marked text.
In the now opening edit mode you can adjust the text in the usual way (bold, italic, link, color, bigger, smaller) and by clicking on the «arrow icon» on the right, the alignment and list area opens.
If you are satisfied with your adjustments, click with the mouse outside the text and the text area is automatically updated and saved.
NOTE, if you click on the trash can icon next to the text, not only the text area is deleted, but the whole content module (here: header full screen including text area).
To change the background color of the «Image Text» area, click on one of the colors available according to your chosen design and its color scheme. The preview will be adjusted immediately.
You use the layout to define where the image or text is placed (image left, right or top). To do this, click on «Change layout».
In the popup that now opens, you can select the different layouts by clicking on the «arrow» icons. The preview is immediately displayed on the website. Once you have chosen your desired layout, click on «Done» to save your selection.
If you would like to add a color accent to the image, select «Shape dividers» here.
Now select the desired shape of the dividing line. In the preview, the selection is immediately adjusted. You can now choose the colour of the dividing line according to your chosen design and its colour scheme.
If you are satisfied with your settings, click on «Done».
Um die Hintergrundfarbe des «Button-Text»-Bereiches zu verändern, klicken Sie auf eine der Farben, die Ihnen gemäss Ihrem gewählten Design und dessen Farbschema zur Verfügung stehen. Die Vorschau wird umgehend angepasst.
Möchten Sie im Bild noch einen farblichen Akzent setzen, dann wählen Sie hier «Trennlinien».
Wählen Sie nun die gewünschte Form der Trennlinie aus. In der Vorschau wird die Auswahl umgehend angepasst. Sie können nun gemäss Ihrem gewählten Design und dessen Farbschema auswählen, in welcher Farbe die Trennlinie dargestellt wird.
Sind Sie mit Ihren Einstellungen zufrieden, klicken Sie anschliessend auf «Fertig».
Der Fusszeilenbereich entspricht in der Anpassung der Titel- & Menüleiste.
Natürlich können Sie auch die Text-Bereiche anpassen.
Um ein Bild auszuwechseln, egal in welchem Bereich, fahren Sie mit der Maus über das Bild, bis es einen Rahmen erhält. Dann klicken Sie darauf.
Im sich nun öffnenden Popup können Sie folgende Anpassungen vornehmen:
1. Bilddetails
Sie können ein neues «Bild hinzufügen», «aus vorhandenen Bildern wählen» oder «Bild bearbeiten».
2. Bilderlink
Hier können Sie dem gewählen «Bild» einen Link zu ordnen. Sie können wählen aus «Eine Seite auf meiner Webseite», «Eine externe Seite» oder «E-Mailadresse». Je nach dem was Sie hier auswählen, geht ein entsprechender Bereich auf, um die entsprechende Info (Seite auswählen / Externer Link und Zielfenster / E-Mail) einzutragen.
3. Optionen anzeigen
Wählen Sie den «Massstab», in welchem Ihr Bild angezeigt werden soll (wählen Sie aus diversen Voreinstellungen) und bestimmen Sie die «Bildausrichtung» (links, mittig, rechts).
4. SEO
Hinterlegen Sie die «SEO» (Suchmaschinenoptimierung) relevanten Daten wie «Alt-Attribut», «Titel» und «Beschreibung».
Sind Sie mit Ihren Anpassungen zufrieden klicken Sie auf «Speichern», um diese Änderungen zu sichern.
Um einen Button Ihren Anforderungen entsprechend anzupassen, egal in welchem Bereich, fahren Sie mit der Maus über den Button, bis er einen Rahmen erhält. Dann klicken Sie darauf.
Im sich nun öffnenden Popup können Sie folgende Anpassungen vornehmen:
1. Klickaktionen
Hier können Sie dem gewählen «Button» einen Link zu ordnen. Sie können wählen aus «Eine Seite auf meiner Webseite», «Eine externe Seite» oder «E-Mailadresse». Je nach dem was Sie hier auswählen, geht ein entsprechender Bereich auf, um die entsprechende Info (Seite auswählen / Externer Link und Zielfenster / E-Mail) einzutragen.
2. Optionen anzeigen
Hier können Sie dem gewählen «Button» unter «Text» den anzuzeigenden Text hinterlegen. Unter «Grösse» wählen Sie die Textgrösse des angezeigten Button-Textes. Unter «Format» können Sie definieren, wenn Sie den Text Fett oder Kursiv anzeigen lassen möchten und zu guter Letzt können Sie unter «Button-Ausrichtung» (links, mittig, rechts) den Stanord des Buttons bestimmen.
Sind Sie mit Ihren Anpassungen zufrieden klicken Sie auf «Speichern», um diese Änderungen zu sichern.
