Getting started with Design Studio!

This will be a knowledge base for using Design Studio.  Please view below for:

Colour Scheme
Responsive Classes
Custom Components
Images
Icons
Files
Frequently Asked Questions

Colour Scheme

#f6f7f8 - light grey
for backgrounds

#e8ebec - light grey
for backgrounds

#D1D7DA - medium grey
for backgrounds

​#6b3267- purple
for primary btn or backgrounds

#87bcd2 - blue
for secondary btn or backgrounds

​#eba500- yellow
for labels and WWL

​#e05c16- orange
for labels and WWL

​#c01f1c - red
for labels and WWL

 

Adding classes to the code

The website uses a framework called Bootstrap.  

Classes to adjust the size of columns (grid)

  xs
<576px		 sm
≥576px		 md
≥768px		 lg
≥992px		 xl
≥1200px		 xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
   
Classes to show or hide section based on screen size
Screen size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none .d-xxl-block
Hidden only on xxl .d-xxl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block .d-xxl-none
Visible only on xxl .d-none .d-xxl-block

 For example, to show a div only on mobile, add class d-md-none.  To hide a div on mobile, add classes d-none d-md-block.

​ Custom Components

​You can use custom components to do some of the things as follows (be sure to remove the space between the { % and % } tags!):

A quote...

Paul H

​In backend, paste and adjust the following: (wrapper can be none, left or right)
{ % include 'Quote' quote:"A lovely select quote here" author:"Paul H" wrapper:"none" % }

Second btn

​In the backend, paste and adjust the following (align can be left, right, center or full):
{ % include 'Button (Outline)' link:"#" linktext:"Second btn" align:"left" % }

Toggle

​​In the backend, paste and adjust the following:
{ % include 'Toggle' title: "Here is one" isopen: "true" content: "The text to show..." % }

Sliders 

You can create a slider by adding multiple Slides and one Control to the same column or Flex Container.
For example, to create a style 2 (Get Involved style) slider, add a new section and add some Get Involved Slides and one Get Involved Control:

{ % include 'Get Involved Slide' title:"One" img:"/gi-img1" link:"#" % }
{ % include 'Get Involved Slide' title:"Two" img:"/gi-img2" link:"#" % }
{ % include 'Get Involved Slide' title:"Three" img:"/gi-img3" link:"#" % }
{ % include 'Get Involved Slide' title:"Four" img:"/gi-img4" link:"#" % }
{ % include 'Get Involved Control' idname:"anidwithoutspacés" sm:"2" md:"3" lg:"4" arrows:"false" % }

Take an action
Two
THree
Four
Get Involved control for ID anidwithoutspacés (sm:2, md:3, lg:4, arrows:)

Accordions

You can create sophisticated accordions by placing pairs of Accordion Titles and Accordion Contents flex-containers within the same parent column. The flex containers can contain images, text or whatever content you need. 
Note: each Title and Content custom component need to having matching ID's to work!

For example:
<Section>
  <flex-container>
    { % include 'Accordion Title' idname:"ph1" % }<h2>Item 1 title</h2>
  </ flex-container>
  <flex-container>
    { % include 'Accordion Content' idname:"ph1" % }<p>Item 1 content here...</p>
  </flex-container>
</section>

Here is a new accordion item

Accordion item title ID ph1 - needs to match content ID

Hidden text title

Accordion item content ID ph1 - needs to match Title ID

Enter text here, about the contents.

owt-1000x650-1

Here is a 2nd accordion item

Accordion item title ID ph2 - needs to match content ID

Hidden text title number 2

Accordion item content ID ph2 - needs to match Title ID

Enter text here, about the contents.

owt-1000x650-1
Accordion item content ID ph2 - needs to match Title ID
Accordion item title ID ph3 - needs to match content ID
Bread-on-a-pan

Enter text here for the third item, which is controlled by an image!

Accordion item content ID ph3 - needs to match Title ID

 How to align quotes and Call To Action boxes

In Design Studio, quotes and CTAs need to be placed inside a Flex Container in order to align properly.

  1. Add a Flex Container where you want the Quote or CTA.
  2. Add a Text component, and add the paragraph that will sit beside the Quote or CTA
  3. Add a Custom Component > Quote or CallToAction, and edit the contents

Halloj, jag gillar skoj. Och ibland går jag i land för att ta i hand med en and.

A name here

{ % include 'Quote' content:"Halloj, jag gillar skoj. Och ibland går jag i land för att ta i hand med en and." author:"A name here" wrapper:"left" % } BÖRJAN IGEN Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här.

{ % include 'CallToAction Box' stat:"För 150 kr" desc:"kan en förföljd kristen få en bibel." disclaimer:"Some small text here" link:"#" linktext:"Ge en gåva nu" % } BÖRJAN IGEN Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här. Det här är en exempeltext. Vi skriver lite olika saker så att vi kan få lite brödtext här.

För 150 kr
kan en förföljd kristen få en bibel.
Ge en gåva nu

Det här är en exempeltext (h1).

Det här är en exempeltext (h2).

Det här är en exempeltext. (h3)

