Design elements are various components that can display content or widgets on pages. They can be edited or formatted to create the content and functionality of the website pages.
Elements
The elements tab contains all the different design elements available to be used on pages in the builder. Design elements are the various components used on pages to display content and create functionality for the user. There are 16 elements available under the elements section. All these elements can be dragged and dropped onto the pages in the builder.
Text Element
The text element will add a text box to the page where you can add written content. Both title text and paragraph text can be added via this element.
The text box has a text editing tool bar available with various text editing options. Text can be bolded, italicized, underlined and aligned. There are also options for letter spacing, color, linking options and formatting options for creating lists.
The font tag will determine what category of text will be displaying in the text box. H1 - H6 tags represent different sizes of title text and the P tag represents standard paragraph text.
To add links to text in the text box, highlight the text you want to link and click the paperclip link icon in the tool bar.
The link window will open up where you can set the type of link you want to add. There are a variety of link types to select from.
The existing page link type allows you to link a page that is hosted on your website. Once you select this option you will be shown a dropdown of pages that are on your website to select from.
The website URL link type is where you can add an external website URL to link out to a different website. You can enter the website’s URL in the website URL section.
The file download link type allows you to link a file for download. Once you select this option you will be give the option to upload a file, once the file is uploaded the link will instantly download the file on the website when a user clicks the link.
There are also various other link type options available for more specific use cases like linking email addresses and phone number among other options.
Line Element
The line element allows for lines to be added to the page. Typically, from a design perspective, these lines are used as page breaks to break up content sections.
If you click the pencil icon in the right corner of the element, you will have options for customizing the line properties such as thickness, width, color and spacing.
Button Element
The button element will add a linkable button to the page. The initial styling of the button will be based off of the global styling settings for buttons on the website but all these options are customizable for each button by clicking the pencil icon in the right corner of the element.
In the editing settings, the button text can be changed to whatever you would like it to say and any link type can be added to the button. There are also design options available in the design tab for changing style, color and spacing of both the button and the text inside the button.
HTML Element
The HTML element allows you to add html code to the page. This allows for widgets and other HTML components to be embedded onto the page. The section will initially show up as a grey empty section until code is added.
Clicking the pencil icon will take you to the HTML content window where you can apply the HTML code you wish to add. Paste the code into this section and you will see the embedded code display it's content in the HTML box.
Form Element
The form element allows you to embed website forms on the page. Once the element is add to the page it will show as a grey blank section until a form is selected in the element settings. Click the pencil icon in the right corner to open the settings.
Once the form settings window opens you will have a dropdown list available with all the forms that are currently in the form wizard on the admin dashboard along with design and spacing options to customize the size, colors and styling of the form components. Select a form from the list to add it to the page.
Once the form is added to the page you will see the form embedded displaying it’s various fields and buttons. An option should now be available in the content settings window to add email addresses to receive notifications of form submissions for this form. Any email addresses added here will receive an email any time this form is submitted by a user to notify that a submission has occurred. Form submissions can then be reviewed from the admin dashboard. If adding multiple emails to this section, use a comma to separate each email.
The redirect to page option is also available in the content settings if you wish to direct the client to a certain page after they have completed their form submission.
Icon Element
The icon element allows you to add an icon from our icon library to the page with the ability to link it as you would a button or image. After clicking the pencil icon in the right corner of the element, the settings window will open up for the icon. The icon library can be browsed by clicking the choose Icon option.
There are hundreds of icon’s available in the library for you to choose from, they can be search for via name or type in the search bar. One and icon is selected, the link type dropdown will let you set a link on the icon for the user to click. Options are also available under the design and spacing tabs to customize the color, size, border and spacing of the icon.
Image Element
The image element allows you to add images on pages. Once the element is added to the page, it will show as a grey empty section until an image is selected in the content settings. Click the pencil icon in the right corner of the element box to open the settings window.
The settings window gives an upload image option for you to add an image, click here to open the image selection. The default tab will show stock images that are in the system already. The custom tab will show any previously uploaded images that you have added to the website. If you want to upload a new custom image, click the upload Images option at the top. Any newly uploaded image will appear at the top of the list in the custom tab, click on an image to add it to the page.
Once an image is added there will be some options available to edit the image. The option to add a link to the image is available via the link type dropdown. Clicking the pencil icon on the image within the settings window will open up the image editing options.
Clicking the edit button will open the image editor where you will be able to crop the image or edit a variety of other things like aspect ratio and flipping or rotating the image.
Other options are available under the design and spacing tabs that allow for customizing the sizing, spacing, border and animation of the image element.
Map Element
The map element allows you to add an embedded map on the page. Initially after adding the element, the section will appear as a blank grey section until you set a location in the settings window. Click the pencil icon in the right corner to open the settings window.
In the settings window, you will have access to a dropdown list to select the location you want to embed from the locations in your system. Once you select the location it will display on the map in the section along with address information.
In order for a location to appear in this drop down, it must have address information toggled to show on the website from the location library. Under the basic information for the serving location in the location library, make sure that the show on website setting is set to yes and that there is some address information toggled to show in the show on footer settings.
The design tab and spacing tab also have a few options available to customize the layout of the map and address information along with options to customize the spacing of the section.
Link Box Element
The link box element will add a section to the page that allows for other elements to be added within it and all link out to the same URL link. The box acts similarly to a row in the sense that different elements can all be added within the section, the main function though is that a link can be set in the settings window of the link box element and all items within the box will have that link applied if a user clicks anywhere within the box.
In the screenshot below for example, a link box element with a flower image is on the page with both text and icon elements added into the box. All these elements are linked to the URL link set in the element settings of the link box.
Flower Link
The flower link element will add a button that directly links to the obituary listing page where options to order flowers and trees are displayed. Opening the element settings via the pencil icon in the right corner of the element will allow you to change the button text and customize the style options of the button and text such as shape, size, border, color and spacing.
Search Element
The search element adds a search bar to the page that allows the user to search for an obituary on the website. Typing the name will populate options that match in a dropdown style. Once the name is clicked the user will be taken to that obituary page.
The default text that appears in the search bar can be customized under the content settings window.
The design tab gives a variety of options for customizing the stylings of the search bar and the name links that drop down as a user searches. Properties like color, size, font, border and spacing can all be customized.
Obituaries Element
The obituaries element adds an obituary slider to the page.
There are a number of options available to customize the functionality of this slider and the design of the slider. Click the pencil icon to open up the settings window.
Under the content tab there are a number of options to change what obituaries will display. Obituary Count will allow you to set the maximum number of obituaries that will be added into the slider. Sort By will allow you to set how the listed obituaries will be sorted, Death Date, Service Date and Created Date are all options available for sorting. There are also options available for displaying birth and death dates, toggling the slider to only show obituaries from specific locations or to add a location filter to the slider for the user to use.
Under the design tab there is a variety of options for customizing the format and overall styling of the slider.
The layout area gives you options for how many rows and columns you want to display on the slider. along with spacing options for the rows and columns.
The slider area gives you options to customize some of the slider design elements such as having dots display to indicate number of pages, having arrows display on the side for users to click to navigate to the next page and options for fading the slider or setting it to be a vertical slider.
The image area allows you to customize how the obituary images appear in the slider. In the image settings you can set how large the images are, if they have border, how they align or if there is a hover effect when the user hovers on the image.
The obituary details area allows you to customize how the obituary information displays in the slider. Options are available to toggle where the information displays around the photo, how the text is aligned, if there should be padding on the text or changing background color.
The location filter area gives you options to customize how the location filter field and the text that displays in the location filter dropdown displays. There are options to customize the size, alignment, border and color of the location filter.
The box area gives options for customizing the box that the obituary slider is contained within. Options are available to make changes to the background color and border. Images and videos can also be set as the background to the slider.
Online Planner Element
The online planner element adds a button to the page that links to the online planner page on the website. Options are available in the settings window to customize the button text along with options to customize the button styling and spacing.
Gallery Element
The gallery element adds a set of gallery style images to the page. The functionality works similarly to the image element but allows for multiple photos to be added and displayed in columns or rows.
The images can be added by clicking the add images button in the gallery settings window. Each image can be cropped and edited in the image editor by clicking the pencil icon on the image. There is also an option to enable links on the images via the image links setting at the top of the window.
Under the design tab there is a number of options available for customizing the layout and design of the gallery. Number of columns can be set to change the layout of the gallery images and spacing can be set between images to create gaps in between.
Under the images area you can customize the alignment, heigh border and hover effects of the images.
Any text that is applied over the images via the label and description options can be customized under the text area. Alignment, padding and color can be changed along with font and letter spacing.
The button area has options available to customize the styling of buttons that are added over the gallery images via. Buttons can be added by going into the edit image area in the settings window and entering button text and a button link.
Slideshow Element
The slideshow element adds a slideshow of images to the page. This elements functionality is very similar to the gallery and image elements but the images will display in a slideshow format either automatically rotating through the images or with the option to add arrows to manually click through the images.
Images can be added by clicking the add media button. Any images that are added can be edited by clicking the edit pencil icon over the images in the setting window. This is where there will be options for adding text and buttons to display overlaid on the images that can be linked.
Under the design tab there are various options for customizing the layout and styling of the slideshow. The layout area gives options to customize the width and height of the media along with options for background overlays and borders.
Under the transition tab there is options to customize how the images transition between each other and an option to enable auto play. Settings like the speed of transition and fade styles can be set here.
The arrows area allows you to customize how the arrows on the sides of the images display. Properties like the style, color, size and border of the arrows can all be configured in here.
The content area allows you to customize how the text and buttons that gets added in the edit image area displays. There is options under show content to set if the content displays below the images or over top. There are also options here to customize the text alignment, color, spacing and animation effects.
The text area gives options for customizing the font stylings of the text that displays on the slideshow, there are options in this section for changing the size, color and spacing of the font.
The button area gives customization options for how the buttons are styled that display with the slideshow images. There are options here for shape, border and color of buttons.
Videos can be added to the slideshow just as images can be. In the video area there is a single option available to set the color of buttons that appear on the video.
Travel Insurance Element
The travel insurance element adds a button to the page that links travel plan options for Inman, our partnered travel insurance provider. The link for this button is preset and the settings window provides options to customize the design of the button properties such as shape, border, color and text customization options.
Sections
The sections tab contains pre-built sections containing multiple elements. These sections can be helpful to quickly add built out content structures to pages.
Each section has multiple different options available. Click the name of the section to view the various options available for that style of section.
Each section shown here can be dragged and dropped into the page you are on. Once the section has been dragged onto the page, the individual elements that make up the section will all be available to edit and customize to your liking.
