Customizing Your Website
Customizing Your Website
Your website is now ready for you to add your content and do some customization. By default, each website you create comes with a home page. Home page is also called the index page. Depending on the template you have chosen for the website ( see: Selecting A Template For Your Website - First Task ), it may also include the following sections or pages: Header and Footer sections, About Us, FAQ, Contact Us. Sample images and text are also common default elements.
Before we begin customizing your site and adding content, it is assumed that you are already familiar with XRipe Website Builder user interface, especially the Constructor, where most tasks of website building and customization will be accomplished.
In fact, all the blocks, elements, widgets located on the Constructor page are tools meant to assist you in building and customizing your website. So let's once again list the tools and widgets with links to their respective pages, where you can find full description of the features and usage examples with screenshots.
Predesigned Elements or Core Widgets |
|
|---|---|
| AGGREGATOR | Template aggregator. Click to open modal dialog page, where you can filter and select separate section(s) from other templates and combine/use it with your current one. To select, click on the section image, the dialog page automatically closes. Decide the position on the page, where to drop the selected element - by moving the crossbar mouse cursor and green horizontal line across the page. Drop the element - by finally clicking the crossbar cursor. |
| TEMPLATES | Used to select and import new template into your project. Click to open a modal dialog page, where you can filter and select from a list of templates and combine/use it with your current one. To select, click on the template image, the dialog page automatically closes. Decide the position on the page, where to drop the selected template - by moving the crossbar mouse cursor and green horizontal line across the page. Drop the new template - by finally clicking the crossbar cursor. |
| MEDIA | Media Manager. Click to upload, insert, delete, crop, resize pictures, images and other media files in the media gallery. |
| PAGES | Click to create additional web page(s). You can also edit/modify web page name and url (link), SEO tags, duplicate or/and delete web page(s). |
| SETTINGS | Click to edit general site settings - favicon and site name. |
| DESIGN | Click to edit site global design - default background color, default text font and color. |
Basic Element Widgets |
|
|---|---|
| Block | Invokes section element for insertion into the Central Workplace. Section or block acts as container and is used to group together related elements - for example, one or more heading elements and additional elements presenting related contents such as column, text, image, etc. In fact, anything. |
| Slider | The |
| Column | XRipe grid system uses a series of containers, rows, and columns to layout and align content. The columns are build on the grid's flexbox architecture. Flexbox means you have options for changing individual columns and modifying groups of columns at the row level or inside a parent container. After you must have dragged-dropped the column element into the workplace. By default, column width is 100% across the page. You can choose to indicate the column width and height by editing it's dimension property. If not specified, column height will automatically adjust to the height of its content. |
| Inner Column | Holds same properties as columns. Unlike columns, which can be inserted into any part of the workspace, inner columns are designed to be inserted into a parent container. |
| Menu | Menu is used for creating context menu as well as lists menu. Menu represents an unordered list of items, each of which represents a text and link (or other command) that the user can activate. In most cases, menus are located at the top or/and the bottom of a web page. |
| Title | Title acts as heading text that can be formatted as may be necessary - consider a title at the head of a page or section of a book. Title (in respect to this user guide) should not be confused with html document's title that is shown in a browser's title bar or a page's tab. |
| Text | Can be used to define the single-line or multi-line text field on a web page. Some text elements may allow text formatting, in which case WYSWYG text editor is invoked. |
| Divider | Can be used to insert a horizontal rule or a thematic break in an HTML page to divide or visually separate document sections. |
| Button | Button is HTML element that represents a clickable button, used to submit forms or navigate to anywhere in a document. Click edit (from the context menu) to change the button attributes. Link - indicates the address (relative or absolute URL) of the page to which user is directed upon clicking the button. Text - visible text to be displayed on the button, e.g. Go, Submit, Buy Now, Order, Login, Register, Contact Us etc. |
| Contact Form | Contact Form widget holds collection of HTML and/or PHP codes, which can be used to send content of a form to your email address. After dropping the widget into your site page, open the context menu, click Edit. In the resulting window, type-in necessary information. Pay special attention to the Content >> FORM FIELDS and SETTINGS |
| Image | Provides the properties and methods used to manipulate image elements. In order words, the widget is used to embed an image in an HTML page - your website page. To insert/upload image into the image placeholder (after dropping the widget into your site page) open the context menu, click Edit. In the resulting window, click the small image placeholder. Wait for the media manager modal dialog page to load. Follow the instructions on the screen. Notes: If you have used MEDIA to upload image(s) into the image gallery earlier, then the image(s) will be displayed. You can select from the collection or upload a new image and then insert. |
| Icon | Icon is a glyph (small image) used in place of short text on a page. For example, arrow icons can be used to indicate a direction, audio & video icons can represent common ways to interact with audio and video, etc. Click Edit to open the icon properties window (Content tab), then click on the icon placeholder. Wait for the icon library modal page to load. Select necessary icon. To control the size, change the font-size and other properties of the icon, select the Style tab and make necessary edits. |
| Icon List | Handling Icon List is similar to the steps needed for Icon, except that you will be able to have the icons next to each vertical UL list item, in place of the normal bullets. |
| Icon Box | The Icon Box element allows you to style and customize with different options some cool icons and use them with (or without) a heading and a tiny bit of content. |
| Image Box | Image Box widget lets you add an image box that combines an image with a headline and text, which is often used in features sections, as an alternative to using the Icon Box widget. |
| Video | Use the Video widget to easily embed videos on your website page. |
| Gallery | The |
| Carousel | Carousel widget allows you to add dynamic galleries to your pages. |
| Map | Fast way to embed Google Maps in your website. Can be useful for contact pages, display your physical address location on the map. |
| Accordion | The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content. With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest. A similar widget is the Toggle widget, but there are two main differences between the Accordion widget and the Toggle widget. |
| Social Buttons | Social Buttons - can be used to add icon links to all your social media profiles. |
| Custom Code | Using custom code widget gives you the flexibility to add code snippets anywhere in your website without editing original template files or using unnecessary plugins. For example, you can insert affiliate tracking codes, google analytics codes, write your own scripts or/and copy-paste HTML codes, CSS snippets. Possibilities are endless. |