Blog Layout
Outer and Inner Spacing
Outer spacing and inner spacing are the space around a widget. Outer spacing is also know as margin, and is the space outside of the element's borders. Inner spacing is also known as padding, and is the space inside these borders. When you adjust the outer spacing and inner spacing of a widget, you change its placement and appearance. This can make your site look more customized and professional.
To adjust the outer and inner spacing around a widget:
- Right-click on any widget, element, column, or row, and then click Edit Design.
- Click the Spacing tab.
Note: If you see odd spaces that you cannot remove, be sure to check all parts of the widget, including the column in which it is located.
Outer Spacing
To change the outer spacing (margin), click and edit the numbers in the outer box. You can also click on one of these numbers and use the slider to adjust the size.
Inner Spacing
To change the inner spacing (padding), click and edit the numbers in the inner box. You can also click on one of these numbers and use the slider to adjust the size.
Watch the video on how to adjust spacing here.
Did this help solve your problem? If not, contact us for further support, or explore more of the articles below.
Did you know that 80% of people who visit a church today will visit online before ever coming in person?
And one key strategy to change yo ur presence overnight
To extend the reach of your Contact Form, integrate it with Google Sheets, Mailchimp, Constant Contact, or a third-party application using Webhooks. To add integrations, right-click the Contact Form, click Edit Content, and click the Integrations tab. Google Sheets Integration Use the Google Sheets integration to instantly add contact form submission data to a spreadsheet in Google Sheets. All contact fields in the form will be populated into the spreadsheet, including a time stamp of when the form was submitted. Click Google Sheets, and click Sign in with Google. Click Allow to grant permissions to connect to your Google account. If your computer is connected to multiple Google accounts, select the account you would like to connect to this form. Select if you want to add data to an existing spreadsheet or to a new one. Select the spreadsheet you would like to submit the form data to. You can select the spreadsheet from a list, or use the search bar to find a specific sheet. Note: If you have multiple forms on the site you can connect each one to a different spreadsheet, including spreadsheets in different Google accounts. You can connect a couple of forms to the same spreadsheet. In this case, make sure that the fields and order in the form are identical to fit the information submitted. Submitting form data to a Google spreadsheet does not prevent you from downloading the data as a .csv file, or from receiving form submission emails. MailChimp Integration MailChimp is a too l for the distribution of email campaigns, newsletters, and so on. By using the new form integration, site owners can manage contact lists of potential clients (site visitors) by collecting email addresses, which are submitted to the form and send them automatically to MailChimp. You must have a MailChimp account. Once you have an account, create a mailing list in your MailChimp account where the contact details will be collected. Click MailChimp, and then click Connect to MailChimp. Sign in with your MailChimp credentials. Select your MailChimp contact list from the drop-down menu. Configure your form fields. In addition to the email address, you can automatically send first name and last name fields to MailChimp. You must set up the email, first name, last name fields within the form. Note: The only fields you can connect to MailChimp are First Name, Last Name, and Email. The integration will only work if you configure the fields with the exact same name on the Contact Form. A field may be left empty if you select to Leave this field empty in the drop-down menu. Tip : If you have already configured your MailChimp integration and want to test your form with a test email, MailChimp may block test emails without notice (for example, test@test.com). To test your MailChimp integration, we recommend using a real email. Constant Contact Integration This is a similar integration to MailChimp, but allows sit e owners to create mailing lists in their Constant Contact account. You must have a Constant Contact account. Once you have an account, create a mailing list in your Constant Contact account where the contact details will be collected. Click Constant Contact, and then click Connect to Constant Contact. Sign in with your Constant Contact credentials. Select your Constant Contact list from the drop-down menu. Configure your form fields. In addition to the email address, you can automatically send first name, last name, and phone number to Constant Contact. The user is required to set up the email, first na me, last name fields within the contact form. Email address and text message are added by default. Webhooks Integrations Numerous online and cloud services offer integrations through a path called Webhooks. Webhooks send notifications to a specific web address called the endpoint URL. You can connect the contact form to send an event when the contact form is submitted. To connect the contact form to another service using Webhooks, you need to create a custom endpoint URL with your desired service and paste it into the Webhooks integration field in the contact form. Once you add a Webhook URL, and the form is submitted, a POST request is sent to the endpoint with the data in the body in JSON format. The following is an example of the JSON data: {"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":" test@example.com ","Phone":"(555).555.1212","Message":"Webhook Form Submission!"} Note : Submission Date and Form Title will always be provisioned. The other fields (field_name : value) are based on the fields configured in the form. All field information is set as a string and contained in quotation marks. For example, 7 is sent as "7" . Create an Endpoint URL Endpoints are set up on third-party services (for example, Zapier or Slack), or another server that you control. These endpoints are specifically set up to receive notifications from the Webhook. Integration Ideas Zapier. Connect the contact form data to Zapier for unlimited possibilities. Connect with virtually any modern cloud service, including CRMs like Salesforce, Sugar CRM, Zoho and more. Slack. A robust messaging app that you can connect to receive notifications as soon as form data is submitted. Custom Integration . Create your own custom Webhooks to integrate with the contact form. For example, save submissions into a database or connect to custom apps or third-party services. Example Webhooks/Endpoint URL Setup on Slack In the Slack app, open the main account drop-down, then click Apps & Integrations. The slack website opens. In the upper-right corner, click Build. Click Make a Custom Integration. Select Incoming Webhooks. Select an existing channel, or create a new cha nnel where your messages will post to. Copy your Webhooks URL. Adjust the settings and options to your liking, then click Save Settings. Open the Content Form editor and paste your Webhooks URL into Webhooks field. Click Done. Preview your site and submit the contact form to test the integration. You will receive a message on Slack each time your contact form is submitted. File Attachments Files can be attached to submissions by creating a file attachment field in the contact form. Links to uploaded files are available in the form submissions’ download file, as well as in any of the form integrations such as Webhooks and Google Sheets. Note : There are no restrictions on the type of file that may be uploaded. Site visitors are not be able to upload files larger than 10MB. Click a contact form to open the Content editor. On the Form Items tab, click Add field, and select File attachment from the Field type drop-down. To change the name of the field, type Placeholder text. A link to upload files is added to your form. Zapier Zapier allows you to connect to the different services on Zapier to create automated events following a new form respo nse. For more information, see this article on Zapier Integrations .
To manage and delete responses received from a contact form: From the Dashboard, click the three dots () icon next to the site where the form appears, click Site Overview, then select Form Responses. Alternatively, in the side panel of the editor, click Content, click Site Content, and then click Manage Form Responses. Note The option to export Contact Form responses is only available when you access the responses from the Dashboard. The Form Responses page opens and allows you to remove any response to any form on the site. You can search for relevant responses in the Search responses search box. Ensure you search for the exact name, phrase, or characters. Click on the relevant form tab to open a table which includes: The date of the form response submission. The input from each of the form fields. The option to delete the form response. To export form responses in CSV format, click Export to CSV in the top-right corner of the Form Responses section. Note : This option will not be available if there were no form responses on the live site.
Note: If the Submission recipient is empty, the primary email in the content library will be used. If no such email exists, the account owner will be used as the default submission recipient. All responses go to the form responses page. If you are not able to receive any form submissions that are being sent using the Contact Form widget, most likely it is because our mail is being filtered as spam on your email server. If you do not receive emails from CWB, check your spam folder. If you still do not see the email, make sure to white list the IP addresses 167.89.22.215 and 149.72.216.48 in your email provider's settings. Note : This checklist only applies to contact forms built using the Contact Form widget. Checklist Check the form responses to ensure the contact form is working. You can click the contact form >>> click form responses to download it. Check to see if the email is valid. If you enter multiple emails, remember to use a comma between emails (no spaces) to separate them. Check your spam folder on your site. Check your email filter and blacklist settings to ensure that they are not being blocked. Add no-reply@multiscreensite.com to your email white list. Create a new page and insert your contact form there to see if it works. Turn off any custom scripts in your site in the site settings. Note: If your contact form still does not work after running through the troubleshooting checklist, contact your email provider to look into why our contact form email submissions are not being received. If it is working on another page on your mobile site but not the page it is meant to work on, that usually means there is a custom script interfering with your contact form working. Either reset the page or check your page for any custom scripts that might be causing this issue.
Connected Data allows you to connect site widgets to data that is maintained in external sources and/or inside the site’s Content Library. This enables you to have one source of truth to build websites more quickly, keep websites up-to-date and accurate, ensure site-wide consistency of important information, and more. When sites widgets are connected through Connected Data, you no longer need to manually change the data in each of the widgets as they are controlled through the Content Library. Collect and Edit Data In order to connect widgets through Connected Data, the content must be stored in the Content Library. There are several ways of adding data to the Content Library: Manually. In the left panel, click Content to go to the Content Library and add content: business information (addresses, phone numbers, social links, and so on), text, images, and more. Collect from Client Form. All content your customer includes in the content collection form is added automatically to the Content Library. API. Use the Content Library API to push content to the Content Library and connect it to the different site widgets. This is especially useful if you keep business data in an external source (for example, Salesforce, your own contact form, and so on). If you are populating the Content Library through the API, remember that the site can be republished directly through the API as well. Update from external sources requires API access, available for Agency plan. For more on API, see this article from our developer. Connected Data Structure For data to be connected through Connected Data, it must have a label and content. Label. The label is the unique indication of the content in the library that binds it to the widget on the site. Make sure the labels you choose are meaningful and unique. This helps you easily pick which content element should connect to which widget and help prevent changing the label in the future. Changing the Content Library label while a widget is connected will disconnect the widget. Content. The information (for example, text, image, phone) that is in the Content Library and once connected to a widget displays on the site. You can populate the Content Library with two types of content: text and images. Each text section in the Business info can contain up to 4000 characters. Some Content Library fields have predefined labels. For example, the labels for Logo or Social icons fields are predefined. Other fields, such as Collections or non-default business text fields, have custom labels you need to define yourself. Connect Data The data you can connect to the widgets on your site is summarized in the following gallery:
Floating buttons allow you to keep a button visible at all times, even when a visitor scrolls down the page. Use Floating buttons to keep important calls to action fixed, visible, and clickable on all site pages. Ideal uses cases include: Contact Us Subscribe Get a Quote To make a button float: Add a button to your site. Right-click the button, and then click Edit Design. On the Style tab, scroll down, and click the Floating toggle. If the Floating attribute is disabled, the button automatically appears in the first row at the top of the page. Select a position for the button. Switch the device view to change the position on different devices. To display the floating button on the current page only, enable the Show on this page only toggle. Mobile Considerations On mobile, we suggest placing the Floating button at the bottom corner of the screen so visitors can easily click it with one hand. You can display an icon rather than text on mobile by choosing the layout that features an icon on mobile. If a floating button is not displaying on mobile, you may be using an old mobile layout. To update the layout, go to the Design Editor, and click Site Layout. Watch the video on how make a floating button here.
Home screen icons, share images, favicons, and startup images allow you to customize, brand, and polish your user's experience on the site, as well as make it easier for a visitor to pick your site out from a bunch of tabs or links on their home screen. If you are confused about what icons, share images, favicons, or start-up images are, please see below. Note : Be sure to republish your site after adding or changing any of the site icons. You may need to refresh the page or clear the cache in order to see the icon changes. To edit your site icons: In the left panel, click Settings, and then click Site Icons. Click +Image next to the i con you want to edit. Favicon Your favicon appears next to your page title in the tab of your browser. It allows users to identify and navigate to your site easily, even if they have multiple tabs open. Note: Allowed resolution sizes for favicons are (px): 24 x 24, 36 x 36, 48 x 48. It is recommended you use .ico file type for favicons. Social Networks Image (Open Graph) This is the image designated to display on Facebook, Twitter, and other social networks when sharing your site. Home Screen Icon (Mobile & Tablet) Home screen icons are a mobile phone version of bookmarks, and appear on iPhone and iPad devices when your site is bookmarked on the home screen. Users are able to save a home screen icon on their phone's home screen as if the site were an app. Clicking this icon on mobile devices brings users to your site. This image should be a square and at least 57 x 57 pixels in size.
Use the blog editor to set up a new blog and add posts. Two editing modes work together seamlessly so you can design the perfect blog for your business and update it easily with new posts that look great, have the content you want, and are optimized for SEO. The two editing modes are Layout mode and Post mode. Layout Mode Layout mode is where you set the structure for all of your blog posts, both current and future. In this mode, you set the layout for elements that appear in every post, such as blog title, author, main image, and so on. These elements are connected to the content of individual posts, so all posts have a consistent structure. This is important for SEO and makes your blog easier for visitors to read. As for the cont ent of each post, the space designated for this in Layout mode is the content placeholder. While you cannot edit the content here, you can add elements around it. For example, you can add columns, rows and sections above, below and adjacent to the content placeholder. Any changes you make in Layout mode are updated in all posts. For example, if you add a section under the content placeholder in Layout mode, this section appears, exactly as it appears in Layout mode, in every blog post. Note: All of the changes you make in Layout mode affect every blog post. To use Layout mode, in the left panel, click Blog, and then click Edit Layout. For changes in Layout Mode to be visible online, you must republish the site. Post Mode Post mode is where you go to write individual blog posts. You have complete freedom over the content of each post (contained within the content placeholder section that is visi ble in Layout mode), and can add any widgets that you want. Editing a post is just like editing a page in the editor. When you are in Post mode, add any elements that you want to a specific post. For example, if you are working on a post that has multiple images, you can add several Image widgets. If a specific post requires a map, add a Map widget here. Note: All of the changes you make to an individual post in Post mode affect only that post. To use Post mode for a specific blog post, in the left panel, click Blog, and then click Manage Posts. Click a blog in the list, or click the Edit () icon to open the blog in Post mode. For changes in Post Mode to be visible online, you must republish the post. Connected Elements Connecting elements are what give your blog power and ease of use. These elements ensure that every blog automatically contains important details including title, author and image, and that these details appear consistently in every post. You’ll be asked to enter the main post details as soon as you create a new post. You can change this information later, but adding it from the start keeps your posts organized. By default, post title, author and background image are connected. You can remove these connections or change them in Layout Mode, but we recommend keeping them to ensure your posts have all the information they need for SEO and to be found easily by users. If you disconnect an element, you can reconnect it or connect it to a new element. Changing Connected Elements There are two ways to change connected elements in your blog: By changing the content in Post mode or by changing the connection in Layout mode. Changing Connections in Post Mode Change the content of connected elements in o ne of the following ways: Via the Settings Menu: Click to open the post details and then edit. Click the connected element (for example, post author) and edit the text in the popup that opens. Changing Connections in Layout Mode You can replace connected elements, or remove them altogether, in Layout Mode. To replace the connected element, click on the blue Connected Data icon to open the Connect Data popup. From here, choose the connected element you want to use for this connection and then click Done. To remove the connection altogether, click none. This will remove this connection for all posts in the blog, and the element will no longer appear. Manage Posts Manage Posts allows you to do the following: Create new posts Access post settings via the gear tool Search posts by title and author Sort posts by status – draft or published Preview, duplicate or delete posts Edit posts by selecting the editing tool, clicking on the post name or clicking on the post thumbnail Publish or republish posts There is infinite scrolling and a search function here, so posts are easy to find. Post Settings Access the Post Settings for any post via the gear tool that appears beside the post name in Manage Posts. From here, you can scroll between posts via the arrows at the top of the page. Post Settings is divided into three sections: Post Status, Post Details and Post Metadata. . Webhooks Integration Using the Webhooks integration, a notification can be sent when a blog post is published. A publish can also be triggered inside the Duda editor. Blog Settings When you create a new blog, a pop up appears that prompts you to name the blog and set a thumbnail, title and description for it. All of these details can be changed later in Blog Settings. This information is also used in RSS feeds. Permissions Permissions for the blo g work the same as on other pages. Full editing: Full editing allows access to both Layout Mode and Post Mode. Blog only: No access to Layout Mode, access to Post Mode. User can edit connections to post settings No access to other menus within the site editor Limited editing: No access to Layout mode, access to Post Mode. User can edit connections to post settings Site Comments: No access to Layout Mode, access to Post Mode Once users are added to a site, their names display in the author list . Add Blog Widgets The following blog widgets are available: All Posts, Recent Posts and Search Posts. These widgets make your blog accessible from any location on your site. Any blog widget can be added to any post on your site. For example, you can add the All Posts widget for your home page and to your blog. Blog Backup Blog content is backed up when your site is backed up. If you restore a backup, the blog will be the one in the restored version of the site. Note that you will not see the restored version until the restored site is published. Until then, the run time and editor will look different, as with any site backup. A post on a non-published restored version of a blog is not live until the restored site is published (unlike with regular posts, which do not require the site to be published again for the post to go live). As always, a new backup version is automatically created when restoring a backup version. Considerations Draft or unpublished posts are not visible in the Duda editor. Draft or unpublished posts are not visible in the All Posts widget.
A Dynamic Page is connected to a content collection and used to generate multiple pages with unique content but the same design. You can either create a new Dynamic Page, convert an existing page to a Dynamic Page, or use a predefined Dynamic Page that is already included in the platform. Users can add a dynamic page that is automatically connected to an Internal Collection with default content through Pages and Popups. If you select the default Internal Collection (the same name as the page), everything is connected and you just have to edit the content. If you change the field names, it will disconnect them from the widgets, and must be reconnected. If you select another collection, you must connect your widgets to the collection fields. Notes You must have a content collection before you can create or convert a Dynamic Page. Multilingual sites, and Site Comments are not supported with Dynamic Pages. You cannot select a Dynamic Page or Page Item from the link picker or the Navigation widget. Create New Dynamic Pages In the left panel, click Pages, and then click + New Page. Select Dynamic Page. If you do not have a collection, you will be prompted to create one. Type a Page Name. Select the collection you want to connect to from the drop down. Click Add Page. Convert an Existing Page to a Dynamic Page In the left panel, click Pages, click the Page Settings () icon next to the page you want to convert, and click Convert to Dynamic Page. Select the collection from the drop down. Click Done. The next step is to connect your widgets (see below.) Note: Dynamic Pages appear on in the Pages Panel with a collection icon to indicate it is a Dynamic Page. To see the name of the collection the page is connected to, hover over the icon.Dynamic Pages do NOT appear in the site navigation, and thus are hidden by default. Dynamic Page Permissions Dynamic Pages do not have special permissions. The data is handled externally (except in the case of internal collections), so if a client has access to the data in the collection they will be able to change it. Also, the data is not backed up in anyway. Clients with limited editing permissions will not be able to change anything that is connected in the Dynamic Page—they are only able to view it. Dynamic Page Navigation Once a Dynamic Page is created or an existing page is converted, by default it will not appear in the navigation and the URL will not be indexed. This is because it does not have any content; it only functions as a layout. This also means the Dynamic Page and the page items will not be available in the link picker. To add the dynamic page to the navigation: In the side panel, click Pages, and click the settings icon next to the dynamic page you want to add to the navigation. For more information, see Pages and Popups . Click Hide/Show in Navigation, and then selectShow on all. In the Add to Navigation popup: Select a parent navigation page from the Add page items as subpages ofdropdown. Select a Field to display in navigation from the dropdown. Click Save Details. Note: Each parent navigation page may only contain information from one dynamic page. That is, multiple dynamic pages may not be linked to a single parent navigation page. Additionally, you may have up to 150 page items. However, it is not recommended you reach this limit. If a navigation item contains a dynamic page and a regular page, the dynamic page items will always be displayed last, regardless of the order of the actions. Note: Dynamic pages are only supported in the site pages navigation and not in custom navigation. Dynamic Page Settings In the Dynamic Page Settings you can change the collection and URL of the page, turn on or off page indexing, add SEO data by connecting the title and description fields to the collection, and add custom Header HTML. Note : The Video widget is only available in Dynamic Pages. Multi-location and Social widgets are only available in Connected Data. Connect Your Widgets To connect a widget: Right-click on the widget you want to connect, and select Connect to Data. Select the field from your collection using the drop down (only relevant fields are shown). Select Done. The Connected Data rings icon appears on the widget indicating that it is connected. Warning : If you convert a Dynamic Page to a regular page, all connected widgets will disconnect, requiring you to reconnect them if you convert it back into a Dynamic Page. Change Collections In Dynamic Page Settings you can change the collection. When you do this, page widgets will stay connected to field names/labels that exist in both collections. For example, if you have a collection with fields named name, address and phoneand you change to a collection with fields named address and phone, the widgets connected to address and phone will remain connected and display the data from the new collection, while the widget connected to name will be disconnected because it does not exist in the new collection. Connect Custom Widgets Custom widgets that support Connected Data can also be connected. Make sure Enable binding to Connected Data is toggled on for any custom widget you want to connect for Dynamic Pages. The final step is to add a List, Gallery or Image Slider widget to your site so users can navigate to the Dynamic Pages. Create a list of links to navigate to the different pages. This is done by adding a List widgetand connecting it to your Dynamic Page. Note : You can also connect a table widget to the same collection that the Dynamic Page is connected to in order to create a table where each row links to different pages. Connect List Widget to Dynamic Page To connect a List widget to your Dynamic Page: Add the List widget to the pag e of your site on which you want it to exist. For more information, see Add Widgets . Right-click on the List widget to open the settings menu, and click Connect to Data. Select the collection from the Connect List to menu. Map the fields in the collection to the elem ents in the List widget you want to display. Under Connect Link to select the dynamic page. This is what creates the link between the List widget and your Dynamic Pages. Click Done. Filter & Sort When connecting widgets to a collection, you can filter and sort the collection to display only what you want. This feature allows you to control the number of rows the widget displays, filter according to specific text fields, and sort the list in ascending or descending order. Note : You can filter and sort the collection in every widget that can be connected to a collection. To add filters and sort: Add the widget to the page of your site on which you want it to exist. Right-click on the widget to open the settings menu, and click Connect to Data. Select the collection from the Connect List to menu. Under Filter & Sort, you have the following options: Items to Display. Select the number of items you want to display (for example, All, or 2). Filters. Click Add Filter, and select the fields and values you want to filter by. Note : Filtering works according to exact values, and you may filter according to multiple values per field. Sort. Click Add Sort, and select how you would like to sort the collection. Note: For numbers to be sorted correctly, the field must be numeric. Tip : If you are having difficulty filtering and sorting correctly, check if the field is rich text. It is possible there is formatting on the text, even if you cannot see it. It is recommended you convert the field to plain text. Dynamic Filters You can use Dynamic filters to filter widgets that are connected to collections in dynamic pages. This allows you to display only the content that is relevant to a page item. Dynamic filters are available for every widget that connects to a collection when added to dynamic pages, including: Gallery, List, Accordion, Slider, and Custom widgets and are accessible from the Connect Data popup. To use Dynamic filters: In the side panel, click Content, then click Collections. Click +Create Collection and create 2 collections: Data collection. Contains your data with a category name field. In step 9 this collection is referenced as Collection A. Categories collection. Contains all the categories and their details (category name, image, etc). In step 9 this collection is referenced as Collection B. In the side panel, click Pages, then click +New Page. Create a Dynamic Page from each collection you created in step 2. Navigate to a regular page of your choice and in the side panel, click Widgets, then drag and drop the Gallery widget onto the page. Right-click the Gallery widget to open the settings menu, and click Connect to Data. Connect it to the categories collection you created in step 2. Map the link field to its Dynamic Page. Navigate to the categories Dynamic Page and in the side panel, click Widgets, then drag and drop the Gallery widget onto the page. Right-click the Gallery widget to open the settings menu, and click Connect to Data. Connect it to the data collection you created in step 2. Before closing the Connected Data popup, open the Filter & Sort tab and in the Dynamic Filter section click +Add Filter. Map between the category name field in the data collection (Collection A) and the category name field in the categories collection (Collection B).