Det här är en exempeltext. (h4)

​Images

​​​​See tutorial video here

  1. Go to your Power Pages site (make sure the correct environment is selected (top right)
  2. If you don't have a hidden page for Image Uploads, I recommend you create one:  Click + Page (Do not add to navigation) Select either Page layout or Custom layout > Standard Page.
  3. In the content, click the + button > Image
  4. Click the <gear icon> Advanced Options to choose where uploads are saved.
  5. Click Upload Image and proceed with upload. Click OK to add the image to the page.
  6. Your image is now uploaded and can be used on the site with the path /<page uri>/<image uri>    eg /img/gibraltar.jpg 

Image Sizes

  Location   Width  Height   Ratio 
 Banner or campaign banner  1400  600  7:3
 Standard page short banner  1400  350  4:1
 Featured action  760  520  19:13
 Get Involved widget  452  640  113:160
 Meet courageous christians widget  360  640  9:16
 News article  1400  940  3:2
 News article (mobile)  768  500
 Content page pull right / left  420  280  3:2

Icons

The website uses the FontAwesome icon library.  This allows you to add icons into the page content.
1. Find the icon you wish to add (in the free section)
2. Click on the icon, and click on the HTML code to copy (eg <i class="fa-solid fa-file"></i> )
3. Back in Design Studio, click the fx button on the element where you want to add the icon.
4. Paste the icon code into the place you want the icon, and click 'Save'. 

Adding Files

To add an image or file using the backend: (see tutorial video here)
  1. Open the Portal Admin Simple app in your dynamics environment
  2. Go to Web Files
  3. Click + New
  4. Fill in required fields:
    1. Name = any logical name for finding the WebFile
    2. Website = your website name (Usually OD Website)
    3. Partial URL = the filename of the image eg wwl2024.jpg or report.pdf
    4. Parent Web Page = the page the image will be stored under, eg 'img'
    5. Publishing state = Published
  5. Click Save
  6. Add a note > Upload the file, then click Done and Save again.
  7. Your image is now available with the path /<page uri>/<image uri>    eg /img/wwl2024-map.jpg 

How do I... (FAQs)

Yes! The template is built on Bootstrap version 4.3.1 Most components available there can be used in the site.

  1. Open the Portal Admin Simple app in your dynamics environment
  2. Go to Web Link Sets
  3. Open 'Default', and go to 'Links'
  4. Click + New Web Link, and fill in details:
    Name = Menu link name
    Publishing state = Published
    Parent Web Link = Empty if main menu item, or put the parent link
    Page = Web Page if link is a page
    External URL = if link is to a blog, file, or anything not a web page. Needs to include the full path.
    Display Order = order of items, adjust to move the item up or down.
  5. If you want the page to automatically list any child pages, tick the 'Display page child links' checkbox.
  6. Click 'Save' to save the menu item.
  7. Click 'Save' again to save the whole menu and exit.

  1. On the frontend, make sure you are logged in.  Navigate to the news page.
  2. On the hovering popup (top right) click New > Blog post
  3. Enter a title for your post and a Partial URL.  Click 'Save'.
  4. You will be taken to the new page.  Hover over the little box in the middle of the content area and click Edit (Page Copy) button.
  5. Add the content of the post.
  6. Use the instructions on adding images above to upload the featured image (1400 x 940) for the article.  Once uploaded, copy the image URL - we will need this on the backend.
  7. On the backend navigate to WWL / News -> Stories -> Posts -> <your new post>
  8. Fill in the Topic (Country) field with a country or region
  9. Fill in the Post Tag Type field (News, Story, etc)
  10. At the bottom of the form, paste the featured image URL in the OG Image field.  (You can also fill in the OG Mobile Image field with an image prepared for mobile phones if you want)
  11. Click 'Save'.
  12. On the frontend, you might need to clear the cache (see next question) for your backend changes to show up straight away.

  1. On the backend, go to Web Pages and open or create the page you want to add the resources to.
  2. Make sure the Page template is set to 'Magazines'. Switch to the Child Files tab (the page will display all associated web files)
  3. Click the '+ New Web File' button (on the right)
  4. Fill in the fields: Name, Website (OD Website), Partial URL (eg 'my-pretty-url), Publishing State (Published), Display Date (the publish date, which is used for ordering - latest first), Summary (the description of the resource), Title (an optional sub heading), and click 'Save'
  5. Switch to the Notes tab
  6. a) Click 'Enter a note', and write 'Cover', then click the paperclip icon to select your cover image (jpg or png), then click 'Add note' button
  7. b) Click 'Enter a note', and write 'PDF', then click the paperclip icon to select your PDF resource, then click 'Add note' button. It's important the files are uploaded in this order.
  8. Click 'Save and Close'

Vår webbplats använder cookies

På open-doors.se använder vi cookies som lagras i din webbläsare. Vissa cookies är helt nödvändiga för att webbplatsen ska fungera på ett bra sätt för dig. Andra används för analys så vi kan förbättra vår webbplats. Läs mer här.

Tillåt alla
 
Tillåt urval